티스토리 뷰
728x90
실행방법과 실습환경
- 언어의 실행방법과 실습환경에 대해서 알아본다.
설치
- 자바스크립트는 브라우저에서 동작하는 언어
- 각 브라우저마다 개발자 도구라는 것이 있고, 이를 이용해 자바스크립트 개발을 쉽게 할 수 있다.
실행
- 자바스크립트는 원래 웹브라우저에서 HTML, CSS를 동적으로 제어하기 위해서 만들어진 언어
- 오늘날 자바스크립트가 웹브라우저를 벗어나서 매우 다양한 용도로 사용
- 자바스크립트의 실행환경은 다양
- 자바스크립트의 원래 목적이었고, 가장 보편적인 실행환경인 웹브라우저에서 실습을 진행
- 웹브라우저 뿐 아니라 node.js, 구글 크롬 웹브라우저 플러그인, 구글 스크립트, PDF, 각종 데스크탑 위젯에서 사용되는 자바스크립트에서도 적용될 수 있는 내용
a. 웹페이지에서 자바스크립트 작성
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
alert('Hello World');
</script>
</body>
</html>
- 윈도우는 메모장, 맥은 텍스트에디트 / Sublime Text와 같은 에디터
- 윈도우에서 메모장을 이용한다면 파일 형식을 모든 파일로 지정하고 저장
- 파일을 저장할 때는 파일명 뒤에 .html이라는 확장자
- HTML 위에서 동작하기 때문에 HTML에 대한 이해가 조금 필요(프론트 엔드 웹개발을 위해서 JavaScript를 학습한다면 HTML은 꼭 선행해야 할 지식)
<script>
alert('Hello world');
</script>
- 코드 <script>는 웹브라우저에게 지금부터는 자바스크립트 코드이기 때문에 이 코드를 해석할 때는 자바스크립트의 문법에 따라서 해석해서 실행하라고 알려주는 구문(태그)
- alert('Hello world')는 경고창에 Hello world라는 문구를 출력하라는 일종의 명령
- </script>는 자바스크립트 구간이 끝났기 때문에 이 후부터 나타나는 코드는 HTML의 문법으로 해석하라고 브라우저에게 알려주는 것
b. 크롬 개발자 도구 사용
크롬을 사용한다면 다음과 같은 방법으로 자바스크립트를 간단하게 실행해 볼 수 있음
- Ctrl + Shift + J (윈도우), 커맨드 + Alt + J (OSX) 키를 누른다. 콘솔 탭이 선택된 상태로 개발자 도구가 실행
- alert('hello world')를 실행. 실행 결과 경고창이 실행됨
댓글