Javascript 공부하기. 알람 시계 1

인벤 게임 컨퍼런스에서 HTML5 로 게임 프로그래밍 하기에 대한 강연을 보고

예전에 고민하다가 포기했었던 HTML5 프로그래밍이 다시 하고싶어져서 그 일환으로 우선 Javascript 를 연습하기로 했다.

사실 HTML5가 어떤 건지도 정확하게 잘 모르겠지만 "인터넷 브라우저 환경에서 다양한 것들을 구현할 수 있는 도구" 정도로 생각해도 틀리지는 않을 것이다. 또 이것을 다루는 데에는 Javascript 가 필수적이다. (사실 Javascript 말고 다른 언어도 있긴 할텐데 잘 모르겠다.)

그래서 Javascript 로 뭘 만들까 생각하다가, 알람 시계 프로그램을 하나 만들어 보기로 했다.

알람 시계 같은 건 사실 C 같은 걸로 만들어서 하나의 응용 프로그램으로 만드는 게 가장 쓰기도 편하고 효율적이겠지만 어차피 프로그래밍 연습일 뿐이니.

만들고 싶은 모양은 왼쪽처럼

현재 시각과 여러개의 알람시계가 함께 표시되는 형태이다.

모양을 보면 <table>을 이용해서 구현하는 게 가장 쉬워 보인다.

뭐 인터페이스는 나중으로 제쳐두고 시계 그 자체부터 구현을 해야 한다.

자바스크립트로 들어가자.

    function Clock(){
      this.time=new Date();
    }

우와 데단해.

여기서부터 시작하자.

function 이라고 적혀 있지만 class 와 비슷한 느낌의 Object이다. 자바스크립트에서는 원래 이렇게 쓴다.

이 new Date()는 현재 시각을 불러온다. ()에 날짜시각 변수를 받아서 특정 시각으로 사용 할 수도 있지만, 일단 변수가 없으면 현재 시각이다.

    function Clock(){
      this.time=new Date();
    }
 
    function Alarm(){
      this.time;
    }

덤으로 알람도 만들었다.

그리고 시계는 실시간으로 갱신되어야 되기 때문에 Interval 을 돌려줘야 한다.

    //Run Interval
    function RunInterval(){
      
      setTimeout(RunInterval,50);
    }

setTimeout(RunInterval,50); 은 RunInterval() 이라는 함수를 50 ms 뒤에 실행한다는 뜻인데, RunInterval() 안에 들어있기 때문에, 50ms 마다 자기 자신을 실행하게 된다.

이것 외에 setInterval() 이라는 함수도 있는데, 나는 여러가지 사소한 이유로 간단한 사이클을 돌릴 때는 setTimeout 을 쓰는 것을 선호한다. setInterval() 함수의 사용법이 궁금한 사람은 인터넷에서 찾아보자.

50ms 마다 실행하게 되면 20fps 의 갱신수를 가진다.

지금 적은 함수는 자기 혼자 계속 실행 될 뿐, 이 안에 주기적으로 작동시킬 내용들을 넣어 주어야 한다. (시계를 갱신한다던가)

Clock, Alarm , RunInterval 으로 이름붙인 이 3개의 function 들을 기반으로 시작해보자.