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

JS & CSS,JavaScript技術(shù)體系,瀏覽器對像 查：HTML文檔 不同的瀏覽之間有差異,內(nèi)置對像，數(shù)據(jù)類型 需要查：JavaScript文檔 任何瀏覽器都支持這些對象,JavaScript腳本語言：,JS腳本語言，被瀏覽器解析執(zhí)行。 在用戶打開包含有JS/CSS的網(wǎng)頁時(shí)，即被下載到客戶端，客戶端運(yùn)行。具有速度快、不占用帶寬、可以控制頁面顯示等效果。 JS可以嵌入到任意擴(kuò)展名的頁面上，如JSP,ASP,PHP,ASPX。做為一個(gè)程序員，JS是必須要掌握(了解、掌握、精通)的技術(shù)之一。,HTML和JavaScript:,HTML（Hypertext Markup Language），是用于描述網(wǎng)頁文檔的一種標(biāo)記語言。 HTML是一種規(guī)范，一種標(biāo)準(zhǔn)，它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個(gè)部分。 HTML 2.01995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時(shí) HTML 3.21996年1月14日，W3C推薦標(biāo)準(zhǔn) HTML 4.01997年12月18日，W3C推薦標(biāo)準(zhǔn) HTML 4.01（微小改進(jìn)）1999年12月24日，W3C推薦標(biāo)準(zhǔn) HTML 5.0直接支持流媒體的播放、動畫效果等。尚在推廣。,JavaScript函數(shù)聲明/調(diào)用方式：,JS函數(shù)的聲明和調(diào)用對參數(shù)沒有任何限制，即沒有重載。 function abc() /聲明一個(gè)函數(shù) alert(“itcast”); /調(diào)用它的方法可以是： abc(); abc(任意多個(gè)參數(shù)); function other(arg0,arg1) /定義接收兩個(gè)參數(shù)的函數(shù) alert(“”); 調(diào)用它的方法可以是: other(); Other(任意多個(gè)參數(shù));,Javascript函數(shù)聲明的另一種方式：,var someFunc = function() /將函數(shù)賦給某個(gè)變量名.局部。 someFunc = functio() /將函數(shù)賦給某個(gè)變量名，全局。 調(diào)用方式同前。,JavaScript變量：,JavaScript變量可以接收任意的值。分為全局變量和局部變量。 使用var關(guān)鍵字聲明一個(gè)局部變量。范圍為一個(gè)函數(shù)內(nèi)部。 不使用var聲明一個(gè)全局變量?？紤]以下代碼 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)容直接略),Ifelse if else While,for,dowhile for in switchcase Break return 異常處理 Trycatch,JS的調(diào)試工具：firebug/scriptdebug,Firebug是火狐瀏覽器的插件。 Scriptdebug是ie瀏覽器的插件。,document常用方法:,document是window對象的子對象，代表整個(gè)頁面的內(nèi)容部分。 document.getElementById根據(jù)一個(gè)id屬性獲取一個(gè)頁面元素。返回一個(gè)對象。 document.getElementsByName,根據(jù)名稱獲取一組頁面元素。返回一組對象的數(shù)組。 document的其他方法： createElement 創(chuàng)建一個(gè)頁面元素。 getElementsByTagName 根據(jù)元素名稱返回元素?cái)?shù)組。,頁面元素：,Label for=“someid” - 在選中標(biāo)簽時(shí)等同于選中元素。 select optgroupoption 實(shí)現(xiàn)分組選項(xiàng)。 Form 表單 Button , input type=“button” 相同的元素。 fieldSet legend 范圍選項(xiàng)。 Iframe 嵌入，子頁面。 Div,span,p 層，塊，段落。 Table . 表格。 更多內(nèi)容，可見HTML文檔。,Window對像及方法：,事件： onload -在瀏覽器完成對象的裝載后立即觸發(fā)。 方法： Alter, close, confirm, prompt clearInterval, setInterval 每隔多長時(shí)間執(zhí)行一次。 clearTimeout，setTimeout多長時(shí)間以后執(zhí)行一次。 Open, showModalDialog顯示對話框。 子對像： document -文檔對象 event 事件對象 屬性： dialogArguments設(shè)置或獲取傳遞給模式對話框窗口的變量或變量數(shù)組 returnValue設(shè)置或獲取從模式對話框返回的值。 status設(shè)置或獲取位于窗口底部狀態(tài)欄的信息,onload-頁面加載完成以后執(zhí)行：,window.onload=function() 一般用于包含頁面加載完成后自動執(zhí)行的代碼。 請考慮以下代碼，會提示哪一個(gè)？,請考慮以下代碼能否在啟動時(shí)提示:,showModalDialog顯示模式對話框?qū)崿F(xiàn)兩個(gè)頁面之間的數(shù)據(jù)傳遞,vReturnValue = window.showModalDialog(sURL , vArguments , sFeatures),模式對話框在現(xiàn)實(shí)的 開發(fā)當(dāng)中，非常有用。 經(jīng)常用于不要求用戶 輸入，但要求用戶選擇 的數(shù)據(jù)。,延時(shí)執(zhí)行：,window.setTimeout(func,times) /以毫秒為單位的times時(shí)間以后執(zhí)行func方法一次。 window.setInerval(func,times) /每隔以毫秒為單位的times時(shí)間以后執(zhí)行一次func方法。 兩個(gè)方法均可以返回一個(gè)句柄，可以控制繼續(xù)或是終止執(zhí)行。 clearTimeout(handler); clearInterfal(handler); 主要的用途： 多長時(shí)間以后轉(zhuǎn)到成功頁面。 強(qiáng)制用戶看說明書。,內(nèi)容管理：value,html,text,設(shè)置或獲取一個(gè)輸入框的內(nèi)容：document.getElementById(“name”).value 設(shè)置或獲取一個(gè)div中的文本內(nèi)容： div.innerText 設(shè)置或是獲取div中的html內(nèi)容： div.innerHTML,history和location:,window.history.go(-1); - 返回上一次操作的頁面。不會發(fā)出請求，從瀏覽器的緩存中獲取顯示的頁面數(shù)據(jù)。 Window.location.href=“newUrl”; - 打開一個(gè)新的地址。,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)。,event對象：,Event對象是js的事件源對像，有實(shí)際的開發(fā)中，非常有實(shí)用： 1：用event的x和y實(shí)現(xiàn)右鍵菜單。 對body的oncontextmenu添加事件。 Onclick只用于監(jiān)聽鼠標(biāo)的左鍵，而contextmenu可以監(jiān)聽右鍵。 onmousedown等可以監(jiān)鼠標(biāo)的各個(gè)鍵。 在方法中通過event獲取x和y軸的坐標(biāo)。 Div使用position:absolute顯示絕對位置。,北京傳智播客教育 ,event對像：,2：用Event對象可以獲取用戶的鍵盤事件：onkeydown. 作用：限制用戶輸入非允許字符 如：年齡輸入框只允許用戶輸入數(shù)字。 event.keyCode可以獲取用戶按鍵的整數(shù)編碼，如A為65,a為97等。 可以通過String類的fromCharCode方法將一個(gè)整數(shù)轉(zhuǎn)成一個(gè)字符。 使用onkeydown=“return down();”在down方法中如果返回false則為不輸入。,北京傳智播客教育 ,JavaScript內(nèi)置對像-目錄,Array Push將數(shù)據(jù)追加到數(shù)組的尾部 pop從數(shù)組的最上面取一個(gè)數(shù)并刪除它。 Date 用Date強(qiáng)制驗(yàn)證碼刷新。 Math Number parseInt parseFloat RegExp 正則表達(dá)式對像，匹配開始，$匹配結(jié)束。 Var p = /d$/; 匹配一個(gè)數(shù)字 Object Object類似于Java中的Map. 使用和 直接定義對像(json) Java Script Object Navigation Object,特殊數(shù)據(jù)類型：undefined,undefined 是未初始化變量的默認(rèn)值 區(qū)別undefined與未定義變量 下面這段程序運(yùn)行的結(jié)果？ 如果一個(gè)數(shù)據(jù)類型為undefinde，則使用if判斷為false.,var num; alert(“1“+typeof(num);/undefined alert(“2“+typeof(num1);/undefinde alert(“3”+(num=undefined);/true ，因?yàn)閚um就是undefined alert(“4“+(num1=undefined);/不能進(jìn)行比較，num1不存在,特殊數(shù)據(jù)類型：null,null與undefined的區(qū)別 下面這段程序運(yùn)行的結(jié)果？ 如果一個(gè)數(shù)據(jù)變null，則通過if判斷為false;,北京傳智播客教育 ,alert(typeof(null);/object,對象 alert(typeof(undefined);/undefined,字符串 alert(null=undefined);/true，仍然為true，因?yàn)閚ull和undefined都是false.而false=false當(dāng)然為true.,數(shù)據(jù)類型轉(zhuǎn)換,自動類型轉(zhuǎn)換 toString() parseInt()和parseFloat() 強(qiáng)制類型轉(zhuǎn)換 Boolean(value) Number(value) String(value),var xx = 3-“10“;/因?yàn)?*/是數(shù)學(xué)運(yùn)算符，所以會自動轉(zhuǎn) alert(xx);/-7 var yy = “10“-3; alert(yy);/7 var a = “80“; var b = “50“; var c = a-b;/-運(yùn)算將自動轉(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 = Number(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,因?yàn)閍與b的類型不一樣。,String對象及其方法：,Array對像:,JS中的Array對像，是一個(gè)動態(tài)數(shù)組。 在聲明時(shí)無須聲明大小。,Array對像：,JS中的Array可是一個(gè)寶貝，它不僅是一個(gè)數(shù)組，還是一個(gè)Stack（棧）. 如下面的代碼也是可以的：注意使用字符做為下標(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ù)交換格式。 易于人閱讀和編寫。同時(shí)也易于機(jī)器解析和生成。 它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一個(gè)子集。 JSON采用完全獨(dú)立于語言的文本格式，但是也使用了類似于C語言家族的習(xí)慣（包括C, C+, C#, Java, JavaScript, Perl, Python等）。 這些特性使JSON成為理想的數(shù)據(jù)交換語言。,Array對像的方法：,concat 方法 返回一個(gè)新數(shù)組，這個(gè)新數(shù)組是由兩個(gè)或更多數(shù)組組合而成的。 array1.concat(item1, item2, . . . , itemN) join 方法 返回字符串值，其中包含了連接到一起的數(shù)組的所有元素，元素由指定的分隔符分隔開來。 arrayObj.join(separator) pop 方法 移除數(shù)組中的最后一個(gè)元素并返回該元素。 arrayObj.pop( ) 彈棧 push 方法 將新元素添加到一個(gè)數(shù)組中，并返回?cái)?shù)組的新長度值。 arrayObj.push(item1 item2 . . . itemN ) 壓棧,Array對像的方法：,reverse 方法 ,1,2,3 - 3,2,1 shift 方法 移除數(shù)組中的第一個(gè)元素并返回該元素。 arrayObj.shift( ) slice 方法 返回一個(gè)數(shù)組的一段。 arrayObj.slice(start, end) sort 方法 toLocaleString 方法 toString 方法,Array實(shí)例：,使用Array實(shí)現(xiàn)聯(lián)動： 思想：定義一個(gè)數(shù)組以省為key值，以市為value,而市又是另一個(gè)數(shù)組。 如：var array = new Array(); array北京=“海淀”,”昌平”;使用這種方式直接定義數(shù)組。 然后可以定義多個(gè)不同的key對應(yīng)不同的數(shù)組。 在頁面上定義一個(gè)省的select和一個(gè)市的select元素。 當(dāng)頁面啟動時(shí)，動態(tài)給省的select添加所有key,必須使用forin遍歷方式，獲取所有key值，使用new Option(value,key)初始化數(shù)據(jù)。 給省添加onchange事件，只要省信息變化，就清空市并再重新填充。,二級聯(lián)動讓你的數(shù)據(jù)變的更加合理：使用key:value,數(shù)據(jù)結(jié)構(gòu)為Map與List的組合：,Object對像：,Object可以表示任意的對像。 var obj = new Object(); 可以給Object任意的屬性，從而可以構(gòu)造一個(gè)類似于Map的數(shù)據(jù) = “傳智播客”; obj.addr = “中國北京”;,For in 示例：可以獲取一個(gè)對像的所有成員：,北京傳智播客教育 ,有了for in沒有API文檔也能編程了。,JavaScript對像基礎(chǔ)：-聲明JS類：,JavaScript當(dāng)中，String,Date,Object等，都被叫做對象。,Prototype-擴(kuò)展實(shí)現(xiàn)繼承：,北京傳智播客教育 ,Prototype:-類擴(kuò)展和類繼承：,以下給String類擴(kuò)展一個(gè)trim方法：,JS的的其他運(yùn)算符：,Typeof(someVar)檢查一個(gè)變量的數(shù)據(jù)類型,返回String類型的字符串. typeof 返回值有六種可能： “number,“ “string,“ “boolean,“ “object,“ “function,“ 和 “undefined.“ Instanceof判斷一個(gè)變量是否是特定定的一個(gè)實(shí)例. new 創(chuàng)建一個(gè)新的對像,JS-事件,JS-事件,1. 事件流,- 冒泡型事件-從內(nèi)向外依次執(zhí)行。如：onclick事件。,在IE上阻止冒泡：,event的屬性cancelBubble設(shè)置或獲取當(dāng)前事件是否要在事件句柄中向上冒泡。,北京傳智播客教育 ,2. 事件監(jiān)聽事件綁定：,- 簡單的通用方法 在IE和在FF上都可以正常的運(yùn)行。,事件綁定和解除：,- IE的方法 attachEvent是綁定 detachEvent是解除 只可以在IE中使用。,3. 事件對象,- IE瀏覽器中事件對象是window對象的一個(gè)屬性event oP.onclick = function() var oEvent = window.event; -DOM中規(guī)定event對象必須作為唯一的參數(shù)傳給事件處理函數(shù) oP.onclick = function(oEvent) ,在兩種瀏覽器中，獲取event的不同方式,- 因此為了兼容兩種瀏覽器，通常采用下面的方法 oP.onclick = function(oEvent) if(window.event) /如果存在 oEvent = window.event; ,eval-執(zhí)行一段字符串所包含的js代碼：,eval(codeString) 必選項(xiàng) codestring 參數(shù)是包含有效 JScript 代碼的字符串值。這個(gè)字符串將由 JScript 分析器進(jìn)行分析和執(zhí)行。 示例： eval(“(var a = 99)”); alert(a);,這可是一個(gè)好東西，沒有它將沒有辦法處理JSON !,1. CSS的概念,- CSS（Cascading Style Sheet），中文譯為層疊樣式表，是用于控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言，是實(shí)現(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)行分隔,選擇器的嵌套：,子選擇器: (注意以下代碼IE不適用),偽樣式，IE不能用，但 FF可以：,偽選擇器也是CSS標(biāo)準(zhǔn)的一部分，大部分的瀏覽器都支持，ie6不支持。 :hover 鼠標(biāo)停留在某元素上時(shí)執(zhí)行。,示例隔行變色和hover變色。,在IE上hover事件必須要自己書寫JS代碼：,北京傳智播客教育 ,定義樣式表：,給所有TR設(shè)置鼠標(biāo)事件：，注意里面設(shè)置className的方式,1. div與span標(biāo)記,- 在使用CSS排版的頁面中，與是兩個(gè)常用的標(biāo)記。（division）簡單而言是一個(gè)區(qū)塊容器標(biāo)記，即之間相當(dāng)于一個(gè)容器，可以容納段落、標(biāo)題、表格、圖片，乃至章節(jié)、摘要和備注等各種HTML元素。 - 與的區(qū)別,3. 元素的定位,- float定位,Position定位：,absolute- 絕對。,relative-相對。,Z-index立體空間位置：,通過絕對定位和 Z-index即可以實(shí)現(xiàn) 遮罩層。,2. 盒子模型,- 一個(gè)盒子由content、border、padding(空隙)、margin(間隙)這四部分組成,北京傳智播客教育 ,Ajax:,Ajax 異步。 頁面無刷新技術(shù)與服務(wù)器進(jìn)行交互。,1. 認(rèn)識Ajax,- Ajax（Asynchronous JavaScript and XML，異步JavaScript與XML）是相對較新的名字，通常被人們親切的稱作“阿賈克斯” - 傳統(tǒng)的web采用同步交互的形式，即用戶向服務(wù)器發(fā)送一個(gè)請求，然后服務(wù)器根據(jù)用戶的請求執(zhí)行相應(yīng)的任務(wù)，并返回結(jié)果 Ajax與傳統(tǒng)的web應(yīng)用不同，它采用的是異步交互的方式.,Ajax的組成部分,- JavaScript - 操作ajax的方式 - CSS ajax的輔助 - DOM ajax的容器 - XMLHttpRequest 對象 ajax的核心 xhr(XMLHttpRequest)對像的創(chuàng)建不由服務(wù)器決定，而由客戶端決定。,用iFrame實(shí)現(xiàn)的ajax:,隱藏幀 實(shí)現(xiàn)對用戶名是否存在的驗(yàn)證，不使用回顯。 實(shí)現(xiàn)對圖片上傳以后的直接顯示。 實(shí)現(xiàn)對表格的CRUD。,2. XMLHttpRequest對象創(chuàng)建：,-ajax的核心對像是：XMLHttpRequest 異步對象鏈接服務(wù)器 - 創(chuàng)建注意，應(yīng)該先使用window.XMLHttpRequest判斷。 new ActiveXObject(“Microsoft.XMLHttp”); /這是1.0版本 在注冊表中，可以查找ActiveXObject支持的版本。,北京傳智播客教育 ,典型請求過程：3步走,建立請求：,- 建立請