Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-

JavaScriptでデジタル時計
JavaScriptの制御構文を学ぼう

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights
2
デジタル時計を作りながら
JavaScriptを学習していこう

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 3
本日の目標
• デジタル時計
– JavaScriptで日時を取得
– HTMLで日時を表示
– CSSで文字サイズ、文字色などを設定
– 変数、関数、if文などを学習

4
時計を制作するには、PCから日時を
取得する必要があります。
日時を取得するJavaScriptの命令は・・・。

Date()
日時取得の命令

日時の取得例
var now = new Date();
var hour = now.getHours();
console.log(hour);
実際に入力して、ブラウザで確認
してみましょう

Date()の内容
• Dateオブジェクトを生成
– var now = new Date();
• 主に取得できるデータ
– getDate()：日にちを参照する
– getDay()：曜日を参照する（0～6、日曜～土曜）
– getFullYear()：4桁の西暦年を参照する
– getHours()：現在の時を参照する
– getMilliseconds()：ミリ秒（1000=1秒）を参照する
– getMinutes()：分を参照する
– getMonth()：月を参照する（0～11、1月～12月）
– getSeconds()：秒を参照する

日時の取得方法
• 日付・時間を取得し、変数に代入

変数について
• 変数とは
– 値を入れるための「入れ物」
– 値（数字など）を変化させたい場合に使用する
– 「 var 変数」で、変数の宣言（作成）
– 「変数＝値」で、変数に値を代入
• 記述例
var 変数 = 値 ;
var 変数 = ‘文字’ ; // 文字はシングルクォート ‘’ で囲む
var 変数 = 値, 変数 = ‘文字’； // カンマ, で複数宣言

ポイント
= 値
代入
「＝」は、代入という意味です。
「＝」の左側は「入れ物」、「＝」の右側は「値」となります
数学の X=Y とは違います
XとYが等しいというイメージを捨てましょう
入れ物

値の変更
• 変数内の値の変更
変数 = 数字;
変数 = 変数 + 数字;
– 記述例
• 足し算 num = num + 1 ;
• 引き算 num = num − 1 ;
• かけ算 num = num ＊ 1 ;
• 割算 num = num / 1 ;

12
四則演算
など

値の変更
• 算術演算子
演算子意味使用例
+ 加算 a = 6 + 2; // 7
- 減算 a = 6 - 2; // 4
* 乗算 a = 6 * 2; // 12
/ 除算 a = 6 / 2; // 3
% 剰余 a = 7 % 2; // 1

値の変更
• 算術演算子の省略形（代入演算子）
a = a + 2;
a += 2;
同じ意味
＋ー / ＊ % で同様に記述できる

値の変更
• 他の算術演算子（＋＋インクリメント, ーーデクリメント）
a = a + 1;
a += 1;
a++;
同じ意味
＋とーで同様に記述できる

値の変更
• a++ と ++a の違い
var a = 1;
a = ++a;
console.log( 'aは‘ + a); // 2
var b = 1;
var c = b++;
var d = b;
console.log( 'cは' + c); // 1
console.log( 'dは' + d); // 2

要素に時分秒を表示してみよう
• アラートではなく、ブラウザ上に文字として
表示します
– 記述例
document.getElementById(‘id’).innerHTML = ‘文字’;
– 表示結果
＜タグ id=‘id’＞文字＜／タグ＞

文字表示の特長
• 変数と文字の文字連結表示
– プラス（＋）で連結する
– 文字は ‘ ’ で囲う
– ‘文字’ + 変数 + ‘文字’
• 記述例
.innerHTML = hour + “時”;

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved.
19
課題
• 時刻を表示してみよう
– 年・月・日・曜日を「/」で、文字連結
時・分・秒の値と「：」を文字連結して表示し
よう
2016/８/16/日
16：35：57
getFullYear()：4桁の西暦年を参照する
getMonth()：月を参照する
getDate()：日にちを参照する
getDay()：曜日を参照する
getHours()：時を参照する
getMinutes()：分を参照する
getSeconds()：秒を参照する

時を12時間表記に
してみよう

21
条件分岐
if

条件分岐（if文）
if (条件式１) {
実行したい処理；
}
else if (条件式２) {
}
else{
}

if (条件式１) {
}
else if (条件式２) {
}
else{
}
条件式１が成立したとき、
｛｝の中を実行する
条件式１が成立せず、
条件式２が成立したとき、
｛｝の中を実行する
条件式１と条件式２が
成立しないとき、｛｝の
中を実行する

条件式の設定方法
• 比較演算子
A == B （等しい）’3’ == 3
A === B （厳密に等しい）3 === 3
A > B （より大きい）
A < B （より小さい）
A >= B （以上）
A <= B （以下）
A != B （等しくない）
A !== B （厳密に等しくない）’3’ !== 3

if (パソコンの価格＜５万円) {
パソコンを購入；
}
else{//条件を満たしていないとき
お店から出る；
}
• 普段からifは使っています

if (時の値 > 11) {
時の値 = 時の値－12；
}
• 12時間表記の場合

27
%でも12時間表記

％剰余算
時の値 = 時の値 %12；
• 12時間表記の場合

29
デジタル時計
• 現在の問題点
?

デジタル時計の特徴
• ゼロの表示
– 0～9までは１桁なので、表示が変になる
• 14：1：5
• 12：13：45
• 1：5：7
• 2008/1/5
• 2007/12/25
– 年を除く各項目の値が0～9の時は前に０を追加
• 14：01：05
• 12：13：45
• 01：05：07
• 2008/01/05
• 2007/12/25

31
• 年を除く各項目の値が0～9の時は、数字
の前に０を追加してみよう。
– if文を使うと簡単です。

32
• 年を除く各項目の値が0～9の時は、数字
の前に０を追加してみよう。
– if文を使うと簡単です。
– でも、月，日，時，分，秒の5つも似たよう
な処理を書くのは面倒・・・

33
課題
• 各項目の値が0～9の時は、数字の前に０
を追加してみよう・・・Part 2
– 関数を作成して、1つの処理にまとめましょう。
• 関数の内容は、先ほど説明したif文です。
– 関数は、「作ること」と「使うこと」は別に
なりますので、注意してください。

function：処理をまとめる
• ユーザーが事前に設定できる、命令文です。
実行処理の再利用、一元管理するのに有効です。
関数は、「作ること」と「使うこと」は別になりますので、
勘違いしないよう気をつけてください。
function 関数名(引数1,引数2,・・){
・・・
return 戻り値;
}

もう少し高速動作
を意識する
学習のためにifとfunctionを確認しました

36
デジタル時計の桁調整
• sliceによる文字の切り取り
– sliceの使用例 → 文字.slice(開始位置)
var a = 123456789;
a.slice(3); → 3456789
a.slice(-2); → 89
– 日時の場合
( ‘0’ + hour).slice(-2);
// hourが5の場合05、25の場合025→25

曜日を簡単に
表示する

38
曜日を簡単に表示する
• ifの場合 → 記述が長い
var day = now.getDay();
if(day == 0){
//日曜表示
}else if(day == 1){
//月曜表示
} else if(day == 2){
//火曜表示
}
・・・・・

39
そこで配列！！

40
曜日を簡単に表示する
• 配列を利用
– CDケースみたいなもの・・・です。

配列
• オブジェクトを作成します。
var a = new Array();
例 a[0] = 100;
a[1] = 200;
a[2] = 300;

配列の特徴
• []の中に変数が使える
a[ 変数 ]

配列
• 記述例
var a = new Array();
a[0] = ‘ABC’;
a[1] = ‘DEF’;
a[2] = ‘GHI’;
var a = new Array(‘ABC’, ‘DEF’, ‘GHI’);

簡単なデジタル時計を
作成してみよう

デジタル時計
?

デジタル時計
– 時間が止まってる ⇛ 時間を動かしたい

デジタル時計
– 時間が止まってる ⇛ 時間を動かしたい
アニメーションしよう

プログラミングのポイント
• 考え方の基本は、
【いつ】 + 【どこ/誰】 + 【どうする】

皆さん、来週一緒にランチしましょう

皆さん、来週一緒にランチしましょう
誰いつどうする

12:23:45

12:23:45数字よ変われ！

• 【いつ】 + 【どこの/誰】 + 【どうする】
– 数ミリ秒間隔のタイミングで（いつ）
– ID名（どこ/誰）
– 数字を変化させる（どうする）

アニメーション
• 数ミリ秒間隔のタイミングで
– 指定した値のミリ秒間隔で連続で実行
– 「何か」を繰り返し実行し続けたい場合に利用
– 「setInterval」というイベントを使います。
• 設定方法
setInterval(function (){
繰り返しやりたい事；
}, ミリ秒);

Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-

More Related Content

Viewers also liked

Similar to Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-

More from Yossy Taka

Javascript入門-デジタル時計を作りながらJavaScriptを学ぼう-