[생활코딩 WEB2 Javascript] 정리노트 2

수업 구성 

 

Statement

Comparison Operator, Boolean

 

비교연산자 

=== 같은지 같지 않은지 알려줌, True False 로 출력 

True & False - '불리언'이라는 데이터타입

 

지금까지 배운 Datatype 종류 

number , string = 엄청 많음 (숫자랑 글은 무한대)

boolean - true, false 둘 뿐 

 

 

 

Conditional Statement 조건문 

if(){}

else{}

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

코드 해석

value (버튼 안에 들어간 단어)가 night 인 경우, 버튼을 클릭했을 때 background = black, text = white 가 되고 value(버튼 안에 들어가는 단어)가 day로 바뀐다. 

else (value 가 night이 아닌경우, 즉 day로 변한 상태): background = white, text = black 이 되고 value 는 night 

 

 

 

리팩토링 

• 코드의 중복을 줄이고 가독성을 높여 코드를 개선하는 것 
• 유지보수하기 더 쉽게 함 

this = 이벤트 안에서 실행되는 코드에서는 현재 코드가 속해 있는 태그를 가리키도록 약속돼 있는 특수한 키워드

 

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

리팩토링한 버전 (위 코드와 같은 결과 출력)

- querySelector('#night_day')를 this로 바꿈 

- document.querySelector('body')를 변수로 선언하여 중복을 최소화 

var 은 자바스크립트에서 변수 선언하는 키워드, 여기선 target이 변수로 선언됨 

 

 

Array 배열 

배열 =수납상자 

 

배열은 [] 안에 적고 값과 값은 , 로 구분한다. 

배열 안에 값은 0부터 시작

 

 

 

Loop Statement 반복문

총 3번 출력 (i 가 0일때, 1일때, 2일때)

 

 

<h2>Loop and Arrays</h2>
<script>
var fruit = ["apple","banana","lemon"]
</script>
<h3>fruits</h3>
<ul>
    <script>
        var i = 0;
        while(i<fruit.length){
            document.write('<li><a href= "https://a.com/ '+fruit[i]+'")> '+fruit[i]+'</a></li>');
            i = i+1;
        }
    </script>
</ul>

Loop and Arrays

fruits

 

 

배열과 반복문의 활용 

 

텍스트 색이 night 모드에서 잘 안보여서 수정 필요

 

 

 

 

querySelector 는 첫번째 a 태그만 가져오는 특성이 있다, 모두 가져오려면 querySelectorAll 활용!

var alist = document.querySelectorAll('a');
        var i = 0;
        while(i<alist.length){
            alist[i].style.color = 'powderblue';
            i = i + 1;
        }

 

아래처럼 코드를 바꿔 night, day 모드에 따라 텍스트 색을 바꿀 수 있다. 

그냥 바로 

alist.style.color = 'powderblue'; 

쓸 수 없고 반복문을 써준 이유는 텍스트 색을 바꾸려면 각각 a tag를 잡아야하기 때문. 

배열 안 태그를 하나씩 잡아 alist[i].style.color 해줘야만 색깔이 적용됨. 

i = i+1 을 하여 한번만 실행되도록 함.

 

결과