생활코딩

[생활코딩] Java Script 16~20

snooop 2022. 4. 3. 14:06

16. 조건문

<script>
 document.write("1<br>");
 if(true){
 document.write("2<br>");
 } else{
 document.write("3<br>");
 }
 document.write("4<br>");

조건문이 true일경우 if뒤에 코드실행 -> else 뒤 코드 실행 x

            false일경우 else뒤에 코드실행  -> if 뒤 코드 실행 x

=> 불리언 값에 따라 실행코드 다름

 

17. 조건문 활용

 

 id= night -day 요소의 value 값

 ==> 검색 javascript element get value

            답 -> document. querySelector("#night_day').value

 이것을 if(document. querySelectot('#night_day'). value === 'night')에 넣어준다.

 

18. 리팩토링 중복의 제거

    ->코드 자체 효율성, 코드 가독성 높여줌, 유지보수, 중복코드 낮아짐

 (비주얼 스튜디오 다중커서 alt+클릭)

 documnet.querySelector-> 자기자신을 가르킴으로 this로 바꿔줌

 

target=> document.querySelector을 대신해서 =사용

var target = document.querySeletor('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';
  }

 

19. 반복문 예고

 

링크글자 day일때 어두운 컬러로

          night일때 밝은컬러로

 

20.배열

  서로 연관된 데이터를 정리정돈 -> 배열

  배열을 변수안에 var coworkers = ["egoing","leezche"];

 

데이터 꺼내오고 싶음 -> documnet. write(coworkers[0]); 

                                 documnet. write(coworkers[1);

                            =>egoingleezche

데이터 추가(js array add data) -> coworkers.push('duru');

                     coworkers.push('taeho');

데이터 갯수 세기(js array count) -> document.write(coworkers.length);