JavaScript 언어 시작하기

Development/JavaScript 2012. 5. 18. 00:00

JavaScript 언어 시작하기, 파트 1: JavaScript 언어의 기초

Kris Hadlock, 웹개발자/디자이너, Studio Sedition

요약： JavaScript 언어의 기초를 이해하고 싶으십니까? 이 기사에서는 초보자를 위해 기초적인 JavaScript 개념부터 시작해서, 코드 샘플을 통해 어떤 식으로 작동되는지 보여준다

JavaScript 언어는 점점 인기를 얻어, 지금은 인터넷에서 가장 유명한 언어 중 하나가 되었다고 해도 과언이 아니다. 다양한 플랫폼과 브라우저에서 이 언어를 사용할 수 있으며, 백엔드 언어를 차별하지도 않는다. 개발에 도움이 되고 개발 시간을 단축시켜 주는 등의 역할을 하는 다양한 라이브러리가 있으며, 그 중 어떤 것은 매우 훌륭하다. 문제는 때때로 이런 라이브러리가 원래 언어에서 제거되어 있어 초보 개발자들이 이 언어에 대한 기초적 이해가 부족하다는 점이다. 이 기사에서는 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을 방문하십시오.

출처 - http://www.ibm.com/developerworks/kr/library/wa-javascriptstart/

JavaScript 언어 시작하기, Part 2: 이벤트, 쿠키, 타이밍 등

Kris Hadlock, 웹개발자/디자이너, Studio Sedition

요약： JavaScript는 점점 인기를 얻어, 지금은 인터넷에서 가장 널리 사용되는 언어 중 하나가 되었다고 해도 과언이 아닙니다. JavaScript는 크로스 플랫폼 및 크로스 브라우저 환경에서 사용 가능하고 백엔드 언어를 차별하지도 않습니다. 개발에 도움이 되는 다수의 훌륭한 라이브러리를 사용할 수 있지만, 때때로 이런 라이브러리가 원래 언어에서 제거되어 있어 초보 개발자들이 해당 언어에 대한 기초적 이해가 부족한 실정입니다. 시리즈 기사의 Part 2에 해당하는 본 기사에서는 Part 1에 이어 이벤트, try...catch 문, 쿠키 사용 및 타이밍 함수에 대한 기초 사항을 포함하여, JavaScript의 기초를 계속 설명합니다.

"JavaScript 언어 시작하기" 시리즈의 첫 번째 기사에서는 스크립트 태그 작성부터 주석 사용, HTML 문서에 JavaScript 파일 포함, 변수 정의, 연산자 사용, 배열 정의, 조건문 사용, 함수 정의 및 루프 사용까지 다양한 필수 기초 사항을 다루었다. 본 기사에서는 초보자에게 이 언어의 기초적 이해에 도움을 주기 위해 기본적인 JavaScript 언어 개념을 추가로 설명함으로써 이전 기사에서 남겨두었던 주제를 다룬다. 본 기사에서 다루는 기초 사항을 통해 개발자가 사용하는 라이브러리와 어떤 라이브러리를 사용할 필요가 있는지에 관한 의사결정을 하는 방법을 더욱 깊이 이해할 수 있으며, 자체적으로 라이브러리를 작성할 수 있는 길도 모색해본다. 그 방법을 보여주기 위해 관련된 코드 예제가 제시되므로 이를 참고한다.

이벤트

이벤트는 JavaScript 언어로 웹 페이지에 어떤 유형의 대화식 작업이든 추가하기 위한 촉매 역할을 하는 것이다. 모든 HTML 요소에는 JavaScript 코드를 트리거하는 데 사용할 수 있는 연관 이벤트가 있다. 예를 들어, 하나의 입력 필드에 다수의 이벤트가 있을 수 있다. 누군가 입력 필드 안에서 클릭하거나 입력 필드로 탭 이동할 때 JavaScript 코드를 트리거하도록 focus 이벤트를 연관하거나, 포커스된 입력 필드 밖에서 클릭하거나 그 밖으로 탭 이동할 때 JavaScript 코드를 트리거하도록 blur 이벤트를 연관할 수 있다. 이벤트를 연관하고 나면 무궁무진한 가능성이 열린다. 예를 들어, blur 이벤트는 입력 필드에 유효한 데이터가 있는지 검사하는 JavaScript 코드를 트리거할 수 있고, 그런 데이터가 없는 경우에는 인라인 상태에서 메시지가 자동 피드백으로 표시될 수 있다. 다음 코드는 focus 및blur 이벤트를 사용하여 입력 필드에 기본 텍스트를 표시할 수 있는 방법을 보여주는 예제이다.

<input type="text" name="email" value="Enter your email address" 
   onfocus="this.value = '';" onblur="if(this.value == '') 
   this.value = 'Enter your email address';" />

여기서는 입력 필드에 기본값이 포함되어 있지만, 웹 브라우저에서 볼 때 입력 필드에 "Enter your email address"라는 텍스트가 표시된다. 사용자가 필드 내부를 클릭하거나 필드로 탭 이동할 때 이 기본 텍스트가 사라지도록 하려면 focus 이벤트를 사용하고 필드의 값을 빈 문자열로 설정한다. 사용자가 입력 필드 바깥쪽을 클릭하거나 그 밖으로 탭 이동하는 경우에는 blur 이벤트를 사용하여 기본 텍스트를 다시 표시하거나, 그렇지 않으면 사용자 정의 텍스트로 남겨둔다.

모든 HTML 요소에는 해당 요소와 연관된 이벤트가 있다. 표 1에는 가장 일반적인 몇 가지 HTML 요소와 각 요소와 연관된 이벤트가 정리되어 있다.

표 1. 일반적인 요소와 각 요소와 연관된 이벤트

요소	이벤트
`body`	`onload`, `onunload`
`input`	`onfocus`, `onblur`, `onchange`, `onkeydown`, `onkeypress`, `onkeyup`
`form`	`onsubmit`
`img`	`onmouseover`, `onmouseout`, `onclick`

위로

try...catch 및 throw

try...catch 문을 사용하면 브라우저로 오류를 보내거나 사용자 정의 오류를 표시하지 않고 코드에 오류가 있는지 테스트할 수 있다.try...catch 문 내부에 JavaScript 오류가 없으면 진행 중인 JavaScript 코드가 아무 것도 실행되지 않고 브라우저는 자체적으로 오류를 처리하고 표시하는 양식으로 남겨진다. 이 문의 try 부분을 사용하여 JavaScript 코드를 실행한다. catch 부분은 try 부분에서 발생했을 수 있는 오류를 처리한다. 어떤 브라우저에서는 작동하지 않을 수도 있는 코드를 실행할 때 이런 구조를 사용할 수 있다. 이 코드가 try...catch 문 내부에 있다면 코드에서 오류를 리턴하고 catch 부분에서 해당 오류를 처리하는 경우에는 그냥 실행되지 않는다. 사용자가 오류 발생 사실을 알 필요가 있느냐의 여부에 따라, 이 오류가 실제 오류 메시지일 수도 있고 아무런 역할을 하지 못할 수도 있다.

try...catch를 이용한 오류 처리

명령문의 catch 부분에는 오류 오브젝트에 대한 기본 매개변수도 포함되어 있다. 오류 오브젝트는 명령문의 try 부분에서 발생한 오류에 대한 관련 정보를 리턴한다. 오류 오브젝트에는 message와 line이라는 두 개의 특성이 있다. message는 발생한 오류를 정확히 설명하는 텍스트를 제공하고, line은 해당 오류가 발생한 정확한 코드 행을 제공한다. 목록 1은 오류 오브젝트를 사용하여 메시지와 행에 대한 경보를 알리는 try...catch 문의 예제를 나타낸 것이다. 물론, 이 정보는 디버깅 상황에서만 유용하겠지만, 발생한 오류를 처리하기 위해 브라우저에 의존하지 않고 사용자에게 오류에 대한 피드백을 제공하려 할 때 이런 특성이 유용하게 쓰일 수 있다.

목록 1. try...catch 문에서 오류 오브젝트를 사용하여 오류 디버그

	
try
{
   // Attempt to execute code that produces an error here
}
catch(err)
{
   var txt = err.message +'\n';
   txt += err.line;
   alert(txt);
}

throw 문으로 오류 예외 작성

try...catch 생성으로 오류 처리 기능을 제공하지만, throw 문을 사용하여 한 단계 더 나아갈 수 있다. throw 문을 사용하여 일정한 조건을 기준으로 오류 예외를 작성할 수 있고, 이를 통해 정확하고 평이한 영어로 작성되어 사용자에게 더욱 친숙한 오류 메시지를 작성할 수 있는 완벽한 기회가 제공된다. 목록 2에서는 throw 문을 사용하여 try...catch 문의 try 부분에서 어떤 조건을 기준으로 오류 예외를 작성할 수 있는 방법을 간단한 예제로 보여준다.

목록 2. throw 문을 사용하여 오류 예외 작성

	
<script type="text/javascript">
var x=prompt("What type of music is Led Zeppelin?","");
try
{ 
   if(x != 'rock and roll')
   {
   throw "Err1";
   }
}
catch(er)
{
   if(er=="Err1")
   {
   alert("Sorry, you're wrong.");
   }
}
</script>

try, catch 및 throw는 모두 소문자로 쓴다. 대문자를 사용하면 JavaScript 오류가 발생한다.

위로

팝업 상자 작성

JavaScript를 사용하여 여러 가지 유형의 팝업 상자를 작성할 수 있다. 여기서 설명하는 가장 일반적인 유형의 팝업 상자는 경보 상자, 확인 상자 및 프롬프트 상자이다.

경보 상자

대체로 원래 목적으로 사용되지는 않지만, 경보 상자는 페이지 오류, 경고 또는 기타 중요한 메시지를 빠르고 쉽게 표시할 수 있는 방법이다. 요즘은 경보 상자가 JavaScript 코드를 디버그하기 위한 방법으로 가장 흔히 사용되므로 여전히 자신의 위치를 지키고 있다고 말할 수 있을 것이다. 따라서 경보 상자를 원래 목적으로만 사용하는 것이 우수 사례를 따르는 것은 아니다. 또한, Mozilla Firefox, Apple Safari 또는 Google Chrome을 사용하는 경우 단순히 디버깅 목적으로 console.log 파일을 사용할 수 있다. 다른 점은 제쳐놓고서라도 경보가 유력한 대안이고 작업이 올바로 완료되도록 해주는 역할을 한다는 점이 중요한 점이다. 경보 상자를 작성하기는 매우 쉽다. 단순히 alert 함수를 한 행의 코드로 입력하고 이를 인수에 전달하면 된다. 그러면 인수에 전달한 것이 무엇이든 그 값을 포함한 창이 열린다. 예를 들어, 간단한 문자열을 입력하거나 경보를 사용하여 변수의 값을 인수로 전달함으로써 그 값을 표시할 수 있으며, 이는alert를 디버깅에 사용할 수 있는 좋은 예다. 다음은 alert 함수를 사용하여 경보 상자를 생성할 수 있는 방법을 보여주는 기본적인 예제다.

alert("This can be a variable or a simple text string");

확인 상자

사용자가 웹 사이트에서 선택한 옵션을 확인하려면 확인 상자를 사용한다. 예를 들어, 본인이 웹 애플리케이션 개발자이고 사용자가 자신의 사용자 계정을 삭제하기로 선택한 경우 사용자가 선택 내용을 확인한 후 요청을 제출하는 단계로 진행할 수 있게 하는 것이 좋은 생각일 것이다.

일반적으로, 사용자가 자신이 선택한 사항 그대로 계속 진행할 것인지 확인한 다음 그 의사결정을 바탕으로 JavaScript 코드를 실행할지 판단하기 위해 confirm 함수가 조건문에 먼저 작성된다. 다음은 어떤 JavaScript 코드를 실행할지 결정하기 위해 어떤 조건에서confirm 함수를 사용하는 예제이다.

if(confirm("Click for a response"))
{
    alert('You clicked OK');
}
else
{
    alert('You clicked Cancel');
}

프롬프트 상자

빠르게 질문을 하고 사용자가 답할 수 있도록 할 방법을 찾는다면, 프롬프트 상자가 제격이다. 일반적으로, 오늘날의 웹 개발자들은 사용자 정의 인라인 팝업 창을 선택하는 경향이 있다. 즉, 프롬프트는 여전히 존재하고 특히 디버깅 시 계속 자신의 위치를 지킨다. 프롬프트 상자 생성에 사용되는 prompt 함수는 두 개의 매개변수를 갖는다. 첫 번째 매개변수는 일반적으로 사용자에게 어떤 응답을 요구하는 질문 또는 명령문인 사용자 정의 텍스트 문자열이고, 두 번째 매개변수는 프롬프트 상자에 나타나는 텍스트 입력에 대한 기본값으로 사용되는 텍스트 문자열이다. 기본값은 선택적이며, 실행 시간 중에 이를 변경할 수 있다. 다음은 사용자에게 질문을 하는 데 사용되는 prompt 함수의 예제로서, prompt 함수에서의 리턴 값을 사용하여 경보 상자에 사용자의 응답을 표시한다.

var response=prompt("What is your favorite band?","Led Zeppelin");
if (response!=null && response!="")
{
   alert("response: "+ response);
}

위로

쿠키 사용

쿠키는 JavaScript 코드가 이후에 검색하여 다시 사용할 수 있도록 클라이언트 측에 데이터를 저장하기 위해 존재한다. 사용자의 컴퓨터에 데이터를 저장하여 현명하게 사용하면 많은 이점이 있다. 쿠키를 사용하여 사용자의 경험을 사용자 정의하고, 이전의 조치를 바탕으로 사용자에게 정보를 표시할 방법을 결정할 수 있는 등의 이점이 있다. 쿠키 사용 예로는 방문자의 이름이나 이후에 웹 사이트에 표시하는 데 사용할 수 있는 기타 관련 정보를 저장하는 경우가 포함된다. 쿠키는 이름-값 쌍, 만기 날짜 및 이런 정보를 보내야 하는 대상 서버의 도메인과 경로를 포함한 방문자의 웹 브라우저에 저장되는 텍스트 파일이다.

쿠키 작성

쿠키 작성은 간단하다. 단순히 저장할 정보, 저장 기간 및 향후에 참조하기 위해 지정할 쿠키의 이름을 결정하기만 하면 된다. 하지만, 작성은 단순하더라도 구문은 약간 복잡하므로 쿠키가 제대로 작동하도록 하려면 올바로 작성해야 한다. 다음 코드는 쿠키를 작성하고 쿠키에 데이터를 저장하는 방법의 예제를 보여준다.

document.cookie =
  'cookiename=cookievalue; expires=Sat, 3 Nov 2001 12:30:10 UTC; path=/'

쿠키에 저장되는 문자열의 첫 파트는 이름-값 쌍, 즉 cookiename=cookievalue이다. 세미콜론(;)은 이 쌍을 두 번째 파트와 구분해준다. 문자열의 두 번째 파트는 알맞은 형식으로 된 만기 날짜이며, 그 뒤에 있는 세미콜론이 이 파트를 세 번째 파트이자 마지막 파트인 경로와 구분해준다.

쿠키에서 데이터 검색

쿠키에 데이터를 저장하려면 약간 복잡한 구문이 필요하지만, 이후에 간단하게 이름으로 쿠키 값을 검색할 수 있다. 다음은 이름으로 쿠키 값을 검색하는 방법이다.

alert(document.cookie);

이 코드는 현재 도메인에 대한 쿠키를 가져오지만, 두 개 이상의 쿠키가 한 도메인에 저장될 수 있고 document.cookie는 배열이다. 따라서 특정 쿠키의 값을 검색하려면 대상 값을 적절히 정해야 한다. 다행히도, 목록 3에 있는 사용자 정의 함수 덕분에 이는 쿠키 이름을 매개변수로 전달하고 쿠키의 값을 수신하는 것만큼 쉬운 일이다.

목록 3. 저장된 쿠키에서 데이터 검색

	
function getCookie(c_name)
{
var i,x,y;
var cookieArray = document.cookie.split(";");
for (i=0;i<cookieArray.length;i++)
{
  x = cookieArray[i].substr(0,cookieArray[i].indexOf("="));
  y = cookieArray[i].substr(cookieArray[i].indexOf("=")+1);
  x = x.replace(/^\s+|\s+$/g,"");
  if(x == c_name)
  {
	  return unescape(y);
	  }
	}
}
alert(getCookie('cookiename'));

여기서 알 수 있는 바와 같이, 쿠키는 강력한 기능을 제공하고 방문자를 위한 사용자 정의 환경을 만들거나 단순히 이후에 사용할 수 있는 데이터를 저장할 수 있는 토대를 제공한다.

위로

타이밍

JavaScript는 특정 조치의 타이밍을 제어하고 설정할 수 있게 해주는 여러 가지 함수를 제공한다. 그 중에서 가장 공통적인 함수는 다음과 같다.

setInterval
clearInterval
setTimeout
clearTimeout

setInterval 함수

어떤 상황에서는 사용자 상호작용 없이 JavaScript 코드를 반복적으로 실행할 필요가 있다. setInterval 함수를 사용하면 손쉽게 반복 실행할 수 있다. setInterval은 두 개의 필수적 인수와 한 개의 선택적 인수를 취한다. 첫 번째 필수적 인수는 반복 실행할 코드이며, 두 번째 인수는 각 JavaScript 코드 실행 사이의 지속 시간을 정의하는 밀리초이다. 세 번째인 선택적 매개변수는 code 매개변수를 통해 이루어지는 함수 호출로 전달될 수 있는 인수이다. 간격으로 설정한 지속 시간이 밀리초로 정의되기 때문에 처음에는 약간 낯설 수 있다. 따라서 1초 간격으로 실행하려면 1000밀리초, 2초 간격은 2000밀리초와 같이 사용한다. 표 2에 setInterval 함수에 있는 각각의 매개변수와 그 역할이 나열되어 있다.

표 2. setInterval 함수에 사용 가능한 매개변수

매개변수	필수적 또는 선택적 여부	설명
`code`	필수	`setInterval` 함수가 실행하는 JavaScript 코드로서, 이 코드는 사용자 정의 또는 함수 호출일 수 있다.
`milliseconds`	필수	각 코드 실행 간의 지속 시간(밀리초)
`argument`	선택사항	함수가 `code` 매개변수로 사용될 때 함수로 인수를 전달하는 데 사용되는 유용한 매개변수이다.

다음 코드는 setInterval 함수를 사용하여 다른 함수를 10초마다 실행하고 그 함수로 인수를 전달하는 방법의 예제를 나타낸 것이다. 실행되는 함수 내에서 인수 값에 액세스할 수 있다. 이 예제에서와 같이, 이 인수는 변수, 오브젝트 또는 간단한 텍스트 문자열일 수 있다.

setInterval(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('myFunction argument value: '+ myArg);
}

간격을 종료하려는 경우 이를 위한 함수 역시 따로 있다.

clearInterval 함수

간격을 종료하려면 clearInterval 함수가 필요하다. 하지만, 원래 작성한 간격에는 이후에 이를 clearInterval로 참조하기 위한 변수 이름이 포함되어야 한다. 다음 코드는 clearInterval 함수가 원래 setInterval로 이전에 설정된 변수를 참조하는 방법을 보여주는 예제를 나타낸 것이다.

var myInterval = setInterval(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('myFunction argument value: '+ myArg);
   clearInterval(myInterval);
}

여기서 알 수 있는 것처럼, 원래 setInterval 함수에 변수 이름을 지정하고 그 이름을 myInterval로 지정했다. 그러면 이후에myInterval을 사용하여 setInterval 함수를 참조하고 clearInterval 함수를 사용하여 변수를 변경하거나 원래 간격을 중지할 수 있다. 이 예제에서는 clearInterval 함수가 첫 번째 함수 호출에서 실행되므로 함수가 한 번만 호출된다.

setTimeout 함수

setTimeout 함수는 일정한 시간 제한조건을 바탕으로 코드나 다른 함수를 실행할 수 있다는 점에서 setInterval 함수와 유사하다. 매개변수도 setInterval에 대한 매개변수와 같다(표 2 참조). 하지만, setTimeout 함수는 코드를 반복적으로 실행하지 않고 한 번만 실행한다는 것이 큰 차이점이다. 다음은 setTimeout 함수를 사용하여 10초 후에 함수를 실행할 수 있는 방법을 보여주는 예제이다.

setTimeout(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('myFunction argument value: '+ myArg);
}

setTimeout은 어떤 코드를 실행하고 싶지만 즉시 실행하지는 않으려는 상황에서 유용하다. 본질적으로는 코드 실행을 지연하기 위한 방법이다.

clearTimeout 함수

어떤 이유 때문에 마음을 바꾸어 setTimeout 간격을 취소할 필요가 생긴 경우 clearInterval 함수가 그 작업을 처리할 수 있다.clearInterval 함수와 마찬가지로, 이후에 참조하고 clearTimeout 사용을 중지하기 위해 setTimeout에 변수 이름을 지정한다. 다음 코드는 clearTimeout을 사용하여 setTimeout 호출을 중지하는 방법을 보여주는 예제이다.

var myTimeout = setTimeout(myFunction, 10000, 'sample');
function myFunction(myArg)
{
   alert('myFunction argument value: '+ myArg);
   clearTimeout(myTimeout);
}

여기서는 원래 setTimeout 함수에 변수 이름을 지정하고 그 이름을 myTimeout으로 지정했다. 그러면 myTimeout을 사용하여setTimeout 함수를 참조하고 clearInterval 함수를 사용하여 중지할 수 있다.

위로

결론

이론의 여지는 있지만, JavaScript는 가장 인기 있는 프로그래밍 언어 중 하나이며 그 이유를 이제는 알 수 있을 것이다. 간단하지만 다양한 기능이 있는 이 스크립팅 언어는 매우 많은 가능성을 내포하고 있으며, 웹 사이트 방문자가 웹 페이지 다운로드 후 이 페이지와 상호작용할 수 있도록 하는 도구를 이 언어에서 제공한다는 사실이 매우 중요하다. 본 기사는 JavaScript 언어의 기초를 이해하기 위한 토대를 제공했으며, 다음 단계는 이런 개념을 실제로 적용하고 JavaScript 오브젝트를 탐색해보기 시작하는 것이다.

참고자료

교육

Dev Guru는 JavaScript 언어에 대한 종합 안내서를 제공한다.
웹 개발 영역에서는 다양한 웹 기반 솔루션을 다루는 기사를 전문적으로 게시한다.
developerWorks 기술 행사 및 웹 캐스트를 통해 다양한 IBM 제품 및 IT 산업 주제에 대한 최신 정보를 얻을 수 있다.
Twitter의 developerWorks 페이지를 팔로우하자.

제품 및 기술

JavaScript 언어의 기초를 이해한 후, jQuery 라이브러리를 활용하면 개발 시간 단축에 큰 도움이 된다.
Dojo Toolkit는 오픈 소스 모듈형 JavaScript 라이브러리로서 교차 플랫폼의 JavaScript/Ajax 기반 애플리케이션과 웹 사이트를 신속하게 개발하는 데 유용하다.
무료로 IBM 소프트웨어를 체험해보자. 평가판을 다운로드하고 온라인 평가판에 로그인하며 샌드박스 환경에서 제품으로 작업하거나 클라우드를 통해 이에 액세스하자. 100개 이상의 IBM 제품 체험판에서 선택하자.

토론

지금 developerWorks 프로파일을 작성하고 JavaScript에 대한 관심목록을 설정하자. developerWorks 커뮤니티에서 최신 정보를 확인하자.
웹 개발에 관심이 있는 다른 developerWorks 구성원을 찾아보자.
지식 공유: 웹 주제를 중점적으로 다루는 developerWorks 그룹 중 하나에 참여하자.
Roland Barcia는 자신의 블로그에서 Web 2.0 및 미들웨어에 대해 설명했다.
developerWorks 멤버의 공유해 놓은 웹 주제에 대한 책갈피를 따라가 보자.
빠른 해답: Web 2.0 Apps forum을 방문하십시오.
빠른 해답: Ajax forum을 방문하십시오.

출처 - http://www.ibm.com/developerworks/kr/library/wa-javascriptstart2/

저작자표시

'Development > JavaScript' 카테고리의 다른 글

javascript - 유효성 검사 (0)	2012.05.23
cookie 생성 및 삭제 (0)	2012.05.22
입력필드에 마우스를 클릭하면 초기문자열이 사라지게 (0)	2012.05.11
JSON 예제 3 - file로 읽고 쓰기 (0)	2012.04.13
JSON 예제 2 - String에서 읽기 (0)	2012.04.13