Movatterモバイル変換

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

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

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

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 16値の変更• a++ と ++a の違いvar a = 1;a = ++a;console.log( 'aは‘ + a); // 2var b = 1;var c = b++;var d = b;console.log( 'cは' + c); // 1console.log( 'dは' + d); // 2

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

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

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 23条件分岐（if文）if (条件式１) {実行したい処理；}else if (条件式２) {実行したい処理；}else{実行したい処理；}条件式１が成立したとき、｛｝の中を実行する条件式１が成立せず、条件式２が成立したとき、｛｝の中を実行する条件式１と条件式２が成立しないとき、｛｝の中を実行する

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

Copyright Ⓒ Yoshihiro Takahashi 2012 All Rights Reserved. 30デジタル時計の特徴• ゼロの表示– 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

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

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

Movatterモバイル変換

Change Language

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

Embed presentation

Recommended

More Related Content

Viewers also liked

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

More from Yossy Taka

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