My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

4/3 [JavaScript] オブジェクトを生成する

本日の授業テーマ

本日の学習内容~まとめと感想~

参考記事(講師ブログ):
 http://d.hatena.ne.jp/web-0127/20140428

オブジェクトを生成する

Dateオブジェクト

[課題]オブジェクトを生成する

<!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

<script>
var d = new Date();
document.write(d);
</script>

出力結果:

Thu Apr 03 2014 09:08:36 GMT+0900 (東京 (標準時))

GMTグリニッジ標準時 グリニッジ(英国)から9時間ずれているの意
GMTGreenwich Mean Timeグリニッジ標準時


[課題]オブジェクトを生成する3

<script>
var aDay;
aDay = new Date(2014, 3, 03, 15, 55, 50);
document.write('<h1>' + aDay + '</h1>');
</script>

注意点:

  • 月を表す数字の「3」(現在は4月)

コンピューターは0からカウントするので、4月を表す数字は、「3」


[Chromeでの出力結果]

Thu Apr 03 2014 15:55:50 GMT+0900 (東京 (標準時))

(東京 (標準時))は、ブラウザ依存
Chromeでは表示されるが、Firefoxでは表示されない)



[課題]オブジェクトを生成する4

<script>
var now, date;
now = new Date();

date = now.getFullYear() + '年'
  + (now.getMonth() + 1) + '月'
  + now.getDate() + '日';
  document.write('<h1>', date, '</h1>'); 
</script>

出力結果:

2014年9月23日

オブジェクトとインスタンス

.ドットで始まるのがメソッド

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メソッドで日数の差を求める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>

[自身 習作例]



f:id:sntkk3:20140228213539p:plainちょっとブレイク

講師 [生き方論]講義録

  • 相手とのコミュニケーション

自分の経験知からどれだけたとえ話ができるか


[講師のお薦め本]

「教えてドラッカー-働く私はITでどこまで伸びるの

教えてドラッカー 働く私はITでどこまで伸びるの?

教えてドラッカー 働く私はITでどこまで伸びるの?

  • 森岡-謙仁」


-自分がなぜできないかを考えない

-人は感性で動く

-経験をしないと何が楽しいか分からない

-自分を客観的に分かること

-自分を大切にする
-独善的になるという意味ではない

-マイナスを口に出さない
-脳に刻まれる
-口に出すと現実になる

-不安と向き合う

-なりたい人の真似をする
-その中で見えてくるものがある
-学ぶ(まねぶ)

-毀誉褒貶(きよほうへん)に惑わされない


-インターネットの勉強
--なるべくインターネットを見ない
--インターネットから情報を得ることはOK。
--なんでもかんでもインターネットから得ようと思わない

-自分が必死になれば大体のことは手に入る
-そのとき、情報を遮断する

-自分の価値観で生きていく
-極端になる(寝ない、食べない)
-度を越す
-周りが勝手に変わっていく
-度を越しすぎない(破綻するから)

-自分の身の回りを変えるには自分が変わる

-毎日見ていること
-自分の意識に入る

-ヘレンケラー
--「戦争を止めさせたい」
--「自分の身の回りの人にやさしくしなさい」

-脳を鍛える
-健康な体を維持する
-規則正しい生活


-勉強
--やみくもにやらない
--体験しながらやっていくことが身になる

-人間
--メンタリティの生き物
--脳が活性化されると体が動く

--学習の仕方を学んだ人のみが真の教育を受けた人


-想像力
--無から有は生み出せない


-フィールドワーク
--大人としての経験を活かす


-自分の価値観を作る