웹기초 - JavaScript 3일차
학습 내용
Loop (반복문)
a 태그들의 속성을 반복문 사용해서 변경하기
// 반복문을 사용하지 않고 속성 변경
document.querySelector('#a1').style.color='black';
document.querySelector('#a2').style.color='black';
document.querySelector('#a3').style.color='black';
document.querySelector('#a4').style.color='black';
document.querySelector('#a5').style.color='black';
// 반복문을 사용하지 않고 속성 변경
document.querySelector('#a1').style.color='black';
document.querySelector('#a2').style.color='black';
document.querySelector('#a3').style.color='black';
document.querySelector('#a4').style.color='black';
document.querySelector('#a5').style.color='black';
위와 같은 단순 반복적인 작업을
아래와 같이 반복문(for)으로 바꾸면 깔끔해진다
// 배열로 가져와서
let as = document.querySelectorAll('a');
// 반복문으로 속성 변경
for(let i=0; i<as.length; i=i+1)
{
as[i].style.color='white';
}
반복문 사용해서 js로 버튼 클릭하기
(예제) 많은 버튼이 있는 페이지
- 버튼 클릭
input 태그 중 첫번째 element을 click한다
document.querySelector('input').click();
- 모든 버튼 클릭
let btns = document.querySelectorAll('input');
for(let i=0; i<btns.length; i=i+1) { btns[i].click(); }
- 100 이상인 버튼만 클릭
let btns = document.querySelectorAll('input');
for(let i=0; i<btns.length; i=i+1) {
if(btns[i].value>100)
btns[i].click();
}
- 100 이상 200 이하인 버튼만 클릭
let btns = document.querySelectorAll('input');
for(let i=0; i<btns.length; i=i+1) {
if(btns[i].value>100)
if(btns[i].value<200)
btns[i].click();
}
- 중첩 조건문 한번에 쓰기
let btns = document.querySelectorAll('input');
for(let i=0; i<btns.length; i=i+1) {
if(btns[i].value>100 && btns[i].value<200)
btns[i].click();
}
함수
서로 연관된 코드를 Grouping해서 정리정돈한 상자다
함수는 작은 프로그램, 모든 프로그램은 큰 함수이다함수를 쓰면 ?
- 코드가 간결해진다
- 가독성이 좋아진다
- 유지보수가 편해진다
- 재사용성을 높일 수 있다
- 기본 함수
function 부가세계산(){
let 가격 = 1000;
let 부가세율 = 0.1;
let 부가세 = 가격*부가세율;
console.log(부가세);
}
부가세계산();
- 입력값을 받는 함수
function 부가세계산(가격, 부가세율){ // 매개변수, parameter
let 부가세 = 가격*부가세율;
console.log(부가세);
}
부가세계산(2000, 0.5); // 인자, argument, 입력값
- 리턴값이 있는 함수
function 부가세계산(가격, 부가세율){ // 매개변수, parameter
let 부가세 = 가격*부가세율;
// console.log(부가세); // 함수는 하나의 기능만 해야하므로 없는게 좋다
return 부가세;
}
console.log(부가세계산(2000, 0.1));
응용
버튼 속성에 반복문과 함수 사용하기
<!DOCTYPE html>
<html>
<head>
<title>WEB</title>
<meta charset="utf-8">
</head>
<body>
<script>
function dark(){
document.querySelector('body').style.backgroundColor = "black";
document.querySelector('body').style.color = "white";
let as = document.querySelectorAll('a');
for(let i=0; i<as.length; i=i+1)
{
as[i].style.color = 'white';
}
}
function light(){
document.querySelector('body').style.backgroundColor = "white";
document.querySelector('body').style.color = "black";
let as = document.querySelectorAll('a');
for(let i=0; i<as.length; i=i+1)
{
as[i].style.color = 'black';
}
}
</script>
<input type="button" value="night" onclick="
let btn = this;
if(btn.value === 'night')
{
dark();
btn.value = 'day';
}
else
{
light();
btn.value = 'night';
}
">
<h1><a href="index.html">web</a></h1>
Welcome
<ol>
<li><a href="1.html">student</a></li>
<li><a href="2.html">teacher</a></li>
<li><a href="3.html">other</a></li>
</ol>
</body>
</html>
- 버튼 클릭하면 배경, 글자, a태그들의 색상을 변경한다.
- 버튼을 누르면 버튼의 value가 night인지 확인하고 맞으면 dark 함수를, 아니면 light 함수를 사용한다.
- querySelectorAll를 사용해서 a태그를 전부 배열로 가져온 후 a태그 각각의 색상을 반복문을 써서 변경한다.
학습 후기
a 태그의 속성을 반복문으로 적용하는 부분에서 적용이 안 되는 문제가 있었는데
다시 확인해보니 for문의 비교연산에서 i>as.length를 i<as.length로 잘못 써서 생긴 문제였다.
가끔 이런 기본적인 비교연산이 헷갈린다. 조금 더 생각해보고 작성할 것...!^^
어제와 마찬가지로 수업 중간중간 현재 주제를 키워드로 작성하니까 수업에 집중이 잘 된다. 전체적인 강의 흐름을 알 수 있어서 이해도가 올라가고 복습할 때나 공부한 것을 어딘가 기록해야할 때도 기본틀이 있어 작성하기가 수월하다.
하지만 기록하는데 신경쓰다 오히려 강의 흐름을 놓칠 수 있으니 간결하게 적기!
무엇보다 강의 내용을 듣고 이해하는 게 우선이다.
Author And Source
이 문제에 관하여(웹기초 - JavaScript 3일차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hanss1122/웹기초-JavaScript-3일차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)