Study HTML5 & JavaScript (1) – World Clock App

JavaScript+HTML5 Study Book

もっと武器を持つために、HTML5とJavaScriptの勉強をしています。

Web のコードがだいたい書けるようになったので、

今度はWeb Appが作れるようになるよう訓練です。

 

『つくって覚えるJavaScript+HTML5入門』 

出版社 : アスキー・メディアワークス

オフィス加減 (著)

 

Web Appに特化した本 & とにかく書いて書いてつくっていく、

という内容だったので、この本にしました。

 

World Clock

今日は「世界時計」Appをコンプリートしました。

学習した内容を忘れないように、以下メモです。

・現在の時刻(時間、分、秒)の取得

new Date()

現在の日時を取り出すメソッド

getHours()

時間を取り出すメソッド 0~23の値を返す

getMinites()

分を取り出すメソッド 0~59の値を返す

getSeconds()

秒を取り出すメソッド 0~59の値を返す

DOM要素 = document.getElementById(“〇〇”); 

HTML ID「〇〇」のDIVタグを取り出すメソッド

DOM要素.innerHTML = 書き換えたい文字列;

HTML ID「〇〇」のDIVタグの中に書き込むメソッド

onLoad = “関数〇〇”

ページ読み込み時に関数〇〇を実行するメソッド

 

・現在の日付(年、月、日、曜日)の取得

getFullYear()

年を取り出すメソッド 4桁の年を返す

getMonth() 

月を取り出すメソッド 0~11の値を返す

(12月にするためには+1を忘れずに)

getDate()

日を取り出すメソッド  1~31の値を返す

getDate()

曜日を取り出すメソッド 0~6の値を返す

(0は日曜日、6は土曜日に相当)

var 配列名 = [要素1, 要素2,・・・, 要素n];

配列に要素を格納するメソッド

配列名[インデックス]

配列に〇〇メソッドを渡すメソッド

 

・時間の経過によって時刻が変化(タイマーの使用)

setTimeout (関数, 待機時間) / setInterval(関数, 繰り返し時間)

関数を待機時間ごとに繰り返すメソッド

 

・プルダウンリストの作成

<select id = “ID”>

<option value = “値1″> ラベル1

<option value = “値2″ selected> ラベル2

<option value = “値n” > ラベルn

</select>

slected は初期値

 

・世界各国の都市の日時を取得

getTime()

1970年1月1日午前0時から、現在までの経過ミリ秒を参照するメソッド

selectedIndex 

フォームの選択メニューで選択されている項目の参照番号を返すメソッド

select要素.options[選択されたインデックス].value

optionタグのvalue属性の値を取り出すメソッド

 

淡々とこなしていこうと思います。