カテゴリー
オライリーJavaScript

クライアントサイドフレームワーク

jQuery

Prototype
http://prototypejs.org/

Dojo
http://dojotoolkit.org/

YUI
http://developer.yahoo.com/yui/

Closure
http://code.google.com/closure/library/

GWT(Google Web Toolkit)
http://code.google.com/webtoolkit/

カテゴリー
オライリーJavaScript

同一出身ポリシーの緩和

Documentオブジェクトのdomainプロパティを使う

カテゴリー
オライリーJavaScript

同一出身ポリシー

同一出身ポリシー
JavaScriptコードがWebコンテンツにアクセスする際に包括的に適用されるセキュリティ機構
あるスクリプトは、そのスクリプトを含むドキュメントと同じ出身のウィンドウやドキュメントのプロパティしか読み出せない。

ドキュメントの出身とは
そのドキュメントをロードしたURLの
プロトコル(http/https)、ホスト、ポート番号がすべて同じもの

同一オリジンポリシー
https://developer.mozilla.org/ja/docs/Web/Security/Same-origin_policy

スクリプト自身の出身は、同一出身ポリシーには関係ない。
スクリプトが埋め込まれているドキュメントの出身は関係ある。

同一出身ポリシーは、XMLHttpRequestオブジェクトを使って、スクリプトから制御するHTTPリクエストにも適用される

カテゴリー
オライリーJavaScript

JavaScriptではできないこと

クライアント側のコンピュータ上の任意のファイルを書き込んだり、削除すること
クライアント側のコンピュータ上の任意のディレクトリに対して一覧を取得すること

汎用的なネットワーク機能がない

制限がかけられている機能
新しいブラウザウィンドウをオープンの際、マウスクリックなどのユーザ操作に応答するときしかできない

JavaScriptプログラムからクローズできるのは、そのプログラムからオープンしたウィンドウのみ。
そのほかのウィンドウをクローズする場合は、ユーザーの確認が必要

HTMLのFileUpload要素のvalueプロパティには値を設定できない。

同一出身ポリシー
スクリプトを含むドキュメントをロードしたサーバーとは異なるサーバーからロードされたドキュメントの内容をスクリプトから読み出すことはできない。
同様に異なるサーバーのドキュメントに対して、スクリプトからイベントハンドラを登録できない。

カテゴリー
オライリーJavaScript

Internet Explorerの条件付きコメント

<!--[if IE 6]>
	この部分は、IE6でのみ表示
<![endif]-->

<!--[if lte IE 7]>
	この部分は、IE5、6、7以前でのみ表示
	lteはless than or equal より小さい、または等しい
	le、gt、gteも使える
<![endif]-->

<!--[if !IE]> <-->
	この部分はIE以外で表示される
<!--> <![endif]-->

IEのJavaScriptの条件付きコメント
/*@cc_on と @*/ の間に記述する

条件付きコメント中では、@if、@else、@endというキーワードを使える
カテゴリー
オライリーJavaScript

クァークスモードと標準モード

!DOCTYPE宣言によって切り替わる

標準モード(CSS互換モード)
CSS標準に基づいて描画が行われる
厳密なDOCTYPE宣言されたページ
理解できなDOCTYPE宣言が記述されたページ(将来の互換性のため)

クァークスモード
IE4、IE5と同じように、非標準で問題のある方法で描画が行われる
!DOCTYPE 宣言のないページ、IE5時代によく使われた!DOCTYPE宣言で記述されたページ

document.compatModeプロパティで調べる
CSS1Compat -> 標準モード
BackCompat、undefined -> クァークスモード

カテゴリー
オライリーJavaScript

機能テスト

機能テスト(能力テストとも呼ばれる)
すべてのブラウザでサポートされているわけではない機能を使う場合は、その機能がサポートされているかどうかをテストするコードを追加するという方法

if(element.addEventListener) {
    element.addEventListener("keydown", handler, false);
    element.addEventListener("keypress", handler, false);
} else if(element.attachEvent) {
    element.attachEvent("onkeydown", handler);  
    element.attachEvent("onkeypress", handler); 
} else {
    element.onkeydown = element.onkeypress = handler;
}

機能テストを使うことで、ある特定のブラウザのある特定のバージョン用のコードを書かなくて済むようになる。

カテゴリー
オライリーJavaScript

グレードブラウザサポート

グレードブラウザサポート Graded browser suppor
Yahoo!によってはじめられた動作テストとQ&Aに関する手法

ブラウザを級によって分類する
A級
完全にサポートされていて、十分にテストされているブラウザ
C級
機能が十分ではないブラウザ
X級
A、Cではないブラウザ
一般的には、最新のブラウザ、あまり使われていないブラウザ

Yahoo User Interface library(YUI)の新規開発を中止

カテゴリー
オライリーJavaScript

互換ライブラリ

互換性の問題に対処するには、対処してくれるライブラリを使うのが最も簡単

カテゴリー
オライリーJavaScript

互換性と相互運用性

webブラウザは、webアプリケーションにとってのOS
インターネットでは、さまざまなバージョン、プラットフォームが使用されている

クライアントサイドJavaScriptの互換性と相互運用性の問題は大きく分けると、次の3つ
進化
未実装
バグ

参考になるサイト
https://developer.mozilla.org/
Mozilla Developer Center

http://msdn.microsoft.com/
Microsoft Developer Network

http://developer.apple.com/safari/
Apple Developer Connection の Safari Dev Center

http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML_5)
さまざまなブラウザにおけるHTML5の機能やAPIの実装状況をまとめているWikipediaの記事
http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Document_Object_Model)
同様に、DOM機能の実装状況をまとめているWikipediaの記事

http://caniuse.com/
「When can I use…」サイトでは、重要な機能の実装状況とまとめている

http://www.quirksmode.org/dom/
さまざまなブラウザのW3C DOM対応状況が表にまとめられている。

http://webdevout.net/browser-support/
ブラウザベンダーでのWeb標準の実装状況がまとめられたサイト