JavaScriptのオブジェクト：Mathオブジェクト、Dateオブジェクト

JavaScriptのオブジェクト
Mathオブジェクトの利用（ランダム）
Dateオブジェクトの利用（日時取得）

Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights
2
今日のテーマ
オブジェクトを覚えて
ワンランクアップ

Copyright Ⓒ Yoshihiro Takahashi 2014 All Rights Reserved. 3
オブジェクトとは
• JavaScriptが用意している命令
• 特定の機能を実現できる
• 使用方法
– 時刻を調べる
– ランダム
など

4
オブジェクトは
必須

5
最初のテーマ
Math
オブジェクト

Mathオブジェクトとは
• 数学(mathematics)的な高度な演算を行う
ことができる。
• Mathオブジェクトを使用
• 使用方法
– Math.メソッド()
– Math.プロパティ

7
JavaScriptの
リファレンスで
調べてみよう

Javascriptのリファレンス
• 各ブラウザメーカーが公開しています
– MSDN JavaScript リファレンス
– MDN JavaScript リファレンス

Mathオブジェクトとは
• Mathオブジェクトは非常に良く使います
– 三角関数（サイン、コサイン、タンジェント）
– ランダム
– 最大値、最小値
– √

• ランダムを学習しよう
– ランダムを扱うのは、JavaScriptの基本です
• JavaScriptのランダムとは
– 不規則な数値を作成する
• 例：くじ引き、自然現象、物体の配置、広告などの表示
学習内容

ランダム
• まずは、HTML内に表示して、ランダムの
内容を確認しましょう。
– ランダムな値を作成
• 0以上1未満の数字を生成
– 書き方
Math.random()；

for文の確認
• for文とは
– 特定の回数、繰り返し処理することができる
for （変数初期化 , 繰り返し条件, 変数の増減式）｛
繰り返したい処理;
｝

変数などの値の確認
• デバッグ手法
console.log(変数);
• Google Chromeで確認ができる
– Consoleでは、エラーの確認もできるので、
使い慣れてください。

14
小数を
消したい

• Math.ceil
– 小数点以下繰り上げ
• Math.floor
– 小数点以下切り捨て
• Math.round
– 小数点以下四捨五入
小数点以下を消すMathメソッド

ランダムの基本
• 自分で必要な数値の範囲を作り出すこと
– 使用する命令は、主に
Math.random()
Math.floor()
となります。
あとは＋＊ー / を使って必要な「数値範囲」を作
ることが唯一のポイントです。
つまり、プログラミングというよりは、計算力が必
要となります。

17
数値範囲を
作るとは？

数値の範囲を作るとは
• ランダムを使ったサイコロを作ってみよう
– サイコロは、１・２・３・４・５・６なので、
１～６までのランダムな数値範囲を作成する

課題：文字サイズ変更
• JavaScript、文字サイズを変更しよう
ただし、ある程度読めるサイズに設定す
る
– 文字サイズを 10px〜34px までのランダム
なサイズを設定する

課題：小数点１桁
• ランダムを使った小数点１桁まで表示す
るサイコロを作ってみよう
– 1 〜 6.9 までのランダムな数値範囲を作成す
る

おみくじを作ろう
• ランダムを使った、簡単な「おみくじ」
を作ってみましょう。
– if文を使って、大吉・中吉・吉・凶の４つ内
容をランダムに表示されるようにします

22
もし、おみくじの内容
が増えたら？？

おみくじの問題点
• 大吉・吉・中吉・小吉・半吉・末吉・末
小吉・平・凶・小凶・半凶・末凶・大
凶・・・
– if文が増えて、かなり手間になる

24
そこで配列！！

配列を使おう
• 配列
– CDケースみたいなもの・・・です。

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

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

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

29
おみくじを配列で
作りなおす

おみくじをグレードアップ
• グラフィカルなおみくじ制作
– 文字だけではツマラナイので、画像を使ったおみく
じを制作します。
– ボタンを押すとおみくじ箱の画像が、ランダムでお
みくじの画像に変更するように修正してください。
– jQueryでimgタグのsrc属性を変更します。

おみくじをグレードアップ２
• グラフィカルなおみくじ制作
– 写真切替の表現が寂しいので、透明→表示の
アニメーションを設定してみましょう。
jQueryでアニメーションを設定してみよう

32
次のテーマ
Date
オブジェクト

33
デジタル時計を作りながら
JavaScriptを学習していこう

本日の目標
• デジタル時計
– 新しく学習する内容
• JavaScriptで時刻を取得
– これまでの復習
• HTMLで数字を表示
• CSSで文字サイズ、文字色などを設定
• 変数、関数、if文、アニメーション

35
時計を制作するには、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 ;

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

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

課題
• 時刻を表示してみよう
– 時、分、秒の値と「：」を文字連結を利用して
表示してみよう
〇〇：□□：△△

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

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

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

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

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

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

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

12:23:45

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

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

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

デジタル時計
?

デジタル時計の特徴
• ゼロの表示
– 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

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

条件分岐（if文）
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

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

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

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

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

曜日を簡単に
表示する

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

69
そこで配列！！

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

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

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

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

74
課題

課題
• CSSやアニメーションで見た目を変更して、
「時刻＋ α」
の時計を制作してください。
• ポイント
– 時間＝数字だけとは考えない
– 少し変わった時間の表現を考える
– 自由な発想で表現

アイデアの補足
• サイズの変化
• 位置の変化

JavaScriptのオブジェクト：Mathオブジェクト、Dateオブジェクト

More Related Content

What's hot (8)

Similar to JavaScriptのオブジェクト：Mathオブジェクト、Dateオブジェクト (20)

More from Yossy Taka (13)

JavaScriptのオブジェクト：Mathオブジェクト、Dateオブジェクト