Javascript 공부하기. 알람 시계2

공부/컴 2017. 10. 29. 18:40

글 1에서는 알람 시계에서 쓰일 Object 의 뼈대만 정의했었다.

내용이 너무 짧은 감이 없지 않지만, 알람 시계 자체가 복잡한 프로그램이 아니기 때문에 자잘하게 나눠서 쓰는 것도 괜찮을 것 같다.

이번에는 저번에 만든 뼈대에 내용을 좀 채워 보려고 한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
    function Clock(){
      this.time=new Date();
    }
 
    function Alarm(){
      this.time;
    }
 
    //Run Interval
    function RunInterval(){
    // 여기다가 갱신할 내용들을 넣자.
      setTimeout("RunInterval",50);
    }
cs

지난번에 만든 코드는 고작 요만큼이다. 보다시피 뼈대는커녕 이름만 걸어 놓은 정도이다. 내용을 조금만 채워 보자.

1
2
3
4
5
6
  var ALARM_NUMBER=5;
    var nowclock=new Clock();
    var alarmclock=new Array(ALARM_NUMBER);
    for(var i=0;i<ALARM_NUMBER;i++){
      alarmclock[i]=new Alarm();
    }
Colored by Color Scripter
cs

알람시계는 여러 개를 만들 것이기 때문에 이렇게 배열 형태로 만들었다.

굳이 ALARM_NUMBER 라는 변수를 만든 이유는 나중에 코드를 수정하기 쉽도록 하기 위해서이다.

1
2
3
4
5
6
    function Clock(){
      this.time=new Date();
      this.runf=function(){
          this.time=new Date();
      }//endof runf
    }
cs

그리고 Clock() 에 runf() 라는 함수를 넣어서 시간을 갱신하도록 했다.

이 runf는 나중에 RunInterval 에 넣어서 지속적으로 갱신시키도록 한다.

1
2
3
4
5
6
    function Alarm(){
      this.time;
      //프레임마다 알람시계에서 작동되는 함수 runf
      this.runf=function(){
      }//endof runf
    }//endof function Alarm()
cs

Alarm 에도 만들어주고 (아직 빈 함수지만)

1
2
3
4
5
6
7
    function RunInterval(){
      nowclock.runf();
      for(var i=0;i<ALARM_NUMBER;i++){
        alarmclock[i].runf();
      }
      setTimeout("RunInterval",50);
    }
Colored by Color Scripter
cs

RunInterval에 runf 를 추가해준다.

그리고 나서 알람시계에서 가장 중요한 기능인 "알람을 울리는 기능" 의 뼈대를 넣어준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    function Alarm(){
      this.time;
     //알람 울리기.
     this.ringalarm=function(){
     }
      //프레임마다 알람시계에서 작동되는 함수 runf
      this.runf=function(){
        //현재시간을 비교해서 알람을 울리도록 한다.
        var nowtime=new Date()
        if(this.time.getTime()<nowtime.getTime()){
          this.ringalarm();
        }
      }//endof runf
      //알람 초기화(설정)
      this.setalarm= function(atime){
        time=atime;
      }
   } 
Colored by Color Scripter
cs

죄다 속이 빈 함수들이지만 이쯤 하고 나면 대충 "뼈대는 만들었다." 정도 느낌이다.

사실 시간을 검사하고 비교하는 내용들은 이미 다 들어가 있다. 남은 것은 화면에 표시를 하고 알람을 직접 울리는 것 뿐이다.

그럼 이제 시계들을 표시할 테이블을 작성하자. 알람시계 개수만큼의 칸을 작성해야 하기 때문에, body에 직접 적지 않고 javascript 를 이용하는게 좋을 것 같다. 이를 위해 <body>에 div 공간을 하나 만들었다.

1
2
3
<body>
<div id=DIValarmtable></div>
</body>
cs

와 정말 간단하다.

나는 스타일시트 같은건 아직 다룰 줄 모르니 패스하도록 하자.

저 div안에 넣을 자바스크립트를 작성해야 한다. 여기서 나는 JQuery 를 쓰기로 했다. 사실 한 번도 안 써봤는데 오늘 처음 써 보는 것이다. 혹시 이 내용을 무작정 따라해보려는 왕초보가 있다면 jQuery 설치부터 해야 한다는 점을 일러둔다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function MakeTable(){
  var divspace=jQuery('#DIValarmtable')[0];
 
  var tcs="<table border=1>\
  <tr>";
 
  var tcs=tcs+"<td colspan=2><div id='DIVclock'></div></td>\
  </tr>";
 
  for(var i=0;i<ALARM_NUMBER;i++){
    var tcs=tcs+"<tr>\
    <td><div id='DIValarm"+i+"'></div></td>\
    <td><div id='DIVremain"+i+"'></div></td>\
    </tr>";
  }
  var tcs=tcs+"</table>";
 
  divspace.innerHTML=tcs;
}
Colored by Color Scripter
cs

난잡해 보이지만 나름 가독성에 신경을 쓰려고 이렇게 작성했다.

사실 내 초보적인 능력 내에서 최대한 열심히 구성해 본 것이다.

이렇게 만들고 나서 function Clock() 의 runf 안에 시간표시를 갱신하는 내용을 추가해준다.

1
2
3
4
5
  this.runf=function(){
 
    this.time=new Date();
    jQuery('#DIVclock')[0].innerHTML=this.time;
  }//endof runf
cs

4번 줄의 jQuery~~ 을 추가했다. 좀 더 예쁘게 쓰기 위해서는 time 을 바로 쓸 게 아니라, 데이터를 예쁘게 파싱해서 적어야 하지만 이렇게만 해서 html로 실행 시켜 봐도 무언가가 작동한다는 것은 알 수 있다. 다만 그 전에 RunInterval()과 MakeTable()은 자바스크립트가 구동될 때 실행시킬 수 있도록 전역 쪽에적어주자.

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
  <head>
    <title>Alarm</title>
  </head>
  <body>
<div id='DIValarmtable'></div>
  </body>
</html>
 
<script type="text/javascript" src="jquery.js" charset="utf-8"></script>
 
<script type='text/javascript'>
 
var ALARM_NUMBER=5;
 
function MakeTable(){
  var divspace=jQuery('#DIValarmtable')[0];
 
  var tcs="<table border=1>\
  <tr>";
 
  var tcs=tcs+"<td colspan=2><div id='DIVclock'></div></td>\
  </tr>";
 
  for(var i=0;i<ALARM_NUMBER;i++){
    var tcs=tcs+"<tr>\
    <td><div id='DIValarm"+i+"'></div></td>\
    <td><div id='DIVremain"+i+"'></div></td>\
    </tr>";
  }
  var tcs=tcs+"</table>";
 
  divspace.innerHTML=tcs;
}
 
MakeTable();
 
function Clock(){
  this.time=new Date();
  this.runf=function(){
 
    this.time=new Date();
    jQuery('#DIVclock')[0].innerHTML=this.time;
  }//endof runf
} //endof function Clock
 
function Alarm(){
  this.time;
 
  //알람 울리기.
  this.ringalarm=function(){
  }
  //프레임마다 알람시계에서 작동되는 함수 runf
  this.runf= function(){
    //현재시간을 비교해서 알람을 울리도록 한다.
    var nowtime=new Date()
    if(this.time<nowtime){
      this.ringalarm();
    }
  }//endof runf
  //알람 초기화(설정)
  this.setalarm=function(atime){
      this.time=atime;
  }//endof setalarm
}
 
var nowclock=new Clock();
var alarmclock=new Array(ALARM_NUMBER);
for(var i=0;i<ALARM_NUMBER;i++){
  alarmclock[i]=new Alarm();
}
//Run Interval
function RunInterval(){
 
  nowclock.runf();
  for(var i=0;i<ALARM_NUMBER;i++){
    alarmclock[i].runf();
  }
  setTimeout(RunInterval,50);
}
RunInterval();
</script> 
Colored by Color Scripter
cs

대략 이런 표가 나온다.

브라우저나 스타일 기본설정에 따라 표의 모양은 조금씩 다를 수도 있다.

뭔가 길게 한 것 같은데 꼴랑 이것뿐이라니 굉장히 아쉬울 수도 있지만, 뼈대는 다 만들었고, 우리에게 남은 건 내부 함수 한두 개만 더 구현한 뒤, 인터페이스를 다듬는 것 뿐이다.

저작자표시

ABOUT ME

Lindows 블로그 Lindows 블로그

티스토리툴바

ABOUT ME

관련글 관련글 더보기

티스토리툴바