[3일차] 자바스크립트3

이나겸·2022년 3월 25일
JavaScript개발일지
0
post-thumbnail

0. 복습

  • html 기본 코드 작성

  • night 버튼만들기
    onclick으로 버튼이 클릭될 때 마다 효과 적용

  • array 만들어서 반복문으로 출력하기

<!DOCTYPE html>
<html lang="ko">

<head>
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }
    </style>
</head>

<body>
    <h1><a href="index.html">web</a></h1>

    <input type="button" value="night" onclick="
    let aTagSearch = document.querySelectorAll('a');
    // console.log(aTagSearch);
    if (this.value == 'night'){
        document.querySelector('body').style.backgroundColor='black';
        document.querySelector('body').style.color='white';
        this.value = 'day';
        for(let i=0;  i<aTagSearch.length; i++){
            aTagSearch[i].style.color = 'white';
        }
    } else {
        document.querySelector('body').style.backgroundColor='white';
        document.querySelector('body').style.color='black';
        this.value = 'night';
        for(let i=0;  i<aTagSearch.length; i++){
            aTagSearch[i].style.color = 'black';
        }
    }">
    <ol>
        <li><a href="1.html">html</a></li>
        <li><a href="2.html">css</a></li>
        <li><a href="3.html">js</a></li>
    </ol>
    <h2>welcome</h2>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.

    <script>
        let topics = ['html', 'css', 'js'];
        for (let i=0; i<topics.length; i++){
            // document.write('<li>'+topics[i]+'</li>');
            document.write (`<li>${topics[i]}</li>`);
        }
    </script>
</body>

</html>

다크모드 토글버튼 만들기

  • 방법1. 'a'태그마다 id를 달아서 다른 이름을 붙여서 style을 변경한다?
    'a'태그가 많아지면 많아질 수록 id도 많아지게 된다.
    비효율적인 방법이다.
if (this.value === 'night'){
	this.value = 'day';
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';
    document.querySelector('#a1').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';
    }

  • 방법2. 페이지의 'a'태그를 모두 찾아서 반복문을 사용한다.
document.querySelectorAll('a');

페이지의 'a'태그를 모두 찾아서 NodeList 형태로 반환한다.
인덱스를 사용해서 요소를 끄집어내서 사용할 수 있다.

let aSelectAll = document.querySelectorAll('a');
if (this.value == 'night'){
	this.value = 'day';
    document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';
    for (let i = 0; i < aSelectAll.length; i++){
    	aSelectAll[i].style.color='white';
    }
}

1. 학습내용

문제풀기

아래와 같은 버튼이 2000개 있다.
버튼을 클릭하면 backgroundColor가 red로 변경되는데,

  • Console을 활용해서 한번에 버튼을 다 클릭하는 코드를 작성하자.
let allClick = document.querySelectorAll('input');
for(let i=0; i<allClick.length; i++){
	allClick[i].click();
}
  • 버튼의 숫자 중에서 100 초과되는 버튼만 클릭하게 하려면?
let allClick = document.querySelectorAll('input');
for(let i=0; i<allClick.length; i++){
	allClick[i].click();
}
// 또 다른 답
let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
    if (inputs[i].value > 100) {
        inputs[i].click()
    }
}
  • 버튼의 숫자가 100보다 크고, 200보다 작은 버튼만 클릭
// 100보다 크고 200보다 작은 버튼만 클릭
let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
    if (inputs[i].value > 100 && inputs[i].value < 200) {
        inputs[i].click()
    }
}

// if문에 i를 가지고 해도 됨
let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
    if (i > 100 && i < 200) {
        inputs[i].click()
    }
}

// 논리연산자를 사용하지 않는 코드
let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
	if(inputs[i].value>100){
		if(inputs[i].value<200){
    		inputs[i].click();
		}
	}
}

함수

: 함수는 서로 연관된 코드를 그루핑해서 이름을 붙인 상자와 같다.
내장함수(built in fuction)를 잘 사용해서 프로그램을 만들어간다.

  • 함수화의 장점
    (1) 함수화를 하면 가독성이 좋아진다.
    (2) 유지보수가 편해진다.

코드에 일정한 패턴이 보이면 함수화를 시키는 것이 좋다.

아래와 같은 결과가 출력되었다.
어떤 부분을 함수화하면 좋을까?

<script>
	function abc() {
    	console.log('a');
        console.log('b');
        console.log('c');
	}
    for (let i = 1; i < 5; i++) {
    	console.log(i);
        abc();
	}
</script>

a, b, c를 출력하는 부분을 함수화하였다.
console.log(1), console.log(2), console.log(3)으로 출력할 수도 있지만,
규칙적으로 1씩 증가해서 출력되기 때문에
반복문을 사용해서 console.log(i)를 찍고 abc() 함수를 호출하도록 만들었다.

VAT 계산하는 함수만들기

함수 호출 시 인자로 넣으면 함수의 매개변수로 전달된다.
매개변수로 전달한다면 함수 안에 선언되어있는 부분은 삭제해야 함수가 잘 동작한다.

return : 함수를 호출하면 그 자리에 return 값이 반환된다.
아래 코드에서는 rate의 값이 반환된다고 생각하면 된다.
Console.log는 단순히 값을 찍어내는 출력을 위한 함수이다.
Console.log(vatRateCalc(1000, 0.1))

  • vatRateCalc 함수가 호출되고 매개변수로 1000과 0.1이 전달되어 동작 후에 rate 값이 반환
  • 결국 Console.log(rate) 처럼 되어 rate 값을 console에 찍는다고 생각하면 된다.
  • return은 함수의 종료 조건이다.
<h1>VAT</h1>
<script>
	console.log(1);
    console.log(2);
    console.log(3);

	function vatRateCalc(price, vatRate) { // 매개변수, parameter
    	// let price = 1000;
        // let vatRate = 0.1;
        let rate = price * vatRate;
        // console.log(rate);
        return rate;
    }
    // vatRateCalc(2000, 0.1); // 인자, argument
    console.log(vatRateCalc(1000,0.1));
</script>
<script>
     function night() {
            document.querySelector('body').style.backgroundColor = 'white';
            document.querySelector('body').style.color = 'black';
            let aSelectAll = document.querySelectorAll('a');
            for (let i = 0; i < aSelectAll.length; i++) {
                aSelectAll[i].style.color = 'black';
            }
        }
	function day() {
            document.querySelector('body').style.backgroundColor = 'black';
            document.querySelector('body').style.color = 'white';
            let aSelectAll = document.querySelectorAll('a');
            for (let i = 0; i < aSelectAll.length; i++) {
                aSelectAll[i].style.color = 'white';
            }
        }
</script>
<input type="button" value="night" onclick="
	if (this.value === 'night'){
    	this.value = 'day';
        night();
	} else {
    	this.value = 'night';
        day();
}">

2. 중요내용

comma 연산자

쉼표 연산자는 각각의 피연산자를 왼쪽에서 오른쪽 순서로 평가하고, 마지막 연산자의 값을 반환

var a, b, c;
a = b = 3; c = 4;
console.log(a);
var x, y, z;
x = (y = 5, z = 6);
console.log(x);

자바스크립트 객체

객체지향은 서로 연관된 변수와 함수를 그루핑해서 이름을 붙인 것이다.

<html>
    <body>
        <h1>Object</h1>
        <script>
            let student = ['nagyeom', 'leeng'];
            console.log(student[0]);
            console.log(student[1]);

            let member = {developer:'gyeomveloper', designer:'gyeomsigner'};
            // 객체는 중괄호로 시작해서 중괄호로 끝난다.
            console.log(member.designer, member.developer);

            // 배열은 순서가 있는 데이터
            // 객체는 role이 다르다.

            let leenagyeom = {name:'leenagyeom', city:'daegu', job:'developer'};
            //객체는 이름으로 식별되는 배열과 같다.
            console.log(leenagyeom.name);
        </script>
    </body>
</html>

3. 학습소감

comma 연산자와 자바스크립트 객체에 대해서 새롭게 알게 되었다.
계속해서 반복하다보니 의식의 흐름대로 코드를 작성할 수 있게 된 것 같다.
html 기본 구조 부터 a태그를 포함한 h1제목과 ol, li 리스트를 만들고,
다크모드 토글 버튼도 만들어서 내용과 배경색이 반전이 되게 하는 것 까지
의식의 흐름을 하나로 이어지게 해서 복습하는 게 중요한 것 같다.

profile
이나겸
이전 포스트

[2일차] 자습

다음 포스트

[4일차] 파이썬 기본문법1

0개의 댓글