Java Script 基本知識點

 

                      JavaScript是一種基於對象和事件驅動的腳本語言，它提供了一些專有的類、對象及函數

                          

 

1.基本數據類型

           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>

二、

<input 

type="button" 

value="關燈"

id="setColor" 

onclick="setColor_()" 

name="setColor"/> 

 

屬性示例：圖片廣告隨滾動條滾動而滾動

核心代碼以下：

一、

<script type="text/javascript">

function move()

{

document.getElementById("adv").style.top=400+document.documentElement.scrollTop+"px";

}

window.onscroll=move;

</script>

二、

<img src="足夠大的背景圖片" />

<div 

id="adv" 

style="position:absolute; 

top:400px; left:10px;"><img  src="須要漂浮的小廣告圖片"/></div>

 

方法示例：全選操做

 

核心代碼以下：

一、

<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>

二、

<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支持的任何類型的節點 

一、 使用document.createElement建立節點

document.createElement的功能是建立一個指定標籤名的元素節點，標籤名能夠是任

何名字，包括自定義的標籤

    二、使用appendChild(node)將節點追加到全部子節點的末尾 

三、使用insertBefore(newNode,node)將節點newNode插入到節點node以前 

四、使用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]);

　　}

正則表達式

定義：正則表達式是一種對文字進行模糊匹配的語言

正則表達式的功能：

1）實現數據格式的有效性驗證 

2）實現文本內容的替換和刪除

3）實現文本模糊搜索

 

RegExp對象

RegExp是JavaScript中提供的一種用來完成有關正則表達式操做和功能的對象 

兩種建立方式：

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  

表達式模式

特殊字符

 

限定符

 

       定位符

 

  查找和替換

 

 經常使用正則表達式

需求	表達式
匹配身份證號碼	^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 正則表達式是一種對文字進行模糊匹配的語言，經常使用方法有test、exec等 

u 使用正則表達式能夠實現：

n 測試字符串是否匹配某個模式，從而實現數據格式的有效性驗證

n 修正知足某正則表達式模式的文本內容

n 搜索某一類型的文本內容

u String對象中的match、search、replace方法以RegExp爲參數完成模式搜索和替換功能 

 

表單驗證高級特效