JavaScript
처음 JavaScript를 시작하는 사람들이 간혹 JavaScript가 JAVA와 관련이 있다고 생각하는 경우를 보게 되는데 전혀 별개의 언어입니다.
JavaScript는 ECMA-262 표준(ECMAScript)에
기초한 스크립트 프로그래밍 언어로 축약하여 JS라고 부르기도 합니다.
JavaScript는 Brendan Eich에 의해서 개발되어 지금은 잊혀진 웹 브라우저인
Netscape Navigator 2.0에 처음 나타나게 됩니다. 그리고 MS IE도 지원을 하기 시작하였고 1996년 처음으로 이에 대한
표준화가 시작되어 1997년에 ECMA General Assembly에
의해 첫 번째 ECMA 표준이 채택됩니다. 그리고 이 표준은
국제 표준화 기구(ISO: International Organization for Standardization)의
국제 전기표준회의(IEC:Internation Electrotechinical Commission)에
제출되고 1998년 4월 “ISO/IEC 16262”로 인가됩니다. 그리고 그 해에 ECMA General Assembly는 ISO/IEC와 같이 보조를 맞춰 표준을 진행하는데
찬성합니다.
발전을 거듭하여 강력한 정규표현식, try/catch 예외 처리, 향상된 문자열 처리 등과 같은 기능들이 추가되어 세 번째 ECMA 표준이 1999년 12월에 ECMA
General Assembly에 의해 채택되고 2002년 ISO/IEC에 의해
“ISO/IEC
16262:2002”로 발표됩니다.
이 때부터 웹 환경에서 모든 웹 브라우저에 적용되게 됩니다. 그리고 완성되지
못한 4 번째 표준을 거쳐 2011년 ISO/IEC 16262:2011로 개정되었는데 3 번째 표준에 JSON, 배열 처리를 위한 추가적인 함수들, 강화된 에러 체크나
보안 기능 등이 추가되었습니다.
그러면 왜 JavaScript를 쓰기 위해서 배우는 걸까요?
JavaScript를 쓰는 여러 가지 이유가 있겠지만 그 중 두 가지만 소개하면 다음과 같습니다.
첫째, JavaScript는 클라이언트 단에서 다양한 작업을 동적으로 수행할 수 있도록
지원합니다. 예를 들면 웹 페이지에 나타난 텍스트를 동적으로 변형하거나 새로운 이미지나 텍스트들을 추가하거나
삭제하는 작업, 그리고 웹 서버로 전송하기에 앞서 전송되는 데이터들에 대한 유효성 검사 등과 같은 작업
등을 수행할 수 있습니다.
이와 같이 웹 페이지의 구조를 이루는 HTML 요소에 동적인 효과 주는데 적합한 언어입니다.
둘째, Java나 C# 등과 같은 다른 언어에 비해서 진입장벽이 낮습니다.
JavaScript는 컴파일이 필요한 Java나 C# 언어와 달리 컴파일이 필요하지 않는 스크립트 언어입니다. 그래서 메모장 같은 텍스트 에디터만 있으면 여러분이 필요로 하는 코드를 작성하고 작성한 JavaScript 코드를 대부분의 경우 IE나 Firefox, Chrome 같은 웹 브라우저를 이용하여 바로 그 결과를 확인해볼 수 있습니다.
이렇게 할 수 있는 이유는 거의 대부분의 웹 브라우저에는 기본적으로 JavaScript 코드를 해석할 수 있는 기능이 포함하고 있기 때문입니다.
물론 위와 같은 JavaScript의 장점외에도 많은 장점이 있음에도 불구하고 개발자들에게는 JavaScript는 디버깅이 쉽지 않다는 점, 브라우저 별로 관련된 웹 표준을 해석하는 방법이 조금씩 달라서 해당 브라우저 별로 개발자가 적절하게 다르게 해석되거나 지원하지 않은 기능들을 처리해줘야 하는 불편함 등으로 힘들 때가 가끔 있습니다만 그럼에도 불구하고 JavaScript는 해가 갈수록 웹 환경을 넘어 스마트 폰 응용 프로그램까지도 영역을 확장해가면서 그 중요성이 증대되고 있습니다. 그리고 그에 따른 JavaScript를 근간으로 한 다양한 형태의 jQuery, Ext JS, MooTools, Google Web Toolkit 등과 같은 라이브러리나 최근에 서버 측면이 강한 Node.js까지 등장하였습니다.
이렇게 중요성이 더해가는 JavaScript에 대해서 이제 여러분도 배우고 싶다는 생각이 드시는지요?
거의 대부분의 언어 학습의 시작이 데이터 타입에서 출발하는데 그에 앞서 HTML5 웹페이지(문서)에서 어떻게 JavaScript를 사용할 수 있는지 그 형식을 먼저 알아봅니다.
HTML5 기반 웹페이지에서 JavaScript를 사용하는 기본적인 형식은 해당 JavaScript 코드가 HTML5 웹페이지 내에 있을 때와 외부에 JavaScript 파일이 존재할 때 2 가지 형태로 나눠서 나타낼 수 있습니다.
먼저 JavaScript 코드가 HTML5 웹페이지 내에 있을 때에는 script 태그를 이용하여 다음과 같이 text 속성(Attribute)에 파일 형식을 설정해주고 그 다음 실행할
javaScript 코드들을 작성해준 후 script 마침 태그로 끝마치면 됩니다.
<script type=”text/javascript”>
실행할 javaScript 코드들
</script>
다음으로 HTML5 웹페이지 내부가 아닌 외부에 존재하는
Javscript 파일(.js)의 형태로 존재할 경우 다음과 같이 src 속성에 실행할 javaScript 코드가 들어있는 javaScript 파일을 설정해주고 script 마침 태그로 끝마치면
됩니다.
<script type=”text/javascript” src=”javaScript 코드들이 들어있는 파일이름.js”></script>
이상과 같이 <script> 시작 태그로부터 </script> 마침 태그를 이용하여 javaScript 사용할
수 있는데 이러한 <script> 블록은 보통 HTML5 웹페이지의 <head> 시작 태그와 </head> 마침
태그 내에 위치하게 되지만 때때로 <body> 태그 블록 내에 오기도 합니다.
이제 간단하게 가장 기본적인 형태부터 알아볼까요? 메모장이나 텍스트 에디터를 열어서 다음과
같이 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=ko">
<title>JavaScript 예제 - HTML5 문서내에 위치</title>
<script type="text/javascript">
alert("JavaScript가 재미있을까요?");
</script>
</head>
<body>
<h5>여러분 처음 JavaScript 페이지를 만들어보네요.</h5>
</body>
</html>
위에서 alert("JavaScript가 재미있을까요?") 는 경고창을 띄워 해당 문자열을 표시하는 기능을 수행합니다. 이제
firstPageembeddingJavaScript.html 이름으로 저장한 후 IE9, FireFox 등을 이용하여 열어보면 다음과 같이 먼저 경고창(alert
window)가 뜬 후 body 태그 안에 있는 “여러분~” 문자열이 페이지에 표시됩니다.
다음으로 외부 JavaScript 파일을 이용하여 위와 똑같은 기능을 하는지 확인하기 위해서 메모장을 열어서 다음과 같이 작성, 저장합니다.
alert("JavaScript가 재미있을까요?");
“firstPageExternalJavaScript.js” 파일로 저장한 후 “firstPageembeddingJavaScript.html”
파일을 열고 <script> 블록 부분을 다음과 같이 변경합니다.
<script
type="text/javascript"
src="firstPageExternalJavaScript.js"></script>
“firstPageExternalJavaScript.html”라는 이름으로 다르게 저장한 후
IE9, FireFox 등을 이용하여 확인해보면 동일한 결과를 보여주게 되는 것을 알 수 있습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 1.2 변수(Variable) (0) | 2013.08.06 |
|---|---|
| 1. JavaScript의 데이터 타입, 변수 (0) | 2013.08.06 |
| 8.2 내부 여백인 padding, 경계(border), 그리고 외부여백(margin) (0) | 2013.08.04 |
| 8.1.4 background-attachment 속성 (0) | 2013.08.04 |
| 8. 배경(Background)과 경계(Border), 여백 (0) | 2013.08.04 |
