JS Bin

오늘은 자바스크립트 기초를 정리해 보겠습니다.

누구나 알고 쓰지만 매번 찾아 보게 되는 내용으로 정리해 볼려고 합니다. 조금은 개략적인 내용입니다.

1. 코드 작성 준비

자바스크립트 코드는 (X)HTML의 <head>안의 <script> 태그 안에 작성하면 됩니다.

<!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>

혹은 <script> 태그의 src 속성을 사용하여 외부의 js 파일을 인클루드 할 수 있습니다.

<!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>

여기서 중요한점은 다음과 같은 방법으로 작성을 하면 해당 스크립트가 작동하지 않습니다.

<script type="text/javascript" src="myjs.js"/>

왜일까요? XML공부를 하다보면 값이 없는 것을 표현하는 방법으로는 <script></script> 나 <script/> 둘다 같은 표현 방법인데요.

XHTML strict의 DTD를 한번 봐볼까요

<!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'
  >

script에는 PCDATA(문자열)이 들어가야만 하는군요. 일반적으로 그냥 닫을 수 있는 녀석들은 어떻게 선언되어있는지 볼까요?

<!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>

img, br, hr같은 태그들은 기본적으로 EMPTY속성입니다. 값이 존재할수가 없군요. 속성만을 가질 수 밖에 없는 슬픈 녀석들입니다.

위의 태그들은 다음과 같이 바로 닫아 써도 됩니다.

 <img src="image.jpg" alt="이미지"/>

2. 세미콜론의 사용 여부

자바스크립트는 컴파일되어 실행되는 언어가 아닌 각 브라우저의 인터프리터들이 한줄단위로 실행하는 언어입니다.

정확하게는 하나의 명령문 단위로 실행이 되며 한줄에 하나의 명령이 존재한다면 세미콜론을 사용하지 않아도 사용에 아무런 문제가 없습니다.

var value = 'Hello World!'
alert(vaule)

하지만 위의 명령을 한줄에 표현할려면 세미콜론을 사용하여야 합니다.

var value = 'Hello World!'; alert(vaule);

작동한다는것에 연연하지 말고 각 명령문이 끝날때마다 세미콜론을 붙여주는 것이 좋겠네요.

var value = 'Hello World!';
alert(vaule);

3. 주석

자바스크립트에서는 다음과 같은 주석을 사용할 수 있습니다.

// 이것은 한줄만 주석으로 지정 할 수 있습니다.

/* 이것은 여러줄을
주석으로
사용할 수 있습니다.*/

<!-- 이것은 한줄만 주석으로 사용할 수 있습니다. HTML 주석과 달리 종료 구문이 없습니다.

4. 변수

변수(Variables)는 말그대로 "변하는 수" 입니다. 어떤 변수를 생성하고 그 변수에 특정한 값을 할당 할 수 있습니다.

자바스크립트에서는 이 변수의 선언을 다음과 같이 합니다.

var number;
var str;

다음과 같이 한번에 선언할 수도 있습니다.

var number, str

선언한 변수에 다음과 같은 방법으로 값을 할당해 봅시다.

number = 12;
str = 'Hello World!';

다음과 같이 선언과 동시에 값을 할당 할 수도 있습니다.

var number = 12;
var str = 'Hello World!';

자바스크립트의 변수는 대소문자를 구별합니다.

또한 자바스크립트의 변수는 변수에 형 지정을 하지 않습니다. 어떤 형태의 값도 들어갈 수 있고 중간에 형이 바뀔수도 있습니다.

var res = '문자열';
res = 27;

위와 같은 경우도 아무런 문제가 없습니다.

5. 문자열

다음과 같이 문자열 변수를 선언할 수 있습니다.

var str = "Hello";
var str = 'World';

보시면 아시겠지만 큰따옴표와 작은 따옴표가 모두 동일하게 사용됩니다.
위의 두가지는 동일한 결과를 가져옵니다.

문자열중에 또 따옴표를 사용할려면 다음과 같은 방법이 있습니다.

var str = "Hello \"eye\"";
var str = 'Hello "eye"';
var str = "Hello 'eye'";

위에서 알 수 있듯이 큰따옴표 작은 따옴표를 필요에 따라 사용해도 됩니다. 또는 이스케이프 문자(\)를 사용하여 표현 할 수 있습니다.

6. 숫자

자바스크립트에서는 양/음수 및 소수를 포함한 어떤 숫자라도 자유롭게 사용할 수 있습니다.

var num = 12;
var num = -12;
var num = 12.34;
var pi = 3.14253777777777;

7. 참거짓

다음과 같이 Boolean 값을 표현할 수 있습니다.

var isTrue = true;
var isTrue = false;
var isTrue = "true";

3번째의 따옴표로 묶여있는 true는 참이 아닌 문자열 true이겠죠.

8. 배열

자바스크립트의 배열은 어떻게 보면 매우 편리하고 어떻게 보면 정말 개판입니다;;

다음과 같이 생성자를 이용하여 배열을 생성할 수 있습니다.

var fruits = new Array(4); // 크기가 4인 배열
var fruits = new Array(); // 크기를 알 수 없는 배열
var fruits = new Array('apple', 'tomato', 'melon', 'strawberry');

또는 다음과 같은 방법으로 직접 생성할수도 있습니다.

var fruits = ['apple', 'tomato', 'melon', 'strawberry'];

다음과 같이 값을 입력할 수 있습니다.

fruits[0] = 'apple';
fruit['tomato'] = 'tomato';

신기하게도 배열의 크기를 지정하지 않고도 얼마든지 마음껏 값을 집어넣을 수 있고, 크기를 4로 선언했더라도 그 이상의 값을 넣을 수 있습니다.

자동으로 배열의 크기가 확장됩니다.

또한 숫자형 인덱스가 아닌 위의 tomato와 같은 문자형 인덱스도 사용할 수 있습니다.

물론 내부에선 숫자가 붙어 사용됩니다. Thanks to AccessDenied

위의 예제에서 볼수 있는 문자로 인덱스명을 붙일 경우에는 배열이 아닌 Array객체의 Property로 들어가게 됩니다.

 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 출력됨

위의 예제에서 알 수 있듯이 인덱스가 문자열일 경우에는 배열로 들어가지 않고 객체의 Property로 들어가게 되며 숫자일 경우에는 따옴표의 여부와 상관없이 배열값으로 들어가게 됩니다.

9. 조건문

자바스크립트의 조건문은 어느 프로그래밍 언어와 동일합니다.

if (condition) {
  명령문들;
}

이상의 값을 넣을 수 있습니다.

condition에서 사용될 수 있는 비교 연산자로는 크다(>), 작다(<), 크거나같다(>=), 작거나같다(<=), 같다(==)가 있습니다.

하지만 한가지 다른것이 있습니다. 같다(==)와 별개로 완전히같다(===)가 있습니다.

Equal(=)를 3개를 사용하며 값의 타입까지 같을 경우 참을 반환합니다.

자바스크립트의 너그러운 문법에 의해 다음과 같은 상황이 일어납니다.

var value = '1';

if(value == 1) alert('running'); // 실행된다.
if(value === 1) alert('not running'); // 실행되지 않는다.

value에는 문자열 "1"을 담았지만 숫자 1과 비교를 한다. ==를 사용하면 참이 나오지만 ===를 사용하면 거짓이된다.

실제로 prototype.js 의 소스를 보다 보면 다음과 같은 문구가 나온다.

if (value === false || value === null) {}

Boolean이나 null값 체크를 타입까지 정확하게 확인하는것을 알 수 있다. 알아두자.

10. 함수

다른 프로그래밍 언어와 동일한 함수이다. 다음과 같은 형식을 갖는다.

function 함수이름(인수들) {
  명령문들;
}

자바스크립트는 신기하게도 함수도 변수에 담을 수 있다. 정확하게는 Pointer의 개념일 것이다.