【JavaScript】プログラミング授業案⑬【名前を入力】

２年後には実際にプログラミングを授業の中で実施しなくてはなりません。
どんな授業を行うか、検証を兼ねて検討しています。
今回は、ユーザに入力をしてもらったものを表示で返す仕掛けです。

今回の学習成果

   <div id="name"></div>

今回13時間目になるわけですが、よく考えたらこのシリーズをやってきませんでした。
難易度的には、これの後でもいいくらいです。

【JavaScript】プログラミング授業案①【メッセージ表示】

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

muraumusic.com

ユーザの入力に応対する仕掛けって、なんか面白いですよね。

CSSの記述

今回はCSS記述はありません。
単体で作るなら、背景色や文字色など設定はできます。

JavaScriptの記述

prompt(“メッセージの内容”,”初期値”)が登場します。
ユーザの入力をinnerHTMLで表示させます。
かなり色々な入力パターンを考えることができます。
今回は初期値を空にしています。
ここにサンプルを入力しておいてもいいでしょう。
メッセージの所に、以前の「時間に合わせて挨拶」と合体させてプログラムの応用としても面白いですね。

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

２年後には実際にプログラミングを授業の中で実施しなくてはなりません。授業案の５時間目。時間を読み込んで、時間に合わせた挨拶を表示させます。

muraumusic.com

検討事項

このユーザからの情報に応答する仕掛けって、JavaScriptの面白さの一つです。
じゃんけんゲームを作ったり、WebAPIと組み合わせて郵便番号から住所を検索するシステムを作ることもできます。
次はそのあたりの応用を考えてみたいと思います。