오늘은 자바스크립트 기초를 정리해 보겠습니다.
누구나 알고 쓰지만 매번 찾아 보게 되는 내용으로 정리해 볼려고 합니다. 조금은 개략적인 내용입니다.
1. 코드 작성 준비
자바스크립트 코드는 (X)HTML의 <head>안의 <script> 태그 안에 작성하면 됩니다.
[code]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd“>
<html>
<head>
<script type=”text/javascript”>
// 스크립트가 들어가는 곳
</script>
</head>
<body>
</body>
</html>[/code]
혹은 <script> 태그의 src 속성을 사용하여 외부의 js 파일을 인클루드 할 수 있습니다.
[code]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1.dtd“>
<html>
<head>
<script type=”text/javascript” src=”myjs.js”></script>
</head>
<body>
</body>
</html>[/code]
여기서 중요한점은 다음과 같은 방법으로 작성을 하면 해당 스크립트가 작동하지 않습니다.
[code]<script type=”text/javascript” src=”myjs.js”/>[/code]
왜일까요? XML공부를 하다보면 값이 없는 것을 표현하는 방법으로는 <script></script> 나 <script/> 둘다 같은 표현 방법인데요.
XHTML strict의 DTD를 한번 봐볼까요
[code]<!ELEMENT script (#PCDATA)>
<!ATTLIST script
id ID #IMPLIED
charset %Charset; #IMPLIED
type %ContentType; #REQUIRED
src %URI; #IMPLIED
defer (defer) #IMPLIED
xml:space (preserve) #FIXED ‘preserve’
>[/code]
script에는 PCDATA(문자열)이 들어가야만 하는군요. 일반적으로 그냥 닫을 수 있는 녀석들은 어떻게 선언되어있는지 볼까요?
[code]<!ELEMENT img EMPTY>
<!ATTLIST img
%attrs;
src %URI; #REQUIRED
alt %Text; #REQUIRED
longdesc %URI; #IMPLIED
height %Length; #IMPLIED
width %Length; #IMPLIED
usemap %URI; #IMPLIED
ismap (ismap) #IMPLIED
>
<!ELEMENT br EMPTY> <!– forced line break –>
<!ELEMENT hr EMPTY>[/code]
img, br, hr같은 태그들은 기본적으로 EMPTY속성입니다. 값이 존재할수가 없군요. 속성만을 가질 수 밖에 없는 슬픈 녀석들입니다.
위의 태그들은 다음과 같이 바로 닫아 써도 됩니다.
[code] <img src=”image.jpg” alt=”이미지”/>[/code]
2. 세미콜론의 사용 여부
자바스크립트는 컴파일되어 실행되는 언어가 아닌 각 브라우저의 인터프리터들이 한줄단위로 실행하는 언어입니다.
정확하게는 하나의 명령문 단위로 실행이 되며 한줄에 하나의 명령이 존재한다면 세미콜론을 사용하지 않아도 사용에 아무런 문제가 없습니다.
[code]var value = ‘Hello World!’
alert(vaule)[/code]
하지만 위의 명령을 한줄에 표현할려면 세미콜론을 사용하여야 합니다.
[code]var value = ‘Hello World!’; alert(vaule);[/code]
작동한다는것에 연연하지 말고 각 명령문이 끝날때마다 세미콜론을 붙여주는 것이 좋겠네요.
[code]var value = ‘Hello World!’;
alert(vaule);[/code]
3. 주석
자바스크립트에서는 다음과 같은 주석을 사용할 수 있습니다.
[code]// 이것은 한줄만 주석으로 지정 할 수 있습니다.[/code]
[code]/* 이것은 여러줄을
주석으로
사용할 수 있습니다.*/[/code]
[code]<!– 이것은 한줄만 주석으로 사용할 수 있습니다. HTML 주석과 달리 종료 구문이 없습니다.[/code]
4. 변수
변수(Variables)는 말그대로 “변하는 수” 입니다. 어떤 변수를 생성하고 그 변수에 특정한 값을 할당 할 수 있습니다.
자바스크립트에서는 이 변수의 선언을 다음과 같이 합니다.
[code]var number;
var str;[/code]
다음과 같이 한번에 선언할 수도 있습니다.
[code]var number, str[/code]
선언한 변수에 다음과 같은 방법으로 값을 할당해 봅시다.
[code]number = 12;
str = ‘Hello World!’;[/code]
다음과 같이 선언과 동시에 값을 할당 할 수도 있습니다.
[code]var number = 12;
var str = ‘Hello World!’;[/code]
자바스크립트의 변수는 대소문자를 구별합니다.
또한 자바스크립트의 변수는 변수에 형 지정을 하지 않습니다. 어떤 형태의 값도 들어갈 수 있고 중간에 형이 바뀔수도 있습니다.
[code]var res = ‘문자열’;
res = 27;[/code]
위와 같은 경우도 아무런 문제가 없습니다.
5. 문자열
다음과 같이 문자열 변수를 선언할 수 있습니다.
[code]var str = “Hello”;
var str = ‘World’;[/code]
보시면 아시겠지만 큰따옴표와 작은 따옴표가 모두 동일하게 사용됩니다.
위의 두가지는 동일한 결과를 가져옵니다.
문자열중에 또 따옴표를 사용할려면 다음과 같은 방법이 있습니다.
[code]var str = “Hello \”eye\””;
var str = ‘Hello “eye”‘;
var str = “Hello ‘eye'”;[/code]
위에서 알 수 있듯이 큰따옴표 작은 따옴표를 필요에 따라 사용해도 됩니다. 또는 이스케이프 문자(\)를 사용하여 표현 할 수 있습니다.
6. 숫자
자바스크립트에서는 양/음수 및 소수를 포함한 어떤 숫자라도 자유롭게 사용할 수 있습니다.
[code]var num = 12;
var num = -12;
var num = 12.34;
var pi = 3.14253777777777;[/code]
7. 참거짓
다음과 같이 Boolean 값을 표현할 수 있습니다.
[code]var isTrue = true;
var isTrue = false;
var isTrue = “true”;[/code]
3번째의 따옴표로 묶여있는 true는 참이 아닌 문자열 true이겠죠.
8. 배열
자바스크립트의 배열은 어떻게 보면 매우 편리하고 어떻게 보면 정말 개판입니다;;
다음과 같이 생성자를 이용하여 배열을 생성할 수 있습니다.
[code]var fruits = new Array(4); // 크기가 4인 배열
var fruits = new Array(); // 크기를 알 수 없는 배열
var fruits = new Array(‘apple’, ‘tomato’, ‘melon’, ‘strawberry’);[/code]
또는 다음과 같은 방법으로 직접 생성할수도 있습니다.
[code]var fruits = [‘apple’, ‘tomato’, ‘melon’, ‘strawberry’];[/code]
다음과 같이 값을 입력할 수 있습니다.
[code]fruits[0] = ‘apple’;
fruit[‘tomato’] = ‘tomato’;[/code]
신기하게도 배열의 크기를 지정하지 않고도 얼마든지 마음껏 값을 집어넣을 수 있고, 크기를 4로 선언했더라도 그 이상의 값을 넣을 수 있습니다.
자동으로 배열의 크기가 확장됩니다.
또한 숫자형 인덱스가 아닌 위의 tomato와 같은 문자형 인덱스도 사용할 수 있습니다.
물론 내부에선 숫자가 붙어 사용됩니다. Thanks to AccessDenied
위의 예제에서 볼수 있는 문자로 인덱스명을 붙일 경우에는 배열이 아닌 Array객체의 Property로 들어가게 됩니다.
[code] var fruits = new Array();
fruits[‘tomato’] = ‘red’;
alert(fruits.length); // fruits 배열의 길이는 0
fruits[0] = ‘yellow’;
alert(fruits.length); // fruits 배열의 길이는 1
fruits[‘1’] = ‘green’;
alert(fruits.length); // fruits 배열의 길이는 2
alert(fruits.join(‘,’)); // yellow, green 출력됨[/code]
위의 예제에서 알 수 있듯이 인덱스가 문자열일 경우에는 배열로 들어가지 않고 객체의 Property로 들어가게 되며 숫자일 경우에는 따옴표의 여부와 상관없이 배열값으로 들어가게 됩니다.
9. 조건문
자바스크립트의 조건문은 어느 프로그래밍 언어와 동일합니다.
[code]if (condition) {
명령문들;
}[/code]
이상의 값을 넣을 수 있습니다.
condition에서 사용될 수 있는 비교 연산자로는 크다(>), 작다(<), 크거나같다(>=), 작거나같다(<=), 같다(==)가 있습니다.
하지만 한가지 다른것이 있습니다. 같다(==)와 별개로 완전히같다(===)가 있습니다.
Equal(=)를 3개를 사용하며 값의 타입까지 같을 경우 참을 반환합니다.
자바스크립트의 너그러운 문법에 의해 다음과 같은 상황이 일어납니다.
[code]var value = ‘1’;
if(value == 1) alert(‘running’); // 실행된다.
if(value === 1) alert(‘not running’); // 실행되지 않는다.[/code]
value에는 문자열 “1”을 담았지만 숫자 1과 비교를 한다. ==를 사용하면 참이 나오지만 ===를 사용하면 거짓이된다.
실제로 prototype.js 의 소스를 보다 보면 다음과 같은 문구가 나온다.
[code]if (value === false || value === null) {}[/code]
Boolean이나 null값 체크를 타입까지 정확하게 확인하는것을 알 수 있다. 알아두자.
10. 함수
다른 프로그래밍 언어와 동일한 함수이다. 다음과 같은 형식을 갖는다.
[code]function 함수이름(인수들) {
명령문들;
}[/code]
자바스크립트는 신기하게도 함수도 변수에 담을 수 있다. 정확하게는 Pointer의 개념일 것이다.