２年後には実際にプログラミングを授業の中で実施しなくてはなりません。
有難いことに、学校設定科目として３年生に情報演習の授業があります。
今年度から、実験的にプログラミング授業を行うことにしました。
その７時間目。前回までは条件分岐を扱ってきました。
今回は、プログラミング学習では外すことができない「配列」を扱います。
今回の学習成果
心理テスト
あなたが森の中を一人で散歩していると、ある生き物に出会いました。その生き物はどれですか？
<h3>心理テスト</h3> <p>あなたが森の中を一人で散歩していると、ある生き物に出会いました。その生き物はどれですか？</p> <select id="choiceList"> <option value="0">鳥</option> <option value="1">リス</option> <option value="2">クマ</option> <option value="3">人間</option> <option value="4">妖精</option> </select> <button id="btn">回答する</button> <hr> <p id="answer"></p>
selectタグが登場してきました。
HTML自体がやや複雑になった印象となってしまいました。
基本構造はHTMLに記述させ、答えをJaveScriptで導く方がスッキリするように感じます。
CSSの記述
JaveScriptで表示させる挨拶の背景色や位置などのデザインを調整します。
selectがinline要素です。
回答ボタンを下に配置したかったので、displayプロパティをblockに変更してあります。
あとは、まぁいつも通りかと・・・
JavaScriptの記述
メインは配列です。
記述として、配列の要素一つひとつで改行した方がキレイなのですが、今回は配列の基礎学習ということで、並べることで構造を理解させます。
こうすることで、プログラムの行数も減り、簡単な印象になりませんかね。
回答の表示方法の部分が少し複雑になってしまいました。
言葉と配列からの抜き取りと言葉をつなげるのに、しれーっと「+」を使っています。
ただの足し算ではなく、言葉をつなげるキーワードとして理解させます。
検討事項
配列は条件分岐同様、プログラミングを学ぶ上で避けては通れません。
図式化して理解を深めさせたいところです。
すごく簡単な配列をalertで表示させて、何が出てくるか見せるといいかもしれません。
授業をやっていて思うのですが、console.logで表示させると実感がないようです。
ほんとは大切なことなんですけどね。
コメント