読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

デジタル時計とDOMの操作

デジタル時計

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>デジタル時計</title>
<style>
#clock {
  width: 450px;
  background-color: #000;
  color: #FFF;
  text-align: center;
  border:10px solid #666;
  font-size: 90px;
  font-family:monospace;
  font-weight:bold;
  padding: 10px 20px;
}
</style>
<script>
var hourSpan, minSpan, secSpan, now;
var hour, min, sec;
window.onload = init;
function init(){
  hourSpan = document.getElementById('hour');
  minSpan =  document.getElementById('min');
  secSpan =  document.getElementById('sec');	
  dClock();
}

function dClock(){
  now = new Date();
  hour = now.getHours();
  min = now.getMinutes();
  sec = now.getSeconds();

  if (hour < 10) hour = '0' + hour;
  if (min < 10) min = '0' + min;
  if (sec < 10) sec = '0' + sec;

  hourSpan.innerHTML =hour;
  minSpan.innerHTML =min;
  secSpan.innerHTML =sec;
  setTimeout('dClock()',1000);
}
</script>
</head>
<body>
<h1>デジタル時計</h1>
<div id="clock">
<span id="hour">00</span>:<span id="min">00</span>:<span id="sec">00</span>
</div>
</body>
</html>

特定のタイミングで実行したいスクリプトをまとめる

関数:function
function myidEvent() {
    alert( '押されました' );
}
  • myidEvent() という名前でスクリプトをグループ化しました。
特定のイベントに関連づける
  1. HTML内に各要素の属性のonClickなどイベント用の属性に記述する
  2. DOMで取得した要素のonClickなどのプロパティに記述する
  3. DOMでaddListenerを使う


1. HTML内に属性としてonClick時に定義した関数を呼ぶ

<p onClick="myidEvent();">テスト</p>


この「テスト」という文字をクリックされたときにfunctionで定義した関数「myidEvent() 」の内容が実行されます。



【記述例】
この例では、HTMLの要素内にスクリプトを記述しているため振る舞いと文書構造が分離できません。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントとタイミングを記述</title>
<script>
 function myidEvent() {
    alert( '押されました' );
 }
</script>
<style>
p {
	cursor: pointer;
}
</style>
</head>
<body>
<p onClick="myidEvent()">テスト</p>
</body>
</html>

【記述例】
DOMを使い書き換えてみます。
「getElementById()」メソッドは、HTMLが読み込まれた後に実行する必要があります。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
<script>
function myidEvent() {
    alert( '押されました' );
}
document.getElementById( 'myID' ).onclick = myidEvent;
</script>
<style>
p {
	cursor: pointer;
}
</style>
</head>
<body>
<p id="myID">テスト</p>
</body>
</html>

window.onloadを利用する

  • HTMLの下のほうに記述することはメンテナンスの上でも不都合です。
  • 外部ファイルとして「.js」ファイルを読み込む場合も同じです。
ページが読み込まれた際に命令が実行されるようにする

《HTML》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DOMでイベントとタイミングを記述</title>
<style>
p {
	cursor: pointer;
}
</style>
<script src="dom_click.js"></script>
</head>
<body>
<p id="myID">テスト</p>
</body>
</html>


《外部JSファイル》

window.onload = function(){
    document.getElementById( 'myID' ).onclick = myidEvent;
}
function myidEvent() {
    alert( '押されました' );
}