실행방법과 실습환경
수업목적
|
설치
자바스크립트는 브라우저에서 동작하는 언어다. 따라서 웹브라우저가 설치되어 있다면 이미 자바스크립트를 사용할 준비가 끝난 것이다. 참고로 각 브라우저마다 개발자 도구라는 것이 있다. 이 도구를 이용하면 자바스크립트 개발을 쉽게 할 수 있다.
- 구글 크롬 개발자 도구
- 파이어폭스 확장기능인 firebug
실행
자바스크립트는 원래 웹브라우저에서 HTML, CSS를 동적으로 제어하기 위해서 만들어진 언어다. 하지만 오늘날 자바스크립트가 웹즈라우저를 벗어나서 매우 다양한 용도로 사용되고 있다. 이런 이유로 자바스크립트의 실행환경은 다양하다.
필자는 자바스크립트의 원래 목적이었고, 가장 보편적인 실행환경인 웹브라우저에서 실습을 진행할 것이다.
하지만 웹브라우저 뿐 아니라 node.js, 구글 크롬 웹브라우저 플러그인, 구글 스크립트, PDF, 각종 데스크탑 위젯에서 사용되는 자바스크립트에서도 적용될 수 있는 내용이다.
1) 웹페이지에서 자바스크립트 작성
| <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <script> alert('Hello world'); </script> </body> </html> |
윈도우는 메모장, 맥은 텍스트에디트를 이용해서 파일을 만들수 있다.
저장한 후 실행 결과는 아래와 같다.
2) 크롬 개발자 도구 사용
(1) Ctrl+Shift+J (윈도우), 커멘트+Alt+J (OSX) 키를 누른다. 콘솔 탭이 선택된 상태로 개발자 도구가 실행된다.
(2) alert('hello world')를 실행한다. 실행 결과 아래와 같이 경고창이 실행된다.
3) 도구의 선택
- 에디터에는 많은 종류가 있는데, 여러 개발에 필요한 도구를 모두 가지고 있는 도구를 IDE(통합개발도구)라고 한다.
도구의 경우 유료일 수 도 있고, 무거울 수 도 있기에 본인에게 맞는 IDE를 사용하는게 좋다.