Programming/Javascript

자바스크립트 강좌 - 1. How to JavaScript?

양디 2016. 10. 15. 15:25

JavaScript 환경 구축


JavaScript 를 실행하기 위한 환경을 우선 구축해보자.


방법은 여러 가지 있지만, 여기서 소개할 방법은 3가지 방법이다.


첫번째, Web Browser를 사용한다. (Chrome)


JavaScript 는 애초에 웹 페이지 개발을 위하여 만들어진 프로그래밍 언어이기 때문에,


대부분의 웹 브라우저는 JavaScript를 지원한다.


따라서, 웹 페이지를 제작하고 이를 웹 브라우저 상에서 여는 것으로 JavaScript를 코딩하고 실행해볼 수 있다.


다음과 같은 과정을 통하여 코딩을 하고, 실제로 확인을 해보자.


먼저 메모장, 워드 등의 TXT 편집이 가능한 에디터를 통하여 다음과 같은 소스를 입력한다.

(마땅한 에디터가 없다면, 무료인 Atom 에디터를 추천한다. 다음 링크를 통해 설치해보자.)

Atom 설치



1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
  </head>
  <body>
    <script type="text/javascript">
      console.log('Hello World!');
    </script>
  </body>
</html>
cs


위의 코드를 복사하여 붙여 넣고, test.html 이라는 이름으로 저장하자.


그 후에 크롬을 열어 파일을 끌어당겨 실행해 보면 다음과 같은 화면이 뜬다.


페이지에는 아무 내용도 집어 넣지 않았기 때문에, 어떤 내용도 보이지 않는다.


그러나 이를 크롬의 개발자 도구 (윈도우 : F12 , Mac : Cmd+Alt+I) 를 켠 후에 콘솔 창에 들어가 보면 다음과 같은 화면이 보인다.



위의 Console창에 글을 출력해 주는 것이 바로 Console.log 함수이다. (함수에 대한 설명은 다음에 !)


따라서 Chrome 개발자 도구를 통하여 JavaScript 공부를 할 수 있다.


두번째, Node.js 를 사용한다.


이에 대한 설명은 이전에 작성했던 포스트로 대체한다.


Node.js 설치


Node.js 사용법


세번째, 온라인 컴파일러를 사용한다. 


정확하게는, 온라인 Interpreter를 사용한다.


JavaScript를 설치하지 않고 실행하게 해주는 다양한 온라인 툴들이 존재하며 ,


본 강좌에서는 Repl.it 홈페이지를 사용하겠다.



Repl.it 바로가기


위 사이트에 가면, 다음과 같은 화면에서 JavaScript를 코딩할 수 있다.



좌측에 코드를 입력하고, Run (Cmd + Enter / Ctrl + Enter)을 누르면 우측에 실행되는 형식이다.


따로 설치를 하지 않고 온라인 상에서 바로 사용할 수 있다는 점이 큰 장점이다.


파일은 따로 저장해두고 온라인상에서 테스트하는 방식으로 사용하여야 할 것이다.


다음은, JavaScript의 특징에 대해서 알아보자.

댓글