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

31772 단어 JavaScript 개발일지 JavaScript

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 리스트를 만들고,
다크모드 토글 버튼도 만들어서 내용과 배경색이 반전이 되게 하는 것 까지
의식의 흐름을 하나로 이어지게 해서 복습하는 게 중요한 것 같다.

Author And Source

이 문제에 관하여([3일차] 자바스크립트3), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lnglog/3일차-자바스크립트3

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

graphql-codegen

HTTPS 적용된 것을 Nginx로 무중단 배포해보자.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다