학습한 내용

logic

Boolean 불과연산자

true false

Comparison Operation 비교연산자

종류로 >,===,!==
==과===의 차이
예시)

var a = 1;
var b = "1";
console.log(a==b); //true
console.log(a===b); // false

참고링크) https://steemit.com/kr-dev/@cheonmr/js-operator

Conditional Statement 조건문

if (true 나 false){
					}
else{  
			 	}

Loop Statement반복문

for(조건){
             }

반복문 예

console.log(1);
           for(let i=0; i<4; i=i+1){
                    console.log(2);
                    console.log(3);
                }
console.log(4);

조건문 응용

let input_id = prompt('id?');
            //만약에 input_id가 egoing과 같다면 아래 코드 실행
   if(input_id==='egoing'){
     alert(input_id+'님 안녕하세요^^');
   } else{
     alert(input_id+'님 누구세요?');
   }

배열(Array)와 반복문(Loop)

각각의 index(항목?)을 군집화 하는것을 배열이라고 하면
대체로 []를 쓸 수 있음 but 반드시가 아님

var topic['html','css','js'];

log(topic.length) 는 3, 각 개체의 번호는 0부터 시작해서 0 1 2

배열을 응용한 반복문

topics = ['html','css','js','python'];
            for(let i=0; i<topics.length; i=i+1){
                console.log('i->','<li>'+topics[i]+'</li>');
                document.write('<li>'+topics[i]+'</li>');
            }

css파일을 만들어서 html에 직접삽입

스타일을 통일 할 수 있는 장점이 있다.

<link rel="stylesheet" href="style.css">

style.css라는 css파일 삽입시 필요한 링크

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

이 두개의 버튼을 스위치 형식의 하나의 버튼으로 바꿀 수 있음

<input type="button" id="dnbtn" value="night" onclick="
       //만약 현재 버튼의 value가 night라면 아래 코드를 실행해
       let btn = this; // this는 자기자신, button = document.querySelector('#dnbtn');
        if(button.value ==='night'){
            document.querySelector('body').style.
            backgroundColor= 'black';
            document.querySelector('body').style.
            color= 'white';
           // 현재 버튼의 value를 day로 변경해
           button.value = 'day';
        }
        //그렇지 않다면 아래 코드를 실행해
        else{
            document.querySelector('body').style.
            backgroundColor= 'white';
            document.querySelector('body').style.
            color= 'black';
            button.value = 'night';
            }
        ">

어려운 내용

내용적인것은 결국에는 이해했지만, 코딩 속도와 오타때문에 실시간으로 따라갈때 멈칫멈칫해서 스위치를 이해하는게 어려웠었음
for구문(loop문), if문(조건문)의 기초를 배운것 같은데, 응용을 잘 할 수 있을지 걱정된다.

해결방법

단어를 선택하면 같은 단어들이 같이 선택되는것을 알고 오타찾는게 쉬워졌다.