JavaScript超全、超詳細(xì)介紹.ppt

1、JS /調(diào)用它的方法可以是： abc(); abc(.任意多個參數(shù)); function other(arg0,arg1)/定義接收兩個參數(shù)的函數(shù) alert(“”); 調(diào)用它的方法可以是: other(); Other(.任意多個參數(shù).);,Javascript函數(shù)聲明的另一種方式：,var someFunc = function() /將函數(shù)賦給某個變量名.局部。 someFunc = functio() /將函數(shù)賦給某個變量名，全局。 調(diào)用方式同前。,JavaScript變量：,JavaScript變量可以接收任意的值。分為全局變量和局部變量。 使用var關(guān)鍵字聲明一個局部變量。范圍為一

2、個函數(shù)內(nèi)部。 不使用var聲明一個全局變量。考慮以下代碼 function abc() str = “itcast”;/聲明全局變量 for(var i=0;i10;i+)/聲明此方法內(nèi)部變量 alert(“內(nèi)部”+i); /可以訪問i abc(); if(str) /可以訪問str alert(外部訪問：+str); if(i) /不可以訪問 i alert(外部：+i); ,北京傳智播客教育 ,腳本可以出現(xiàn)的頁面的任何位置，建議的位置如下：,JS的控制語句： (某些內(nèi)容直接略),If.else if .else While,for,do.while for. in. switch.case

3、 Break return 異常處理 Trycatch,JS的調(diào)試工具：firebug/scriptdebug,Firebug是火狐瀏覽器的插件。 Scriptdebug是ie瀏覽器的插件。,document常用方法:,document是window對象的子對象，代表整個頁面的內(nèi)容部分。 document.getElementById根據(jù)一個id屬性獲取一個頁面元素。返回一個對象。 document.getElementsByName,根據(jù)名稱獲取一組頁面元素。返回一組對象的數(shù)組。 document的其他方法： createElement 創(chuàng)建一個頁面元素。 getElementsByTagN

4、ame 根據(jù)元素名稱返回元素數(shù)組。,頁面元素：,Label for=“someid” - 在選中標(biāo)簽時等同于選中元素。 select .optgroup.option 實現(xiàn)分組選項。 Form 表單 Button , input type=“button” . 相同的元素。 fieldSet .legend. 范圍選項。 Iframe 嵌入，子頁面。 Div,span,p 層，塊，段落。 Table . 表格。 更多內(nèi)容，可見HTML文檔。,Window對像及方法：,事件： onload -在瀏覽器完成對象的裝載后立即觸發(fā)。 方法： Alter, close, confirm, prompt

5、clearInterval, setInterval 每隔多長時間執(zhí)行一次。 clearTimeout，setTimeout多長時間以后執(zhí)行一次。 Open, showModalDialog顯示對話框。 子對像： document -文檔對象 event事件對象 屬性： dialogArguments設(shè)置或獲取傳遞給模式對話框窗口的變量或變量數(shù)組 returnValue設(shè)置或獲取從模式對話框返回的值。 status設(shè)置或獲取位于窗口底部狀態(tài)欄的信息,onload-頁面加載完成以后執(zhí)行：,window.onload=function() 一般用于包含頁面加載完成后自動執(zhí)行的代碼。 請考慮以下代碼

6、，會提示哪一個？,請考慮以下代碼能否在啟動時提示:,showModalDialog顯示模式對話框?qū)崿F(xiàn)兩個頁面之間的數(shù)據(jù)傳遞,vReturnValue = window.showModalDialog(sURL , vArguments , sFeatures),模式對話框在現(xiàn)實的 開發(fā)當(dāng)中，非常有用。 經(jīng)常用于不要求用戶 輸入，但要求用戶選擇 的數(shù)據(jù)。,延時執(zhí)行：,window.setTimeout(func,times) /以毫秒為單位的times時間以后執(zhí)行func方法一次。 window.setInerval(func,times) /每隔以毫秒為單位的times時間以后執(zhí)行一次func

7、方法。 兩個方法均可以返回一個句柄，可以控制繼續(xù)或是終止執(zhí)行。 clearTimeout(handler); clearInterfal(handler); 主要的用途： 多長時間以后轉(zhuǎn)到成功頁面。 強(qiáng)制用戶看說明書。,內(nèi)容管理：value,html,text,設(shè)置或獲取一個輸入框的內(nèi)容：document.getElementById(“name”).value 設(shè)置或獲取一個div中的文本內(nèi)容： div.innerText 設(shè)置或是獲取div中的html內(nèi)容： div.innerHTML,history和location:,window.history.go(-1); - 返回上一次操作的頁

8、面。不會發(fā)出請求，從瀏覽器的緩存中獲取顯示的頁面數(shù)據(jù)。 Window.location.href=“newUrl”; - 打開一個新的地址。,event事件源對像：,代表事件狀態(tài)，如事件發(fā)生的元素，鍵盤狀態(tài)，鼠標(biāo)位置和鼠標(biāo)按鈕狀態(tài)。 clientX, clientY-設(shè)置或獲取鼠標(biāo)指針位置相對于窗口客戶區(qū)域的 x 坐標(biāo)，其中客戶區(qū)域不包括窗口自身的控件和滾動條。 keyCode設(shè)置或獲取與導(dǎo)致事件的按鍵關(guān)聯(lián)的 Unicode 按鍵代碼。 srcElement設(shè)置或獲取觸發(fā)事件的對象。 x,y設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 x 像素坐標(biāo)。y設(shè)置或獲取鼠標(biāo)指針位置相對于父文檔的 y 像素坐標(biāo)

9、。,event對象：,Event對象是js的事件源對像，有實際的開發(fā)中，非常有實用： 1：用event的x和y實現(xiàn)右鍵菜單。 對body的oncontextmenu添加事件。 Onclick只用于監(jiān)聽鼠標(biāo)的左鍵，而contextmenu可以監(jiān)聽右鍵。 onmousedown等可以監(jiān)鼠標(biāo)的各個鍵。 在方法中通過event獲取x和y軸的坐標(biāo)。 Div使用position:absolute顯示絕對位置。,北京傳智播客教育 ,event對像：,2：用Event對象可以獲取用戶的鍵盤事件：onkeydown. 作用：限制用戶輸入非允許字符 如：年齡輸入框只允許用戶輸入數(shù)字。 event.keyCode可

10、以獲取用戶按鍵的整數(shù)編碼，如A為65,a為97等。 可以通過String類的fromCharCode方法將一個整數(shù)轉(zhuǎn)成一個字符。 使用onkeydown=“return down();”在down方法中如果返回false則為不輸入。,北京傳智播客教育 ,JavaScript內(nèi)置對像-目錄,Array Push將數(shù)據(jù)追加到數(shù)組的尾部 pop從數(shù)組的最上面取一個數(shù)并刪除它。 Date 用Date強(qiáng)制驗證碼刷新。 Math Number parseInt parseFloat RegExp正則表達(dá)式對像，匹配開始，$匹配結(jié)束。 Var p = /d$/; 匹配一個數(shù)字 Object Object類似

11、于Java中的Map. 使用和 直接定義對像(json) Java Script Object Navigation Object,特殊數(shù)據(jù)類型：undefined,undefined 是未初始化變量的默認(rèn)值 區(qū)別undefined與未定義變量 下面這段程序運行的結(jié)果？ 如果一個數(shù)據(jù)類型為undefinde，則使用if判斷為false.,var num; alert(1+typeof(num);/undefined alert(2+typeof(num1);/undefinde alert(“3”+(num=undefined);/true ，因為num就是undefined alert(4+

12、(num1=undefined);/不能進(jìn)行比較，num1不存在,特殊數(shù)據(jù)類型：null,null與undefined的區(qū)別 下面這段程序運行的結(jié)果？ 如果一個數(shù)據(jù)變null，則通過if判斷為false;,北京傳智播客教育 ,alert(typeof(null);/object,對象 alert(typeof(undefined);/undefined,字符串 alert(null=undefined);/true，仍然為true，因為null和undefined都是false.而false=false當(dāng)然為true.,數(shù)據(jù)類型轉(zhuǎn)換,自動類型轉(zhuǎn)換 toString() parseInt()和p

13、arseFloat() 強(qiáng)制類型轉(zhuǎn)換 Boolean(value) Number(value) String(value),var xx = 3-10;/因為-*/是數(shù)學(xué)運算符，所以會自動轉(zhuǎn) alert(xx);/-7 var yy = 10-3; alert(yy);/7 var a = 80; var b = 50; var c = a-b;/-運算將自動轉(zhuǎn)換 alert(c);/30 var d = a+b; alert(d);/8050，不自動轉(zhuǎn)換 var d = parseInt(a)+parseInt(b);/使用Math方法轉(zhuǎn) alert(d);/130 var d = Numb

14、er(a)+Number(b);/強(qiáng)轉(zhuǎn) alert(d);/130,= 與 = 比較,= 只比較數(shù)據(jù)的值是否一樣。 如 var a=“100”; var b = 100; Var boo = (a=b);/true，先將數(shù)據(jù)類型進(jìn)行轉(zhuǎn)換然后再對比 =除了比較數(shù)據(jù)的值，還比較數(shù)據(jù)類型是否一樣。稱為：全等于。 如上例： Var boo2 = (a=b);/false,因為a與b的類型不一樣。,String對象及其方法：,Array對像:,JS中的Array對像，是一個動態(tài)數(shù)組。 在聲明時無須聲明大小。,Array對像：,JS中的Array可是一個寶貝，它不僅是一個數(shù)組，還是一個Stack（棧）.

15、如下面的代碼也是可以的：注意使用字符做為下標(biāo)值。,北京傳智播客教育 ,如上例，使用pinyins.length則為0，那我們?nèi)绾伪闅v它呢？,Array對像：簡化聲明：,類似于數(shù)組 Var a = 1,2,3,4,5; Var b = “a”,”b”,”c”; 類似于HashMap Var c = “name”:”Tom”,”age”:”88”; 上面聲明的方式我們就稱它為JSON，JSON被稱為JavaScript對象表述性語言。 JSON(JavaScript Object Notation) 是一種輕量級的數(shù)據(jù)交換格式。 易于人閱讀和編寫。同時也易于機(jī)器解析和生成。 它基于JavaScri

16、pt Programming Language, Standard ECMA-262 3rd Edition - December 1999的一個子集。 JSON采用完全獨立于語言的文本格式，但是也使用了類似于C語言家族的習(xí)慣（包括C, C+, C#, Java, JavaScript, Perl, Python等）。 這些特性使JSON成為理想的數(shù)據(jù)交換語言。,Array對像的方法：,concat 方法 返回一個新數(shù)組，這個新數(shù)組是由兩個或更多數(shù)組組合而成的。 array1.concat(item1, item2, . . . , itemN) join 方法 返回字符串值，其中包含了連接到

17、一起的數(shù)組的所有元素，元素由指定的分隔符分隔開來。 arrayObj.join(separator) pop 方法 移除數(shù)組中的最后一個元素并返回該元素。 arrayObj.pop( ) 彈棧 push 方法 將新元素添加到一個數(shù)組中，并返回數(shù)組的新長度值。 arrayObj.push(item1 item2 . . . itemN ) 壓棧,Array對像的方法：,reverse 方法 ,1,2,3 - 3,2,1 shift 方法 移除數(shù)組中的第一個元素并返回該元素。 arrayObj.shift( ) slice 方法 返回一個數(shù)組的一段。 arrayObj.slice(start, e

18、nd) sort 方法 toLocaleString 方法 toString 方法,Array實例：,使用Array實現(xiàn)聯(lián)動： 思想：定義一個數(shù)組以省為key值，以市為value,而市又是另一個數(shù)組。 如：var array = new Array(); array北京=“海淀”,”昌平”;使用這種方式直接定義數(shù)組。 然后可以定義多個不同的key對應(yīng)不同的數(shù)組。 在頁面上定義一個省的select和一個市的select元素。 當(dāng)頁面啟動時，動態(tài)給省的select添加所有key,必須使用for.in遍歷方式，獲取所有key值，使用new Option(value,key)初始化數(shù)據(jù)。 給省添加on

19、change事件，只要省信息變化，就清空市并再重新填充。,二級聯(lián)動讓你的數(shù)據(jù)變的更加合理：使用key:value,數(shù)據(jù)結(jié)構(gòu)為Map與List的組合：,Object對像：,Object可以表示任意的對像。 var obj = new Object(); 可以給Object任意的屬性，從而可以構(gòu)造一個類似于Map的數(shù)據(jù) = “傳智播客”; obj.addr = “中國北京”;,For in 示例：可以獲取一個對像的所有成員：,北京傳智播客教育 ,有了for in沒有API文檔也能編程了。,JavaScript對像基礎(chǔ)：-聲明JS類：,JavaScript當(dāng)中，String,Dat

20、e,Object等，都被叫做對象。,Prototype-擴(kuò)展實現(xiàn)繼承：,北京傳智播客教育 ,Prototype:-類擴(kuò)展和類繼承：,以下給String類擴(kuò)展一個trim方法：,JS的的其他運算符：,Typeof(someVar)檢查一個變量的數(shù)據(jù)類型,返回String類型的字符串. typeof 返回值有六種可能： number, string, boolean, object, function, 和 undefined. Instanceof判斷一個變量是否是特定定的一個實例. new 創(chuàng)建一個新的對像,JS-事件,JS-事件,1. 事件流,- 冒泡型事件-從內(nèi)向外依次執(zhí)行。如：oncli

21、ck事件。,在IE上阻止冒泡：,event的屬性cancelBubble設(shè)置或獲取當(dāng)前事件是否要在事件句柄中向上冒泡。,北京傳智播客教育 ,2. 事件監(jiān)聽事件綁定：,- 簡單的通用方法 在IE和在FF上都可以正常的運行。,事件綁定和解除：,- IE的方法 attachEvent是綁定 detachEvent是解除 只可以在IE中使用。,3. 事件對象,- IE瀏覽器中事件對象是window對象的一個屬性event oP.onclick = function() var oEvent = window.event; -DOM中規(guī)定event對象必須作為唯一的參數(shù)傳給事件處理函數(shù) oP.oncli

22、ck = function(oEvent) ,在兩種瀏覽器中，獲取event的不同方式,- 因此為了兼容兩種瀏覽器，通常采用下面的方法 oP.onclick = function(oEvent) if(window.event) /如果存在 oEvent = window.event; ,eval-執(zhí)行一段字符串所包含的js代碼：,eval(codeString) 必選項 codestring 參數(shù)是包含有效 JScript 代碼的字符串值。這個字符串將由 JScript 分析器進(jìn)行分析和執(zhí)行。 示例： eval(“(var a = 99)”); alert(a);,這可是一個好東西，沒有它將

23、沒有辦法處理JSON !,1. CSS的概念,- CSS（Cascading Style Sheet），中文譯為層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言，是實現(xiàn)頁面表現(xiàn)（Presentation）的核心元素。 - CSS的引入,2. 使用CSS控制頁面顯示樣式,- 行內(nèi)樣式 - 內(nèi)嵌式 - 鏈接式 - 導(dǎo)入樣式,北京傳智播客教育 ,3. CSS選擇器,標(biāo)記選擇器也叫直接樣式,將對所有的H1元素設(shè)置此樣式,CSS選擇器,必須要顯示的通過class屬性引用此樣式,ID選擇器：,CSS選擇器選擇器的集體聲明：,使用,逗號進(jìn)行分隔,選擇器的嵌套：,子選擇器: (注意

24、以下代碼IE不適用),偽樣式，IE不能用，但 FF可以：,偽選擇器也是CSS標(biāo)準(zhǔn)的一部分，大部分的瀏覽器都支持，ie6不支持。 :hover 鼠標(biāo)停留在某元素上時執(zhí)行。,示例隔行變色和hover變色。,在IE上hover事件必須要自己書寫JS代碼：,北京傳智播客教育 ,定義樣式表：,給所有TR設(shè)置鼠標(biāo)事件：，注意里面設(shè)置className的方式,1. div與span標(biāo)記,- 在使用CSS排版的頁面中，與是兩個常用的標(biāo)記。（division）簡單而言是一個區(qū)塊容器標(biāo)記，即之間相當(dāng)于一個容器，可以容納段落、標(biāo)題、表格、圖片，乃至章節(jié)、摘要和備注等各種HTML元素。 - 與的區(qū)別,3. 元素的定位

25、,- float定位,Position定位：,absolute- 絕對。,relative-相對。,Z-index立體空間位置：,通過絕對定位和 Z-index即可以實現(xiàn) 遮罩層。,2. 盒子模型,- 一個盒子由content、border、padding(空隙)、margin(間隙)這四部分組成,北京傳智播客教育 ,Ajax:,Ajax 異步。 頁面無刷新技術(shù)與服務(wù)器進(jìn)行交互。,1. 認(rèn)識Ajax,- Ajax（Asynchronous JavaScript and XML，異步JavaScript與XML）是相對較新的名字，通常被人們親切的稱作“阿賈克斯” - 傳統(tǒng)的web采用同步交互的形

26、式，即用戶向服務(wù)器發(fā)送一個請求，然后服務(wù)器根據(jù)用戶的請求執(zhí)行相應(yīng)的任務(wù)，并返回結(jié)果 Ajax與傳統(tǒng)的web應(yīng)用不同，它采用的是異步交互的方式.,Ajax的組成部分,- JavaScript - 操作ajax的方式 - CSSajax的輔助 - DOMajax的容器 - XMLHttpRequest 對象 ajax的核心 xhr(XMLHttpRequest)對像的創(chuàng)建不由服務(wù)器決定，而由客戶端決定。,用iFrame實現(xiàn)的ajax:,隱藏幀 實現(xiàn)對用戶名是否存在的驗證，不使用回顯。 實現(xiàn)對圖片上傳以后的直接顯示。 實現(xiàn)對表格的CRUD。,2. XMLHttpRequest對象創(chuàng)建：,-ajax的核心對像是：XMLHttpRequest 異步對象鏈接服務(wù)器 - 創(chuàng)建注意，應(yīng)該先使用window.XMLHttpRequest判斷。 new ActiveXObject(“Microsoft.XMLHttp”);/這是1.0版本 在注冊表中，可以查找ActiveXObject支持的版本。,北京傳智播客教育 ,典型請求過程：3步走,建立請求：,- 建立請求 Ajax請求的方式有兩種：get/post 注意最