この「JavaScriptとDOM」では、Webページ上の要素を自由に操作し、動きのあるインタラクティブな表現を作るための実践的な内容を学びます。
まずは、JavaScriptでDOM（Document Object Model）の仕組みを理解し、HTML要素を取得・変更する基本操作を体験します。イベントリスナーを使ってクリックや入力などの動きを検知し、フォームの値を取得して表示するなど、動的なページの作り方を身につけます。
さらに、classListを使った見た目の変更、setAttributeによる属性操作、新しい要素を追加するToDoリスト風の実装など、実際のWebアプリ制作にもつながる内容を扱います。
後半では、fetchを使ったAPI通信（then / async await）や、複雑なJSON構造の読み取り、setTimeout / setInterval によるタイマー処理、localStorageを使ったブラウザ保存など、実務でも活かせるJavaScriptとDOMの応用力を育てます。
DOM操作を通じて、「ページを動かす」「データを扱う」「結果を残す」という一連の流れを理解し、ブラウザ上で自在に動きを作り出せる力を養っていきましょう。
JavaScriptでDOMの取得を体験してみよう！
JavaScriptのイベントリスナー（addEventListener）を使ってみよう！
JavaScriptでフォームの値を取得して表示してみよう！
JavaScriptの関数 classListで見た目を変えてみよう！
JavaScriptで新しい要素を追加してみよう！（ToDoリスト風）
JavaScriptで属性を変更してみよう！（setAttribute）
JavaScriptでAPI：外部データを取得してみよう！（ API then）
JavaScriptでAPI：外部データを取得してみよう！（ API async await）
JavaScriptでネストされたJSONを読み取ってみよう！（複雑な構造の読み解き）
JavaScriptで秒単位での繰り返しsetTimeout / setInterval
JavaScriptでブラウザに結果を保存してみよう！（localStorage ）
なぜJavaScriptのエラーがわかりにくいのか？：付録
DOMとは？
DOM（ドム）は、Document Object Model の略で、Webページを「JavaScriptから操作できるようにした仕組み」です。
Webページの見た目はHTMLとCSSで作りますが、その裏側では、ページ全体が「オブジェクトのかたまり」として扱われています。
JavaScriptでは、このDOMを使って、
- ボタンをクリックしたときに表示を変えたり、
- フォームに入力された内容を読み取ったり、
- 新しい要素を追加・削除したり
といった動きのあるWebページをつくることができます。
この講座では、DOMの基本的な考え方と、よく使う書き方（プロパティやメソッド）をひとつひとつ丁寧に学びます。
