学習ガイド一覧 - JavaScript入門ガイド – DOM編

JavaScriptはブラウザの中で動作するプログラミング言語です。近年は「フロントエンド開発」などと呼ばれるようにHTML/CSS/JavaScriptを使って操作性の高いWebアプリケーションの開発が広がっています。ReactやVue.jsといった人気のフレームワークもJavaScript上で動作します。

またJavaScriptの利用シーンはブラウザ内に限らず、サーバサイドで動作するJavaScript(Node.js)も登場しています。JavaScriptプログラミングを習得すればフロントエンドもバックエンドも両方を実装できます。

ブラウザで動作するJavaScriptの詳細なドキュメントとしてはMDNが参考になります。

ここではブラウザで動作するJavaScriptにおけるDOMプログラミングについて学習します。DOM(Document Object Model)とはHTMLやXMLのような文書を操作するための仕組みです。DOMプログラミングとはかんたんに言えば、JavaScriptプログラムを使ってHTMLタグを操作することです。DOMプログラミングの基礎を習得すれば、ユーザがボタンをクリックしたときや、マウスカーソルを重ねたとき、あるいは画面をスクロールしたときなど、任意のタイミングでブラウザ上に表示しているHTML(やCSSなど)を操作できます。

学習時間の目安

  • 60分程度です。
  • 動画を見るだけなら5分程度です。

学習後の成果

  • JavaScriptのDOMプログラミングの基礎がわかります。
  • document.querySelectorとdocument.querySelectorAllの違いがわかります。
  • JavaScriptのlocalStorageの使い方がわかります。

対象者

  • HTML/CSSの基礎知識がある方
    • 変数や関数などプログラミングの知識もあるとベターです。
  • jQureryに興味がある方
    • jQueryの内部でもDOMプログラミングが行われています。
  • フロントエンド開発に興味がある方
    • DOMプログラミングなどJavaScriptの基礎的な知識は必須です。

Agenda

  1. ユーザインタフェースの作成: 12分
  2. 追加処理の実装: 12分
  3. リセット処理の実装: 12分
  4. 保存処理の実装: 12分
  5. 読み込み処理の実装: 12分