JSクイック入門

6189 ワード

JavaScript:
  • 概念:クライアントスクリプト言語
  • はクライアントブラウザで動作しています.各ブラウザにはJavaScriptの解析エンジン
  • があります.
  • スクリプト言語:コンパイル不要で、直接ブラウザ解析によって実行できます.
  • 機能:
  • は、ユーザーとhtmlページのインタラクションプロセスを強化し、html要素を制御するために使用することができ、ページにいくつかの動的効果を持たせ、ユーザーの体験を向上させる.
  • JavaSrpit=ECMAScript+JavaScript(BOM+DOM)
  • ECMAScript:クライアントスクリプト言語の標準
  • 基本文法:
  • .html結合方式
  • 内部js:
  • に決まっています.
  • DOM
  • 概念:Dockment Object Model文書オブジェクトモデル
  • タグ言語ドキュメントの各構成部分を対象としてパッケージ化し、これらのオブジェクトを使用して、タグ言語ドキュメントをCRUDの動的動作
  • を行うことができます.
  • W 3 C DOM標準は、3つの異なる部分に分けられる.
  • コアDOM-任意の構造化されたドキュメントに対する標準モデル
  • Dcumnet:ドキュメントオブジェクト
  • 作成:domモデルではwindowオブジェクトを使って取得できます.
  • window.document
  • document
  • 方法:
  • Elementオブジェクトを取得する
  • getElenmetById():id属性に基づいて要素オブジェクトを取得し、id値は一般的に唯一
  • である.
  • getElenmetByTagName():要素名から要素オブジェクトを取得する場合、戻り値は行列
  • です.
  • getElenmetByClass Name():クラスの属性値から要素オブジェクトを取得すると、戻り値は行列
  • です.
  • getElenmetByName():name属性値から要素オブジェクトを取得すると、戻り値は1つの配列
  • です.
  • 他のDOMオブジェクト
  • を作成する.
  • 属性:
  • Element:元素オブジェクト
  • 取得/作成:documentによる
  • の取得と作成
  • 方法:
  • removeAttribute():属性を削除する
  • set Attribute():設定属性
  • Attribute:属性オブジェクト
  • Text:テキストオブジェクト
  • Commment:注釈対象
  • Node:ノードオブジェクト、以上の5つのオブジェクトの親オブジェクト
  • 特徴:すべてのdomオブジェクトは、ノード
  • であると考えられてもよい.
  • 方法:
  • CRUDDOmツリー:
  • apendChild():ノードリストの末尾に新しいサブノード
  • を追加する.
  • RemoveChild():削除(そして現在のノードの指定ノードに戻る)し、その親オブジェクトによって
  • を呼び出す.
  • ReplacceChild():サブノードを新しいノードに置き換える
  • 属性:
  • parent Node:ノードに戻る親ノード
  • XML DOM:XMLドキュメントに対する標準モデル
  • HTML DOM:準対HTML文書の標準モデル
  • タグ体の設定と取得:innerHTML
  • html要素オブジェクトを使用する属性
  • 制御要素スタイル
  • は、要素のスタイル属性を使用して
        <script>
            var div1 =                                                           document.getElementById("div1");
         div1.onclick = function() {
             div1.style.color = "red";
             div1.style.fontFamily = "    ";
    div1.style.fontSize ="100px";
    }
         script>
    
    
    
  • を設定する.
  • 使用className
    <script>
    var div1 = document.getElementById("div1");
    div1.onclick = function() {
    div1.className="d1";
    }
    script>
    
  • 事件の傍受メカニズム
  • 概念:いくつかのコンポーネントがいくつかの動作を実行した後、いくつかのコードの実行をトリガします.
  • イベント:クリック、ダブルクリック、マウス移動、キーボードが
  • を押します.
  • イベントソース:ボタンなどのコンポーネント、テキスト入力ボックス
  • モニター:コード
  • 登録傍受:イベント、イベントソース、モニターを結合し、イベントソースがあるイベントが発生した場合、ある傍受コード
  • の実行をトリガする.
  • よくあるイベント:
  • クリックイベント:
  • onclickユーザーがあるオブジェクトをクリックした時に呼び出すイベントのハンドル.
  • ondblclickは、ユーザがあるオブジェクトをダブルクリックしたときに呼び出すイベントのハンドルです.
  • フォーカスイベント:フォーム検証
  • onfocus元素は焦点を得る
  • .
  • onblur元素は焦点を失う.
  • ロードイベント、window body
  • onload 1枚のページまたは1枚の画像の読み込み完了
  • マウスイベント(メソッドを定義すると、1つのイメージを定義し、イベントオブジェクトを受け付け、イベントオブジェクトのブタン属性はマウスボタンのキー値を取得することができます)
  • onmousedownマウスボタンは
  • を押します.
  • onmousemooveマウスが移動されます.
  • onmouseoutマウスはある元素から移動します.
  • onmouseoverマウスはある元素の上に移動します.
  • onmouseupマウスボタンが解除されました.
  • キーボードイベント(メソッドを定義するとき、1つのイメージを定義し、イベントオブジェクトを受け付け、イベントオブジェクトのブタン属性はマウスボタンのキー値を取得することができます)
  • onkeydownのキーボードボタンが押されました.
  • onkeyperesのキーは、キーを押して放します.
  • onkeyupのキーボードボタンが解除されました.
  • 選択と変更:
  • onselectテキストが選択されました.
  • オンチャンドメインの内容が変更されました.
  • フォームイベント
  • onsubmit確認ボタンがクリックされます.
  • フォーム検証:フォームが
  • に提出されたかどうかを判断する.
  • return false;
  • オンスリセットボタンがクリックされます.