Javascript 공부하기. 알람 시계4

이번에는 알람시각이 되었을 때 알람을 울리기 위한 동작을 구현해 볼 것이다.

앞에서 Alarm() 함수 안에 ringalarm() 이라는 함수를 "이름만" 걸어 놓았다.

알람 시계에 가장 필요한 건 역시 "소리" 일 것이다. 그래서 audio 재생 구현을 중심으로 공부해보자.

먼저 html상에 audio 요소가 있어야 되기 때문에 이것을 MakeTable() 안에 추가 해 주자.

audio 태그의 간단한 형태는 <audio id='id' src='PATH'> 이다.

audio 태그를 추가하고 관리하기 위해 추가한 코드들은 다음과 같다. 주석을 참고해서 읽어보면 어디에 추가하면 될 지는 바로 알 수 있을 것이다.

//전역변수로 경로 등록
ALARM_SOUND_PATH='justice.mp3';
 
//MakeTable() 안에 추가
<audio id='alarmsound"+i+"' src='"+ALARM_SOUND_PATH+"'></audio>
 
//Alarm() 안에 audio를 다루기 위한 변수 추가
this.alarmsound;
 
//Initialize() 안에 alarmsound 에 오브젝트 할당.
alarmclock[i].alarmsound=jQuery('#alarmsound'+i)[0];
 
//ringalarm() 함수 구현
  this.ringalarm=function(){
    this.alarmsound.play();
    alert(this.number +"번 알람입니다.");
  }

이렇게 하면 일단 소리가 재생되고 alert 가 뜬다.

이렇게 제작을 하다가 필요할 것으로 생각되는 기능이 하나 떠올랐는데

바로 알람이 5개가 있지만 모두를 쓰는 것은 아닐 수 있으므로, 알람에 켜고 끄는 기능을 추가한다.

알람이 켜고 끄진 것을 알려주는 칸을 표에 추가한다.

MakeTable() 에서 시계 부분의 colspan을 3으로 늘리고 기존 알람시계들 앞에 칸을 하나 더 만들었다.

  <td><div id='alarmlight"+i+"' align=center onClick='javascript:alarmclock["+i+"].toggle_enable()' style='color:#40FF40;'>●</div></td>

alarmlight 라는 div 를 추가하고 color 를 #40FF40 (밝은 초록색) / #FF0000 (붉은색) 으로 나타낸다.

또한 onclick 을 이용해서 간단하게 껐다 켰다 할 수 있도록 했다.

여기에 맞춰서 각 Alarm() 안에   alarm_enabled 라는 변수를 추가해서 true/false 로 알람을 켜고 끄며, 관련 메소드도 추가해준다.

this.alarm_enabled=true;
this.toggle_enable=function(){
    if(this.alarm_enabled){
      this.alarm_enabled=false;
      $("#alarmlight"+this.number)[0].style.color="#FF0000";
    }//endof if this.alarm_enabled is true
    else{
      this.alarm_enabled=true;
      $("#alarmlight"+this.number)[0].style.color="#40FF40";
    }//endof else
  }//endof toggle_enable

또 알람을 울리기 전에 alarm_enabled 가 true인지 false 인지 판별하는 부분만 넣어주면 완성된다.

붉은색은 꺼진 알람, 초록색은 켜진 알람이다.

이 정도면 알람시계로서 필요한 것은 다 구현되었다고 생각된다.

기능적인 면으로는 이제 여기다가 알람 시계 개수를 몇 개로 할 지 설정할 수 있는 버튼을 추가하거나, 알람음을 각각 설정할 수 있도록 하는 버튼을 추가할 수도 있다.

또 인터페이스가 굉장히 못 생겼기 때문에, css나 기타 기능을 이용해서 보기 예쁘게 꾸밀 수도 있다.

하지만 일단 내가 구현하고 싶었던 핵심 내용들이 구현되었기 때문에, 이 알람시계는 여기까지 만들기로 한다.

사실 알람음 설정 기능까지는 추가를 하려고 했는데 갑자기 다른 만들어보고 싶은 프로젝트가 생각나서 여기까지 만들었다.

그럼 이만.