現在、私は若手IT勉強会でJavaScriptを勉強しています。11/22の第六回若手IT勉強会で、 13章を担当することになりました。なので、ブログ記事として簡単にまとめてみます。注意点は以下のとおり。
- 詳細は追いかけず、「13章には何が書いてあるかを把握できるようにする」ことを目的とする。
- 僕自身は組込みSEで、JavaScript業務経験無し。よって、要約に間違いが混入する可能性は高いです。
- Firefox1.5/IE6.0/Opera8.5が最新であった頃に書かれたもの
よろしくお願いいたします。
13章 WEBブラウザに組み込まれたJavaScript
本章よりコアJavaScriptの学習からクライアントサイドJavaScriptの学習に。 （Webブラウザで使用するJavaScript）つまり、実際に使用する場面を想定した学習へ。
本章で行うのは以下のとおり。
- ウェブブラウザのプログラミング環境について説明
- JavaScriptコードをHTMLドキュメントに埋め込む方法
<script>タグの使い方/HTMLイベントハンドラ/Javascript URLなど - クライアントサイドJavaScriptの実行モデル（どのような場合にどのように実行されるのか）
- 互換性、アクセサビリティ、セキュリティ
13.1 WEBブラウザ環境
ポイントは以下の三点
- Window object
-
- Window Object = grobal object
つまり下記の二つは同じ
var answer =42;
window.answer =42; - ウィンドウ、フレームごとにwindow objectがある。
- Window Object = grobal object
- Client side objectの階層構造/Document Object model(DOM)
-
- 図13-1を参照のこと
- document objectから下位階層のことをDOMと呼ぶ
- 図13-1は事実上の標準であり、DOM Level 0という。
- event driven programing model
-
- 対話形式 - イベントハンドラ呼び出しによる動作
著者によると、JavaScriptの役割は、ユーザの利便性を向上し、簡単に情報を取得したり、 送信したり出来るようになることであり、JavaScriptがなければ操作できないようなインターフェイスを作るべきではない、とのこと。
「控えめなJavaScript」の目標三つ
- HTML MarkupとjavaScript codeの分離
- javascript offでも使えるようにしておく
- JavaScriptによってHTMLページのアクセサビリティを低下させない
13.2 HTMLドキュメントへのJavaScriptコードの埋め込み
クライアントサイドJavaScriptコードHTMLに埋め込む方法
- <script></script>間に記述
-
- <や&などがXMLマークアップにされるのを防ぐために、 <script><![CDATA[//ここに記述//]]></script>とするのがよい
- 複数<script>タグを書いても1つのJavaScript codeとして認識
- <script src="">や<script archive="">から外部ファイル読み込み
-
- 利点1 ファイル簡略化
- 利点2 コード保守
- 利点3 ロード高速化（複数ページでの使用時）
- 利点4 外部サーバ上のコードも使用可（セキュリティ問題も）
- <meta http-equiv="Content-Script-Type" content="text/javascript">もしくは<script type="text/javascript">という指定がいる。
- defer属性はIEのみに対応。読み込み順番が変わる。注意。
- <noscript>でJavaScript off時の対応が書ける
- </script>をdocument.write()で出力する場合は、 HTMLパーサにそれを読み込ませないようにタグを分割する。
- <!-- -->を使って<script>タグ未対応ブラウザに対応する。
- IEのみの<script>非標準属性にも注意
- イベントハンドラとして、onclick/onmouseoverなどのHTML属性の値として記述
-
- <input type="checkbox" name="options" value="giftwrap" onclick="giftwrap=this.checked;">
- （参加者からの意見によると、onclickなどは匿名関数扱いなので、ここで宣言した関数は他から読み込めない。 しかし、 onclick内では読み込める。 ）
- イベントの種類としては
-
- onclick
- onmousedown/onmouseup
- onmouseover/onmouseout
- onchange - <input><select><textarea>
- onload - <body>タグ中のみ （参加者からの意見によると、 <img>や、<script>の中でも使えるとのこと）
- [javascript:URL]というようにURL部分に記述
-
- 例えばブックマークレットとか
- javascript:var now =new Date();"<h1>The time is : </h1>" + now;
- 複数行入力は無理なので、コメントは//でなく/* */でつける。
- 現在表示しているドキュメントを変更したくない場合は、URLの最後の文が値を返さないようにする。
- javascrpit:window.open("about:blank"); void 0;
- 参加者の意見によると、最近はBookmarkletの文字数制限を回避するために、jsファイルを読み出す事も多い。
13.5 JavaScriptプログラムの実行方法
- <script></script>のタグ間に記述された順に実行される
-
- Defer属性を持たない<script>tag中のコードは、 document.write()メソッドを呼び出しても構わない。
- ドキュメント解析完了、スクリプト実行、画像外部コンテンツ読み込み完了後、onloadイベントハンドラ実行。
-
- ここからdocument.write()を呼び出すと、 テキスト追加ではなく新しいドキュメントの表示が始まってしまう！
- イベント駆動型に切り替わり、onclickなどに反応するようになる。
- ページから移動しようとするときにonunloadイベントハンドラ呼び出し
- 新しいドキュメントがウィンドウにロードされた時点で、Windowオブジェクトはデフォルトの状態に戻る
- クライアントJavaScriptはシングルスレッド
-
- シンプルだが、遅延が起こりやすい
- ドキュメントロード解析中は、document.write()でコンテンツ挿入可能。
- DOMによるドキュメント操作（１５章）はonloadイベント発生後に行ったほうが安定する。
13.6 クライアントサイドJavaScriptの互換性
ブラウザの互換性に関する情報は
ここで、Firefox1.5/IE6.0/Opera8.5が最新であった頃の非互換の歴史などが記述されているが省略
非互換性に対しては、機能テストを行ってサポートを確かめる必要。17章や20章でいくつかその例が挙げられる予定。
ブラウザのベンダやバージョンを判定するコードを、「ブラウザスニファ」や「クライアントスニファ」とよんだりするとのこと。
IEには条件付コメントという機能があるとのこと。
13.7 アクセサビリティ
- 「JavaScript機能がオフにされている場合でも、Webページが何らかの形で機能するようにコードを設計する」
- マウス使えなくても大丈夫にしておく
13.8 JavaScriptのセキュリティ
JavaScriptで出来ないことは以下のとおり
- クライアント上でのファイル操作
- ソケット開いたり、他のホストからの接続を受け付けたり
- 新しいブラウザウィンドウオープンはユーザ操作に応答するときのみ
- クローズ出来るのはそのプログラムが開いたウィンドウのみ
- リンク先のステータス情報は書き換え不可
- 一辺が100ピクセル未満のウィンドウのオープン、もしくは100ピクセル未満への変更
- HTML Fileuploadのvalueの値は設定できない
- 異なるサーバのドキュメントを読み出せないし、異なるサーバのドキュメントにイベントハンドラを登録することも出来ない （同一出身ポリシー）
-
- 制限が厳しすぎる場合は、Document.domainを使用する
クロスサイトスクリプティングについての解説が13.8.4にあったが、本題からそれると判断したため省略
同じく、DoS攻撃についての解説が13.8.5にあったが、省略
13.9 そのほかのWeb関連の組み込みjavaScript
- ユーザスクリプティング(Greasemonkeyなど）
- SVG（SVG中のXML要素制御）
- XUL（Firefox GUI操作）
- ActionScript(正確には違うけど）
