Javascript DOMプログラミング芸術--ノート1

10386 ワード

Javascript

1.Javascript文法
JSは説明言語であり、ブラウザのJavaScript解釈器は直接ソースコードを読み込んで実行します.

    //       
    /*
    *       
    */
    <!-     （    HTML       ， JS         ）
    <!- -> HTML    ，JS  '->'

変数宣言:

 var data = "123";   //data     
 data = "123";   //data

変数を宣言しながら、データの種類を宣言することを推奨します.
データの種類:
string:文字列型;number:数値型;bootlean:trueまたはfalse;null:は、まだ存在していないオブジェクトを表し、関数が存在しないオブジェクトを返したいという意味でよく使われます.undefined:宣言の変数が初期化されていない場合、変数のデフォルト値はundefinedです.

alert(typeof undefined); //output "undefined"  
alert(typeof null); //output "object"  
//null              

alert(null == undefined); //output "true"  

alert(null === undefined); //output "false"  
alert(typeof null == typeof undefined); //output "false"  
//   "==="      ，      ，  "===" "!=="

配列Aray:

var list = Array();
list["name"]=lennon;
list["age"]=23;

関連する配列、すなわち充填配列を使用することを推奨します.配列の下付き文字列は、配列の可読性を向上させます.
オブジェクトObject
オブジェクトObject:属性と方法が含まれます.建設対象:Javascriptカスタムオブジェクト、例えばAray();宿主対象:ブラウザが提供するオブジェクトは、Form\Element\Imageなどです.
2.DOM
DOMとはDockment Object Modelで、HTMLドキュメントは一本の木です.ツリー上のノードは、属性ノード、テキストノード、エレメントノードに分かれています.これらのノードの各々はオブジェクトである.
getElementById():要素ノードを返します.ドキュメント内の各ノードは、オブジェクトに対応しています.getElements ByTagName():オブジェクト配列を返します.
getElements ByTagName()が取得した要素の内容を修正すると、それは配列であり、正確にgetElements ByTagName()[0].childNodesと参照されます.
get Attribute():要素ノードの属性値を取得する;set Attribute():要素ノードの属性値を設定し、ある属性値をリセットしても良いし、要素ノードの属性値を新たに追加しても良いです.
例:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="__PUBLIC__/css/bootstrap.min.css">
    <style type="text/css">
        body{
            color: #fff;
            background-color: #ccc;
            font-size: 20px;
        }
        p {
            color: blue;
            font-size: 1.2em;
        }
        #purchase {
            background-color: #333;
            color: #ccc;
            padding: 1em;
        }
    style>
head>
<body>
    <h1>What to Buy?h1>
    <p title="list_title">         ！p>
    <p>      p>
    <ul id="purchase">
        <li>     li>
        <li>      li>
        <li>      li>
        <li>     li>
    ul>

    <script type="text/javascript">
    window.onload = function(){

        // alert(typeof document.getElementById("purchase"));   //  ul     ：  
        var shopping = document.getElementById("purchase"); //  ul  
        var items = shopping.getElementsByTagName("*");     //  ul          
        for(var i=0; i < items.length; i++) {               //ul    4 li  
            // alert(typeof items[i]);                      //  ul    li    
        }
        shopping.setAttribute("title","   ");
        alert(shopping.getAttribute("title"));

        var paras = document.getElementsByTagName("p");     //  p  
        for(var i=0; i< paras.length; i++) {
            var title_p = paras[i].getAttribute("title");
            if(title_p) {
                alert(title_p);
            }
        }

    }
    script>
body>
html>

3.document.write()とinners HTML
document.write()は、直接ページに書き込むコンテンツの流れです.書く前にdocument.openを呼び出していないと、ブラウザが自動的にオープンを呼び出します.終了するたびに関数を呼び出します.ページが書き換えられます.innerHTMLはDOMページ要素の一つの属性であり、この元素のhtml内容を表しています.特定の要素に正確に変更できます.documentの内容を変更するには、document.document Element.innersHTMLを修正する必要があります.
4.一般的なイベント
1.マウスイベント
onclick:マウスをクリックしてondbclick:マウスをダブルクリックしてonblur:フォーカスを失うonfocus:フォーカスを得る
onmouseover:マウスをある元素の上に移動します.マウスはある元素からonmousedownを離れます.マウスはonmouseupを押します.マウスボタンは解除されます.
2.キーボードイベント
onkeydown:キーボードのキーが押されています.キーボードのキーが放しられました.

Javascriptのアプリとcallの詳細