4/3 [JavaScript] オブジェクトを生成する
本日の授業
[JavaScript] オブジェクトを生成する本日は、JavaScriptの以下組み込みオブジェクトの使い方を学びました。
- Dateオブジェクト
- Mathオブジェクト
オブジェクトを生成する
Dateオブジェクト
[課題]オブジェクトを生成する 1 (toStringメソッドで現在日時を文字列として表示する )
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>オブジェクトを生成する</title> </head> <body> <script> var now; now = new Date(); document.write('<h1>',now.toString(),'</h1>'); </script> </body> </html>
[課題]オブジェクトを生成する2 (new Dateで現在日時を取得して表示する )
<script> var d = new Date(); document.write(d); </script>
出力結果：
GMTはグリニッジ標準時 グリニッジ（英国）から9時間ずれているの意
GMT：Greenwich Mean Time（グリニッジ標準時）
[課題]オブジェクトを生成する3 ( new Dateで日時値を指定して表示する )
<script> var aDay; aDay = new Date(2014, 3, 03, 15, 55, 50); document.write('<h1>' + aDay + '</h1>'); </script>
注意点：
- 月を表す数字の「3」（現在は4月）
コンピューターは０からカウントするので、4月を表す数字は、「3」
[Chromeでの出力結果]
[課題]オブジェクトを生成する4 (年月日の値をそれぞれ別のメソッドで取得して連結表示する)
<script> var now, date; now = new Date(); date = now.getFullYear() + '年' + (now.getMonth() + 1) + '月' + now.getDate() + '日'; document.write('<h1>', date, '</h1>'); </script>
出力結果：
2014年4月3日
オブジェクトとインスタンス
メソッドとは
メソッドとは、オブジェクトに紐づいた関数であり、データを操作する振る舞いのことを指します。
前述の now.toString() のように、
.ドット以降の部分がメソッド
toStringメソッド
- 日付を文字列で取得して表示
<script> var now, date; now = new Date(); date = now.getFullYear() + '年' + (now.getMonth() + 1) + '月' + now.getDate() + '日'; document.write('<h1>', date, '</h1>'); </script>
[課題] getTimeメソッドで日数の差を求める1
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Dateオブジェクト</title> </head> <body> <script> var now, date; now = new Date(); var gantan, days, diff; //来年の1月1日を表すDateオブジェクトを生成、今年の年を求め1を足して来年を設定、0は1月、1日） gantan = new Date(now.getFullYear() + 1, 0, 1); //来年の1月1日と現在時刻の時間差をミリ単位で求める diff = gantan.getTime() - now.getTime(); //秒を日数に換算し小数点以下を切り上げる days = Math.ceil(diff / ( 24* 60 * 60 * 1000)); document.write('<h1>ことしの残り日数', days, '</h1>'); </script> </body> </html>
[課題] getTimeメソッドで日数の差を求める2
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Dateオブジェクト</title> </head> <body> <script> var now, date; now = new Date(); var bd, days, diff; //次の自分の誕生日を表すDateオブジェクトを生成） bd = new Date(now.getFullYear(), 9, 6); //来年の1月1日と現在時刻の時間差をミリ単位で求める diff = bd.getTime() - now.getTime(); //秒を日数に換算し小数点以下を切り上げる days = Math.ceil(diff / ( 24* 60 * 60 * 1000)); document.write('<h1>誕生日までの残り日数', days, '</h1>'); </script> </body> </html>
[失敗例] Dateオブジェクトで日にちを取得しようとする際に犯しがちな過ち
d = now.getDay(); document.write('<h1>', '今日は' + m + '月' + d + '日です。', '</h1>');
[出力結果]
今日は4月4日です
getDay()は、日にちではなく、現地時刻で曜日を表す 0 (日曜日) ～ 6 (土曜日) の整数を返します。
今日4月3日（水）の場合、getDay()関数が返す値は「4」
[課題] Dateオブジェクト(現在の年、月日を表示する)
<script> var now, y; now = new Date(); y = now.getFullYear() + '年' document.write('<h1>', '今年は' + y + 'です。', '</h1>'); var m, d; m = now.getMonth() + 1; dt = now.getDate(); document.write('<h1>', '今日は' + m + '月' + dt + '日です。', '</h1>'); </script>
[課題] Dateオブジェクト 現在の時間によってメッセージを変更する
<script> //時間によってメッセージを変更する var today; var hour; today = new Date(); hour = today.getHours(); console.log(hour); document.write('<h1>'); if (hour < 12 ) { document.write('おはようございます'); } else if (hour < 18) { document.write('こんにちは'); } else if (hour < 24) { document.write('こんばんは'); } document.write('</h1>'); </script>
[課題] Dateオブジェクト 現在の時間で表示する画像を変える
上記メッセージ表示箇所を
document.write('<img src = "（画像のパス/ファイル名）">');
に置き換える。
Mathオブジェクト
Math.floor(Math.random)
[参考知識]
コンピューター ノイマン型
ノイマン型コンピュータとは 〔 フォンノイマン型コンピュータ 〕 〔 ストアードプログラム方式 〕 - 意味/解説/説明/定義 ： IT用語辞典
[課題] Mathオブジェクト（おみくじ）
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Mathオブジェクト</title> </head> <body> <script> // var r = Math.random(); console.log(r); if ( r < 0.33) { document.write('<h1>', '大吉', '</h1>'); } else if (r < 0.66) { document.write('<h1>', '吉', '</h1>'); } else { document.write('<h1>', '凶', '<h1>'); } </script> </body> </html>
[課題] Mathオブジェクト（乱数の実験）
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Mathオブジェクト</title> </head> <body> <h1>乱数の実験</h1> <script> // MAX = 10; var num; for (var i=0; i <10; i++) { num = Math.floor(Math.random() * MAX + 1); document.write(num, "<br>") } </script> </body> </html>
[課題] 脳トレーニング（足し算）
<body> <h1>脳トレーニング（足し算）</h1> <script> function getRandom() { return Math.floor(Math.random() * 100); } <!-- //質問の数 var numOfQ = 10; var num1, num2, num3; var correct = 0; //出題する for (var i = 0; i < numOfQ; i++) { /*console.log(numOfQ); */ num1 = getRandom(); num2 = getRandom(); msg = num1 + "+" + num2 + "="; ans = prompt(msg, ""); if ( ans == (num1 + num2)){ correct++; } } //正解率を表示する document.write("<h1>正解率：", Math.round(correct/numOfQ * 100), "%</h1>"); document.write("<p>", numOfQ, "問中", correct, "問正解", "</p>"); // --> </script> </body>
本演習の注意点：
関数と実行場所が異なるとき、returnが必要
[課題] Mathオブジェクト（今日のイメージ）
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>Mathオブジェクト</title> </head> <body> <h1>今日のイメージ</h1> <script> // numOfImg = 4; var num; num = Math.floor(Math.random() * numOfImg + 1); console.log(num); document.write('<img src = "img/ph'+ num + '.png">'); //document.write('<img src = "img/ph'+ num + '.jpg">'); </script> </body> </html>
[自身 習作例]
ちょっとブレイク
講師 [生き方論]講義録
- 相手とのコミュニケーション
自分の経験知からどれだけたとえ話ができるか
[講師のお薦め本]
「教えてドラッカー-働く私はITでどこまで伸びるの
- 森岡-謙仁」
-自分がなぜできないかを考えない-人は感性で動く
-経験をしないと何が楽しいか分からない
-自分を客観的に分かること
-自分を大切にする
-独善的になるという意味ではない-マイナスを口に出さない
-脳に刻まれる
-口に出すと現実になる-不安と向き合う
-なりたい人の真似をする
-その中で見えてくるものがある
-学ぶ（まねぶ）-毀誉褒貶（きよほうへん）に惑わされない
-インターネットの勉強
--なるべくインターネットを見ない
--インターネットから情報を得ることはOK。
--なんでもかんでもインターネットから得ようと思わない-自分が必死になれば大体のことは手に入る
-そのとき、情報を遮断する-自分の価値観で生きていく
-極端になる（寝ない、食べない）
-度を越す
-周りが勝手に変わっていく
-度を越しすぎない（破綻するから）-自分の身の回りを変えるには自分が変わる
-毎日見ていること
-自分の意識に入る-ヘレンケラー
--「戦争を止めさせたい」
--「自分の身の回りの人にやさしくしなさい」-脳を鍛える
-健康な体を維持する
-規則正しい生活
-勉強
--やみくもにやらない
--体験しながらやっていくことが身になる-人間
--メンタリティの生き物
--脳が活性化されると体が動く--学習の仕方を学んだ人のみが真の教育を受けた人
-想像力
--無から有は生み出せない
-フィールドワーク
--大人としての経験を活かす
-自分の価値観を作る
