第一天：認識js
1.js是一種由瀏覽器解釋執行的語言，弱型別客戶端指令碼語言，目前js 有node.js也是可以作為後端語言的、
  
     解釋執行：程式碼不需要進行預編譯，程式在執行過程中逐行解釋執行
              不需要編譯，直接在網頁中執行
             跨平臺性好，一般瀏覽器都能支援js的
        強型別語言：需要編譯的語言，有c c++ php c# java ，執行效率要高一般運用於後臺
                   隨著技術的發展，js的一些框架如vue.js也包含了編譯器。可以達到一些特殊的運用
        弱型別語言：不需要明確變數的型別，變數的型別在執行中確定的
        
  客戶端指令碼語言：
        相對與b/s（browser/sever）架構而言，執行在客戶端的語言
         js不需要伺服器，用瀏覽器直接在本地開啟執行即可
        客戶端語言是對外公開的，重要的複雜的業務邏輯由後臺語言執行
     
js的組成：
        ECMAscript:包含js的語法
        DOM：文件物件模型，提供訪問和操作網頁內容的方法和介面
        BOM：瀏覽器物件模型，提供也瀏覽器進行互動的方法和介面
        ECMA：Eropean computer manufacturer association：歐洲計算機制造商協會
js的特點：
        簡單易學，語法和java類似 
        面向物件的程式設計思想，例如 Bom,dom的運用
        基於事件驅動，特效豐富，如滑鼠點選事件，鍵盤事件
        跨平臺性，編寫一次，可到處執行

知識擴充套件：
         js可以引入域外的指令碼，存在安全隱患，通過官網的CDN（雲加速器），相對較安全
         釋出專案的是否可以考慮使用

js語法：每條語句以分號;結束，區分大小寫
  <noscript></noscript>,需要在谷歌chrome中設定: 設定--內容設定--javaScript--不允許任何網站執行即可
  
 路徑問題：作為一名合格的工程師，路徑不應該是我們的問題
     相對路徑：
           1.在同一專案的相同資料夾下
           2.在同一專案的不同目錄下
     絕對路徑：引用其他網站的資源（外網）
 
 js載入順序：
       根據文件的由上而下的載入順序進行的，先出現先載入，後出現後加載
       這樣就會產生js阻塞文件載入：js載入時間較長的會影響頁面內容的渲染，使用者體驗感就會差
       如果一個js檔案要依賴別的js檔案，被依賴的別的js檔案需要在前面，載入順序不能顛倒的
   
 一般把js檔案放在body後面
       H5進行非同步載入，解決阻塞問題：
             <script  src="ttt.js" defer></script>  推薦defer，相容性，執行效率都好
             <script  src="ttt.js" async></script> 立即執行，不推薦
 

課程關鍵點：
第二天：js的變數（var定義）和型別
掌握 Number（）   unicode編碼   tostring方法
  變數：
     命名規則：1.字母，數字，下劃線，$任意組合，不能數字開頭不能使用關鍵字和保留字
      使用變數3步驟：定義 初始化  使用
       語義化：寫的變數名儘量貼近實際的意思
       識別符號：用於標記某一特定作用的符號，比如變數 函式 屬性 方法的引數
 
  常量：賦值後不能在賦值，只能使用，關鍵字：const const PI=3.14；名稱需要全部大寫
 
   typeof（）檢查變數資料的型別，返回字串型別
        返回的型別有:undefined   string  boolean  number  object function

javacript的除錯--日誌記錄  和 斷點     
控制檯輸出日誌資訊：
      1.使用prompt（）接受使用者的資訊
      2.使用alert（）彈出警示框
      3.confrim（）詢問對話方塊。返回boolean型別

    格式化輸出：類似C語言
           %d表示按整型輸出      %f輸出小數   %s字串輸出
 
 顯示不同日誌級別資訊：
   console.log() console.debug() console.info() console.warn()  console.error()
 
 基本資料型別：
   任何型別的值都可以通過boolean返回其結果
   undefined和null的區別
        undefined屬於值型別，變數定義了但沒有賦值，如：var myname;console.log(mynanme)
        null屬於object.指向一個空物件，表示沒有引用任何物件
boolean任何型別都可以通過boolean返回其結果
              boolean       true    false
              String     任意字元      ""
              number     非0         0或NaN
              object     任何物件       null
              undefined            undefined

NaN:
      1.除數為0，結果為NaN  
      2.NaN與任何操作，結果為NaN
      3.NaN與NaN的比較返回FALSE-----特殊

 --------isNaN（）判斷是 不是一個數字
       isNaN（null）;false   ----特殊
       isNaN（undefined）;ture ---特殊
       console.log(Number(""));//0
       console.log(Number(null));//0
       console.log(parseInt(""));//NaN
       Number(this);//NaN---特殊
       Number(NaN);//NaN-----特殊
       Number(undefined);//NaN---特殊
 
數值範圍：
      最大值和最小值：Number.MAX_VALUE  1.7976931348623157e+308
                 Number.MIN_VALUE 5e-324
       超出範圍：Number.MAX_VALUE+Number.MAX_VALUE   Infinity
       使用isFinite()判斷是否在最小和最大值之間
       isFinite(Number.MAX_VALUE+Number.MAX_VALUE)  //false
             isFinite(10+10000)   //true 
 
 重要：
 unicode編碼：統一編碼識別符號是全球通用的，是國際開發的基礎，任何系統都能夠識別數字和字母的，由16進位制組成。
  uinicode的特殊字元：\n換行 \t製表    \b空格   \r換行   \\斜槓   \'單引號    \"雙引號
       \xnn 表示一個字元  如\x41 表示A 
       \unnnn 中文編碼   \u667A 表示“智”
      var  school =  "\u667A\u5b66\u65e0\u5fe7" ;
           console.log(school); //智學無憂
           console.log(school.length); //4，Unicode都會轉義成一個字元
 
  toString()任何一個非空物件都有toString（）方法
          var  money = 100; var moneyStr = money.toString();  // "100"
          var  isPass =  true ; var  passStr = isPass.toString(); //"true"
 輸出轉化成對應進位制-- var  money = 10;  
      console.log(money.toString(2)); //1010 console.log(money.toString(8)); //12console.log(money.toString(16)); //a

 迴圈：
 1.使用標籤來跳出迴圈
  outer:
  for(var i=0;i<10;i++){
  inner:
  for(var j=0;j<5;j++){
   console.log("i=" + i + "\tj=" + j);
   var conf=confirm("是否結束整個迴圈");
   if(conf){ break outer;}
   }
  }
 2.通過設定與外迴圈，結束條件，結束外迴圈
 for(var i = 0; i < 10; i++) {
                     
                    for(var j = 0; j < 5; j++) {
                        console.log("i=" + i + "\tj=" + j);
                        var conf = confirm("是否結束整個迴圈");
                        if(conf) {
                            i=9;//通過設定與外迴圈，結束條件，結束外迴圈
                            break  ;
                        }
                    }
                }
        
try-catch的使用：
        try{
             var mymoney=10;
          console.log(mymoney);
        }catch(ex){//這個物件名是識別符號。
                console.log(ex);
              }finally{
              console.log("釋放資源")
              }
              console.log("程式結束");
    var xhr=new XMLHttpRequest();
      xhr.open    
    
空指標異常處理：
        var str =null;
        try{
        document.write(str.name);
        }catch(e){
         document.write(e+"<br/>");
        }
        document.write("程式結束");
----物件：  
Object:物件是具有相同屬性和行為的描述，是引用型別，js的世界也是物件的世界，Object是所有物件的根

建立物件的方式：
    var obj=new Object();//採用構造方法
    var obj={}; //推薦使用 ，字面量方式
    var obj=new Object; //省略構造方法，不推薦
  
js的運算子：
    賦值 ：    變數=表示式      連續賦值： var j=k=x=0 
       奇葩 賦值  var  num=.5 
                  var num=0b1010;// 二進位制賦值
                  var num=010;//八進位制賦值  
                  var num=0xa10;//十六進位制賦值
 算術運算子：
   +  加法   字串連線符   
   - 減法   也當作負號   
   /除法  
         特殊1：除數為0，var num=1/0，返回 undefined
         特殊2：與強型別的一點區別，js除法正確。  
          java除法取整數
                int num=1/2; // java 語言的結果：0
          javascript除法取正確數
                 var nun=1/2;//  js 語言結果：0.5
    ++ --與java一致
    取模%： 5%2 返回1（兩數相除取餘數） 
  負數求模：-10%3  -10%-3 返回都為-1  -10.5%2返回-0.5---前者為負數，結果為負數
   負數取模： 餘數是正數還是負數要看被除數
              
第三天：函式
  Math.random()  Math.round() 
  Math.ceil()返回最接近的最大整數，適合用於後面的分頁
  Math.floor()返回最接近的最小整數
  eval()檢查js程式碼並執行，動態執行js
  encodeRUI():將文字字串編碼為一個有效的統一資源識別符號，開發過程用的上 對 ： /  ？ ;  這4個字元不進行編碼
  decodeRUI()：解碼

非常重要，開發使用的：處理url的
encodecompent（“http：//serch.jd.com?www.baidu.com?name=jack&age=20”）
這是傳遞網址進行編碼，防止歧義，    對地址怎麼處理呢？
decodecompent()解碼

eval()檢查並執行，動態執行js指令碼

函式：包括系統函式和自定義函式（無參，帶引數）
使用function關鍵字定義函式，不能與系統函式重名，引數可有引數和無引數

js的沒有函式過載的概念，可以使用argument獲取物件引數資訊
 例子：function abount(){
                 console.log("方法的引數如下");
                 for (var i=0;i<arguments.length;i++){
                     console.log(arguments[i]);
                 }
             }
            abount(3,2);
 
 匿名函式：在jquery中使用的較多（js稱為函式表示式）
   即時函式，會形成一個私有的作用域
  return：退出當前的函式
 函式呼叫的3種方式：
1.通過函式表示式   var myFunc=function(){console.log("ok")}  
 2.即時函式 (function(){console.log("ok")})();
 3.通過事件 window.onload=funciton(){ console.log("ok")}
 4.通過使用連結呼叫
    <a href="javascript:Func()">ddd</a>
    <a href="javascript:void(0)">ddd</a>
 
 重要：in   for..in /    instanceof    
 測試物件中是否存在該屬性：---in   ----- 常用
 var a = new Array("a","b"); var isIn=length in a; console.log(isIn);  ---true
 結合for迴圈，遍歷所有屬性 for(var w in window){console.log(w);}
  
instanceof 資料型別：指變數是否可以強轉指定的型別，檢測型別的時候相容

作用域：
      變數的使用範圍與變數定位的位置 有關係

  全域性變數：在整個js執行過程中都能訪問
        注意：
           對於沒有使用var定義的變數是隱式全域性變數，要先執行一遍後才才生效，否則就是沒有定義的變數，不推薦使用，會汙染
          使用var 定義的變數會自動新增到最近的環境中
   
  區域性變數：
  js中沒有塊級作用域，在ES5中新增加let定義塊級作用域，新增const定義常量  這也是塊級別作用域
  
 物件：
 Object可以理解成一個變數，可以含有多個變數，只通過一個變數來操作
 1.通過new來建立 
 2.通過字面量來建立--推薦使用

第4天：常見的引用型別
1.Object

2.Array陣列-----對資料操作
  什麼是陣列：
    1.一次排列多個值，每個值都有對應的編號，從0開始
    2.陣列元素的型別可以不一樣
    3.陣列的作用在對資料的管理，方便對資料的操作
  建立陣列：
      js中的陣列沒有真正意義上的下標，而是屬性。所以不存在陣列越界
  
  常用建立方式：
    var Array=[]；空陣列
    var Array=["aa","bb","cc","dd"]
 賦值：邊建立，邊賦值。先建立，在賦值
 給陣列新增屬性：
  注意： [ ] 除了陣列中索引號，也可以用來給物件新增屬性，獲取物件的屬性值
 
 陣列的截斷：--通過length
       var arr=[1,2,3,4,5]
        arr.length=3  arr.length=0(清空)

陣列型別的判斷：
   1.Array.isArray() ES5的提供的API
        var arr=["javas","html"]; Array.isArray(arr);  //true
   2.instanceof操作符
       var arr=["javas","html"]; console.log(arr instanceof Array);  //true
   3. constructor屬性
        var arr=["javas","html"]; arr.constructor===Array  //true
常見的陣列操作方法：
  Array.join（）---分隔成陣列，把字元連線成陣列的元素，並將結果返回
      var arr=[2,6,9,10]; var str=arr.join();  console.log(str);  // "2,6,9,10"

  str.split()---分隔成陣列
       var str="web前端/java/css/json";
       var webs=str.split("/"); console.log(typeof webs);
       console.log(webs); //["web前端","java","css","json"]  

 棧方法(陣列元素新增與刪除)：
        push()   pop()       shift()       unshift()
      1.向陣列末尾新增元素 push() 
            var arr=[]; arr.push(1); arr.push(3); // 2 表示新增的個數      arr變為 [2,3]
                     向陣列末尾移除最後的元素pop()
            var arr=[2,3]; arr.pop();//[3],表示移除的元素     arr變為[2]
      2.shift() 新增與unshift()移除   --對第一個元素進行操作
           var arr=["A","B","C"]; arr.shift();//[A]   arr變為["B","C"]
            arr.unshift("DE");//3 --當前元素的個數   arr變為["DE","B","C"]
陣列元素的排序：   
      reverse()     sort()      sort(compareFn)
       3.陣列的元素的翻轉 reverse()
         var arr=["A","B","C"];  arr.reverse();  //["C","B","A"]
       4.sort（）
         sort()不帶引數是預設按照字串升序排列，在比較的時候，會將元素轉化成字串在比較,比較的是第一個字元
               var arr=["java","ajax","css"]; arr.sort(); //["ajax","css","java"]
               var  arr=[11,15,22,56,33,3,5,6];arr.sort();//[11,15,22,3,33,5,56,6]---哈哈，不合理了吧

         sort(compareFn)----;sort()提供了一個帶比較函式的引數
               var  arr=[11,15,22,56,33,3,5,6];
                arr.sort(function(num1,num2){ return num1-num2;}); console.log(arr);//[3,5,6,11,15,22,33,56]
                arr.sort(function(num1,num2){ return num2-num1;}); console.log(arr);//降序

陣列的其他操作：連線  擷取 剪接
          concat()    slice()   splice()
      1. concat()連線兩個陣列
          var arr1=["A","B","C"];var arr2=[2,3];var arr=arr1.concat(arr2);console.log(arr);//["A","B","C",2,3]
      2. slice(start,end)擷取陣列，返回擷取後的陣列,包含start位置，不包含end位置 -- 不影響原來的陣列
           var  arr=[11,15,22,56,33,3,5,6]; 
           console.log(arr.slice(3,7));//[56,33,3,5]
           console.log(arr.slice(3));//[56,33,3,5,6];
           console.log(arr);//[11,15,22,56,33,3,5,6];//原來陣列不變，即不影響原來的陣列
     3.  splice()陣列剪接，可以對陣列做很多新增、刪除、更新的操作------應用頻率要高，功能較強大
           splice(start,deleteCount，items) 
           start：可選引數，操作的起始位置，從0開始計數的
           deleteCount：刪除的個數
           items：替換刪除位置的值
           var  arr=[11,15,22,56,33,3,5,6]; 
           arr.splice();//不做操作
           arr.splice(3,2,100,101,102);//[56,33]
           console.log(arr)//[11,15,22,100,101,102,3,5,6]
           var arr1=[11,15,22,56,33,3,5,6];
           arr1.splice(0,0,200,300); console.log(arr1);//[200,300,11,15,22,56,33,3,5,6]

陣列找位置：
 indexOf()   lastIndexOf()   str.substring()
 indexOf()：通過找陣列中的某個元素，返回這個元素的位置，找不到返回-1
      var arr=["java","ajax","hh","css","aa","hh"];
      console.log(arr.indexOf("css")); //3
      console.log(arr.indexOf("css22222"));//-1找不到返回-1

lastIndexOf()：通過尋找陣列中最後出現的某個元素（假設有重複元素），返回這個元素的位置
      console.log(arr.lastindexOf("hh"));//5,找的是後面那個“hh” ，找不到-1

str.substring()---擷取字串
    var str="Hello world!"
    document.write(str.substring(3)) //lo world
      document.write(str.substring(3,7)) //lo w
陣列的幾種迭代操作：
  forEach()    filter()    map()   reduce()

1.forEach()
      var num=[10,20];
      num.forEach(function(item,index,array){console.log("item="+item+"index="+index+"array="+array)});
      //輸出item=10 index=0 array=10,20   item=20 index=1 array=10,20
      item：表示遍歷陣列的元素 index：元素的下標 array：原始陣列物件

2.filter()陣列過濾
      var num=[10,20,30,40,50,60];
      var newnum=num.filter(function(item,index,array){return item%3==0;});
         console.log(newnum);//[30,60]
         console.log(num);//[10,20,30,40,50,60]
3.map()陣列對映   ,給符合條件的資料重新賦值
     var num=[10,20,30,40,50,60];
     var newnum=num.map(function(item,index,array){if(item%3==0){return item+2};});
       console.log(newnum);//[undefined,undefined,32,undefined,undefined,62]
       console.log(num);//[10,20,30,40,50,60]
4.reduce()縮小方法:迭代所有的元素最終返回一個值    reduceRight()表示從右邊開始遍歷
      //prev:當前一個值  cur：當前值  index：當前下標  array：原始陣列
      var num=[10,20,30,40,50,60]; 
      var newnum=num.reduce(function(prev,cur,index,array){return prev});//10
      var newnum=num.reduce(function(prev,cur,index,array){return cur});//60
      var newnum=num.reduce(function(prev,cur,index,array){return prev+cur});//210相當於求和
      console.log(newnum);
      console.log(num);

-----日期物件
Data日期型別：
 Data物件的構造：
          var date=new Date(); //以當前時間來構造
          var  date=new Date(2017,04,01); //以指定的時間來構造
  比較特殊：1--12月在js中是0--11  週一-週五 1-5 週日是0
  獲取 date.getFullYear()   getMonth()  getDate()-日  getHours() getMinutes() getSeconds() getMillseconds()-毫秒  getDay()-星期
 date.getTime()---把正常時間寫法轉為 獲取自1970-1-1到現在的毫秒數
設定時間：對應使用 set
var now=Date.now()獲取1970-1-1到現在的毫秒數

日期的轉換：
      1.字串轉日期  
        var str="2017-5-3"  var date=Date.parse(str); console.log(date); //輸出的是毫秒數
          毫秒數再轉成日期格式 var newdate=new Date(date) //Mon May 01 2017 00:00:00 GMT+0800 (中國標準時間)
      2.日期轉字串 
        var date=new Date();
        console.log(date.toLocaleDateString()); //轉本地日期格式 2017/5/8
        console.log(date.toLocaleTimeString()); //轉本地時間格式  下午3:23:56
        console.log(date.toLocaleString()); //轉本地日期+時間   2017/5/8 下午3:23:56

--BOM物件
BOM：
      window物件：對位址列，儲存資料，文件之類的互動操作
      window===this;//true
      1.BOM的基本概念
      2.window物件與ECMAscript的聯絡
      3.window的全域性作用域
      4.自動的擴充套件屬性和window新增的屬性的細微區別
       區別一：自動的擴充套件屬性不能夠直接刪除
        var address="深圳";
        delete address;//false
        window.age=20;
         delete age;//true
        區別二：定義的變數查詢方式不一樣
        var myAge=age;//報錯，在作用域鏈上查詢，找不到（在本地找）
        var myAge=window.age;//undefined,直接在window物件上找，找不到返回undefinded
        在js中明確呼叫的物件是一個好的習慣，也能提升程式的效能

重要： 
navigator: 瀏覽器型別的判斷
      var browser=navigator.userAgent;
      if(browser.indexOf("MSIE")>0){
            console.log("IE瀏覽器")}
      else if(browser.indexOf("Chrome")>0){
            console.log("Google瀏覽器");
      }else if(browser.indexOf("Firefox")>0){
            console.log("Google瀏覽器");
      }else{
            console.log("其他瀏覽器");
      }

window的幾個屬性： location  screen  history 
location：host hostname href port protocol  reload（） replace（）  search:獲取引數資訊

----定時器（延時器）
setTimeout() clearTimeout()-----
setInterval() clearInterval()----週期性延時器

cookie： 
    cookie儲存在客戶端，開啟瀏覽器傳送請求，cookie會自動傳送到伺服器，由伺服器讀取，cookie的資料持續時間由使用者自己定義
 但cookie大小有限一般在4096位元組，即3K限制，cookie一般安全隱患較大，一般不要把登入註冊的重要資訊用cookie儲存，cookie只 儲存一些不是很重要的標識資訊。
 計算機中，使用者一般設定為禁用！！
 cookie特點：
   cookie的內容：採用key=value;key=value..儲存，引數名自定義
   cookie的過期時間：使用引數 expires
   cookie的路徑：使用path，  “/”表示這個網站的網頁，不推薦。容易造成衝突
       注意： 形如“/pro/index.html” 路徑，在google瀏覽器正常，在IE瀏覽器得不到值

設定cookie : var name="jack",pwd="123" var now=new Date(); now.settime(now.getTime()+1*24*60*60*1000);  //轉毫秒
         document.cookie =  "name="  + name +  ";expires="  + now.toUTCString() +  ";path="  + path; //姓名
         document.cookie =  "pwd="  + pwd +  ";expires="  + now.toUTCString() +  ";path="  + path;   //密碼
讀取cookie  ：var data=document.cookie;
刪除cookie  : var name=null,pwd=null,now=new DAte()

其他儲存 方式：
html5 的web儲存：
localStorage：本地儲存
    1.使用key-value的形式儲存資料，資料只能是String資料
    2.使用setItem()儲存，使用getItem()獲取
    3.資料是永久儲存的，即便是瀏覽器關閉或者電腦重啟資料不丟失。
    4.有效訪問：針對同一個客戶端，瀏覽器、網站有效（只能在同一中瀏覽器上，同一個網站下，localStore的值是按照網站名稱來儲存。
                同一個網站下面的所有頁面都是能夠訪問的）

頁面間的傳值：
      第一種：使用cookie
       步驟：
         第一頁：進行獲取輸入的內容，設定cookie儲存   
         第二頁：通過var data=document.cookie獲取cookie內容;主要是獲得key，那就要通過indexOf(),在通過substring（）找到key對應的value值
      第二種：使用queryString（url引數傳值）
      步驟：
        第一頁：
           通過節點獲得內容，利用url="getquerystring.html?myname="+strName;
           strName需要encodeURIComponent（strName），指定開啟方式//    本視窗location.href=url;
            另起視窗    window.open(url,"cookie");
          第二頁：獲得顯示內容，寫一個獲取引數的方法，裡面解析通過location.location.search.substring(1):"" 解析url

第6天：Document
      document的方法：
      getElementById("id")--返回對應標籤的元素物件，都繼承HTMLElement,引數大小區分大小寫
      getElecmentsByClassName("xx") --返回HTMLCollection,引數區分大小寫
      getElecmentsByName("yy")--返回Nodelist
      getElecmentsByTagName("div")--根據標籤獲取元素，返回HTMLCollection,引數區分大小寫
      getRootNode() --獲取根節點，返回document物件
      querySelector()--返回HTMLElement物件，引數不區分大小寫
      querySelectorAll()--返回Nodelost，引數不區分大小寫

document的屬性：
  常用的： 
      document.documentElement --始終返回<html>... </html>