2017-03-24対象予習ノート

6718 ワード

inキーワード
  • 作用:1.属性を検出し、構文「属性」inオブジェクト、ブール値タイプを返します.遍歴(オブジェクト)
  • var obj = {name:'zs'};
    if('name' in obj){
              console.log('obj        name');
    }
    
    for(var k in obj){
            //           []  ,       
            console.log(k,obj[k]);
    }
    

    補完配列のfor inは配列に遍歴し、インデックスはkeyであり、配列の要素はvalueである.
    var arr = [1,2,3,4,5,6];
    for(var k in arr){
            console.log(k,arr[k]);
    }
    //2   
    console.log(2 in obj);
    console.log(6 in obj);   //false
    

    deleteキーワード
  • 作用:1.オブジェクトのプロパティ2を削除します.varキーで宣言されていないグローバル変数注意1を削除します.戻り値:ブールタイプの値(削除に成功したかどうかを判断できます).varキーワードで宣言する変数は削除できません.削除オブジェクトに存在しない属性に変更はありません.Windowsの下にあるグローバル変数は削除できません(var宣言を使用します)が、Windowsの上に直接定義されている属性
  • は削除できます.
      var dog = {
            name:"  ",
            color:"  "
        }
    
        console.log(delete dog.color);
        console.log(dog.color); //undefined
    
        var a = 10;
        b = 20;   //    var                 ,          window   
        console.log(b);
    
        delete b;
        //console.log(b);
        console.log(a);
    
        console.log(delete a);   //       false
        console.log(a);
    
        console.log(delete dog.age);   //          ?    
    
    
        //window
        console.log(window.a);
        delete window.a;
        console.log(window.a);
    
        window.demo = "demo";
        console.log(window.demo);
        delete window.demo;
        console.log(window.demo);
    

    デバッグツールの使用
    1.ショートカットキーwindows F 12 Mac command+ctrl+j 2.コンソール(コンソール出力)ページと同じ環境にあります.ブレークポイント
  • 通常ブレークポイント
  • 条件ブレークポイント4.ネットワーク知識点ネットワーク通信:要求+応答要求:クライアントがサーバにデータを要求する行為応答:サーバ側がクライアントにデータを返す行為要求の方式は全部で8種類あり、そのうち4種類は一般的なPUT/Delete/POST/GET要求の内部詳細である:要求ヘッド(記述情報、クライアントおよび要求自体の記述情報)+要求体(パラメータ)応答の内部詳細:応答ヘッダ(記述情報、サーバ側および応答自体の記述情報)+応答体(具体的なデータ)+ステータスコード
  • 例外処理
  • 異常処理の構成
  • try{
    
    
    }
    catch(e){
    
    }
    
  • 食事の場合、プログラムにエラーや異常が発生した場合、そのコードの後ろのすべてのコードは実行できませんが、何度もプログラムに問題が発生し、後ろのコードも正常に実行できることを保証する必要があります.この場合、異常キャプチャ構造
  • を使用することができます.
  • 手動で例外構文throw具体的な情報を投げ出す内容:文字列+オブジェクト自己符号化仕様:エラーまたは例外がある場合は、オブジェクト(msg code)関数未定義1001変数未定義1002を投げ出してエラーのデータ1003
  • にアクセスする.
  • 完全な異常捕獲構造
  • try{
    
    }
    catch(e){
    
    }
    finally{
    
    }
    
    function demo(){
            console.log('       ');
    }
    try {
            var a = 0;
            console.log(a);
            a();   //  
            //          ,   try     
    }
    catch(e){
            //            ,         catch        
            //                  
            console.log('   ');
            //   e     
            console.log(e);
    }
    demo();
    
    try{
            //         
            function sum(){
                    if(a == undefined){
                            //throw '        !'
                            throw{
                                    ErrMsg:"      !";
                                    ErrCode:1004;
                            }
                    }
                    console.log(a + b);
            }
            sum();
    }catch(e){
            console.log(e,'____');
    }
    
    try{
            //       
    }catch(e){
            console.log(e,'____');
            //           
    }
    finally{
            //      ,          
            //            ,        Node.ks             
    }
    

    DOM操作
    var divDemo = document.createElement('div');
    divDemo.innerText = '     ';
    divDemo.style.backgroundColor = 'red';
    document.body.appendChild(divDemo);
    var dicTest = document.getElementByTagName('div')[0];
    document.body.removeChild(dicTest);
    

    関数とオブジェクトの作成
  • 関数のいくつかの作成
  • 宣言関数
  • 関数式
  • コンストラクション関数を使用して関数オブジェクト
  • を作成する.
  • オブジェクトの作成
  • 字面量
  • コンストラクション関数を使用して
  • を作成
    function     (  1,  2){
            //   
    }
    //  
    //     ();
    fuction funcName(){
    }
    

    関数式
    var func01 = function(){
    };
    //        
    var func02 = function(){
    };
    

    コンストラクタの作成
    //    (     )
    var func = new Function();
    func();
    //  
    function funcTest (){};
    var func02 = new Function("console.log('demo')");
    func02;
    
    var obj = {name:'zhangsan'};
    var obj2 = new Object();
    var obj3 ={};
    

    オブジェクト向けおよびプロシージャ向けプログラミング
  • プロセス向け
  • 対象はいずれも問題解決の構想(思想)である.プロセス向けに問題を解決する際、問題を解決するには次から次へとプロセスが必要であることに注目する(ステップ).オブジェクトに向けて問題を解決する際に注目するのは、問題解決に必要なオブジェクト
  • である.
    オブジェクト向けプログラミングに関する概念
  • 対象とは具体的なものである
  • オブジェクトの特徴(静的記述情報)人の名前、性別、クラス、年齢
  • ある対象行動(動的特徴)人の食事・ランニング・プレー
  • 現実のオブジェクトと符号化中のオブジェクトの静的記述情報:属性動的挙動特徴:方法
  • オブジェクト向けとプロセス向けはいずれも問題を解決する一つの方式(思想)であり、どちらが優れているか、どちらが劣っているかの区別はなく、オブジェクト向け自体はプロセス向けのパッケージ
  • である.
  • オブジェクト向けプログラミングで最も重要なのは何ですか?オブジェクトを見つける(組み込みオブジェクト+自己作成)
  •    var dog = {
            name:"  ",
            age:13,
            color:"  ",
            eat:function(){
                console.log("   ");
            },
            run:function(){
                console.log("runrunrurn");
            }
        }
        var zhangsan = {
            name:"  ",
            age:66,
            height:2.01,
            sex:" ",
            dog:dog,
            eat:function(){
                console.log(" ");
            },
            sleep:function()
            {
                console.log(" ");
            },
            liuDog:function(){
                console.log("  ");
            },
            coding:function(){
                console.log("_____");
            }
        }
    

    オブジェクト向けプログラミングの利点
  • より便利
  • より多重性が高い
  • 高凝集と低結合(回路)冗長(重複するもの)----パッケージ(同じ部分を関数体として抽出し、異なる部分をパラメータとして抽出する)
  • オブジェクト向けにラベルスタイルの小例を作成して設定する
      var $ = {
            getEle:{
                getElementsByTagName:function (eleName) {
                    return document.getElementsByTagName(eleName);
                },
                getElementsById:function (id) {
                    return document.getElementById(id);
                },
                getElementsByClassName:function (className) {
                    return document.getElementsByClassName(className);
                }
            },
            setStyle:{
                setBorder:function (eles){
                    for (var i = 0; i < eles.length; i++) {
                        eles[i].style.border = "1px solid #002";
                    }
                },
                setColor:function (eles){
                    for (var i = 0; i < eles.length; i++) {
                        //......
                    }
                },
                setCss:function (eles){
                    for (var i = 0; i < eles.length; i++) {
                       //.....
                    }
                },
            }
        }
    
        $.setStyle.setBorder($.getEle.getElementsByTagName("div"));
        $.setStyle.setBorder($.getEle.getElementsByTagName("p"));