先端ページ学習Day 55 JavaScript操作

20989 ワード
JS基礎操作
一、分岐構造
1、if文
  • if基礎文法
    • if (     ) {
       ;
}
//          true，      ；     
//              
// 0、undefined、null、""、NaN  ，
  • if複雑文法
    • // 1.   
if (   1) {
       1;
} else {
       2;
}

// 2.   
if (   1) {
    
} else if (   2) {
    
} 
...
else if (   2) {
    
} else {
    
}
  • ifネスト
    • if (   1) {
    if (   2) {
        
    }...
}...
    2、switch文
    switch (   ) {
    case  1:    1; break;
    case  2:    2; break;
    default:    3;
}
// 1.                     
// 2.             
// 3.break    
// 4.default      ，       case   ，   case
    二、循環構造
    1、forサイクル
    for (    ①;      ②;       ③) {
       ④;
}
// 1.        、    
// 2.     ① ②④③ ... ②④③ ②，   ①，   ②，②④③   [0, n]
    2、whileサイクル
    while (     ) {
       ;
}
    3、ド…whileサイクル
    do {
       ;
} while (     );
    4、for…inサイクル
    obj = {"name": "zero", "age": 8}
for (k in obj) {
    console.log(k, obj[k])
}
//       ：      key，  []       value
    5、for…ofサイクル
    iter = ['a', 'b', 'c'];
for (i of iter) {
    console.log(iter[i])
}
// 1.         ：     index，  []       value
// 2.ES6  ，          、  、Map、Set、Anguments、NodeList
    6、break、continueキーワード
  • break:本層の循環を終了する
  • continue:今回のサイクルを終了して次のサイクルに入ります.
    • 三、異常処置
    try {
         ;
} catch (err) {
           ;
} finally {
           ;
}
// 1.err          
// 2.finally              

    throw "     "
//             ，      try...catch
    四、関数初級
    1、関数の定義
  • ES 5 
    • function     (    ) {
       ;
}

var     = function (    ) {
       ;
}
  • ES 6 
    • let     = (    ) => {
       ;
}
  • 匿名関数
    • (function (    ) {
       ;
})

//          
(function (    ) {
       ;
})(    );
    2、関数の呼び出し
  • 関数名(パラメータリスト)
    • 3、関数のパラメータ
  • 個の数は統一する必要がありません.
    function fn (a, b, c) {
    console.log(a, b, c);  // 100 undefined undefined
}
fn(100);

function fn (a) {
    console.log(a)  // 100
}
fn(100, 200, 300)  // 200,300
  • は、任意の位置に標準値
    • を有してもよい.
    function fn (a, b=20, c, d=40) {
    console.log(a, b, c, d);  // 100 200 300 40
}
fn(100, 200, 300);
  • は、文法によって複数の値
    • を受信する.
    function fn (a, ...b) {
    console.log(a, b);  // 100 [200 300]
}
fn(100, 200, 300);
// ...
    4、戻り値
    function fn () {
    return    ;
}
// 1.   return  ，      
// 2.        js    
// 3.
    五、事件初級
  • onload:ページローディング完了イベントは、windowオブジェクト
    • にのみ添付されます.
  • onclick:マウスクリック時間
  • onmouseover:マウス浮遊事件
  • onmousout:マウス移動イベント
  • onfocus:フォーム要素取得フォーカス
  • onblur:フォーム要素がフォーカスを失う
    • 六、JSセレクタ
    1、getElementシリーズ
    // 1.  id              
document.getElementById('id ');
//       document  

// 2、  class              
document.getElementsByClassName('class ');
//       document           
//     HTMLCollection (          ，       )
//             HTMLCollection   ([])

// 3.  tag              
document.getElementsByTagName('tag ');
//       document           
//     HTMLCollection (          ，       )
//             HTMLCollection   ([])
    2、querySelectシリーズ
    // 1.             
document.querySelector('css     ');
//       document         

// 2.            
document.querySelectorAll('css     ');
//       document         
//     NodeList (          ，       )
//             NodeList   ([])
    3、id名
  • は、ID名で直接に対応するページ要素オブジェクトを取得することができるが、
    • を使用することは推奨されない.
    七、JS操作ページの内容
  • inneraText:普通のラベルの内容(自身のテキストとすべてのサブラベルのテキスト)
  • innerHTML:タグを含む内容(自身のテキストとサブラベルのすべて)
  • value:フォームラベルの内容
  • outerHTML:自分のラベルを含む内容(自分のラベルと下のすべて)
    • 八、JS操作ページスタイル
  • 読み書きスタイル
    • div.style.backgroundColor = 'red';
// 1.       
// 2.    
// 3.
  • 読み取り専用計算後のスタイル
    • // eg:     
//   
getComputedStyle(      ,   ).getPropertyValue('background-color');
//    
getComputedStyle(      ,   ).backgroundColor;

// IE9  
      .currentStyle.getAttribute('background-color');
      .currentStyle.backgroundColor;

// 1.       JS     
// 2.         null  
// 3.        
// 4.               (         )
  • は、css操作様式
    • と結合する.
          .className = "";  //     
      .className = "  ";  //     
      .className += "   ";  //
    Promiseモード