자바스크립트의 시작 : Javascript 제어문

2. Javascript 제어문

 

HTML Javsacript 비교

둘 다 컴퓨터 언어이지만 Javascript는 프로그래밍 언어이기도 함

 

프로그램에는 순서라는 의미가 있음. HTML은 정적이기 때문에 순서대로 움직일 필요가 없지만 자바스크립트는 사용자와 상호작용하기 위해 순서대로 실행될 필요가 있음. 따라서 프로그래밍 언어라고 불리는 것.

 

 

---

비교 연산자와 불리언

• 비교 연산자 === : 좌우 값이 같은지 판단함

document.write(1===1);

 

라고 쓰면 True가 출력되는데 이 True를 불리언(Boolean) 데이터 타입이라고 함

 

document.write(1===2);

 

는 False가 출력될 것임. 불리언 값은 True와 False 두가지만 존재함.

 

document.write(1<2);

 

비교연산자는 <, > 부등호도 쓸 수 있음. 위의 경우 1<2는 참이니 True

 

---

조건문

if(false){
	document.write("2<br>");
} else {
	document.write("3<br>");
}

 

if( ) 괄호 안의 값이 참이냐 거짓이냐에 따라서 실행되는 문장이 달라짐

True면 if 바로 뒤의 문장이 False면 else 뒤의 문장이 실행된다. 참고로 <br>은 띄어쓰기를 의미함

 

document.querySelector('#night_day').value

 

위 코드는 id가 night_day인 태그의 value 값을 가져오는 것.

이걸 응용해서 조건문을 만들 수 있다.

 

<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 이면 if문의 첫번째 괄호의 코드를 실행하고 value 값을 day로 바꾼다.

반대로 value가 night가 아니라면 두번째 괄호 안의 코드를 실행하고 value 값을 night로 바꾼다.

 

이를 이용해서 버튼 하나로 야간모드를 끄고 키는 게 가능하다. 이 버튼을 토글이라고 한다.

 

 

---

리팩토링 (중복의 제거)

 

💡 리팩토링이란 ? 코드를 효율적으로 만들고 유지보수 하기 쉽게 개선하는 작업

 

if(document.querySelector('#night_day').value === 'night')

 

위에서 작성한 코드 중 document.querySelector('#night_day') 는 결국 자기 자신을 가리키고 있기 때문에 this로 변경 가능하다. this는 Javascript에서 자기 자신을 가리키는 키워드라고 생각하면 된다. 그리고 굳이 id로 구별할 필요도 없어짐.

 

<input type = "button" value ="night" onclick="
	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';
   } 
">

 

또한 이렇게 작성할 경우 같은 코드를 어디에 붙여넣어도 제대로 작동되는 걸 확인할 수 있음.

id로 구분할시에는 태그마다 id 설정을 해줘야하는 번거로움이 있었는데 그게 사라진 것.

 

📣 코딩을 잘하는 법 중 하나는 중복되는 것들을 끝까지 쫓아가서 제거하는 것이다

 

document.querySelector('body') 이라는 코드가 중복되어서 사용되고 있기 때문에 target 변수에 저장하여 깔끔하게 처리해준다.

 

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

 

이로써 코드가 훨씬 간결해졌다.

target의 값만 변경해주면 아래 코드도 한 번에 바뀌는 셈이기 때문에 훨씬 효율적이다. (변수의 필요성)

---

배열

 

배열을 만드는 방법은 다음과 같다.

 

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

 

[ ] 대괄호 안에 각 값들을 적고 콤마로 구분함.  배열을 선언해서 fruits라는 변수에 저장했다.

 

document.write(fruits[0]);

 

위 코드는 apple을 출력한다 (배열은 0부터 시작함)

 

document.write(fruits.length);

 

배열에 length를 붙이면 배열의 길이를 반환한다.

fruits에는 apple과 banana라는 값이 담겨 있으니 length는 2이다.

 

fruits.push('coconut');

 

push는 배열에 새로운 값을 추가할 때 쓴다.

이 경우 fruits 배열에는 coconut이라는 값이 새로 추가 되었다.

---

배열과 반복문

 

<script>
	var name = ['ellie', 'karen', 'eva'];
</script>
<ul>
    <script>
    	var i = 0;
        while ( i< name.length) {
            document.write('<li><a href="http://coworker.com/'+name[i]+'">'+name[i]+'</a></li>');
            i++;
        }
    </script>
</ul>

 

while문은 ()안의 값이 참일때까지 중괄호{}안의 코드를 반복해서 실행한다.

(링크는 아무거나 막 적어놓은 거니 신경X)

 

<a href="http://coworker.com/'+name[i]+'">

 

이 부분은 주소 뒤에 배열의 각 값을 덧붙인 것이다. 

ex) http://coworker.com/ellie (실제로 존재하지 않는 주소입니다)

 

어떤 웹페이지의 기본 링크에 각 유저의 id를 입력하거나 할 때 유용해보임.

 

반복문을 이용하면 이렇게 각 list 값을 직접 입력하지 않고 작성하는 게 가능하다.

 

---

 

document.querySelectorAll('a');

 

그냥 querySelector은 a 태그 중 가장 위의 하나만 선택하지만 querySelectorAll은 a 태그 전부를 선택함

 

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

 

이것을 변수 alist에 저장하면 alist는 배열처럼 사용가능하다. alist[0], alist[1]로 a 태그들을 출력할 수 있음.

 

 

예를 들어,

 

<a href = "index.html" style ="color: blue;">Web</a>
<a href = "1.html" style ="color: blue;">HTML</a>
<a href = "2.html" style ="color: blue;">CSS</a>
<a href = "3.html" style ="color: blue;">JavaScript</a>

 

이런 a 태그들이 있다고 했을때

 

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

 

이렇게 코드를 작성하면 모든 a 태그들에 powderblue라는 컬러가 적용된다.

 

 

이걸 이용해서 위에서 작성한 야간모드 코드를 보완할 수 있다.

night 모드일때는 링크의 색을 powderblue로 만들고 day 모드에서는 blue로 변경하도록 만들었다.

 

<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';
   
   var alist = document.querySelectorAll('a');
   var i = 0;
   while(i < alist.length){
      alist[i].style.color = 'powderblue';
      i = i + 1;
   }
  } else {
    target.style.backgroundColor = 'white';
    target.style.color = 'black';
    this.value = 'night';
    
    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length){
      alist[i].style.color = 'blue';
      i = i + 1;
   }
  } 
">

 

 

※ 본 글은 네이버 edwith의 [부스트코스] 자바스크립트의 시작 강의를 듣고 작성되었습니다.

 

자바스크립트 문법이 어렵게 느껴져서 기초부터 다시 공부를 시작했는데 알기 쉽게 설명해주셔서 정말 좋네요 👍