3. Javascript 제어문

컴퓨터 언어 vs 프로그래밍 언어

프로그램에는 순서가 있으며, 이러한 순서를 만드는 것이 프로그래밍 언어이다.

즉, HTML로 만든 웹페이지는 시간의 순서가 없고 한번 만들어지면 변하지 않는다.

반면에 Javascript는 사용자와 상호 작용하며 시간에 따라 여러 기능이 실행된다.

따라서, HTML은 컴퓨터 언어이지만 프로그래밍 언어는 아니다.

 

조건문(if/else)

프로그램이 조건에 따라서 다른 기능들이 다른 순서에 따라서 실행되도록 만들어 주는 것

<script>
  document.write('1')
  if(true) {
    document.write('2')
  }
  else {
    document.write('3')
  }
</script>
<!--결과 값은 12가 출력된다.-->

<script>
  document.write('1')
  if(false) {
    document.write('2')
  }
  else {
    document.write('3')
  }
</script>
<!--결과 값은 13이 출력된다.-->

<!--조건문을 활용한 토글 만들기-->
<input id="night_day" type="button" value="night">

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

 

리팩토링(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';
}

<!--중복제거-->
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';
}

 

반복문(while)

같은 작업을 반복적으로 실행해주는 것

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

<!-- while 반복문-->
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>');

 

배열(Array)

<!--배열 생성-->
var fruits = ["apple", "banana"];

<!--배열 값에 접근-->
document.write(fruits[0]);

<!--배열의 길이-->
document.write(fruits.length);

<!--배열에 값 추가-->
fruits.push("coconut");

 

반복문(While) + 배열(Array)

var alist = document.querySelectorAll('a');

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