Javascript 제어문(생활코딩)

▶ 비교 연산자 === (이항 연산자)

-> 좌항과 우항을 결합해서 그 관계에 따라 하나의 결과, 즉 True인지 False인지를 만들어냄

 

 

▶ 비교 연산자 <, >

<
>

• HTML에서는 이 꺽쇠 기호(<,>)가 태그를 나타낼 때 쓰이기 때문에 혼란을 줄 수 있기 때문
• &lt;가 <를 의미하는 것이고, &gt;가 >를 의미함

 

▶  조건문

<script>
  document.write('1')
  if(true) {
    document.write('2')
  }
  else {
    document.write('3')
  }
</script>

->12 출력

 

▶  조건문을 활용한 토글 만들기

if(document.querySelector('#night_day').value === 'night') {
  document.querySelector('body').style.backgroundColor = 'black';
  document.querySelector('body').style.color = 'white';
}
else {
  document.querySelector('body').style.backgroundColor = 'white';
  document.querySelector('body').style.color = 'black';
}

 

하지만 이 코드에는 결정적인 문제가 있다!  바로 버튼이 눌릴 때마다 value가 바뀌지 않는 것

그렇기 때문에 항상 원래 설정된 value인 night에 해당하는 코드, 즉 첫 번째 중괄호에 있는 코드만 실행됨

이를 해결하기 위해서는 코드가 실행될 때마다 value를 바꿔주는 코드도 추가해줌!

 

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';
}

 

 

▶  리팩토링 

리팩토링이란 비효율적인 코드를 효율적으로 만들어서 가독성을 높이고 유지보수가 쉽도록 만드는 것

 

1.  자기 자신을 가리키기 위한 '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';
}

 

2. 중복제거 -> 변수선언

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';
}

 

▶  반복문

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

 

▶  배열

var fruits = ["apple", "banana"];

document.write(fruits[0]);

document.write(fruits.length);

fruits.push("coconut");

pop = 배열의 마지막 요소 삭제

shift = 배열의 첫번째 요소 삭제

splice a, b = 인덱스 a부터 b개 삭제

 

 

▶  반복문

document.write('<li>1</li>');
var i = 0;
while (i < 3) {
  document.write('<li>2</li>');
  document.write('<li>3</li>');
  i = i + 1;
}
document.write('<li>4</li>');

 

▶  배열과 반복문

var i = 0;
while (i < fruits.length) {
  document.write('<li>'+fruits[i]+'</li>');
  i = i + 1;
}

document.write('li<a href="http://a.com/'+coworkers[i]+'">'+coworkers[i]+'<a/></li>');

->각 배열의 인덱스 항목마다 링크 생김

 

▶  반복문과 배열의 활용

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