자바스크립트로 프로그래밍 입문 4. 자바스크립트 Hello World

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

프로그래밍 입문에 있어 C언어에 비해 자바스크립트는 몇가지 장점이 있습니다.

1. 자바스크립트를 공부하기 위해서는 아무런 프로그램의 설치가 필요하지 않습니다. C언어 배우기 등으로 인터넷 검색을 해보면 가장 처음 나오는 것이 개발툴을 설치법입니다. 자신의 운영체제에 맞는 개발툴을 선택해야 하고, 개발툴 사용법도 익혀야 하고.. 코딩을 하기 전에 셋팅해야 할 부분들이 꽤 있습니다. 반면 자바스크립트는 웹브라우저에서 실행되는데, 랩탑이나 데스크탑의 경우 브라우저 자체에 코드를 입력할 수 있는 도구인 '콘솔'이 있어 바로 코드를 입력할 수 있습니다. 물론 연습이 아닌 실제로 프로그램을 작성한다면 개발용 텍스트 에디터를 사용하는 것이 좋지만, 간단한 코드를 작성하고 테스트하기 위해서는 불필요합니다.

2. C언어에서 작성한 프로그램은 운영체제(윈도우, 맥, 안드로이드, IOS 등)에 따라 호환이 안되는 경우가 많습니다. 또한 같은 운영체제라도 각종 라이브러리들이 제대로 설치되어 있지 않으면 실행되지 않습니다. 그래서 인터넷에서 C언어 코드를 다운받은 후 실행하면 안되는 경우가 종종있습니다. 자바스크립트는 운영체제의 영향을 거의 받지 않고 언어자체의 라이브러리가 C언어에 비해 풍부합니다. 외부 라이브러리를 사용하더라도 '컴퓨터에 설치'하는 것이 아닌, '라이브러리 파일을 브라우저에서 호출'하는 것이기 때문에 설정이 쉽습니다. 인터넷 등에서 발견한 예제가 훨씬 실행이 잘 됩니다. 1, 2번 항목은 프로그래밍을 배울 때 컴퓨터 셋팅에 소비되는 시간을 줄이고 코딩 자체(알고리즘 연습)에 더욱 집중할 수 있게 해주는 장점입니다.

3. 자바스크립트는 프로그램 실행 중에도 변수, 함수를 생성하거나 변수값, 함수 코드를 변경할 수 있습니다. C언어는 컴파일이라는 과정이 필요해서 코드를 수정하려면 현재 실행중인 프로그램을 중단하고, 코드를 수정한 후, 재실행을 해야 합니다. 프로그래밍 연습을 하는데에는 자바스크립트가 훨씬 유리합니다.

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

자바스크립트란?

자바스크립트(JavaScript)는 웹브라우저상에 명령어를 전달하는 언어입니다. (자바(Java)와는 전혀 다른 별개의 언어입니다.)

초창기에는 인터넷에서 로그인 버튼을 누르기 전에 id나 password가 입력이 되었는지 아닌지를 확인하는 정도의 역할을 하기 위해 만들어 졌지만, 지금은 그 역할이 확대되어 하나의 언어로 자리잡았습니다. 인터넷이 할 수 있는 일도 웹브라우저상으로만 제한됩니다만, 요즘은 웹상에서 못하는 것이 거의 없죠. 웹브라우저에서 작동하는 유일한 언어이기도 합니다. 이 때문에 웹 프로그래밍을 하게 된다면 반드시 접하게 되는 언어입니다.

자바스크립트로 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. 아래 코드를 입력한 후 엔터

console.log("Hello World!")

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

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

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

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

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

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;
});


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

댓글

댓글쓰기

이 글에 댓글을 다시려면 SNS 계정으로 로그인하세요. 자세히 알아보기

UP