JavaScript #2
연산자
대입 연산자
- =: 우항의 값을 좌항의 변수에 대입
비교 연산자
1. ==: 동등 연산자. 좌항과 우항을 비교해 값이 서로 같으면 True, 다르면 False
2. ===: 일치 연산자. 좌항과 우항이 모든 부분에서 ‘정확하게 같으면’ True, 아니면 False
예를 들어, alert(1==’1’)은 True라고 출력되지만 alert(1===’1’)은 False가 출력. 같은 수를 표현하고 있지만 데이터 형이 다르기 때문에 일치 연산자에서는 False를 반환.
일반적으로 동등 연산자(==) 보다 일치 연산자(===)을 사용할 것을 권함. 다음 예시를 보자.
참고로 null은 값이 없음을 명시적으로 표시한 것이고, undefined는 값이 없는 상태이다.
3. !=: 동등 연산자와 반대 결과를 출력한다.
4. !==: 일치 연산자와 반대 결과를 출력한다.
5. >: 좌항이 우항보다 크면 참, 그렇지 않다면 거짓이다. ‘<’는 >의 반대이다.
6. >=: 좌항이 우항보다 크거나 같으면 참, 그렇지 않다면 거짓이다. 마찬가지로 ‘<=’는 반대이다.
7. &&: 좌항과 우항이 모두 참일 때 참이 된다. (AND)
8. ||: 좌항과 우항 중 하나가 참일 때 참이 된다. (OR)
9. !: ‘!’는 부정을 의미한다. 즉, True 혹은 False를 역전시키는 연산자이다. (NOT)
조건문
1. If: if 뒤의 괄호에 조건이 오고, True라면 조건이 담겨진 괄호 다음의 중괄호 구문이 실행됨
2. Else: if 문 안에 담긴 조건문의 값이 False일 때 중괄호 안의 코드가 실행된다.
3. Else if: 이전 if문의 판별식의 결과가 False일 때 다시 한 번 조건을 걸어 참과 거짓을 판결해 참일 때 중괄호 안의 코드를 실행한다.
조건문이 참과 거짓을 판별할 때 판별식의 결과가 ‘0’이면 거짓, ‘0’이 아닌 거의 모든 값을 참으로 인식한다. 0 이외에 False로 간주되는 것들에는 ’’(빈 문자열, undefined, 값이 할당되지 않은 변수, null, NaN이 있다.
반복문
1. While: 조건문을 만족시키는 동안 중괄호 안의 코드를 계속 반복한다.
2. For: 기본 구조는 for(초기문;조건문;증감식){ 코드 } 이다. 초기문은 for문에 최초에 진입할 때 한 번만 실행된다. 이후 조건문을 판별하고 참이면 코드를 모두 실행하고, 증감문 실행 후 다시 판별, 참이면 다시 코드를 실행하며 거짓이면 for문을 탈출한다.
3. Break: 반복문을 탈출하는 역할을 한다.
4. Continue: 반복문의 처음으로 이동한다. 반복문 안의 코드를 즉시 중단하고 반복은 지속되게 할 때 사용한다. for문의 경우는 증감식으로, while문의 경우 판별식으로 이동한다.
함수
function add( var a, var b ){
alert(a);
alert(b);
return a+b;
}
함수를 정의할 때 function 뒤에 함수 이름(add)를, 소괄호 안에는 전달하는 인자를 써 넣는다. 각각의 인자는 콤마(,)로 구분짓는다. 함수가 호출되면 중괄호 안의 코드(alert(a); alert(b);)를 실행하고 반환값(a+b)를 return 한다.
배열
여러 개의 데이터를 하나의 변수에 담음. 기본 구조는 다음과 같음.
var 배열명 = [‘첫 번째 요소’, ‘두 번째 요소’, …]
첫 번째 요소는 0 번째 인덱스이다. n번째 인덱스에 있는 요소는 n+1번째 요소인 셈. member라는 배열의 n번째 요소를 alert하는 명령은 alert(member[n-1]); 임. n-1을 감싸는 것은 대괄호임에 주의.
배열 요소 추가/제거/정렬
1. Push: 배열의 맨 끝에 원소를 추가
2. Concat: 배열의 맨 끝에 여러 개의 원소를 추가
3. Unshift: 배열의 시작점에 원소를 추가
4. Splice: 배열의 첫 번째 인자에 해당하는 원소부터 두 번째 인자에 해당하는 원소의 숫자만큼 값을 배열로부터 제거한 후 리턴, 세 번째 인자부터 전달된 인자들을 첫 번째 인자의 원소 뒤에 추가.
5. Shift: 배열의 첫 번째 원소를 제거
6. Pop: 배열의 마지막 원소를 제거
7. Sort: 배열을 정렬
8. Reverse: 배열을 역순으로 정렬
객체
var level = {‘BinZIP’:1, ‘Newbie’:1, ‘ZzangHacker’:999};
위와 같이 객체를 선언할 수 있다. BinZIP은 key가 되고, 1은 value에 해당함. 아래와 같이 객체를 만들 수도 있음.
var level = new Object();
level[‘BinZIP’] = 1;
level[‘Newbie’] = 1;
level[‘ZzangHacker’] = 999;
for문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수에 담아서 반복문을 실행. 반복문이 실행될 때 변수 값에 key 값이 순차적으로 할당됨.
객체에는 객체를 담을 수도, 함수를 담을 수도 있음. 아래 코드를 참고.
var grade = {
'list': {'BinZIP':1,'Newbie':1,'ZzangHacker':999},
'show': function(){
for(var name in this.list){
alert(name+':'+this.list[name]);
}
}
};
grade.show();
실행 결과는 다음과 같음.
모듈
객체지향형 프로그래밍이 등장하게 된 배경은 코드의 재활용성을 높이고 유지보수를 쉽게 하기 위해서라고 할 수 있음. 이런 목적을 위해 다양한 기법들이 사용되는데, 그 중 하나가 코드를 여러 개의 파일로 구분하는 것임. 이를 통해서 얻을 수 있는 효과는 다음과 같음.
ð 자주 사용되는 코드를 별도의 파일로 만들어 필요할 때마다 재활용 가능
ð 코드를 개선하면 이를 사용하는 모든 애플리케이션의 동작에 적용
ð 코드 수정 시에 필요한 로직 빠르게 찾을 수 있음
ð 필요한 것만 로드해 메모리 낭비를 줄임
ð 한 번 다운로드 된 모듈은 웹 브라우저에 의해 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽 절약 가능. 이는 웹 브라우저에만 해당되는 장점.
모듈은 라이브러리, C언어 및 다른 여러 언어의 헤더 파일과 비슷한 개념으로 생각할 수 있음. 라이브러리는 잘 정렬된 코드의 집합이라고 생각하면 됨
모듈을 로드하기 위해서는 <head> 범위 안에 다음과 같이 작성해줌.
<script scr=”모듈의 주소”></script>
node.js에서 모듈 로드
모듈을 로드하는 방법은 호스트의 환경에 따라서 달라짐. 아래 그림 참고(출처: 생활코딩 JavaScript 기본 – 객체 – node.js에서의 모듈의 로드)
라이브러리 사용
모듈과 라이브러리를 사용해야 하는 이유를 단적으로 보여주는 예시이다.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input id="execute_btn" type="button" value="execute" />
<script type="text/javascript">
$('#execute_btn').click(function(){
$('#list li').text('coding everybody');
})
</script>
</body>
</html>
위 코드는 유명 라이브러리인 jQuery를 사용해 버튼을 클릭했을 때 ‘Coding Everybody’ 화면의 empty가 있는 자리에 출력하는 예시이다. 동일한 코드를 jQuery 라이브러리를 사용하지 않고 구현한 코드는 다음과 같다.
<!DOCTYPE html>
<html>
<body>
<ul id="list">
<li>empty</li>
<li>empty</li>
<li>empty</li>
<li>empty</li>
</ul>
<input id="execute_btn" type="button" value="execute" />
<script type="text/javascript">
function addEvent(target, eventType,eventHandler, useCapture) {
if (target.addEventListener) { // W3C DOM
target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
} else if (target.attachEvent) { // IE DOM
var r = target.attachEvent("on"+eventType, eventHandler);
}
}
function clickHandler(event) {
var nav = document.getElementById('list');
for(var i = 0; i < nav.childNodes.length; i++) {
var child = nav.childNodes[i];
if(child.nodeType==3)
continue;
child.innerText = 'Coding everybody';
}
}
addEvent(document.getElementById('execute_btn'), 'click', clickHandler);
</script>
</body>
</html>
'Programming > Web Programming' 카테고리의 다른 글
| JavaScript Basic #4 (0) | 2017.07.18 |
|---|---|
| JavaScript Basic #3 (0) | 2017.07.16 |
| JavaScript Basic #1 (0) | 2017.07.13 |
| CSS #2 (0) | 2017.07.12 |
| CSS #1 (0) | 2017.07.12 |
