자바스크립트의 개요
자바스크립트는 웹 페이지를 위한 스크립트 언어로 처음 넷스케이프사에서 개발된 언어이다. 프로토타입 기반의 언어로, 처음 개발할 때 SUN 사와 함께 개발하며 자바와 문법이 거의 비슷하지만 자바랑은 아무런 상관이 없는 언어이다.
자바스크립트는 ECMA(European Computer Manufacturers Association) 인터내셔널이라 불리는 표준화 기구에서 등록할 때 JAVA 언어와 유사한 이름 때문에 ECMAScript라는 이름으로 표준화되었다.
넷스케이프사에서 자바스크립트를 발표한지 몇 달 후 MS에서도 자바스크립트와 스크립트 언어를 만들었고 이를 익스플로러에 추가하여 발전시켰다. 초창기 대부분의 사용자들은 익스플로러를 사용했고 우리가 자바스크립트라고 말하며 익스플로러에서 실행했던 것이 사실은 JScript였던 것이다.
사실 브라우저마다 ECMAScript, 자바스크립트와 호환되도록 자체적으로 작성하여 엔진을 탑재해 놓았기 때문에 브라우저마다 버전마다 모두 지원되는 부분이 다르다는 문제점이 남아 있긴 하다.
자바스크립트는 초창기 웹이 막 나오기 시작할 무렵 무척 천대받던 언어였다. 자신의 웹 페이지를 제어하기 위해 인터넷상에 떠돌아다니는 코드들을 그냥 Copy&Paste 하여 처리하는 것이 기본이었고 제대로 자바스크립트에 대해 깊게 알고 처리하는 개발자가 많지 않았던 것은 사실이다. 자바스크립트가 가진 능력에 비해 저평가 받았던 것이다.
지금은 자바스크립트를 모르면 웹 개발은 물론 앱 개발도 어려운 상황에 놓일 만큼 자바스크립트는 눈부시게 발전했다. 자바 스크립트 프레임워크인 AngularJS와 Ext JS 등은 이제 Front-end 웹을 개발할 때 빼놓을 수 없는 기술이 됐고 이벤트 기반의 비동기 방식으로 작성된 Node.js는 빠르게 성장하는 개발 프레임워크로 이 또한 자바스크립트 기반이므로 자바스크립트를 모르면 아무 작업도 할 수 없는 것이 현실이 되어 버렸다. 심지어 MongoDB의 Shell에서까지 자바스크립트를 쓰니 자바스크립트는 정말 중요한 언어가 된 것이다.
자바스크립트 사용방법
자바스크립트는 자바와 문법이 거의 동일하다. 자바스크립트는 <script></script>태그 안에 정의하며 독립적으로 실행되는 환경 없이 HTML 문서에 삽입하여 브라우저에 의해 실행되는 스크립트 언어이다. CSS처럼 실행하는 방법은 다양하다.
사실 우리는 자바스크립트를 처음 사용해 보는 사용자이므로 사용하는 방법을 익히는 것에 중점을 두고 설명을 할 것이다. 그러나 <head>태그나 <body> 태그의 중간에 마크업과 섞이게 되면 자바스크립트 태그가 로딩되기까지 렌더링을 멈추기 때문에 성능이 저하될 수 있다. 이 부분은 자바스크립트 최적화 부분에서 다시 언급을 하도록 할 것이다.
자바스크립트 사용방법
① <body>태그에 정의하고 사용하는 방법
<body>태그 안에 다음과 같이 <script></script>태그를 정의하고 자바스크립트 명령문을 정의한다.
|
document.write(“문자열”) |
document란 웹 브라우저 상에 콘텐츠가 출력되는 부분을 의미하는 BOM(Browser Object Model)에 정의된 객체이며 write는 매개변수로 정의된 문자열을 웹 페이지에 출력하는 일을 처리하는 메서드이다. 이때 문자열에 태그를 같이 사용하면 태그가 적용된 결과가 출력된다. 이 메서드는 실제 실무에서 필요한 메서드는 아니지만 자바의 System.out.println처럼 자바스크립트를 테스트하면서 필요한 메서드가 될 것이다.
실행하면 "write"메서드의 매개변수로 지정한 문자열이 다음과 같이 웹 페이지에 출력되는 것을 확인할 수 있다.
② <head>태그에 function으로 정의하고 호출해서 사용하기
자바스크립트에서 함수를 정의하는 경우 보통 <head>태그 내에 정의하고 이벤트 핸들러 등에서 호출하여 사용한다. 함수를 정의하는 방법은 뒤에서 설명하도록 한다. <head>태그에서 <script>태그를 정의한 후 안에서 함수를 정의한다.
단순하게 함수 내부에서 경고 창을 띄우고 있으므로 실행하면 다음과 같이 경고창이 뜬다. “alert”은 경고 창을 나타낼 때 사용하는 명령문이며 매개변수는 경고 창에 출력될 문자열을 정의한다. 보통 디버깅 목적으로 사용하기도 한다.
③ inline으로 사용하기 – 이벤트 핸들러에서 함수 호출하기
CSS처럼 태그 안에서 이벤트 핸들러를 이용해서 이벤트가 발생했을 때 함수가 실행되도록 정의할 수 있다.
④ 외부 파일로 연결하기
여러 웹 페이지에 공통으로 적용해야 하는 기능이 있다면 자바스크립트도 CSS처럼 외부 파일로 작성하여 연결할 수 있다.
공통의 자바스크립트 파일을 작성하기 위해 다음과 같이 “/common/js”폴더를 작성한다.
|
<script type="text/javascript" src="자바스크립트 파일의 경로"/> |
'웹 > javascript' 카테고리의 다른 글
| 자바스크립트 문법 - 연산자 (0) | 2019.07.08 |
|---|---|
| 자바스크립트 문법 - 변수 (0) | 2019.07.08 |
| 자바스크립트 문법 - 주석문 (0) | 2019.07.08 |
| 자바스크립트 디버깅 (0) | 2019.07.08 |
| 자바스크립트 외부 파일의 한글 설정 (0) | 2019.07.08 |