文書の過去の版を表示しています。
目次
JavaScript
JavaScriptはオブジェクト指向スクリプト言語。主にブラウザ上でDHTMLの実現、ユーザ操作の補助、Ajaxと呼ばれる手法で高度なWebアプリケーション作成に利用される。
仕様
- ECMAScript - 言語仕様。
- DOM - XMLやHTMLを扱うためのAPI仕様。表示されているHTML文書のDOMをJavaScriptで操作することでWebページを操作する。
- E4X - JavaScript中で直接XMLを扱うためのECMAScript拡張仕様、ブラウザによっては全く動かないのであまり使われていない。
ECMAScript
JavaScriptの言語仕様部分。最新の仕様はECMA-262 5th Editionで文書化されている。現在の主要なブラウザが実装している仕様はECMAScript 3rd Editionであるが、最新のブラウザでは既に5thの一部の仕様が実装されている。
ECMAScriptは言語仕様であり、HTML文書の操作(DHTML)の仕様は一切定められていない。DHTMLに関する共通仕様はW3CのDOMによって決められている。
- ネイティブオブジェクト - ECMAScript仕様で定義されているオブジェクト。StringやArray。
- ホストオブジェクト - 実行環境が提供するオブジェクトでECMAScriptの仕様外のもの。windowやDOMオブジェクト、XMLHttpRequest。
DOM以外のホストオブジェクト(window、navigator、location、history 等)には標準仕様がなく各ブラウザベンダが互いに様子見したり、協力しつつ実装しているようだ。ただ、XMLHttpRequestについてはhtml5で仕様化されるようだ。
プロトタイプベースオブジェクト指向
Java等のオブジェクト指向はクラスベースのオブジェクト指向と呼ばれる。一方、JavaScriptはプロトタイプベース、あるいはインスタンスベースオブジェクト指向と呼ばれる。
クラスベースは、まず振る舞いとデータをクラスとして定義し、クラスを型とするインスタンスを作成する。そしてクラスで定義した操作を組み合わせてプログラミングする。プロトタイプベースでは、まずインスタンスを作成し、そのインスタンスに独自の性質を付加してプログラミングする。また別のインスタンスをプロトタイプとすることでプロトタイプとなったインスタンスの性質を引き継ぐことができる。
クラスに縛られないため、実行中の任意の場所でプロパティやメソッドをオブジェクト毎に変更したり、新しく追加したり、削除したりすることができる。これはStringやwindow等のビルトインオブジェクトも例外ではなく、同じStringのオブジェクトでもオブジェクトごとに別の振る舞いを持たせる事もできる
var a = new String("JavaScript"); var b = new String("JavaScript"); b.toString = function() { return this.valueOf() + "にゃー"; }; console.log(a.toString()); // "JavaScript" console.log(b.toString()); // "JavaScriptにゃー"
JavaScript言語
TIPS
DOM (Document Object Model)
Ajax (Asynchronous JavaScript and XML)
Bookmarklet
ブックマークレットはブックマークに保存するJavaScript
実行環境
ECMAScriptの処理系
- Rhino - MDC - Javaで書かれたJavaScriptエンジン、JDK6に付属しているJavaScriptエンジンはこれ。
- JScript - WSH(Windows付属のスクリプト実行環境)、IEのJavaScriptエンジン、ASPの記述言語として利用される。WSHはWindowsコマンドプロンプト上で実行できる他、.js拡張子のスクリプトをダブルクリックで実行可能。最新版では、ActiveXオブジェクトや、.NETクラスライブラリを使うこともできる。
ブラウザのJSエンジン
- SpiderMonkey - Firefox3のJavaScriptエンジン
- TraceMonkey - Firefox3.1、JIT技術による大幅な高速化
- JavaScriptCore - Safari
- Nitro - Safari4 (SquirrelFish Extremeから改名?)
- V8 - Google Chrome
ライブラリ
言語機能拡張、ウィジェット・GUIコンポーネントの提供、クロスブラウザ、Ajax処理の簡易化等の機能を提供する。
ライブラリ | ライセンス | メモ |
---|---|---|
prototype.js | MIT | これに依存するライブラリが多い。 |
script.aculo.us | MIT | prototype.jsにエフェクト等の機能を追加する拡張ライブラリ |
Dojo Toolkit | AFL v2.1 | 全部入りの重量級ライブラリ |
rico | Apache 2.0 | prototype.js依存 |
Mochikit | MIT or AFL v2.1 | 軽量 |
jQuery | MIT or GPL | prototypeを抜きトップ独走中 |
jQuery UI | MIT or GPL | jQueryにUIコンポーネントを追加 |
Ext JS | LGPL 3.0 | prototype.js、YUI、jQueryにコンポーネントを追加する。単体でも動作可能、重い |
YUI | BSD | Yahoo!が作成したライブラリ |
MooTools | MIT | 軽い |
その他
- Cotrol.Modal LightBox風モーダルダイアログ作成ライブラリ、要prototype.js
- jkl.calendar とりあえずカレンダーが欲しいときに便利
- SproutCore JavaScript単体ライブラリではなくサーバサイドとセットになっており、アプリケーション作成に特化されている
巨大ライブラリで通信負荷が気になる場合は、Gzip圧縮転送などを使う。
Google AJAX Libraries API
GoogleのサーバからjQuery等の各種ライブラリを取得できる。これを用いる事で開発者にはダウンロード設置の手間が省け、運用では負荷の低減、ユーザにはライブラリのキャッシュヒットの可能性が高くなり、高速化が期待できる(かも…)
http://code.google.com/intl/ja/apis/ajaxlibs/
直接読み込む
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" />
googleのライブラリを通して取得する
<script src="http://www.google.com/jsapi"></script> <script> google.load("jquery", "1.3.1"); </script>
JavaScript WYSIWYGエディタ
TinyMCEとFCKeditorの違いを比較、TinyMCEは複数の1つのインスタンスで複数のテキストエリアに対応できるので、1画面上に二つのエディタを置くとき圧倒的に速い。
jwysiwygはjQueryプラグインとして提供されるライブラリ。