1. 학습 내용

review

기본적인 틀을 작성,
버튼을 추가하여 배경 생상 변경하기.

<input type="button" value="night" onclick="
      document.querySelector('body').style.backgroundColor='black';
      document.querySelector('body').style.Color='white';
      ">

style에서 것들을 따로 css파일로 만들어 link rel="stylesheet" href="해당파일명"으로 이용 가능
+body 안에

<h1 style="">

기입하여 style을 사용할 수 있지만 선호하지는 않는다.

css는 우선순위가 있으며 이를 아는 것이 중요

Flow Control

(Boolean, 연산자 Conparison Operator가 선행되어야 함)
===는 엄격히 같다를 의미하며 ==는 모호하게 같다정도로 파악

조건문 Conditional Statements
if 조건문
if 조건문 else 아닐시 조건문

예제
<html>
    <body>
        <script>
            let input_id = prompt('아이디?');
            if(input_id === 'egoing'){
                alert(input_id+'님 안녕하세요 ^^');
            } else {
                alert('누구세요?');
            }
            
        </script>
    </body>
</html>

제작하던 페이지에 대입하면 한 버튼으로 버튼을 누르면 검정색 배경에 흰 글씨가 나타나며 다시 버튼을 누르면 흰 배경에 검정색 글씨가 도출된다.
해당 코드는 아래와 같다.

    <input type="button" id="dnbtn" value="night" onclick="
        let button = document.querySelector('#dnbtn');
        if(button.value==='night'){
            document.querySelector('body').style.backgroundColor='black';
            document.querySelector('body').style.color='white';
            button.value='day';
        } else{
            document.querySelector('body').style.backgroundColor='white';
            document.querySelector('body').style.color='black';
            button.value='night';
        }
    ">

이 외에도 this를 이용하여 해당 조건문을 작성 할 수 도 있다. this는 이벤트를 발생시킨 tag를 가리키도록 약속하는 것으로 id를 대체하여 사용할 수 있다.

<input type="button" value="night" onclick="
let btn= this;
if(this.value==='night'){
    document.querySelector('body').style.backgroundColor='black';
    document.querySelector('body').style.color='white';
    this.value='day';
}else{document.querySelector('body').style.backgroundColor='white';
    document.querySelector('body').style.color='black';
    this.value='night';
}
">

반복문 Loop Statements
-배열Array : 혼잡하게 나열된 데이터들을 하나의 변수명으로 순서대로 정리하는 것. 몇개 인지 확인할때는 length사용
console.log(topics.length)
순서가 매우 중요하며 각각의 값들의 시작 0으로, 0번째부터 시작한다.
각각의 값들은 원소 element
값들이 저장되어 있는 색인 index

-반복문Loop
for문
for( , , ){}
for(초기조건;반복조건 불리언;증감연산)
조건을 검사하여 true 이면 실행하고 다시 검사하여 조건이 여전히 true면 다시 실행
그 조건이 false를 리턴했을 때 실행을 종료

<!doctype html>
<html>
    <head></head>
    <body>
        <h1>배열(Array)</h1>
        <script>
            let topic1 = 'html';
            let member1 = 'egoing';
            let topic2 = 'css';
            let member2 = 'leezche';
            let topic3 = 'js';
            let member3 = 'duru';

            let topics = ['html', 'css', 'js'];
            let members = ['egoing', 'leezche', 'duru'];
            console.log(topics.length);
            console.log(topics[0]);
        </script>

        <h1>반복문(Loop)</h1>
        <script>
            console.log(1);
            for(let i=0; i<2 ;i=i+1){
                console.log(2);
                console.log(3);
            }
            console.log(4);            
        </script>

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

2. 어려웠던 점

수업의 진도는 빠르게 나가고 무엇이 잘못된 지도 파악하지 못한 상황에서 질문을 한다는 것자체가 부담되었고 제공된 코드와 내가 작성한 코드를 비교해도 잘못됨을 인지하지 못하고 있다 결국 파악하면 그건 모두 오타에 의한 오류였다.
루프를 배울 당시 이해하기 힘들 수도 있다, 내용이 어렵다 라는 말을 듣고 시작했고 정말 머리속에 하나도 안남았다. 이해가 잘 되지 않았다.

3. 해결방법

오타를 안내는 방법은 따로 없는 걸까, 지금으로서는 그저 최선을 다해 오타가 없는지 파악하고 다시 확인하고 천천히 파악하는 방법밖에는 없을 것같다.
루프에 대하여 기존 강의 외에 추가적으로 찾아보고 있다. 해결을 하려면 많은 지식과 사례를 접해야 할 것이다.

4. 학습소감

어렵다.
내 사고방식대로 할 수 있는 것이 아니라 컴퓨터적 사고를 해야하는 것이기에 익숙하지 않으며 쉽지않다.
언제쯤 익숙하다고 느껴질까.
손의 버벅거림을 줄이고 싶다.

Author And Source

이 문제에 관하여(개발일지 2일차 | 웹기초-JavaScript(2)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gyujinj/개발일지-2일차-JavaScript-기초2

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

개발일지 2일차 | 웹기초-JavaScript(2)