2年後には実際にプログラミングを授業の中で実施しなくてはなりません。
有難いことに、学校設定科目として3年生に情報演習の授業があります。
今年度から、実験的にプログラミング授業を行うことにしました。
その6時間目。続きに記述していくのは、長さ的にしんどくなってきたので、新たなファイルを作ります。。

今回の学習成果
<h1>今日の運勢</h1> <div id="btn">おみくじ</div> <a href=""><div class="reset">もう一回</div></a>
href属性のリンクタグについては、初期のHTML学習で触れるべきです。
そして「a」タグについては、displayプロパティがinlineです。
本来ならば、div要素が外にきて、a要素が中に入ります。
この辺りCSSで
display:block;
にしてあげるのが本来かと思いますが、そこを話し始めるとJaveScriptの話から広がりすぎてCSSの講座になってしまいます。
そこで、今回は要素の順番を入れ替えて、displayプロパティがblockのdiv要素をa要素で囲んで、文字ではなくblock要素自体にリンクを貼ることにします。
以前作成したものを、かなり簡略化しています。

CSSの記述
JaveScriptで表示させる挨拶の背景色や位置などのデザインを調整します。
今回は2つのボタンを、それぞれ定義しています。
凝るならば、「opacity」あたりと「hover」を使って、よりボタンらしくできます。
が、今回はパスです。
JavaScriptの記述
これまでに学習してきた条件分岐です。
しれーっと「addEventListener」が入り込んでいます。
これ自体は、ユーザ側の動作を読み取るということで、双方向的な動きを与えるため、興味深いと思います。
なおかつ、しれーっとアロー関数も登場しています。
この辺りは、さらっと「こういう記述なんだー。」ぐらいにしたいです。
これまで変数を定義してきたところを、定数にしています。
ランダムで0~1の小数点以下の数字が選ばれるということを理解する場所です。
割合も含めて、条件分岐の中で何が起こっているかを、じっくりと考えさせたいところです。
検討事項
実用的なアプリとなると、やはり難易度は上がります。
ですが、あまり深く考えさせすぎず、組み合わせてどう処理されるのかを理解させたいところです。
正直、変数と定数の使い分けを理解させるのは、苦しいと思っています。
私自身、説明するのも自信ありません。

以前、上のようなおみくじアプリを紹介しましたが、今回はCSSのアニメーションは割愛しました。
こちらは、若干の応用編ですかね。
コメント