JS

• 一.概述

  • 1.簡介
    • 基於對象和事件驅動的語言,應用於客戶端
    • 基於對象--提供好了不少對象，能夠直接拿過來使用
    • 事件驅動--html作網站靜態效果，javascript動態效果
    • 客戶端--專門指的是瀏覽器
  • 2.特色
    • 交互性--信息的動態交互
    • 安全性--js不能訪問本地磁盤的文件
    • 跨平臺性--只有可以支持js的瀏覽器，均可以運行
  • 3.組成
    • ECMAScript--由ECMA組織制定的js的語法、語句.....
    • BOM--瀏覽器對象模型
    • DOM--文檔對象模型
  • 4.Java和JavaScript
    • java是sun公司，如今oracle；js是網景公司
    • JavaScript是基於對象的，java是面向對象
    • java是強類型的語言，js是弱類型的語言
      好比java裏面 int i = "10";js裏面  var i = 10; var m = "10";
    • JavaScript只需解析就能夠執行，而java須要先編譯成字節碼文件，再執行

• 二.和html的結合方式

  • 1.使用標籤
    <script type="text/javascript">  js代碼  </script>
  • 2.使用標籤並引用外部的js文件
    <script type="text/javascript" src="1.js"></script>** 使用第二種方式時候，就不要在script標籤裏面寫js代碼了，不會執行。​

• 三.原始類型和聲明類型

  • 原始類型 五個
    • number
    • string
    • boolean
    • null
      null表示對象引用爲空 (全部對象的引用是object)
    • undefined
      定義了一個變量，但沒有賦值
  • 聲明類型
    • 都使用關鍵字 var
  • 基本數據類型
    • byte short int long float double char boolean

• 四.語句

  • 判斷
    • if
    • switch
  • 循環
    • for
    • while
    • do while

• 五.運算符

  • 1.js裏面不區分整數和小數
    var j = 123;alert(j/1000*1000);   //  j/1000*1000    在java裏面獲得結果是 0  // 在js裏面不區分整數和小數，123/1000=0.123 * 1000 = 123
  • 2.字符串的相加和相減
    * //字符串的操做var str = "456";//alert(str+1);   //在java裏面操做的結果是 4561 ，在js裏面仍是 4561alert(str-1);    //相減時候，執行減法的運算* 提示NaN:表示不是一個數字
    • 相加，作字符串鏈接
    • 相減作減運算
  • 3.boolean類型也能夠操做
    true至關於值爲1；false至關於值爲0​
  • 4.==和===的區別
    ==只比較值，===比較值和類型

• 六.數組

  • 1.定義方式 3種
    • （1）直接賦值
      var arr = [1,"4",true]; ​var arr = [1,2,3];
    • （2）使用有長度的內置對象 Array
      var arr1 = new Array(5);  //定義一個數組，數組的長度是5arr1[0] = "1";
    • （3）使用有元素的內置對象 Array
      var arr2 = new Array(3,4,5); //定義一個數組，數組裏面的元素是3 4 5 
  • 2.長度 length
  • 3.能夠存放不一樣數據類型的數據

• 七.函數

  • 1.定義方式 3種
    • （1）使用關鍵詞 function
      function add2(a,b,c) { var sum1 = a+b+c; return sum1;}alert(add2(3,4,5));
    • （2）匿名函數
      var add3 = function(m,n) { alert(m+n);}//調用方法add3(5,6);
    • （3）動態函數--使用到js裏面的一個內置對象 Function
      var add = new Function("參數列表","方法體和返回值");
  • 2.全局函數
    • eval() 執行js代碼（若是字符串是一個js代碼，使用方法直接執行）
      var str = "alert('1234');"; //alert(str);eval(str);
    • encodeURI()/decodeURI() 對字符進行編碼/解碼
      encodeURIComponent() 和 decodeURIComponent()
    • isNaN() 判斷當前字符串是不是數字
    • parseInt()：類型轉換爲int
  • 3.重載
    方法名相同，參數列表不一樣
    • js裏面不存在重載，但能夠經過aruguments數組來實現重載的效果

• 八.全局變量和局部變量

  • 全局變量
    在script標籤裏面定義一個變量，這個變量在頁面中js部分均可以使用在方法外部使用，在方法內部使用，在另一個script標籤使用
  • 局部變量
    在方法內部定義一個變量，只能在方法內部使用若是在方法的外部調用這個變量，提示出錯

• 九.script標籤放在的位置

  • 建議把script標籤放到 </body>後面
    若是如今有這樣一個需求： 在js裏面須要獲取到input裏面的值，若是把script標籤放到head裏面 會出現問題。 html解析是從上到下解析的，script標籤放到的是head裏面，直接在裏面取input裏面的值， 由於頁面尚未解析到input那一行，確定取不到。

• 十.對象

  • 1.String對象

    • 建立對象
      • var str = "abc"
    • 方法
      • 與html相關的方法
        • bold()：加粗
        • fontcolor(): 設置字符串的顏色
        • fontsize(): 設置字體的大小
        • link(): 將字符串顯示成超連接
        • sub() sup(): 下標和上標
      • 與java類似的方法
        • concat(): 鏈接字符串
        • charAt():返回指定指定位置的字符串
        • indexOf()： 返回字符串位置
        • split()：切分字符串，成數組
        • replace() ： 替換字符串
        • substr()和substring()
    • 屬性
      • length：字符串的長度

  • 2.Array對象

    • 建立對象（3種）
      var arr1 = [1,2,3];var arr2 = new Array(3); //長度是3var arr3 = new Array(1,2,3); //數組中的元素是1 2 3var arr = [];  //建立一個空數組
    • 方法
      • concat方法： 數組的鏈接
      • join()：根據指定的字符分割數組
      • push():向數組末尾添加元素，返回數組的新的長度
      • pop()：表示 刪除最後一個元素，返回刪除的那個元素
      • reverse():顛倒數組中的元素的順序
    • 屬性
      • length：查看數組的長度

  • 3.Date對象

    • 獲取當前時間 new Date()
      js裏面獲取當前時間var date = new Date();//獲取當前時間var date = new Date();document.write(date);  // Fri Apr 17 10:47:46 UTC+0800 2015 //轉換成習慣的格式document.write("<hr/>");document.write(date.toLocaleString());​在java裏面獲取當前時間 Date date = new Date();
    • 獲取當前的年 getFullYear()
    • 獲取當前月 getMonth()
    • 獲取當前星期 getDay()
    • 獲取當前日 getDate()
    • 獲取當前的小時 getHours()
    • 獲取當前的分鐘 getMinutes()
    • 獲取當前的秒 getSeconds()
    • 獲取當前的毫秒 getTime()

  • 4.Math對象

    • ceil(x): 向上舍入
    • floor(x)：向下舍入
    • round(x)：四捨五入
    • random()：獲得隨機數（僞隨機數）

  • 5.BOM對象--瀏覽器對象模型

    • （1）navigator 獲取客戶機的信息（瀏覽器的信息）
      • navigator.appName
        document.write(navigator.appName);
    • （2）screen 獲取屏幕的信息
      • screen.width
        document.write(screen.height);
      • screen.height
    • （3）location 請求url地址
      • location.href
        • 獲取地址
          document.write(location.href)
        • 設置地址
          location.href = "hello.html"
    • （4）history 請求的url的歷史記錄
      • 到訪問的上一個頁面
        • history.back()
        • history.go(-1)
      • 到訪問的下一個頁面
        • history.forward()
        • history.go(1)
    • （5）window  窗口對象
      • 操做窗口
        • window.alert() 頁面彈出一個文字框
        • window.confirm() 頁面彈出一個確認框
        • window.prompt(） 頁面彈出一個輸入框
        • window.open() 頁面彈出一個新窗口
        • window.close() 關閉窗口(瀏覽器兼容性比較差)
      • 作定時器
        • setInterval("js代碼",毫秒數) 每多久執行一次
          表示每三秒，執行一次alert方法window.setInterval("alert('123');",3000)
        • setTimeout("js代碼",毫秒數) 多久開始執行
          表示四秒以後執行js代碼，只會執行一次 window.setTimeout("alert('abc');",4000)
        • clearInterval() 清除定時器
        • clearTimeout() 清除定時器
      • 屬性 opener，獲取建立當前窗口的窗口

  • 6.DOM對象--文檔對象模型

    • （1）概述
      • 可使用js裏面的dom裏面提供的對象，經過這些對象的屬性和方法，對標記型文檔進行操做
        • 文檔--指超文本文檔，html、xml
        • 對象--提供了屬性和方法
        • 模型--使用屬性和方法操做超文本標記型文檔
      • 須要先解析標記型文檔，而後把標記型文檔裏面的全部內容封裝成對象​
        解析過程--根據html的層級結構，在內存中分配一個樹形結構，須要把html中的每部分封裝成對象
        • document對象--整個文檔
        • element對象--標籤對象
        • 屬性對象
        • 文本對象
        • Node節點對象--這個對象是這些對象的父對象
          若是在對象裏面找不到想要的方法，這個時候到Node對象裏面去找
      • 其餘
        • DOM模型有三種
          • DOM level 1: 將html文檔封裝成對象
          • DOM level 2: 在level 1的基礎上添加新的功能
            例如，對於事件和css樣式的支持​
          • DOM level 3: 支持xml 1.0的一些新特性
        • DHTML
          • html 封裝數據
          • css 使用屬性和屬性值設置樣式
          • dom 操做html文檔（標記型文檔）
          • javascript 專門指的是js的語法語句（ECMAScript）
    • （2）document對象--表示整個的文檔
      *** 想要獲取標籤下面的子標籤 ** 使用屬性 childNodes，可是這個屬性兼容性不好 ** 得到標籤下面子標籤的惟一有效辦法，使用getElementsByTagName方法 - var ul11 = document.getElementById("ulid1"); //獲取ul下面的子標籤 //var lis = ul11.childNodes; //alert(lis.length); var lis = ul11.getElementsByTagName("li"); alert(lis.length);
      • 獲得元素
        • document.getElementById() 經過id獲得元素
        • document.getElementsByName() 經過name屬性值獲得標籤,返回的是一個集合/數組
        • getElementsByTagName() 經過標籤名稱獲得元素
      • 建立標籤/文本
        • document.write() 向頁面輸出變量值/html代碼
        • document.createElement() 建立標籤
        • document.createTextNode() 建立文本
        • document.appendChild方法 在末尾添加，剪切黏貼
        • document.insertBefore(newNode,oldNode) 在某個節點以前插入
        • cloneNode(boolean) 複製節點
      • 刪除
        • removeChild方法 刪除節點
      • 替換
        • replaceChild(newNode,oldNode)方法: 替換節點
      • 屬性
        • 變量.getAttribute() 獲取屬性的值
        • 變量.setAttribute() 設置屬性的值
        • 變量.removeAttribute() 去除屬性的值
    • （3）Node對象
      • 標籤節點對應的值
        • nodeType： 1
        • nodeName： 大寫標籤名稱  好比SPAN
        • nodeValue: null
      • 屬性節點對應的值
        • nodeType： 2
        • nodeName： 屬性名稱
        • nodeValue: 屬性的值
      • 文本節點對應的值
        • nodeType： 3
        • nodeName： #text
        • nodeValue: 文本內容
      • 父節點 parentNode
      • 子節點
        • childNodes：獲得全部子節點，可是兼容性不好
        • firstChild
        • lastChild
      • 同輩節點
        • nextSibling:
        • previousSibling
    • （4）innerHTML屬性
      這個屬性不是dom的組成部分，可是大多數瀏覽器都支持的屬性
      • 第一個做用：獲取文本內容
      • 第二個做用：向標籤裏面設置內容（能夠是html代碼）