1) 학습한 내용

오늘도 복습을 한다. 복습하는 것은 일종의 장기기억으로 남기는 과정이라 별로 놀랍지도 않다. loop문은 학습하는 도중에 시간 관계상 도중에 멈췄졌던 것이라 계속해서 이어져갔었다.

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

그리고, 어제 배웠던 코드를 최적화함으로써 코딩을 짠 모습이다.

<input type="button" value="NightMode" onclick="
        let btn = this;
        if(btn.value === 'NightMode'){
            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++){
                as[i].style.color = 'white';
            }
            btn.value = 'DayMode'
        } else {
            document.querySelector('body').style.backgroundColor = 'white';
            document.querySelector('body').style.color = 'black';
            btn.value = 'NightMode';
            let as = document.querySelectorAll('a');
            for(let i=0;i<as.length;i++){
                as[i].style.color = 'black';
        }
        btn.value = 'NightMode';
    }
        ">

그리고, 실전은 언제나 어렵다. 아래는 버튼 자동으로 누르는 코드다.

var tag = '';
for(var i=0; i<2000; i++){
    tag = tag + `<input type="button" onclick="        
        this.style.backgroundColor='red';
    " value="${i}">`
}

document.write(tag);

let inputs = document.querySelectorAll('input');
for(let i=0; i<inputs.length; i++){
    //if inputs[i]value가 100보다 크다면
    if(inputs[i].value>100 && inputs[i].value<200){
        inputs[i].click();
    }
}

아래는 코드를 최적화 시킨 것이다. 이 코드는 야간모드/주간모드를 전환시키는 버튼의 코드다.

 <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.length;i++){
                    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.length;i++){
                    as[i].style.color = 'black';
                }
            }
        </script>

이전에 만들었던 버튼의 소스코드를 최적화 시킨 것인데 이걸로 코드가 간결해졌다.

그리고, 오후에는 함수를 배우게 되었다.
강사는 처음부터 좋은 코드를 짜기 보다는 처음에는 막 짜다가 반성을 하라고 했었다. 이것은 문학으로 치면 퇴고와 같은 셈이다.

함수에 관한 강의할 때 쓰인 예시를 올려보면 다음과 같이 나왔다.

<script>
function cal_tex(price, rate_tex){ //매개변수, parameter
  let tex = price*rate_tex; //가격*세율
return tex;
}
console.log(cal_tex(2000, 0.2)); //인자, argument, 입력값
</script>

함수에 나오는 return 은 종료조건이다.

    https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Functions
    위의 링크는 함수에 관해 정리한 링크다.
    
    
    --객체--

객체지향은 서로 연관된 변수와 함수를 그룹화하여 이름을 붙인 것이다. 아래는 오늘 배웠던 객체 코드이다.

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

            let MyMath = {}
            MyMath.PI = 3.14;
            MyMath.sum = function(val1, val2){
                return val1+val2;
            }
            console.log(MyMath.PI);
            console.log(MyMath.sum(10,20));
        </script>

객체를 구성하는 멤버의 값은 어떤 것이라도 될 수 있다.

요약하자면 오늘 배웠던 것은 복습을 제외하면, 버튼 코드 최적화에 loop문, 함수, 객체를 배웠다. 자세한 것은 모질라 사나 인터넷 정보, 서적을 뒤져봐야 할 것이다.

2) 학습내용 중 어려웠던 점

Javasciprt는 C언어와 구조가 비슷해서 익숙해지는 데에는 어려움이 없었지만 javascript의 루프문을 익숙해지려면 여러번의 일을 겪어야했었다. 그리고, 버튼을 최적화 시키는 것에도 어려움을 겪어야 했었다. 왜냐면, 소스코드를 최적화시키는데 배치를 제대로 해야하는 것에 어려움이 있기에 계속해야 한다. 거기에다, 계산기식으로 하는 거야. 반복하면 되더라도 문제는 기능 형식으로 구현한다는 얘기가 달라진다. 함수의 구조를 알려면 계속 반복해서 공부를 해야할 필요가 있다.

3.해결방법

이번에도 강사의 강의를 따라했었지만 복습 시간 때 독학을 해야 했었다. 그리고, 구글에 검색을 해서 웹 프로그래밍과 관련된 곳을 검색을 해야한다. 그리고, 강사의 강의를 봐가면서 참고해 가면서 들어야했다. 하지만, 코드를 스스로 짜야 할 상황이 올 것이다. 나는 자바스크립에 관한 자료를 봐야할 필요가 있다. https://seomal.com/map/1 여기로 들어갈 필요가 있다.

4.학습소감

오늘은 Javascript 3번째 날이다. 오늘은 어제의 실수를 반복하지 않기 위해서 앞으로는 임시저장을 하면서 Velog는 켜두면서 일지 작성을 진행하기로 했다. 다음 주에는 본격적인 인공지능 관련 수업으로 들어갈 것이다. 나는 다음 주까지 인공지능 관련 서적을 읽고 직접 실습하면서 예습 해야 할 필요가 있다. 인공지능은 파이썬으로 이뤄지기 때문에 파이썬과 아나콘다, 구글코랩으로 예습할 필요가 있다.