「本日の授業ページから,html.zipをダウンロードしてください.開くと,フォルダーができまして,その中に,draw.htmlというファイルがあると思います.
そのファイルをダブルクリックすると,ブラウザ上で,黄色に塗られた画面が表示されます」
「これから,このファイルを編集していきたいのですが…まずは左下のメニューから,TeraPadを選んで,起動してください.(間) 次にですね,先ほどのdraw.htmlを,TeraPadの編集領域に,ドラッグ&ドロップで移動させてください.これでファイルが開きます.できましたか? うまくいかない人は,手を挙げてください.TAまたは私が行きます」
(1本の線を引く方法:省略)
「では次に,3本の横線を引くことにしましょう.スクリーンに出ているように,コードを書き足してください.forループの書き方は,Cと同じです」
「途中から,文字の色が青くなりましたが,気にしないでください.これは,『i <= 3』に出てくる不等号の文字を,HTMLのタグの始まりと,TeraPadが判断してしまっているからです.
保存して,ブラウザで再読込すると…横線が3本,表示されましたね」
「(間) 次のステップに,進みたいのですが,せっかく書いたコードなので,コメントにしておきましょう.JavaScriptのコメントも,Cと同じです.スクリーンに出ているとおり,最初に『/*』,最後に『*/』を打ち込みます」
(マウスイベントハンドリングの方法:省略)
「さてここまで書き足したら,ファイルを保存して,ブラウザで再読込しましょう.キャンバス内をクリックしたら,線が出ましたか? あれ,挙手が多いぞ.私も巡回します…」
見ていくと,「/*」忘れの多いこと….目立ちませんね.
次のように,独立した行にしておけば,トラブルが少なかったはずです.
補足1. 「黄色で塗られた画面」の元ネタにリンクしておきます.
実際の授業では,配色が異なっているほか,他のライブラリを使用しており,上記と異なる描画方法でした.
補足2. 文字色については,編集モードを変えればいいのでした.TeraPadのメニューから「表示」「編集モード」「JavaScript」の順に選ぶと,varやforなどが太字になるのと合わせて,コメント領域は以下のとおり,緑色になりました.