[개발일지 3월 25일] [공통교육-웹기초] JavaScript 3/3 - 이고잉 강사

박재준·2022년 3월 25일

CSS JavaScript for문 function html if문 loop object 객체지향 변수 함수

1. 학습한 내용

필기내용

조건문, 반복문이 중요하고 숙달하기!

<review4.html> 복습완료(this 추가 사용함)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>     
    <body>
        <input type="button" value="night" onclick="
            if (this.value==='night'){   // === : 비교연산자
            document.querySelector('body').style.backgroundColor = 'black';
            document.querySelector('body').style.color = 'white';
            this.value = 'day';}   //클릭하면 day로 바뀜, = : 값 정의
            else {
            document.querySelector('body').style.backgroundColor='white';
            document.querySelector('body').style.color='black';
            this.value='night'}
        ">
        <h1><a href="index.html">web</a></h1>
        <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. 
        Aliquam facilis animi veniam, saepe tenetur ea velit enim libero 
        fugit illo porro ipsa distinctio ipsum quas eveniet asperiores, 
        ratione laboriosam consequuntur!
    </body>
</html>

<loop1(복습).html>

<script>
            let topics2 = ['html', 'css', 'js']; //i=i+1 이랑 i++ 동일
            for(let i=0; i<topics2.length; i=i+1){ //초기값;반복조건;증감연산
                console.log(topics[i]);  // i=> html, i=>css, i=>js
                // document.write('<li>'+topics[i]+'</li>');
                document.write(`<li>${topics[i]}</li>`);  // 백틱으로 감싸고 ${}로 감쌈 → 바로 위와 똑같이 작동
            }
        </script>

→ topics2란 변수에 'html', 'css', 'js' 저장
→ topics2.length(3) 미만까지 for문 반복 수행
→ 실행 결과값을 loop1.html 본문에 출력
→ <li>${topics[i]}</li> (백틱과 $를 통해서도 나타낼 수 있음)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

javascrpit loops cheat sheet 튜토리얼
참고 사이트

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
버튼 참고 사이트 활용한 예제들

페이지에서 console창
document.querySelector('input')
→
document.querySelector('input').click()
→ undefined 란 문구가 뜨면서 click이 실행됨
let inputs = document.querySelectorAll('input');
→ 이후 inputs를 치면 모든 input값이 출력
let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.lenth; i=i+1){
inputs[i].click();}
만약 inputs[i].value가 100보다 크다면 100보다 큰 inputs이 클릭
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미만 클릭
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();}
}
}
→ if문에 if를 쓰면 조건을 다양하게 줄 수 있음
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();
}}
→ 이렇게도 사용할 수 있는데, 꼭 기억할 사항은 아님
‘,’도 됨 ‘,’ = ‘&&’
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();
}}
→ 번외...
let j;
for(j=0; j<10; j++){
}console.log(j);
→ 값은 10
for(let j=0; j<10; j++){
}
console.log(j);
이렇게 하면 j가 for문 안에서만 실행되기 Eons에
consolel.log(j) 실행시 실행이 안됨
Math.sqrt(4)
→ 4의 제곱근인 ‘2’를 출력
→ 이런 것들을 내장함수라고 함(프로그래머가 만들어 놓음)(built in function)

이러한 내장함수를 이용해서 완제품을 만드는 사람들이 개발자!
‘함수는 서로 연관된 코드를 그룹핑해서 이름을 붙인거다.’

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

    <script>
        function night() {
            document.querySelector('body').style.backgroundColor ='black';
            document.querySelector('body').style.color = 'white';
            let as = document.querySelectorAll('a');
            for(let i=0;i<as.lenth;i=i+1){
                as[i].style.color = 'white';
            }
        }    
        function day() {
            document.querySelector('body').style.backgroundColor ='white';
            document.querySelector('body').style.color = 'black';
            let as = document.querySelectorAll('a');
                for(let i=0;i<as.lenth;i=i+1){
                    as[i].style.color = 'black';
                }
        }
    </script>
    <input type="button" value="night" onclick="
        let btn = this;
        if(btn.value === 'night'){
            night();
            btn.value = 'day';
        } else {
            day();
            btn.value = 'night';
          
        }
    ">

→ night를 함수로 만들고 밑에서 night();를 통해서 함수 호출
→ day도 마찬가지

함수 사용에 따른 효용
1) 코드가 간결해진다
2) 가독성이 좋아진다
3) 유지보수가 편해진다
4) 기타 등등

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
function.html

<script>
            function 부가세계산(){
                let 가격 = 1000;
                let 부가세율 = 0.1;
                let 부가세 = 가격 * 부가세율;
                console.log(부가세);
            }
            
            부가세계산();
            
            
        </script>

→ 더 똑똑한 방법은 밑!

<script>
            function 부가세계산(가격){  // 가격 : 매개변수, parameter

                let 부가세율 = 0.1;
                let 부가세 = 가격 * 부가세율;
                console.log(부가세);
            }
            
            부가세계산(2000);  // 2000 : 인자, argument, 입력값
            
            
        </script>

→ 매개변수를 이용해서 입력값을 입력하면 자동으로 계산(밑의 그림은 출력된 결과값)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

<script>
            function 부가세계산(가격, 부가세율){  // 가격, 부가세율 : 매개변수, parameter

                let 부가세 = 가격 * 부가세율;
                console.log(부가세);
            }
            
            부가세계산(2000, 0.1);  // 2000, 0.1 : 인자, argument, 입력값
            
            
        </script>

→ 매개변수를 ‘가격’과 ‘부가세율’ 두 개로 설정함!
→ 인자를 2000, 0.1 순으로 매칭됨
→ console에 200으로 출력

Math.floor(1.9)100
→ 100
Math.random()100
→ 86.10239815980589...
부가세계산(1000, 0.1)*100
→ 100(NAN) 어쩌라고?라는 뜻!

function a(){
	return 1;
}
a()*100

→ 100 출력

<script>
            function 부가세계산(가격, 부가세율){  // 가격 : 매개변수, parameter

                let 부가세 = 가격 * 부가세율;
                return 부가세;
            }
            
            console.log(부가세계산(2000, 0.1));  // 2000 : 인자, argument, 입력값
            
            
        </script>

→ 이전은 부가세계산과 출력 두가지
→ 지금은 부가세계산과 출력 동시에 얻을 수 있음

alert(부가세계산(2000, 0,1))

→ 200이 alert로 띄워짐

참고 : 변수와 함수의 관계(javacscrpit execute...)(강사님 강의 맵)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
function.html 밑부분 참고

<h1>SUM</h1>
        <script>
            function sum(val1, val2){
                return val1+val2;
            }
            alert(sum(100,200)*10)
        </script>

→ 3000이 출력
→ return이 실행되면 그 뒤에 코드를 넣어봤자 실행이 안됨
→ return은 함수의 종료 조건!

Object 객체 지향(코드를 정리할 수 있음)

객체와 변수는 자바스크립트에서 남매와 같다
object.html 내용

<html>
    <body>
        <h1>Object</h1>
        <script>
            let student = ['egoing', 'duru']
            console.log(student[0], student[1]);
            
            let member = {developer:'egoing', designer:'duru'};
            console.log(member.developer, member.designer);

            let person = {name: 'egoing', city: 'seoul', job: 'developer'};
            console.log(person.name, person.city, person.job);
        </script>
    </body>
</html>

→ object : dict구조{key : value}
→ 따라서 {developer : ‘egoing’} 이런 식

객체지향은 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인 것
Math.abs(-1) : -1의 절대값(absolute)(밑의 그림 참고)
코딩 타이핑 연습하는 사이트 ; https://typing.io/
→ 나는 안해도 괜찮을 듯 (https://seomal.com/map/1/181)

ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
마지막으로 review5.html을 반복연습하면서 암기!

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            h1{
                border-bottom:10px solid black;
            }
        </style>
    </head>     
    <body>
        <input type="button" value="night" onclick="
            document.querySelector('body').style.backgroundColor = 'black';   
            document.querySelector('body').style.color = 'white';
        ">
        <h1><a href="index.html">web</a></h1>
        <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>
        Hello, WEB
    </body>
</html>