호쌤
호쌤 Just For Fun

[JS] 자바스크립트 시작하기

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[JS] 자바스크립트 시작하기≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

[JS] 자바스크립트 시작하기

자바스크립트는 웹 브라우저에서 실행되는 스크립트 언어로서 HTML 구조를 제어하거나 HTML에 적용되어 있는 CSS를 추가,수정,삭제 하는 기능을 수행하며 사용자와의 대화식 웹 페이지를 제작할 수 있는 기능 등을 제공합니다.

스크립트 언어

컴파일러에 의해 실행 가능한 형태로 변환되는 과정 없이 별도의 전용 해석기에 의해서 실행되는 형태의 프로그래밍 언어.

#01. 자바스크립트를 시작하기 위한 준비 항목

  1. 코드 편집기
    • ex: Sublime Text, VSCode, Braket, Atom 등
  2. 웹 브라우저
    • Google Chrome
  3. 자바스크립트 해석 엔진
    • Node.js (브라우저 기반으로 작성할 경우 필요 없음)

#02. 자바스크립트의 버전 종류

1) 초기 버전

Netcape사의 Javascript와 MS의 Jscript 간의 대립구도. 서로 호환되지 않았기 때문에 표준이 제정되었음.

ECMAScript : 표준화 된 자바스크립트 규격. 줄여서 ES라고 부름

2) 버전 종류

버전 설명
ES3 1999년도에 제정됨. 일반적으로 흔히 이야기 하는 자바스크립트
ES5 2009년도에 제정됨. Json 규격을 지원하기 시작
ES6 2015년도에 제정. React, Angular, Vue등 최신 Framework가 사용하는 버전
ES8 2017년도에 제정.

#03. Hello World

1) 웹 브라우저 기반으로 작성하기

HTML 안에 포함시키기

Javascript는 웹 페이지 안에 포함되어 동작하는 언어이다.

HTML 페이지 어느 곳에서든지 <script> 태그 안에서 기술된다.

주로 <body>태그가 끝나기 직전에 작성하는 것이 성능면에서 더 유리하다.

HelloWorld.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <h1>Hello World</h1>
    <script>
        console.log("Hello World");
        console.log("안녕하세요. 자바스크립트");
    </script>
</body>

</html>
실행결과 확인하기

Google Chrome 브라우저의 개발자도구(F12)를 실행시킨 후 Console 탭에서 자바스크립트의 출력 결과를 확인할 수 있다.

K-001.png

외부 스크립트 파일 참조하기

HTML 파일에서 작성하던 <script> 태그의 소스코드를 별도의 *.js 파일을 작성한 후 HTML에서 참조하는 형태

sample.js
1
2
console.log("Hello Javascript");
console.log("외부 파일을 통한 참조 실행입니다.");
HelloWorld2.html

script 태그의 src 속성을 사용하여 외부 파일의 경로를 지정한다.

script 태그는 반드시 마침 태그가 존재해야 하며 다른 파일을 참조하는 <script>태그는 시작태그와 마침태그 사이에 다른 코드가 포함될 수 없다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <h1>Hello World2</h1>
    <script src="sample.js"></script>
</body>

</html>

K-001.png

2) Node.js 기반으로 실행하기

HTML 태그를 제어하는 것이 아닌 단순한 문법 구조에 대한 이해를 위한 실습을 위해 매번 HTML 코드 파일을 생성하는 것은 매우 번거로운 일이다.

Node.js 설치 여부 확인

명령 프롬프트에서 다음의 명령어 수행

1
$ node --version

K-003

알 수 없는 명령어라고 표시될 경우 Node.js를 내려받아 설치한다.

설치 페이지에서 LTS 버전을 선택하여 내려받는다.

다운받기

Node.js를 통한 js 파일 실행하기

명령프롬프트 상에서 js 소스파일이 위치한 폴더로 이동한 후 아래와 같이 명령어를 내려 실행할 수 있다.

1
node js파일이름

K-004

Sublime Text 3의 Build System 설정하기

Tools > Build System > New Build System을 선택하여 새로운 실행 규칙 파일을 생성하고 아래와 같이 작성한다.

1
2
3
{
    "shell_cmd": "node ${file}"
}

작성한 파일을 다음의 경로로 저장한다. 일반적으로 Sublime상에서 Ctrl+S를 누르면 제시되는 기본 경로에 바로 저장하면 된다.

C:\Users{사용자계정명}\AppData\Roaming\Sublime Text 3\Packages\User\myNode.sublime-build

파일을 저장한 후 Sublime Text 3에서 Tools > Build System > myNode를 선택하고 js 파일을 열어 둔 상태에서 Ctrl+B를 눌러 실행 결과를 확인한다.

K-005

실행 완료 후 결과 창은 ESC키를 눌러 닫을 수 있다.

주의! 소스 파일이 저장된 경로상에 공백이나 한글이 있을 경우 실행되지 않는다.

크리에이티브 커먼즈 라이선스 ITPAPER(호쌤,쭈쌤)에 의해 작성된 ≪[JS] 자바스크립트 시작하기≫은(는) 크리에이티브 커먼즈 저작자표시-비영리-동일조건변경허락 4.0 국제 라이선스에 따라 이용할 수 있습니다.
이 라이선스의 범위 이외의 이용허락을 얻기 위해서는 leekh4232@gmail.com으로 문의하십시오.

comments powered by Disqus