웹기초 - JavaScript 3일차

hanss·2022년 3월 25일

학습 내용

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';

위와 같은 단순 반복적인 작업을
아래와 같이 반복문(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로 잘못 써서 생긴 문제였다.
가끔 이런 기본적인 비교연산이 헷갈린다. 조금 더 생각해보고 작성할 것...!^^

어제와 마찬가지로 수업 중간중간 현재 주제를 키워드로 작성하니까 수업에 집중이 잘 된다. 전체적인 강의 흐름을 알 수 있어서 이해도가 올라가고 복습할 때나 공부한 것을 어딘가 기록해야할 때도 기본틀이 있어 작성하기가 수월하다.
하지만 기록하는데 신경쓰다 오히려 강의 흐름을 놓칠 수 있으니 간결하게 적기!
무엇보다 강의 내용을 듣고 이해하는 게 우선이다.