uhyohyo.net

JavaScript初級者から中級者になろう

このページの最終更新日：

JavaScript。主にWebページを作るのに使われるほか、現在ではさまざまなところで活躍しているプログラミング言語です。

このページはJavaScriptの中級講座です。最新鋭ではないかもしれませんが、読み進めれば大抵のものを自分で作れるようになることでしょう。

言い訳とJavaScriptの歴史 / 問い合わせ

最近の更新

概要

コンテンツは第一篇と第二篇に分かれています。

JavaScriptは昔からWebページに動きを与えるものとして用いられてきましたが、第一篇ではそのような、昔からあるJavaScriptの側面を解説します。

第二篇では、だいたい2010年代に入ったくらいから用いられるようになってきた、新しいJavaScript技術について紹介しています。

それぞれの篇は話題ごとに章にわかれています。基礎知識があれば好きな章から読むことができますが、あとの章では前の章の内容を用いた説明をすることがあります。

現在は、専らブラウザ上で動くJavaScriptについて解説しています。

第一篇 古典的なJavaScript

第一篇と称して、昔から親しまれてきたJavaScriptについて紹介します。JavaScriptの基本といってもよいでしょう。

初級者の基礎知識

本文を理解するにはJavaScriptの知識がそれなりに要るので、JavaScriptがそもそもあまり分からない初心者の人は、この辺を読んでみましょう。入門レベルから始めることができます。

  1. 基礎第一回
  2. 基礎第二回
  3. 基礎第三回
  4. 基礎第四回
  5. 基礎第五回
  6. 基礎第六回

第一章　オブジェクト

  1. オブジェクトとは
  2. オブジェクトの実体
  3. 配列のコピー
  4. オブジェクトと関数

第二章　DOMの基礎

  1. HTMLの木構造
  2. DOMとは
  3. 基本的な操作とテキストノード
  4. 木構造の操作：ノードの除去
  5. 木構造の操作：ノードの追加
  6. 木構造の操作：さまざまな機能
  7. 木構造の操作：さまざまな機能2
  8. テーブルの操作
  9. theadとtfoot
  10. img要素とその他
  11. スタイルシートの操作
  12. フォームの操作
  13. フォームの操作2
  14. nullとundefined

第三章　DOMとイベント

  1. イベントプロパティ
  2. イベントリスナ
  3. イベントバブリング
  4. イベントキャプチャリング
  5. イベントオブジェクト
  6. mouseoverとmouseout

第四章　文字列の基本と正規表現

  1. 文字列の操作
  2. 正規表現
  3. 正規表現2

第五章　CSSの操作

  1. 計算済みスタイル
  2. CSSの構造
  3. CSSの操作

第六章　XMLとXHTML

  1. XML・XHTMLとは
  2. 名前空間
  3. XMLとDOM

第七章　さまざまな機能

  1. 複数のドキュメントを扱う
  2. ノードどうしの位置関係を知る
  3. 条件を満たすノードを順番に処理する：TreeWalker
  4. ノードをまとめて扱う：DocumentFragment
  5. サンプル：見出しのリスト
  6. サンプルの改良

第八章　Range

  1. Rangeとは
  2. Rangeの機能
  3. Rangeの活用とSelection
  4. サンプルの改良

第九章　オブジェクト指向

  1. オブジェクト指向とは
  2. prototypeの活用
  3. 継承とは
  4. プロトタイプ指向
  5. クロージャ
  6. ゲッタとセッタ
  7. プリミティブとオブジェクト
  8. 例外処理

第十章　XPath

  1. XPathとは
  2. DOMでのXPathの利用
  3. 属性の取得と型
  4. 述語による絞り込み

第二篇 新しいJavaScript

JavaScriptの中でも割と新しい部類の技術について紹介します。

具体的にはES5以降のJavaSciptやHTML5の関連技術、また最近標準化されたAPIなどを紹介します。

なお、新しいというのは講座が最初に執筆された当時から見て新しいということなので、だいたい2010年くらいからです。

第十一章　ES5

  1. 配列
  2. bind
  3. console
  4. Objectとプロパティ
  5. プリミティブについて
  6. プリミティブについて2
  7. 継承2
  8. 凍結と封印
  9. strictモード

第十二章　HTML5+JavaScript

HTML5講座を作りました。HTML5が分からない方は、そちらを読んでから読むと理解が深まります。

  1. classList
  2. フォーム
  3. History API
  4. dataset
  5. File API
  6. Drag and Drop API
  7. Drag and Drop API 2

第十三章　JavaScriptの通信

JavaScriptは、HTTP通信とかをすることもできます。その方法を解説します。

  1. XMLHTTPRequest
  2. Server-Sent Events
  3. Web Messaging
  4. Web Messaging 2

第十四章　JavaScriptとデータの保存

JavaScriptは、ブラウザにデータを保存しておくことができます。ゲームのセーブデータとかにも使えますね。

  1. Storage
  2. Indexed Database
  3. Indexed Database 2
  4. Indexed Database 3
  5. Indexed Database 4

第十五章　Web Performance

  1. Page Visibility
  2. Navigation Timing
  3. Performance Timeline
  4. Resource Timing
  5. User Timing

第十六章　ES2015〜ES2017

  1. WeakMapとWeakSet
  2. イテレータ
  3. 代入
  4. シンボル
  5. Promise
  6. ジェネレータ
  7. ジェネレータ2
  8. オブジェクトリテラル
  9. テンプレート文字列
  10. アロー関数
  11. クラス
  12. クラスの継承
  13. MapとSet
  14. Proxy
  15. Reflect
  16. ES2015以降の配列
  17. ES2015以降のObject
  18. ES2015とプリミティブ
  19. ES2015の正規表現
  20. モジュール
  21. async/await
  22. TC39とJavaScriptの標準化

第十七章　DOM4とHTML

  1. MutationObserver
  2. DOM4的なメソッド
  3. Custom Elements
  4. Shadow DOM
  5. Shadow DOM 2
  6. Shadow DOM 3
  7. HTML Imports

質問と回答

  1. 質問と回答1

索引