Java Script 基本知識點

Java Script 基本知識點
1.基礎資料型別 (Elementary Data Type)            JavaScript提供了4種基本的資料類型用來處理數字和文字             Number、String、Null、Boolean   1）.變數    文法：   var 變數名=值;   變數命名規範：  1)變數名由字母、數字、底線和$組成  2)變數名的首字母必須是字母、$或底線  3)不能使用JavaScript 保留字，注意區分大小寫   2).類型轉換  parseInt (String)  將字串轉換為整型數字   parseFloat(String)  將字串轉換為浮點型數字    3).運算子  算術運算子     +、-、 * 、 / 、%、++、--  比較子  ==、!=、>、>=、<、<=  邏輯運算子      &&、||、！   4).注釋  JavaScript 注釋有兩種  單行注釋  文法：//注釋內容  多行注釋  文法：/*注釋內容*/   5).流程式控制制語句  文法：    if條件陳述式      switch多分支語句     for、while、do…while迴圈語句     break 和 continue 語句   break 語句來中斷一個迴圈的運行。   continue 語句用來跳過餘下的代碼塊而直接轉到下一次迴圈繼續執行    6).函數的定義與調用  a.函式宣告文法：  function 　函數名　(參數列表)  {   b.函數代碼塊;   return 運算式;  }  c.函數調用文法：  函數名(實參1,實參2…) ;  var 變數名=函數名(實參1,實參2…);     7).變數的範圍   根據變數的作用範圍，JavaScript中的變數可以分為全域變數和局部變數     8).事件處理   瀏覽器事件   onload、unonload、onsubmit   滑鼠事件   onMouseMove、onMouseOver、onMouseOut、onMouseDown、onMouseUp   文字框事件   onchange、onselect、onfocus、onblur、  9).其他   onclick   2.瀏覽器物件模型   瀏覽器物件模型是用於描述對象與對象之間層次關係的模型，該物件模型提供了獨立於   內容的、可以與瀏覽器視窗進行互動的對象結構       1).瀏覽器對象的分層結構      window對象  常用屬性     常用方法      window屬性和方法案例  var money=prompt("請輸入取款金額",100);//接收使用者錄入對話方塊  alert(money);//輸出100    var state=confirm("你取款金額為"+money);//確認和取消按鈕對話方塊  alert(state);//返回true或false    setTimeout（“調用的函數”,”毫秒數”）     window.open("adv.html","","相關屬性");  height： 視窗高度；   width： 視窗寬度；   top： 視窗距離螢幕上方的象素值；   left：視窗距離螢幕左側的象素值；   toolbar： 是否顯示工具列，yes為顯示；   menubar，scrollbars 表示功能表列和滾動欄。   resizable： 是否允許改變視窗大小，yes或1為允許   location： 是否顯示地址欄，yes或1為允許   status：是否顯示狀態列內的資訊，yes或1為允許；    history對象  作用：  history對象用來管理當前視窗最近訪問過的URL  常用方法：    注意：  history.go(-1)　 相當於    history.back()   history.go(1)　 相當於    history.forward()  例子：  <a href="javascript：history.back()">後退</a>  相當於  <a href="javascript：history.go(-1)">後退</a>    <a href="javascript：history.forward()">前進</a>  相當於  <a href="javascript：history.go(1)">後退</a>    location對象  作用：  location對象用來管理當前開啟視窗的URL資訊  常用屬性和方法：    例子：  window.location.href=”http://www.baidu.com”;   3.DOM概述    DOM－Document Object Model ，它是W3C國際組織的一套Web標準    DOM是一種與瀏覽器、平台、語言無關的介面       document對象  作用：   document對象代表瀏覽器視窗中載入的整個HTML文檔    常用屬性：     常用方法：     document對象訪問頁面元素的常用方式有四種   1）document.all.頁面元素名稱;  2）document.表單名.元素名稱;  3）document.getElementById("ID名稱");  4）document.getElementsByName("元素名稱"); ----------------------------------------------------------------------------------------         1. 屬性樣本：開燈關燈     <script type="text/javascript"> function setColor_() { var type =document.getElementById("setColor").value; if(type=="關燈") { document.getElementById("setColor").value="開燈"; document.bgColor="black"; }else { document.getElementById("setColor").value="關燈"; document.bgColor="white"; } } </script> 2、 <input  type="button"  value="關燈" id="setColor"  onclick="setColor_()"  name="setColor"/>    屬性樣本：圖片廣告隨捲軸滾動而滾動 核心代碼如下： 1、 <script type="text/javascript"> function move() { document.getElementById("adv").style.top=400+document.documentElement.scrollTop+"px"; } window.onscroll=move; </script> 2、 <img src="足夠大的背景圖片" /> <div  id="adv"  style="position:absolute;  top:400px; left:10px;"><img  src="需要漂浮的小廣告圖片"/></div>   方法樣本：全選操作   核心代碼如下： 1、 <script type="text/javascript"> function isChecked(state) { var v=document.getElementsByName("lover"); for(var i=0;i<v.length;i++) { if(v[i].type=="checkbox") { v[i].checked=state; } } } </script> 2、 <input type="radio" name="ischeck" onclick="isChecked(true)" />全選<input type="radio"  name="ischeck" onclick="isChecked(false)"/>全否<br /> <a href="javascript：isChecked(true)">全選</a> <a href="javascript：isChecked(false)">全否</a> <hr /> <input type="checkbox" id="lover" name="lover"/>體育 <input type="checkbox" id="lover"name="lover"/>音樂 <input type="checkbox" id="lover" name="lover"/>美術   節點資訊   document文檔對象可以建立、添加、刪除DOM支援的任何類型的節點  1、 使用document.createElement建立節點 document.createElement的功能是建立一個指定標籤名的元素節點，標籤名可以是任 何名字，包括自訂的標籤     2、使用appendChild(node)將節點追加到所有子節點的末尾  3、使用insertBefore(newNode,node)將節點newNode插入到節點node之前  4、使用removeChild刪除節點   innerHTML 屬性 innerHTML是DOM節點的一個屬性，它表示節點的開始標籤與結標籤之間的內容      表單驗證 作用: 表單驗證可以保證提交資料的準確性  表單驗證思路: 1） 編寫表單處理函數，驗證資料的合法性 2） 處理表單的onsubmit事件 String對象 常用屬性 ： 常用方法    樣本： var  name="andy_liu"; var first1=name.substr(1,4);       //從下表為1開始截取4個長度的字元 alert(first1);                             ///提示：ndy_ var first2=name.substring(1,4);    //從下表為1開始取到下表為4的前一位結束 alert(first2);    ///提示：ndy     例子： var data = "寶馬,福士,豐田"; var cars = data.split(",");//按逗號分隔進行拆分 for(var i=0;i<cars.length;i++){       alert(cars[i]); 　　} Regex 定義：Regex是一種對文字進行模糊比對的語言 Regex的功能： 1）實現資料格式的有效性驗證  2）實現常值內容的替換和刪除 3）實現文本模糊搜尋   RegExp對象 RegExp是JavaScript中提供的一種用來完成有關Regex操作和功能的對象  兩種建立方式： 1）var reg=new RegExp(“運算式”,”附加參數”); 2）var reg=/運算式/附加參數 RegExp對象的附加參數: g：全域匹配 i：不區分大小寫匹配 m：可以進行多行匹配  常用方法   test樣本： var  str="CATs"; var regex=new RegExp("cat",'gi'); var result=regex.test(str); document.write(result); 輸出結果：true exec樣本： var str="this is cat ,that is cat"; var pattern=new RegExp("cat","g"); var arr; while((arr=pattern.exec(str))!=null){ document.write("在索引"+arr.index+"位置出現了"); document.write(arr+"<br/>"); } 注意：exec方法返回的數組有3個屬性，分別是input、index和lastIndex   運算式模式 特殊字元   限定符          定位器     尋找和替換    常用Regex 需求 運算式 匹配社會安全號碼碼 ^d{15}|d{18}$ 驗證電子郵件格式 ^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$  驗證一個月的天數 ^([0-2])\d$|^3(0|1)$ 驗證合法的標識名 ^[a-zA-Z]\w{4,15}$ 匹配中文字元 [u4e00-u9fa5] 總結： u 表單是用來收集使用者資訊的容器，onsubmit事件為提交表單時觸發的事件  u 表單驗證分為兩步：第一步是編寫驗證函式驗證表單資料的合法性，第二步是處理表單onsubmit，即在表單提交事件中調用表單驗證函式 u String對象用於處理字串，如擷取字串的長度、搜尋字串中的字元、轉換字元的大小寫等  u Regex是一種對文字進行模糊比對的語言，常用方法有test、exec等  u 使用Regex可以實現： n 測試字串是否匹配某個模式，從而實現資料格式的有效性驗證 n 修正滿足某Regex模式的常值內容 n 搜尋某一類型的常值內容 u String對象中的match、search、replace方法以RegExp為參數完成模式搜尋和替換功能