JavaScript 언어는 점점 인기를 얻어, 지금은 인터넷에서 가장 유명한 언어 중 하나가 되었다고 해도 과언이 아니다. 다양한 플랫폼과 브라우저에서 이 언어를 사용할 수 있으며, 백엔드 언어를 차별하지도 않는다. 개발에 도움이 되고 개발 시간을 단축시켜 주는 등의 역할을 하는 다양한 라이브러리가 있으며, 그 중 어떤 것은 매우 훌륭하다. 문제는 때때로 이런 라이브러리가 원래 언어에서 제거되어 있어 초보 개발자들이 이 언어에 대한 기초적 이해가 부족하다는 점이다. 이 기사에서는 JavaScript의 기초적 개념을 다루므로 초보자들이 이 언어에 대한 기초 사항을 이해할 수 있다. 어떤 식으로 작동하는지 보여주기 위해 여러 가지 코드 예제를 제시하겠다.
JavaScript 언어는 HTML(Hypertext Markup Language) 페이지에 대화식 작업을 추가할 수 있도록 해주는 클라이언트측 무료 스크립팅 언어이다. 클라이언트측이란 말은 JavaScript 언어가 브라우저에서 작동하고 서버측에서는 사용되지 않는다는 뜻이다. 사용자는 클라이언트측 스크립팅을 통해 서버에서 웹 페이지를 제공하고 브라우저에서 이를 로드한 후 웹 페이지와 대화식 작업을 할 수 있다. 예를 들어, Google Maps에서는 JavaScript 언어를 사용하여 지도를 이동하고 확대 및 축소하는 등, 지도와 상호작용할 수 있게 한다. JavaScript 언어를 사용하지 않는 경우, 물론 웹 페이지에서 Adobe Flash 또는 Microsoft® Silverlight와 같은 플러그인을 사용하지 않으면 사용자가 웹 페이지와 상호작용할 때마다 웹 페이지를 새로 고쳐야 한다. JavaScript 언어에서는 플러그인이 필요하지 않다.
JavaScript 언어를 사용하면 페이지가 로드된 후 웹 페이지에서 대화식 작업을 할 수 있기 때문에, 개발자들은 다음과 같은 기능을 위해 일반적으로 JavaScript를 사용한다.
- HTML 요소와 그 값을 동적으로 추가, 편집 및 제거
- 웹 양식을 제출하기 전 유효성 검증
- 다음에 방문할 때를 대비하여 사용자 컴퓨터에 데이터를 저장하고 검색하기 위한 쿠키 작성
시작하기 전에 JavaScript 언어에 대해 알아야 할 다음 몇 가지 기초적인 사항이 있다.
- HTML 파일에 JavaScript 코드를 포함하려면 스크립트 태그 내부에 코드를 배치하고
text/javascript유형 속성을 포함해야 한다(목록 1). - 모든 JavaScript 문은 세미콜론으로 끝난다.
- 이 언어는 대/소문자를 구분한다.
- 모든 변수 이름은 문자나 밑줄로 시작해야 한다.
- 주석을 사용하여 스크립트의 특정 행을 식별할 수 있다. 이중 슬래시(//)를 먼저 쓴 다음 주석을 쓴다.
- 주석을 사용하여 스크립트를 주석 처리할 수도 있다. 여러 행의 스크립트를 주석 처리하는 좋은 방법은
/* 여기에 스크립트를 쓰기 */를 사용하는 것이다. 그러면 실행 중에 별표/**/안에 있는 모든 스크립트는 실행되지 않는다.
리스트 1. HTML 파일에 JavaScript 코드를 포함하려면 스크립트 태그와 유형 속성 필요
<script type="text/javascript"></script> |
JavaScript 코드를 지원하지 않는 브라우저에서 JavaScript 코드를 숨기거나 사용자가 지원 기능을 해제한 경우에는 그냥 JavaScript 문 앞뒤에 주석 태그를 사용하면 된다(목록 2).
리스트 2. 주석을 사용하여 JavaScript 코드를 지원하지 않는 브라우저에서 JavaScript 코드 숨기기
<script type="text/javascript"> <!-- Example statement here //--> </script> |
웹 페이지에 JavaScript 코드를 포함하기 위해 가장 흔히 사용하는 방법은 스크립트 태그에 src 속성을 사용하여
외부 JavaScript 파일에서 JavaScript 코드를 로드하는 방법이다(목록 3).
리스트 3. HTML 파일에 외부 JavaScript 파일 포함
<script type="text/javascript" src="path/to/javascript.js"></script> |
다음과 같은 여러 가지 실질적 이유로, JavaScript 코드를 포함하기 위해 가장 일반적으로 사용하는 것이 바로 외부 JavaScript 파일이다.
- HTML 페이지 내부에 코드가 적은 경우 검색 엔진이 웹 사이트를 더 빠르게 크롤링 및 인덱싱할 수 있다.
- JavaScript 코드를 HTML과는 따로 유지하는 것이 더 읽기 좋고, 결국 관리하기도 더 쉽다.
- HTML 코드에 여러 개의 JavaScript 파일을 포함할 수 있으므로, 코드를 더 쉽게 관리할 수 있는 방법인 이미지와 유사하게 웹 서버 상의 다른 폴더 구조로 JavaScript 파일을 분리할 수 있다. 웹 사이트를 손쉽게 관리하기 위한 관건은 항상 읽기 쉽게 구성된 코드이다.
변수는 나중에 검색하거나 새 데이터로 업데이트할 수 있는 데이터를 저장한다. 변수에 저장되는 데이터는 값 또는 표현식일 수 있다. JavaScript 언어에는 세 가지 유형의 표현식이 있는데, 표 1에 설명이 나와 있다.
표 1. JavaScript 표현식
| 표현식 | 설명 |
|---|---|
| Arithmetic | 숫자로 평가 |
| String | 문자열로 평가 |
| Logical | 부울(true 또는 false)로 평가 |
변수에는 로컬과 글로벌의 두 가지 유형이 있다. 로컬 변수는 var 키워드를 사용하고, 글로벌 변수는
var 키워드를 사용하지 않고 선언한다. var 키워드가 있는 변수는 로컬로 간주되는데, 이 변수를
선언하는 장소의 범위를 벗어나면 어디서도 이 변수에 액세스할 수 없기 때문이다. 예를 들어, 어떤 함수의 내에서 로컬 변수를 선언하면(이 기사 끝 부분에서
다룰 내용임) 그 함수 외부에서는 이 변수에 액세스할 수 없으므로, 그 함수에 대한 로컬 변수가 되는 것이다.
반면, 같은 변수라도 var 키워드 없이 선언하면 해당 함수 내부뿐 아니라 전체 스크립트의 어디서든 변수에
액세스할 수 있다.
목록 4는 10의 값이 지정된 num이라는 로컬 변수의 예를 나타낸 것이다.
리스트 4. 로컬 변수 선언
var num = 10; |
스크립트의 다른 지점에 있는 num 변수의 값에 액세스하려면 목록 5에 나타낸 것처럼 이름으로 변수를 참조할 뿐이다.
리스트 5. 변수의 값 액세스
document.write("The value of num is: "+ num);
|
이 문의 결과는 "The value of num is 10"이다. document.write 함수는 웹 페이지에 데이터를 쓰는 역할을
한다. 본 기사의 나머지 부분에서는 이 함수를 사용하여 웹 페이지에 예제 코드를 쓸 것이다.
변수에 산술 연산식을 저장하려면 목록 6에 표시된 것처럼 단순히 계산된 값에 변수를 지정하면 된다. 변수에 저장되는 것은 계산 자체가 아니라 계산 결과다. 따라서 결과는 다시 한 번 "The value of num is: 10"이 된다.
리스트 6. 산술 연산식 저장
var num = (5 + 5);
document.write("The value of num is: "+ num);
|
변수의 값을 변경하려면 변수에 지정한 이름을 기준으로 변수를 참조하고 = 기호를 사용하여 변수에 새 값을 지정한다(목록 7). 이때 차이점은
변수가 이미 선언되었기 때문에 var 키워드를 사용할 필요가 없다는 점이다.
리스트 7. 기존 변수의 값 변경
var num = 10;
document.write("The value of num is: "+ num);
// Update the value of num to 15
num = 15;
document.write("The new value of num is: "+ num);
|
이 스크립트의 결과는 "The value of num is: 10" 다음에 "The new value of num is: 15"가 출력된다.
이 섹션에서는 변수에 대한 설명 외에도 다음 주제인 연산자도 소개했다. 변수에 값을 지정하는 데 사용했던 등호(=)는 할당 연산자이고, 5 + 5를 추가하는 데 사용했던 덧셈 기호(+)는 산술 연산자이다. 다음 섹션에서는 JavaScript 언어에서 사용 가능한 모든 연산자와 그 사용 방법에 대해 설명한다.
JavaScript 언어에서 어떤 연산을 수행할 때 연산자가 필요하다. 연산에는 덧셈, 뺄셈, 비교 등이 포함된다. JavaScript 언어에는 다음 4가지 유형의 연산자가 있다.
- 산술
- 할당
- 비교
- 논리
산술 연산자는 덧셈, 뺄셈, 곱셈, 나눗셈 등의 기본적인 수학적 연산을 수행한다. 표 2에는 JavaScript 언어에서 사용 가능한 모든 산술 연산자와 그에 대한 설명이 나와 있다.
표 2. 산술 연산자
| 연산자 | 설명 |
|---|---|
| + | 덧셈 |
| - | 뺄셈 |
| * | 곱셈 |
| / | 나눗셈 |
| % | 모듈러스(나머지 찾기) |
| ++ | 증가 |
| -- | 감소 |
산술 연산자는 기본적인 수학적 연산을 수행하는 반면, 할당 연산자는 JavaScript 변수에 값을 지정한다. 이전 섹션에서 변수에 값을 지정할 때 가장 일반적인 할당 연산자를 보았다. 표 3에는 JavaScript 언어에서 사용 가능한 모든 할당 연산자와 그에 대한 설명이 나와 있다.
표 3. 할당 연산자
| 연산자 | 설명 |
|---|---|
| = | 같음 |
| += | 변수에 덧셈 값 지정 |
| -= | 변수에 뺄셈 값 지정 |
| *= | 변수에 곱셈 값 지정 |
| /= | 변수에 나눗셈 값 지정 |
| %= | 변수에 모듈로 값 지정 |
= 기호를 사용하여 변수에 값과 표현식을 지정하는 방법은 이미 살펴봤지만, 약간 더 헷갈릴 수 있는 연산자의 사용 방법을 보여주겠다. 변수에 덧셈 값을 지정하는 것이 처음에는 이상한 개념일 수 있겠지만, 실제로는 무척 간단하다(목록 8).
리스트 8. 변수에 덧셈 값 지정
var num = 10;
document.write("The value of num is: "+ num);
// Update the value of num to 15
num += 5;
document.write("The new value of num is: "+ num);
|
이 스크립트의 결과는 "The value of num is: 10" 다음에 "The new value of num is: 15"가 출력된다. 이 스크립트의 연산자가 변수에 덧셈 값을 지정하는 것을 볼 수 있다. 이는 목록 9에 표시된 스크립트를 단축 형태로 쓸 수 있는 방법이다.
리스트 9. 더 긴 스크립트로 변수에 덧셈 값을 지정하는 방법
var num = 10;
document.write("The value of num is: "+ num);
// Update the value of num to 15
num = (num + 5);
document.write("The new value of num is: "+ num);
|
비교 연산자는 변수 또는 그 값 사이의 관계를 결정한다. 어떤 문이 true인지 false인지 평가하기 위해 변수나 변수의 값을 비교하는 논리를 작성하려면 조건문 내에 비교 연산자를 사용한다. 표 4에는 JavaScript 언어에서 사용 가능한 모든 비교 연산자와 그에 대한 설명이 나와 있다.
표 4. 비교 연산자
| 연산자 | 설명 |
|---|---|
| == | 같음 |
| === | 값 및 오브젝트 유형이 같음 |
| != | 같지 않음 |
| > | 보다 큼 |
| < | 보다 작음 |
| >= | 크거나 같음 |
| <= | 크거나 작음 |
변수와 값을 비교하는 것은 어떤 종류의 논리를 작성할 때 있어서도 기본적인 사항이다. 목록 10의 예제는 같음 비교 연산자(==)를 사용하여 10이 1과 같은지 판단하는 방법을 나타낸 것이다.
리스트 10. 비교 연산자 사용
document.write(10 == 1); |
논리 연산자는 일반적으로 비교 연산자를 결합하기 위한 조건문에 사용된다. 표 5에는 JavaScript 언어에서 사용 가능한 모든 논리 연산자와 그에 대한 설명이 나와 있다.
표 5. 논리 연산자
| 연산자 | 설명 |
|---|---|
| && | AND |
| || | OR |
| ! | NOT |
변수와 연산자에 대해서는 이미 알아보았으므로, 간단한 변수보다 저장 공간이 약간 더 많은 것을 작성하는 방법을 학습할 차례다.
배열은 변수와 비슷하지만, 하나의 이름으로 여러 개의 값과 표현식을 가질 수 있다는 것이 차이점이다. 한 변수에 여러 개의 값을 저장한다는 점 때문에 배열이 매우 유용한 것이다. JavaScript 배열에 저장할 수 있는 데이터의 양 또는 유형에는 제한이 없으며, 스크립트에서 배열을 선언한 후 배열에 있는 항목의 어떤 값이든 배열의 범위 내에만 있다면 언제든 그 값에 액세스할 수 있다. JavaScript 언어에서는 다른 배열을 포함한 어떤 데이터 유형도 보유할 수 있지만, 대부분의 경우 임의의 한 배열에 유사한 데이터를 저장하고 배열에 포함된 항목과 관련된 이름을 배열에 지정하는 것이 일반적이다. 목록 11에는 유사한 데이터를 저장하기 위해 별도로 두 개의 배열을 사용하는 예제가 나와 있다.
리스트 11. 한 배열에 유사한 값 저장
var colors = new Array("orange", "blue", "red", "brown");
var shapes = new Array("circle", "square", "triangle", "pentagon");
|
여기서 알 수 있는 바와 같이, 한 배열에 이들 항목을 전부 저장할 수도 있겠지만, 이는 논리적이지 못하며 해당 배열에 어떤 데이터가 있는지 식별하는 것과 같이, 이후에 스크립트에서 문제점의 원인이 될 수 있다.
한 배열에 있는 값에 액세스하기는 쉽지만, 여기에 함정이 있다. 배열은 항상 1이 아니라 0의 ID로 시작하는데, 처음 시작할 때는 혼동을 일으킬 수 있다. 예를 들어, 0, 1, 2, 3 등과 같이 ID가 0부터 증가하기 때문이다. 배열 항목에 액세스하려면 배열에 있는 항목의 위치를 참조하는 ID를 사용해야 한다(목록 12).
리스트 12. 한 배열에 유사한 값 저장
var colors = new Array("orange", "blue", "red", "brown");
document.write("Orange: "+ colors[0]);
document.write("Blue: "+ colors[1]);
document.write("Red: "+ colors[2]);
document.write("Brown: "+ colors[3]);
|
또한, 앞서 배열에 있는 항목에 액세스한 것과 똑같이, 배열에서 어떤 위치에 값을 지정하거나 배열에 있는 항목의 값을 업데이트할 수도 있다(목록 13).
리스트 13. 배열에 있는 특정 위치에 값 지정
var colors = new Array();
colors[0] = "orange";
colors[1] = "blue";
colors[2] = "red";
colors[3] = "brown";
document.write("Blue: "+ colors[1]);
// Update blue to purple
colors[1] = "purple";
document.write("Purple: "+ colors[1]);
|
이제 변수, 연산자 및 배열에 대해 잘 이해했을 것이다. 다음으로, 배운 내용을 실천에 옮겨 논리 작성을 시작해보자.
조건문은 스크립팅 또는 프로그래밍 언어에서 어떤 유형이든 논리를 작성하기 위한 핵심 요소이며, JavaScript 언어도 예외가 아니다. 조건문은 스크립트로 작성하는 조건을 바탕으로 어떤 조치를 취할지 결정하는 역할을 한다. JavaScript 언어에서는 네 가지 방법으로 조건문을 쓸 수 있는데, 표 6에 설명이 나와 있다.
표 6. 조건문
| 문 | 설명 |
|---|---|
| if | 특정 조건이 참인 경우 스크립트를 실행하는 데 사용됨 |
| if...else | 특정 조건이 참인 경우 한 스크립트를 실행하고 거짓인 경우 다른 스크립트를 실행하는 데 사용됨 |
| if...else if...else | 무제한의 조건 중 하나가 참인 경우 한 스크립트를 실행하고 모든 조건이 거짓인 경우 다른 스크립트를 실행하는 데 사용됨 |
| switch | 많은 스크립트 중 하나를 실행하는 데 사용됨 |
조건이 참인 경우에만 스크립트를 실행하려는 경우 if 문을 사용한다. 목록 14는 비교 연산자와 함께
if 문을 사용하여 조건이 참인 경우 스크립트를 실행하는 방법을 나타낸 것이다.
리스트 14.
if 문 사용
var num = 10;
if(num == 5)
{
document.write("num is equal to 5");
}
|
목록 15에 표시된 것처럼, 어떤 조건이 참인 경우 한 스크립트를 실행하고 거짓인 경우 다른 스크립트를 실행하려는 경우 if...else
문을 사용한다.
리스트 15.
if...else 문 사용
var num = 10;
if(num == 5)
{
document.write("num is equal to 5");
}
else
{
document.write("num is NOT equal to 5, num is: "+ num);
}
|
목록 16에 표시된 것처럼, 다른 조건을 바탕으로 실행해야 하는 다른 스크립트가 있는 경우 if...else if...else 문을
사용한다.
리스트 16.
if...else if...else 문 사용
var num = 10;
if(num == 5)
{
document.write("num is equal to 5");
}
else if(num == 10)
{
document.write("num is equal to 10");
}
else
{
document.write("num is: "+ num);
}
|
Switch 문은 변수의 값이 다른 값보다 크거나 작은지 판단하는 데 사용할 수 없다는 점에서 if
문과는 다르다. 목록 17은 switch 문을 사용하여 실행할 스크립트가 무엇인지 판단하는 것이 적절한 시점을 보여주는 예제이다.
리스트 17. Switch 문 사용
var num = 10;
switch(num)
{
case 5:
document.write("num is equal to 5");
break;
case 10:
document.write("num is equal to 10");
break;
default:
document.write("num is: "+ num);
}
|
목록 17에서 case 절,
break 문 및
default 절의 사용법을 알았을 것이다. 이런 절과 문은 switch 문에 매우 중요하다.
case 절은 switch의 값이 case 절에 사용되는 데이터의
값과 같은지 판단한다. break 문은 switch 문이 문의 나머지 부분을 실행하지 못하게
중단 또는 중지한다. default 문은 case 문 중 어떤 것도 실행되지 않거나 실행되는
case 문에 break 문이 없는 경우 기본적으로 실행되는 스크립트를 식별한다. 예를 들어, 목록 18은
실행되는 case 문에 break 문이 사용되지 않는 경우 복수의 case 문과
default 문을 실행할 수 있는 방법을 나타낸 것이다.
리스트 18. Break를 제외하여 여러 행의 코드 실행
var num = 10;
switch(num)
{
case 5:
document.write("num is equal to 5");
break;
case 10:
document.write("num is equal to 10");
default:
document.write("num is: "+ num);
}
|
이 스크립트의 결과는 "num is equal to 10"이 나온 다음 "num is: 10"이 나온다. 이를 때로는 switch fall-through라고 한다.
이 섹션의 시작 부분에서 언급한 바와 같이, 조건문은 어떤 스크립팅 또는 프로그래밍 언어에서든 모든 논리의 핵심 요소이지만, 함수가 없으면 뒤죽박죽인 코드에 불과하다.
함수는 여러 가지 이유에서 유용한 것이다. 함수는 그 함수에 대한 호출 또는 이벤트에 의해서만 실행되는 스크립트를 위한 컨테이너이다. 따라서 브라우저에서 웹 페이지에 포함된 스크립트를 처음 로드하여 실행할 때는 함수가 실행되지 않는다. 함수의 목적은 스크립트를 실행할 수 있도록 해주는 태스크가 있는 스크립트를 포함하고 그 태스크를 언제든 실행하는 것이다.
함수를 구성하기는 쉽다. 함수는 function이라는 단어로 시작되고, 그 뒤에 공백과 함수의 이름이 뒤따라
나온다. 함수의 이름으로는 어떤 것이든 선택할 수 있지만, 함수가 수행하는 태스크와 관계가 있는 이름으로 선택하는 것이 중요하다. 목록 19에서는 기존 변수의
값을 변경하는 함수의 예제를 보여준다.
리스트 19. 간단한 함수 구성
var num = 10;
function changeVariableValue()
{
num = 11;
}
changeVariableValue();
document.write("num is: "+ num);
|
목록 19의 예제에서는 함수를 구성하는 방법을 보여줄 뿐 아니라, 함수를 호출하고 변수의 값을 변경하는 방법도 보여준다. 함수와 마찬가지로, 변수도 주 스크립트의 범위 내에서 선언되기 때문에 이 케이스의 변수 값을 변경할 수 있으므로, 함수가 변수를 인식하는 것이다. 하지만, 함수 내에서 변수가 선언되는 경우 함수 밖에서는 이 변수에 액세스할 수 없다.
함수는 함수 매개변수를 통해 데이터에 액세스할 수 있는 능력도 있다. 함수에는 하나 이상의 매개변수가 있을 수 있고, 함수 호출에는 함수 매개변수의 수를 바탕으로 하나 이상의 인수가 있을 수 있다. 매개변수와 인수를 혼동하는 경우가 많다. 매개변수는 함수 정의의 일부이고, 인수는 함수 호출 시 사용되는 표현식이다. 목록 20에서는 매개변수가 있는 함수와 인수를 포함한 함수 호출의 예제를 보여준다.
리스트 20. 함수 매개변수 사용
var num = 10;
function increase(_num)
{
_num++;
}
increase(num);
document.write("num is: "+ num);
|
이 예제에 나타낸 함수는 함수로 전달되는 인수의 값을 증가시킨다. 이 케이스의 인수는 이미 선언한 변수이다. 함수에 인수로 전달함으로써 인수의 값을 11로 증가시킨다.
Return 문 역시 함수에서 흔히 사용된다. Return 문은 함수에서 스크립트를 실행한 후 값을 리턴한다. 예를 들어, 함수에서 리턴되는 값을 변수에 지정할 수 있다. 목록 21은 스크립트를 실행한 후 함수에서 값을 리턴하는 방법을 보여주는 예제이다.
리스트 21. 함수에서 return 문 사용
function add(_num1, _num2)
{
return _num1+_num2;
}
var num = add(10, 10);
document.write("num is: "+ num);
|
이 스크립트의 결과는 "num is: 20"이다. 이 함수의 이점은 목록 20에서 보는 바와 같이 함수로 전달하는 두 개의 숫자를 추가하고, 항상 같은 변수의 값을 변경하기보다는 임의의 변수에 지정될 수 있는 값을 리턴할 수 있다는 것이다.
앞서 살펴본 바와 같이, 배열이 재사용 가능한 많은 데이터를 저장하는 훌륭한 방법일 수 있지만, 그건 단지 시작점에 불과하다. for 및
while 루프는 이런 배열을 반복하고 배열의 값에 액세스하고 그 값으로 스크립트를 실행하는 기능을 제공한다.
JavaScript 언어에서 가장 흔한 루프 유형은
for 루프이다. for 루프는 보통 숫자 값이 지정되는 변수로 구성된 다음, 그 변수를
비교 연산자와 함께 사용하여 다른 값과 비교하고, 마지막으로 숫자 값이 증가 또는 감소된다. for 루프에서의 비교는 일반적으로
초기 변수의 숫자 값이 다른 숫자 값보다 작은지 또는 큰지 판단한다. 그런 다음, 조건이 참인 기간 동안 루프가 실행되고 조건이 거짓으로 평가될 때까지
변수가 증가 또는 감소된다. 목록 22는 숫자 값이 배열의 길이보다 작은 동안 실행되는 for 루프의 작성 방법을 보여주는 예제이다.
리스트 22. For 루프 구성 및 배열 반복
var colors = new Array("orange", "blue", "red", "brown");
for(var i=0; i<colors.length; i++)
{
document.write("The color is: "+ colors[i] +"<br/>");
}
|
배열의 길이 속성은 배열에 있는 항목 수와 같은 숫자 값을 제공한다. 여기서도, 배열의 ID가 0부터 시작된다는 점에 주의해야 한다. 따라서 한 배열에 4개의 항목이 있는 경우 배열의 길이는 4지만, 배열의 인덱스는 0, 1, 2, 3이며 4는 없다는 점에 주의하자.
또 다른 유형의 루프는 while 루프이다. 이 루프는 for 루프보다 더 빠르게 실행되지만,
어떤 조건이 참인 동안 스크립트를 실행하는 것처럼 배열을 반복하는 것 이외의 경우에 적절하다. 목록 23은 숫자 변수가 10보다 작은 동안 스크립트를 실행하는
while 루프를 쓰는 방법을 나타낸 것이다.
리스트 23. While 루프 구성
var i = 0;
while(i<10)
{
document.write(i +"<br/>");
i++;
}
|
while 루프에 있는 스크립트에는 while 루프의 조건이 거짓인 동안 숫자 변수를
반복하는 행이 포함된다. 이 행이 없으면 무한 루프가 된다.
이론의 여지는 있지만, JavaScript 언어는 가장 인기 있는 언어 중 하나이며 그 이유를 이제는 알 수 있을 것이다. 간단하지만 다양한 기능이 있는 이 스크립팅 언어는 매우 많은 가능성을 내포하고 있다. 웹 사이트 방문자가 웹 페이지 다운로드 후 이 페이지와 상호작용할 수 있도록 하는 도구를 이 언어에서 제공한다는 사실이 매우 중요하다. 본 기사는 JavaScript 언어의 기초를 이해하기 위한 토대를 제공하며, 이제는 JavaScript 라이브러리의 작동 방식과 이런 라이브러리를 사용하여 웹 페이지에 대한 클라이언트측 논리를 작성하는 프로세스를 손쉽게 진행할 수 있는 방법을 더 쉽게 이해할 수 있을 것이다. 다음 단계는 이런 개념을 실제로 적용하고 JavaScript 오브젝트도 탐색해보기 시작하는 것이다.
교육
- "JavaScript and the Document Object
Model"(developerWorks, 2002년 7월)에 대해 자세히 알아보자.
- "Crossing borders: JavaScript의
특징"(developerWorks, 2006년 12월)을 읽어보자.
-
Dev Guru는 JavaScript 언어에 대한 종합 안내서를 제공한다.
- Douglas Crockford가 쓴 "Classical Inheritance in
JavaScript"를 읽어보면 JavaScript 언어에 대해 더욱 깊이 이해할 수 있다.
-
웹 개발 영역: developerWorks 웹 개발 영역은 다양한 웹 기반 솔루션 관련 기사를 전문적으로 다룬다.
제품 및 기술
- JavaScript 언어의 기초를 이해한 후, jQuery
라이브러리를 활용하면 개발 시간 단축에 큰 도움이 된다.
토론
- 지금 developerWorks 프로파일을 작성하고 JavaScript에 대한 관심목록을 설정해 보자. developerWorks 커뮤니티에서 최신 정보를 확인하자.
- 웹 개발에 관심이 있는 다른 developerWorks 멤버를 찾아보자.
- 자신의 지식을 공유하자. 웹 주제를 다루는 developerWorks 그룹에 참여하자.
- Roland Barcia는 자신의 블로그에서 Web 2.0 및 미들웨어에 대해 설명했다.
- developerWorks의 멤버들이 공유하고
있는 웹 주제에 대한 책갈피를 살펴보자.
- 빠른 해답: Web 2.0 Apps forum을 방문하십시오.
- 빠른 해답: Ajax forum을 방문하십시오.

Kris Hadlock은 1996년부터 계약직 웹 개발자 및 설계자로 일했다. 그는 SPIN Magazine, IKEA, United Airlines, JP Morgan Chase, GoDaddy Software 및 Fire Mountain Gems와 같은 회사의 프로젝트에 참여한 경험이 있다. Kris는 Ajax for Web Application Developers(Sams) 및 The ActionScript Migration Guide(New Riders)의 저자일 뿐 아니라, Peachpit.com, InformIT.com,Practical Web Design 매거진을 포함한 다양한 웹 사이트와 설계 관련 잡지의 기사를 쓰고 칼럼니스트로 활동 중이기도 하다. 그 밖에도, Kris는 양식과 함수의 융합을 전문으로 하는 웹 디자인 및 소프트웨어 개발 스튜디오인 www.studiosedition.com의 창립자이다