質問

JavaScript を勉強したい。

回答

回答

JavaScript は、もともとブラウザ上で動く小さなスクリプト言語でした。しかし、現在では文法が標準化され、Web ページを含む XML 文書の操作をはじめとし、PDF 操作*1、Flash 操作*2、アプリケーション操作*3、システム操作*4など、さまざまな場面で活躍しています。

このページでは、JavaScript の基本と、Web ページを操作する仕組み(DOM)を中心として、参考サイトを紹介します。

プログラミングが初めての人には

目標:プログラミングの基本的な事項(変数、関数、条件分岐、ループなど)を理解し、分からないことを自分で調べることができる。

ウェブの作り方・JAVA スクリプトの使い方。
実例が豊富です。また、Web ページでスクリプトを使う際の注意事項がありますので、よく読んでおきましょう。

入門から実用まで

JavaScript を読み書きしよう

目標JavaScript の型変換のルールを理解し、メソッドの引数と戻り値を活用して、効率的かつ安全なプログラムを書ける。

ECMAScript チュートリアル
ECMAScript*5 の独学用テキスト(チュートリアル)です。基本的な文法、オブジェクトなど、大切な部分が網羅されています。
オブジェクトな JS の基礎講座
入門者向けとは言え高度な内容もありますから、何度も読み返しましょう。

JavaScript で HTML とCSSを操作してみよう

目標:HTML とCSSを正確に書くことができ*6、DOM を使ってそれらを JavaScript で表現できる。

DOM と JavaScript
DOM と JavaScript の関係を概観。また、DOM の基本的な使い方は、他サイトですが Dynamic Content with DOM-2 にもあります。
JavaScript と DOM を使って表を操作する
表(テーブル)のセルを実際に生成したり、削除したり、スタイル変更したりしてみます。

中級以上を目指す

JavaScript におけるオブジェクトの本質を知ろう

目標JavaScriptプロトタイプベースのオブジェクト指向言語という特徴を生かしたプログラムを書ける。

オブジェクト指向プログラム言語としての JavaScript
連想配列、関数ポインタ、コンストラクタ、プロトタイプを順序立てて分かりやすく説明。
Dynamic Scripting
JavaScript/JScript、VBScript の網羅的なリファレンス。Effective JavaScript には合成関数、コンストラクタ、非公開メンバなど、上級者向けの発展的な話題。
ECMAScript - on Surface of the Depth -
プログラミング経験者は、JavaScript の雰囲気をつかむために読むと良いでしょう。
Hawk's W3 Laboratory
実行コンテクストやスコープに関する話題など。XML 関連の情報も豊富。
JavaScript - The Definitive Guide(英文)
O'Reilly 社から発刊されている「サイ本」の Web 版。ただし版が古いので、最新版もチェックしておくと良いでしょう。
プログラミング・開発者・ソースコード CodeZine:著者情報:中村 学
中村 学 氏の記事一覧。Java との比較を交えつつ、JavaScript のオブジェクト指向的な側面を記述。
JavaScript によるオブジェクト指向プログラミング
JavaScript における継承の実現方法について。
Virgo - JavaScript
より効率的な抽象化を目指して。

JavaScript で Web ページを自由自在に書き換えよう

目標:HTML 文書をツリー構造として操作したり、イベントを切り離して独立性の高いプログラムを書ける。

Node インターフェイスを利用する
ツリー構造を持つ HTML 文書を縦横無尽に走査して、目的のノードにたどり着く方法。また、ツリー構造を走査する際、空白文字をより分ける方法は DOM に於ける空白文字を参照して下さい。
JavaScript で DOM を使う - オブジェクト指向入門の入門
手続き的なプログラミングから、オブジェクトを中心にしたプログラミングへの転換。
JavaScript for CSS
HTML や CSS を操作して、Web ページを動的に変更する実例。サイトは閉鎖しましたが、コンテンツはまだ利用できます。(1) スタイル属性を変更する(2) 必要な要素を探し出す(3) スタイルシートの追加と削除(4) 文字列検索と正規表現(5) 属性値を変更する(6) 要素の内容を書き換える(7) イベント操作(8) 要素の追加と並び替え(9) 代替スタイルシート(10) その他・ブラウザ対応状況など(11) プロパティ一覧
DOM2 Events 解釈
HTML 開始タグ内にイベント属性を書く(イベントハンドラに関する考察を参照)のではなく、必要なノードに必要なだけイベントを追加するための、より柔軟な方法について。

上級に達するために

目標:技術仕様や一次資料を読み、実装を調べ、ブラウザごとの動作の違いに負けない心を持つ。

仕様に関する一次資料を読もう

Standard ECMA-262 (ECMAScript Language Specification)(英文)
ECMAScript の仕様。日本語訳は Under Translation of ECMA-262 3rd Edition
Core JavaScript 1.5 Reference
Mozilla Developer Center による JavaScript 1.5 のリファレンス。なお、閉鎖された Netscape DevEdge? にあった JavaScript 1.3 から 1.5 のマニュアルは現在 DevEdge Tech Central に一時的に保存されています。
Windows Script (in Microsoft)
Microsoft JScript, VBScript, Windows Scirpting Host などに関する情報。
Document Object Model (DOM) Specifications(英文)
W3C*7 による標準勧告。なお、TR List/J_Tpc 標準情報(TR)原案(規定内容による分類)には、DOM Level 1、2、3、XHTML、CSS 他さまざまな規格の日本語訳があります。
MetaGraphic Cell B4F - Scripts
DOM 仕様の日本語訳ですが、見やすく編集されています。DOM2 オブジェクト一覧 は何度もお世話になるでしょう。

ブラウザの実装を確かめよう

Gecko DOM Reference(英文)
Gecko 系ブラウザ(Mozilla、Netscape 6 以降、Firefox)の DOM リファレンス。ここに掲載されていないものは ソースコードにおける IDL 定義を見ると良いでしょう。
HTML and DHTML Reference(in MSDN)(英文)
Microsoft Internet Explorer の DHTML(HTML、CSS、DOM などの)リファレンス。
Web Specifications Supported in Opera(英文)
Opera の機能一覧。何をサポートしているかの確認に使えます。
khtml Library API Documentation(英文)
khtml 系ブラウザ(Konqueror、Safari など)のソースコード。何をサポートしているかの確認に使えます。
Viewport properties(in QuirksMode)(英文)
まだ標準化されていない、ウィンドウの幅・高さやスクロール量などに関するブラウザ対応状況。

そして……

編集者

作成 むむりく 2004/10/08
編集 Pid 2006/01/03


*1 たとえば Acrobat JavaScript など。
*2 たとえば ActionScript など。
*3 たとえば Mozilla XULDashboard Widget など。
*4 たとえば Windows Scripting Host(WSH) など。
*5 European Computer Manufacturer Association(ECMA)が JavaScript の文法を標準化したため、これを ECMAScript と呼びます。
*6 もしも HTML またはCSSをまだ覚えていなければ、必ず先にマスターしておいて下さい。
*7 World Wide Web Consortium。WWW に関するさまざまな技術の標準化を図っている団体。

リロード   新規 編集 凍結 差分 添付 複製 改名   トップ 一覧 検索 最終更新 バックアップ   ヘルプ   最終更新のRSS
Last-modified: 2006-01-03 (火) 08:37:21 (5005d)