프로그래밍 언어하면 C언어를 떠올리시는 분들이 많은데, 저는 자바스크립트로 프로그래밍을 강의하려 합니다.

프로그래밍 언어를 처음 배울 때 주로 Hello World라는 문자열을 화면에 출력하는 간단한 코드를 작성하게 되는데, C언어는 코딩(coding)을 한줄이라도 하기 위해선 개발 툴을 설치하고 관련 라이브러리들을 불러와야 하는 과정이 필요합니다.

또한 내가 작성한 코드가 다른 컴퓨터에서 정상적으로 작동하기 위해서는 해당 컴퓨터에 관련 라이브러리들이 제대로 설치되어야 합니다. 반대로 다른 사람이 만든 코드 역시 내컴퓨터에 라이브러리들이 제대로 설치되어 있지 않다면 실행되지 않습니다. 프로그래밍을 배울 때 코딩 외에 신경써야 할 부분이 많다는 것이죠.

1. 자바스크립트를 공부하기 위해서는 아무런 프로그램의 설치가 필요하지 않습니다. 자바스크립트는 웹브라우저에서 실행되는데, 브라우저에 코드를 입력할 수 있는 도구인 '콘솔'이 있기 때문입니다. (랩탑이나 데스크탑의 경우에 한함. 만약 타블릿이나 핸드폰으로 이 글을 읽고 계시다면 코드작성 시에는 랩탑이나 데스크탑을 이용해 주세요.) 물론 실제로 프로그램을 작성한다면 개발용 텍스트 에디터를 사용하는 것이 좋지만, 간단한 코드를 작성하고 테스트하기 위해서는 불필요합니다.

2. C언어는 코드 수정후 재실행시 컴파일이라는 과정이 필요해서 전체 코드를 다시 실행해야 하지만, 자바스크립트는 컴파일이 필요하지 않고 프로그램 실행 중에도 변수, 함수를 생성하거나 해당 데이터, 코드를 변경할 수 있습니다. 코딩 연습할 때 굉장히 편리합니다.

3. C언어에서 작성한 프로그램은 운영체제(윈도우, 맥, 안드로이드, IOS 등)에 따라 호환이 안되는 경우가 많습니다. 자바스크립트는 웹브라우저에서 실행되므로 운영체제의 영향을 받지 않습니다. 브라우저간 호환성은 운영체제 호환성에 비해 굉장히 좋습니다. 심지어 모바일, 타블릿에서도 동일하게 실행됩니다.

이 글은 자바스크립트가 C언어보다 좋다는 것을 설명하는 글은 아닙니다. 배울 때 이것 저것 따질 것이 적다는 것이죠. 프로그래밍 언어는 하나를 어느정도 배워 두면 다른 언어를 익히는 것은 그렇게 어렵지 않습니다. 일단 재미를 붙이고 자신감을 얻는게 중요하죠. 나중에 다른 언어가 필요해 지면 그때 다른 언어를 공부하셔도 늦지 않습니다.

자바스크립트란?

자바스크립트(Java script)는 웹브라우저상에 명령어를 전달하는 언어로 자바(Java)와는 전혀 다른 별개의 언어입니다. 할 수 있는 일도 웹브라우저상으로만 제한됩니다만, 요즘은 웹상에서 못하는 것이 거의 없죠. 웹브라우저에서 작동하는 유일한 언어이기도 합니다. 이 때문에 웹 프로그래밍을 하게 된다면 반드시 접하게 되는 언어입니다.

자바스크립트로 Hello World 출력하기

Hello World 출력은 프로그래밍 언어를 배울 때 가장 먼저 배우는 것으로 화면에 텍스트를 출력하는 것을 익히는 것이 목적입니다. 아래 순서대로 따라해보세요.

1. 현재 이 글을 보고 계신 웹브라우저에서 새 창/새 탭을 열고, 주소창에 "about:blank"라고 입력합니다. (about:blank은 빈 페이지를 여는 명령어입니다.)

2. 웹브라우저의 콘솔을 엽니다. 웹브라우저 콘솔은 웹브라우저에 코드를 입력하기 위한 도구입니다. 아래 표를 보고 자신의 운영체제(OS)와 웹브라우저에 맞는 단축키를 누릅니다.

 운영체제  브라우저  콘솔 여는 법
 윈도우  크롬  Ctrl + Shift + J
 파이어폭스  Ctrl + Shift + K
 인터넷 익스플로러/엣지  F12 누른 후 콘솔(Console)탭 클릭
 맥  크롬  Command + Option + J
 파이어폭스  Command + Option + K
 사파리  Command + , 누른 후, 환경설정 > 고급 > '개발자용 메뉴 보기' 체크, 설정을 종료한 후 브라우저로 돌아 와서 Command + Option + C

저는 크롬 브라우저를 사용하여 콘솔 화면을 열었습니다.

커서가 깜박이는 것을 볼 수 있습니다. 이 부분에 코드를 입력할 수 있습니다.

3. 아래 코드를 입력한 후 엔터

1
console.log("Hello World!")
cs

Hello World!가 출력되었습니다.

- console.log()는 콘솔에 텍스트를 출력하는 함수입니다.
라는 코드에서 괄호안에 출력하고 싶은 내용을 넣으면 화면에 출력해 줍니다. - "Hello World!"에서 큰 따옴표(")는 텍스트를 출력하기 위해 사용하였고 숫자를 출력하고 싶은 경우에는 큰 따옴표를 사용하지 않아도 됩니다. 괄호안의 내용을 바꿔서 다른 내용을 출력하는 연습을 해봅시다.

"지금 프로그래밍을 한 건가요?"

프로그램을 만들었다기 보다, 명령어를 하나 배운 것 같은 느낌이 드실 겁니다. 이건 자바스크립트가 웹브라우저에서 작동하는 스크립트 언어이기 때문입니다. 이미 웹브라우저라는 프로그램이 실행중인 상태에서, 그 프로그램에 코드를 보내 실행되는 형태입니다.

좀 더 프로그램같은 걸 보고 싶은 분들은 아래코드를 복사해서 웹브라우저 콘솔에 붙여넣기해 보세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var width = 350, height = 250, range = 20;
var player = {x: 150, y: 75, width: 20, height: 20, val:2};
var enemy = {x: 0, y: 0, width: 20, height: 20, val:1};
var score = 0, count = 0, key = [];
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
canvas.style.border = "1px solid black";
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
setInterval(function(){
  update();
  draw();
},10)
function draw(){
  ctx.save();
  ctx.fillStyle = "white";
  ctx.fillRect(0,0,width,height);
  ctx.fillStyle = "red";
  ctx.fillRect(enemy.x-enemy.width/2,enemy.y-enemy.height/2,enemy.width,player.height);
  ctx.fillStyle = "black";
  ctx.fillRect(player.x-player.width/2,player.y-player.height/2,player.width,player.height);
  ctx.font = "20px Arial";
  ctx.fillStyle = "black";
  ctx.fillText("Score: "+score,0,20);
  ctx.restore();
}
function update(){
  if(player.x >= enemy.x-range && player.x <= enemy.x+range && player.y >= enemy.y-range && player.y <= enemy.y+range ){
    enemy.y = 0;
    score++;
  }
  if(enemy.y > height || enemy.y == 0){
    enemy.x = Math.ceil(Math.random()*width);
    enemy.y = 0;
    enemy.val = 1;
  }
  if(key[37]&&player.x-player.width/2>0) player.x -= player.val;
  if(key[38]&&player.y-player.height/2>0) player.y -= player.val;
  if(key[39]&&player.x+player.width/2<width) player.x += player.val;
  if(key[40]&&player.y+player.height/2<height) player.y += player.val;
  enemy.y += enemy.val;
  enemy.val += 0.02;
}
window.addEventListener("keydown", function(e){
  key[e.keyCode] = true;
});
window.addEventListener("keyup", function(e){
  key[e.keyCode] = false;
});
 cs

마우스로 게임화면을 한번 클릭하신 후 키보드 상하좌우 키를 눌러 검은 네모를 움직일 수 있습니다. 검은 네모가 떨어지는 빨간 네모에 닿으면 점수가 올라갑니다. 게임종료는 없습니다. 지금 이 코드는 그냥 흥미위주로 봐주시고 코드의 이해는 하지 않으셔도 됩니다.

'프로그래밍 입문' 카테고리의 다른 글

자바스크립트로 프로그래밍 입문 6. 연산자(Operator)와 변수(Variable)  (0) 2018.10.03
자바스크립트로 프로그래밍 입문 5. 비트(Bit), 바이트(Byte) 그리고 자료형(Data Type)  (0) 2018.09.21
자바스크립트로 프로그래밍 입문 3. 프로그래밍 언어의 발달  (0) 2018.09.19
자바스크립트로 프로그래밍 입문 2. 컴퓨터의 작동 원리  (0) 2018.09.19
자바스크립트로 프로그래밍 입문 1. 프로그래밍이란  (0) 2018.09.15

+ Recent posts

티스토리툴바