ユーザ用ツール

サイト用ツール


javascript

文書の過去の版を表示しています。


JavaScript

JavaScriptはオブジェクト指向スクリプト言語。

Webブラウザ上で動作するスクリプト言語として主に使用されてきたが、node.jsの登場よってWebアプリケーションのサーバサイド実装にも利用されるようになってきた。

特徴

  • 動的型付け
  • プロトタイプベース(インスタンスベース)オブジェクト指向
  • ファーストクラス関数/クロージャ

プログラミング手法

  • 非同期処理
  • イベント駆動型

多くの処理系がシングルスレッドであるため、シングルスレッド前提のプログラミング手法を用いる。イベント駆動型の非同期処理はコードが処理が追いにくく複雑になりやすいが、クロージャによって容易な記述が可能になる。

仕様

  • ECMAScript - 言語仕様。
  • DOM - XMLやHTMLを扱うためのAPI仕様。表示されているHTML文書のDOMをJavaScriptで操作することでWebページを操作する。
  • E4X - JavaScript中で直接XMLを扱うためのECMAScript拡張仕様、ブラウザによっては全く動かないのであまり使われていない。

ECMAScript

JavaScriptの言語仕様部分。最新の仕様はECMA-262 5th Editionで文書化されている。次世代の仕様である6th EditionはHarmonyというコードネームで呼ばれている。

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 - Javaで書かれたJavaScriptエンジン、JDKに付属
  • Nashorn - JDK8でRhinoに代わって搭載予定
  • JScript - IEのJavaScriptエンジン、ASPの記述言語、WSHの記述言語として利用される。
  • V8 - ChromeのJavaScript処理系、node.jsのJS処理系としても使われている。CrankshaftというJITコンパイラを搭載している。
  • JavaScriptCore - Safari、iOSのJavaScript処理系。
  • SpiderMonkey - Firefox、IonMonkeyと呼ばれる高速なJITコンパイラを搭載している

ライブラリ

言語機能拡張、ウィジェット・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プラグインとして提供されるライブラリ。

javascript.1370936475.txt.gz · 最終更新: 2013/06/11 07:41 by nullpon