番外編：HTML・JavaScript実習
HTMLでページの部品を用意し、JavaScriptでその動きを作ってみよう。ボタンで画像の大きさを変えるところから始め、条件分岐、反復、配列へと進む。情報Ⅰで学んだ考え方を、画面で確かめる番外編である。
実習の進め方
Section titled “実習の進め方”- 01実習の準備：HTMLとJavaScriptの作業環境ローカル保存やNAS、GitHub、CodePen、JSFiddleを比較し、HTMLを編集・保存・表示する準備をする。
- 02ボタン・関数・変数で画像を動かすHTMLの画像とボタンをJavaScriptへ結び付け、固定値の代入と変数による更新の違いを確かめる。
- 03条件分岐で大きさと表示を切り替えるifによる画像サイズの上限・下限と、if・elseによる明暗切替を、境界値のテストとともに学ぶ。
- 04反復で画像を並べるforの初期化・条件・更新を追い、DOMの生成と追加で複数の画像を並べる。
- 05配列で画像の見出しを管理する添字とlengthを使って配列を反復し、見出し付きの画像一覧を作る。
- 作業環境を選び、HTMLを保存・表示する。
- ボタンと関数を結び付け、変数で画像の幅を覚える。
- 大きさの上限・下限と、画面の明暗切替を条件分岐で作る。
- 反復で画像を並べ、配列でそれぞれの見出しを管理する。
各ページの完成コードは、画像ファイルを別に用意しなくても動く。画像にはコード内に埋め込んだ丸の図を使う。自分の画像に替える場合は、利用できる画像を同じフォルダーへ置き、srcをそのファイル名に変更しよう。
基礎を読み直したいとき
Section titled “基礎を読み直したいとき”用語や処理の流れを整理したら、実習へ戻って自分で動かしてみよう。