Hongik University
Mechanical System
Design Engineering,
Computer Engineering

Updated:

실습 준비하기

자바스크립트로 프로그래밍 기초를 배우기 전에 자바스크립트 프로그램을 실행하는 환경을 준비한다. Node.js를 설치하고 텍스트 편집기(비주얼 스튜디오 코드)를 준비한다.
앞으로 자바스크립트 파일과 HTML 파일을 만들고 저장할 것이다. 저장할 때는 파일 이름 끝에 확장자를 붙여서 저장해야 한다.

간간한 예제

function fact(n){
  if(n<=1) return n;
  return n*fact(n-1);
}
for(var i=1; i<10; i++){
    console.log(i + "! = " + fact(i));
  }

프로그램 실행법

앞 절에서 만든 프로그램을 다음과 같은 방법으로 실행할 수 있다.

웹 브라우저의 콘솔에서 실행하기


자바스크립트 코드를 HTML 문서에 삽입하여 웹 브라우저로 실행하기

텍스트 편집기로 factorial.html을 작성한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>팩토리얼 계산</title>
</head>
<body>
  <script>
  function fact(n){
  if(n<=1) return n;
  return n*fact(n-1);
}
for(var i=1; i<10; i++){
    console.log(i + "! = " + fact(i));
  }
  </script>
</body>
</html>

크롬으로 factorial.html을 열고 콘솔을 켜면 콘솔에 실행 결과가 표시된다.


factorial.html의 console.log(…) 부분을 document.write(…)로 바꾸면 출력 결과를 웹 페이지의 창 안에서 확인할 수 있습니다.(factorial-write.html)
document.write(i + "! = " + fact(i) + "<br />");
수정된 HTML 파일을 웹 브라우저로 열면 다음과 같이 표시된다.


document.write를 사용하면 콘솔 화면을 켤 필요가 없다. 그러나 실무에서는 웹 페이지에 document.write를 사용하여 출력하는 경우가 매우 드물다.

Node.js의 대화형 모드로 실행하기

자바스크립트 코드를 script 요소 안에 작성하면 자바스크립트 프로그램이 길어졌을 때 전체 HTML을 읽기가 힘들어진다. 이떄 다른 파일에 저장한 자바스크립트 코드를 읽어 들이도록 구현하면 전체 HTML을 편하게 읽을 수 있다.
다른 자바스크립트 파일을 읽어 들이도록 설정하려면 script 요소의 scr 속성에 읽어 들이려는 파일의 경로를 입력한다.
<script src="다른 파일의 경로"</script>
다음 factorial2.html은 factorial.js를 읽어 들이도록 수정한 것이다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>팩토리얼 계산</title>
  </head>
  <body>
    <script src="./factorial.js"></script>
  </body>
</html>

Node.js로 파일을 읽어 들여 실행하기

Node.js는 주로 서버 측 자바스크립트 실행 환경으로 사용된다. Node.js 위에서 동작하는 서버 애플리케이션을 작성하면 다양한 웹 서버를 구축할 수 있고 일반 PC에서도 설치할 수 있어서 자바스크립트 프로그램을 여기서 실행시킬 수도 있다.
Node.js를 실행시키려면 명령프롬프트를 사용한다.


Node.js로 파일을 읽어 들여 실행하면 규모가 큰 프로그램도 텍스트 편집기로 작성하거나 편집한 후에 실행시킬 수 있어 매우 편리하다. Node.js로 파일을 읽어 들여 실행하는 방법은 다음과 같다.


프로그램 작성법

이 절에서는 자바스크립트 프로그램의 기본 작성법을 배운다.

문자코드

자바스크립트 프로그램은 유니코드 문자로 작성한다.

대문자와 소문자

자바스크립트 프로그램은 알파벳 대문자와 소문자를 구별한다.

토큰과 공백 문자

토큰
프로그램을 구성하는 최소 단위를 토큰(어휘)이라고 한다. 자바스크립트 인터프리터는 프로그램을 실행하기 앞서 프로그램을 토큰으로 분해하는데 이 동작을 어휘 분석이라고 한다. 그 후에 토큰을 한 줄로 나열하고 이것이 자바스크립트의 구문 규약에 비추어 보았을 때 올바른 프로그램인지 판정한다. 이 동작을 구문 분석(파싱)이라고 한다. 즉, 토큰은 의미를 가지는 최소한의 문자 덩어리라고 할 수 있다.
예를 들어 return n*fact(n-1); 부분을 토큰으로 나누어 보자.
return | n | * | fact | ( | n | - | 1 | ) | ;

공백 문자
인접한 토큰을 공백 등을 넣지 않고 나열하기만 해서는 토큰을 판별할 수 없다. 그래서 프로그래밍 언어에서는 토큰과 토큰 사이에 공백 문자를 입력해서 구분한다. 이때 토큰과 토큰 사이에 공백 문자를 여러 개 입력해도 공백 문자를 하나만 입력한 것으로 간주한다.

공백 문자 생략하기
토큰과 토큰 사이에 공백 문자가 없어도 토큰을 판별할 수 있는 경우가 있다. =, +, *, /와 같은 산술 연산자 앞뒤의 공백문자, 괄호 앞뒤의 공백문자, 세미클론(;), 쉼표(,), 클론(:), 마침표(.) 앞뒤의 공백 문자는 생략할 수 있다. 이러한 토큰과 토큰을 분리하기 때문에 분리자 또는 구분자라고 부른다.

프로그램 가독성 높이기
토큰 사이에는 공백 문자를 여러 개 입력해도 하나로 간주하는 성질을 응용하면 프로그램을 사람들이 이해하기 쉽게 작성할 수 있다. 이를 일컬어 프로그램의 가독성 높이기(prettify 또는 beautify)라고 한다.
function fact(n) {if(n<=1)return n;return n*fact(n-1);}을 사람들이 편하게 읽을 수 있도록 공백 문자, 탭 문자, 개행 문자를 적절히 추가해서 다음과 같이 작성하는 편이 좋다.

function fact(n){
    if( n <=1 ) return n;
    return n*fact(n-1);
}

문장

문장
자바스크립트는 토큰을 나열하여 한 문장을 만들고, 문장을 이용해 컴퓨터에 명령을 내리고, 문장은 세미클론(;)으로 끝난다.

console.log(i + "! = " + fact(i));

이 코드는 소괄호 안에 들어 있는 값을 콘솔에 출력하라는 명령을 표현한다.

복합문
문장 여러 개를 중괄호({})로 감싼 코드를 복합문 또는 블록문이라고 한다.

{
    sum = sum + x;
    console.log("sum = " + x);
}

빈 문장
빈 문장이란 문장이 하나도 없는 문장을 뜻한다. 빈 문장은 세미클론으로 작성한다.

;

세미클론 자동 추가
문장을 작성하고 다음 줄에 문장을 작성하면 앞 문장 끝에 세미클론이 없어도 자바스크립트 엔진이 자동으로 세미클론을 추가한다.

console.log("Hello")
console.log("Hi")

자바스크립트 엔진은 위의 코드를 다음과 같이 해석한다.

console.log("Hello");
console.loh("Hi");

하지만 자바스크립트 엔진은 세미클론을 생략한 줄이 다음 줄과 이어지고 있다고 판단하면 세미클론을 자동으로 추가하지 않는다.

c = a + b
(x+y).toString()

이 코드에서 2번째 줄의 (x+y)가 첫 번째 줄의 b 함수를 호출하는 코드라고 볼 수 있으므로 자바스크크립트 엔진은 다음과 같이 해석한다.

c = a + b(x+y).toString();

이렇게 세미클론이 자동으로 추가되는 것을 기대하는 행위는 예상하지 못한 오류의 원인이 될 수 있다. 그러므로 문장 끝에는 반드시 세미클론을 입력한다.

주석

주석은 프로그램의 소스 코드에 삽입하는 설명문이다. 자바스크립트에서는 주석을 다음 두 가지 방법으로 작성할 수 있다.
/* 주석문 */
// 주석문

댓글남기기

참고