학습한 내용

함수들의 중첩을 이용한 문제해결

예를들어 무수히 많은 숫자로 되어있는 인풋들을 원하는 것들만을 추려내기 위해서는 기존에 사용하던 함수들을 중첩하여 해결할수있다
만약 100~200안까지의 결과를 원한다면 아래와 같은 코드가 가능하다

let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i=i+1){
if(inputs[i].value<200){
if(inputs[i].value>100){
inputs[i].click();
}
}
}

함수를 이용하여 가독성 및 유지보수 능률 향상

<input type="button" id="dnbtn" value="DarkMode" onclick="
let button = document.querySelector('#dnbtn');
if(button.value === 'DarkMode'){
    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';
        }
    button.value = 'WhiteMode'
    } else {
    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';
        button.value = 'DarkMode'
    }
    }
">

위의 가독성이 떨어지고 양이 늘어날 경우 수정이 힘들어지는 코드에서
아래와 같이 함수로 묶어 훨씬 보기 편하게 수정 해당문의 장점은 코드가 점점더 길어질수록 유지보수가 힘들어진다는 기존의 문제점을 보완해준다

<script>
    function darkmode() {
        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 whitemode() {
        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';
    }
}

//함수지정

<input type="button" value="DarkMode" onclick="
let button = this;
if(button.value === 'DarkMode'){
    darkmode();
    button.value = 'WhiteMode';
    } else {
        whitemode();
        button.value = 'DarkMode';
    }
">
//함수활용

객체지향이란

객체지향은 서로 연관된 변수와 함수를 그룹핑해서 이름을 붙인다
예시
let student = ['ego', 'foon'];
console.log(student[0], student[1]);

        let member = {developer:'ego', designer:'foon'}; 
        console.log(member.developer, member.designer);

        let person = {name:'ego', city:'seoul', job:'developer'};
        console.log(person.name, person.city, person.job);

학습한 내용 중 어려웠던 점 또는 해결못한것들

함수의 범위설정과 위치선정 괄호실수

해결방법 작성

코드가 꼬였을때 천천히 밖에서부터 확인하기와
작성하고자 하는 코드의 동작원리 이해로 해결했습니다

학습 소감

전체적인 개념에 대한 이해가 제일 중요한걸 느꼈습니다