クライアントJS——「WebブラウザのJS」

4478 ワード

1クライアントJavaScript
windowオブジェクト自体もwindowという属性があります.windowオブジェクトを指します.
window.window.window.location.pathname;
2 HTMLにJavaScriptを埋め込む
2.1 script元素
XHTMLでJavaScriptを使うと、CDATAの部分に置く必要があります.
<![CDATA[/*code...*/]]>
2.2スクリプトタイプ
type属性をブラウザで認識できない値に設定すると、htmlページに任意のテキスト内容を埋め込むことができます.
 //type               
    hello scripter;


"use strict"
var s = document.getElementsByTagName("script")[0];
console.log(s.text); // text          

2.3 URLのJavaScript(使用を避ける)
  • javascript:プロトコル定義子
  • は、voidオペレータによって強制関数として呼び出されたり、式にundefined値
  • を与えたりすることができる.
    単独の行コードとして扱われています.文の間はセミコロンで区切られていなければなりません.
    w time ist
    
    ブックマーク
    ブックマークは保存されたURLです.ブックマークがjavascript:URLであれば、保存されているのは短いシナリオです.ブックマークといいます.ブックマークが値を返さない限り、現在表示されているドキュメントを操作できます.
    3 JavaScriptプログラムの実行
    3.1同期、非同期、遅延のシナリオ
    scriptタグはdeferとasync属性があり、シナリオの実行方法を変えることができます.これらの属性はsrc属性との併用時のみ有効です.
  • async属性は、シナリオが利用可能になると非同期的に実行されると規定している.async属性は外部スクリプトのみに適用されます(Src属性を使用する場合のみ).
  • defer属性は、ページローディングまでスクリプトの実行を遅延するかどうかを規定する.
  • 3.2クライアントJavaScriptタイムライン
  • Webブラウザは、Dcumentオブジェクトを作成し、Webページの解析を開始し、html要素とそのテキストの内容を解析した後、ElementオブジェクトとTextノードをドキュメントに追加します.この段階でdocumen.readystate属性値は「loading」
  • です.
  • HTML解析器がasyncとdefer属性のないscript要素に遭遇したとき、これらの要素をドキュメントに追加して、行または外部スクリプトを実行します.これらのスクリプトは同期して実行されます.スクリプトのダウンロード(必要であれば)と実行時の解像度は一時停止されます.このようにスクリプトはdocumen.wrte()を使って入力ストリームにテキストを挿入することができます.これらのテキストは、解像度の回復時に文書の一部となります.同期スクリプトは、関数を簡単に定義し、登録後に使用する登録時間処理プログラムを登録しますが、ドキュメントツリーを巡回して操作することができます.このように、同期スクリプトは、自分のスクリプト要素と以前の文書内容を見ることができます.
  • は、解像器がasync属性を設定したスクリプト要素に出会うと、スクリプトテキストのダウンロードを開始し、ドキュメントの解析を継続します.スクリプトはダウンロードが完了したらすぐに実行しますが、解像度は停止せずにダウンロードを待っています.非同期スクリプトは、document.write()メソッドを使用してはいけません.それらは自分のscript要素とその前のすべての文書要素を見ることができ、あるいは他の文書の内容にアクセスすることができないかもしれません.
  • ドキュメントが解析されたら、document.readyState属性は「interactive」になります.
  • すべてのdefer属性のスクリプトは、ユーカリがドキュメント内の出現順序で実行されます.非同期スクリプトはこの時間にも実行されるかもしれません.ディレイスクリプトは完全なドキュメントツリーにアクセスできます.
  • ブラウザは、Dcumentオブジェクト上でDOMContentLoadedイベントをトリガする.これは、同期スクリプトの実行段階からイベント駆動段階に移行するプログラムの実行を示しています.ただし、この場合はまだ別のシナリオが実行されていない場合があります.
  • の場合、ドキュメントは完全に解析されましたが、ブラウザはまだ他のコンテンツの読み込みを待っているかもしれません.これらのすべてのコンテンツがロードされ、すべての非同期スクリプトがロードされ、実行され、Dcument.readyState属性が「complette」に変更され、WebブラウザがWindowオブジェクト上のロード時間をトリガする.
  • 以降、非同期イベントが起動され、ユーザ入力イベント、ネットワークイベント、タイマーの失効などに非同期的に応答する.
  • 4互換性と相互利用性
    4.1機能テスト
    一般的な機能テスト:
    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;
    }
    
    4.2怪異モードと標準テスト
    Dcument.co mpatMode属性は、「CSS 1 Comppat」であれば、標準モードであり、「BackComputまたはundefined」であれば、奇異モードである.
    4.3ブラウザテスト
    以前は普通ブラウザテストが必要でした.つまりNavigatorオブジェクトを使います.
    4.4 IEの条件コメント
    IEにおける条件コメント(Condtitional comments)は、IEのバージョンとIE以外のIEに対して優れた区分能力を有しており、WEB設計において一般的なhack方法である.
    条件コメントはIE 5以上でのみ使用できます.
  • gt:greater than、条件バージョン以上を選択して、条件バージョン
  • を含みません.
  • lt:lessthan、条件バージョン以下のバージョンを選択して、条件バージョン
  • を含みません.
  • gte:greater than or equal、条件バージョン以上を選択して、条件バージョン
  • を含みます.
  • lte:less than or equal、条件バージョン
  • を含む以下のバージョンを選択します.
  • 条件バージョン以外のすべてのバージョンを選択して、高低に関わらず
  • .
    使用方法:
  • Internet Explorer
  • InternetExplorer version 6 IE
  • IEのJavaScript解釈器も条件コメントをサポートしています.
    /*@cc_on
    @if(@_jscript)
    alert("You are using Internet Explorer");
    @else*/
    alert("you are not using Internet Explorer");
    /*@end
    @*/