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

HTML과 Javascript는 모두 컴퓨터 언어다.

하지만, HTML은 Javascript와는 달리 컴퓨터 프로그래밍 언어는 아니다.

 

프로그램

: 프로그램에는 순서라는 의미가 있고, 프로그래밍은 이러한 순서를 만드는 행위를 말한다.

 

조건문

*토글: 하나의 버튼으로 모드를 바꿔주는 기능을 함. (사전적으로는 1과 0을 반복적으로 되풀이하는 상태의 의미)

 

비교 연산자 ===

: 왼쪽과 오른쪽이 같은지 판단. 같으면 True, 다르면 False (T/F를 합쳐 Boolean이라 한다).

 

var value = document.getElementById(id).value;

value 값 가져오는 방법 (.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'
		}
        ">

예제: 조건문을 활용해 day-night 토글 버튼 만들기

 

리팩토링

: 비효율적이 코드를 효율적으로 만들어 가독성을 높이고 유지보수가 쉽도록 만드는 것. (코드의 기능은 그대로)

 - this 사용하기 (자기 자신을 가리키는 키워드)

<input type="button" value="night" onclick="
		if(this.value==='night'){ // this 키워드
			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'
		}
		">

 예제: 위의 예제 코드 - 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'
		}
		">

예제: 위의 예제 코드 - 변수를 설정해 중복 제거 

 

배열

: 서로 연관된 데이터를 정리해서 담아두는 방법

 

Array.length

Array 인스턴스의 length 속성은 배열의 길이를 반환한다.

 

Array.push

Array 인스턴스의 push 속성은 배열에 새로운 값을 추가해준다.

var fruits = ["apple", "banana"];
document.write(fruits[0]); //배열의 값에 접근하기
document.write(fruits.length); //배열의 길이
fruits.push("coconut"); //배열에 값 추가하기

 

- 생각해보기

배열에서 어떤 값을 삭제하기 위해서는 어떤 코드를 사용하면 될까?

 

Array.remove 배열의 특정 원소를 지운다.

Array.splice 배열의 지우고 싶은 원소의 인덱스를 찾아 지운다.

: array.splice(a(시작 순서)),n(개수)); //array 배열의 a번째 원소부터 n개의 원소를 제거한다.

* 참고: pop은 마지막 요소만 제거해준다.

a = [1, 2, 3, 4]
a.remove(3)

let a = [1, 2, 3, 4]
const idx = a.indexOf(3)
if (idx > -1) a.splice(idx, 1)

 

반복문

- while문, for문

 

- querySelector 함수

var alist=document.querySelectorAll('a'); //모든 a 태그를 배열 형태로 alist에 저장