"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 요소와 각 요소와 연관된 이벤트가 정리되어 있다.

위로

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 문의 예제를 나타낸 것이다. 물론, 이 정보는 디버깅 상황에서만 유용하겠지만, 발생한 오류를 처리하기 위해 브라우저에 의존하지 않고 사용자에게 오류에 대한 피드백을 제공하려 할 때 이런 특성이 유용하게 쓰일 수 있다.

	
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 부분에서 어떤 조건을 기준으로 오류 예외를 작성할 수 있는 방법을 간단한 예제로 보여준다.

	
<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에 있는 사용자 정의 함수 덕분에 이는 쿠키 이름을 매개변수로 전달하고 쿠키의 값을 수신하는 것만큼 쉬운 일이다.

	
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 함수에 있는 각각의 매개변수와 그 역할이 나열되어 있다.

다음 코드는 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을 방문하십시오.
  
  

필자소개

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의 창립자이다

아티클 순위

의견

위로

목차

• 이벤트
• try...catch 및 throw
• 팝업 상자 작성
• 쿠키 사용
• 타이밍
• 결론
• 참고자료
• 필자소개
• 의견