【JavaScript】プログラミング授業案⑤【時間に合わせて挨拶】

２年後には実際にプログラミングを授業の中で実施しなくてはなりません。
有難いことに、学校設定科目として３年生に情報演習の授業があります。
今年度から、実験的にプログラミング授業を行うことにしました。
その５時間目。前回の続き。

２年後には実際にプログラミングを授業の中で実施しなくてはなりません。授業案の４時間目。前回の続き。if文を拡張してelse ifを取り扱います。

今回の学習成果

こんばんは！

前回のタグの続きに記述させますが、divの構造でidが違うだけです。
idが違うだけで、プログラムが何を読み込みに行って、実行結果が出ているかを理解させます。

  <div id="message"></div>

CSSの記述

JaveScriptで表示させる挨拶の背景色や位置などのデザインを調整します。
これまではJaveScriptとCSSを関連させてこなかったのですが、HTMLの骨組みの上にJaveScriptを載せているので、CSSでデザインさせることを学習する機会になります。

	#message {
	background-color: yellow;
	padding: 10px;
	border: 2px solid pink;
	font-weight: bold;
	text-align: center;
	width: 300px;
	}

view raw 20201124js5_css hosted with ❤ by GitHub

JavaScriptの記述

これまでに学習してきた条件分岐です。

	// let date = new Date();
	let hour = date.getHours();

	function greet() {
	let msg = document.getElementById("message");
	if (hour >= 5 && hour <= 9) {
	msg.textContent = "おはようございます！";
	} else if (hour >= 10 && hour <= 17) {
	msg.textContent = "こんにちは！";
	} else {
	msg.textContent = "こんばんは！";
	}
	}
	greet();

view raw 20201124js5_js hosted with ❤ by GitHub

前回の「何曜日？」に比べると、シンプルな印象ですが「&&」が登場しているので、論理演算子の確認をさせたいところです。
それから今回、「function」を利用しています。
関数を表しているのですが、機能のまとめとして記述され、それが後ろで実行されているということを理解する機会となります。
ちなみに1行目の

let date = new Date();

がコメントになっています。
前回の続きに書けば、既に曜日の取得のところで登場していますので、授業の際は省きます。

検討事項

プログラムの構造をできる限りシンプルにして、どの入れ物に何が代入され、どのような処理がされているか考えさせたいです。
そのためには、プログラムをいきなり記述させるのではなく、流れ図を用いて思考する活動をさせたいところです。
プリントを使って、簡単な条件分岐の流れ図を考えさせます。
次回は条件分岐の仕上げとして、おみくじアプリの作成に入ります。