概要

公式リファレンスなど、文章だけでは理解が難しいプログラミング初学者に向けた動的な教材。
特に、DOMの構造への理解を促進させるのが目的。

教材

See the Pen by krkrkrrn (@krkrkrrn) on CodePen.

指導の方針

DOMの構造

クリックした要素の中に新しい要素が追加されることを確認し、これが、子(child)を追加(append)する、appendChild()の挙動であることを説明する。
また、DOMの構造と見た目の構造が一致しているので、chrome開発者機能等を用いて、パソコンのフォルダなどを例示しながら、階層構造について説明してもよい。

関数の利用

js初学者は、要素の取得において、

var elem01 = document.getElementById("id01");
var elem02 = document.getElementById("id02");
...

のようなやり方を採用しがちである。
次のステップとして、関数型プログラミングを勧める際、その使用例としても利用できる。
適宜、 console.log(event.target) などを挿入して説明すると理解されやすい。

使用上の注意

特にありません。
Slackで共有する際は、コピペしてHTMLファイルとして保存したものをアップロードするのが楽です。

教材として利用した際、可能であれば、利用後の感想や改善案などをコメントしていただければありがたいです。