1、學(xué)習(xí)目標(biāo),JavaScript編程基礎(chǔ) JavaScript工作原理 如何在頁面中使用JavaScript數(shù)據(jù)類型、變量、常量、運(yùn)算符、 表達(dá)式、與控制流程、數(shù)組、函數(shù) JavaScript事件處理 對象和系統(tǒng)函數(shù) 瀏覽器對象,JavaScript,什么是JavaScript JavaScript是有Netscape公司開發(fā)的一種腳本語言，其編寫的程序可以被嵌入到HTML/XML頁面中，并直接在瀏覽器中解釋執(zhí)行。 JavaScript功能 增強(qiáng)頁面動(dòng)態(tài)效果 實(shí)現(xiàn)頁面(瀏覽器)與用戶之間的實(shí)時(shí)、動(dòng)態(tài)的交互 JavaScript語言特點(diǎn) 腳本語言(Script Language) 解釋執(zhí)行(Int

2、erpreted Language) 基于對象(Object Based) 事件驅(qū)動(dòng)(Event Driven) 簡單 弱類型(Weakly Typed Language),JavaScript嵌入到HTML頁面中,(1)在HTML頁面中，使用標(biāo)記嵌入腳本代碼： /或者使用:type=text/javascript /*JavaScript代碼*/ JavaScript代碼的出現(xiàn)位置 (1)HTML頁面主體(元素) (2)HTML頁面頭部(元素) (3)單獨(dú)的外部文件中 ,數(shù)據(jù)類型,JavaScript支持基本數(shù)據(jù)類型和對象類型 (1)基本數(shù)據(jù)類型 整型 浮點(diǎn)型 字符型 布爾型 (2)對象類型

3、 內(nèi)置對象 (String、Math、Date) 瀏覽器對象 (Window、Document、History、Forms、.) 用戶自定義對象,變量,(1) 命名規(guī)則 必須以字母、下劃線或美元符開頭、后面可以跟字母、下劃線、美元符和數(shù)字 變量名區(qū)分大小寫 不允許使用JavaScript關(guān)鍵字做變量名 (2) JavaScript為弱類型語言,變量聲明時(shí)不指定數(shù)據(jù)類型，其具體數(shù)據(jù)類型由給其所賦的值決定。 (3) 通常使用var聲明變量，也可以不經(jīng)聲明而直接使用變量 但必須是先賦值、再取用其值,JavaScript關(guān)鍵字,編程語言中，一些被賦以特定的含義、 并用做專門用途的單詞稱為關(guān)鍵字(Key

4、word)或保留字(Reserved Word) break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debugger finally new true with default for null try,常量,整型常量 十進(jìn)制表示: 12 十六進(jìn)制表示：0 x12 八進(jìn)制表示: 012 浮點(diǎn)型常量： 3.14 布爾類型常量：true 字符型常量：a china abc 轉(zhuǎn)義字符常量：n t 控制常量: nu

5、ll,JavaScript運(yùn)算符,算術(shù)運(yùn)算符: + - * / + - % 邏輯運(yùn)算符: ! 非 i=100;i+) ; ; ; ; while循環(huán) while() do-while循環(huán)dowhile() for-in循環(huán) foreach for(var a : array) 特殊流程控制語句 break語句 continue語句,數(shù)組,數(shù)組是多個(gè)相同類型數(shù)據(jù)的組合，實(shí)現(xiàn)對這些數(shù)據(jù)的統(tǒng)一管理 JavaScript數(shù)組聲明方式: var a1= new Array(); var a2= new Array(size); var a1= new Array(v1,v2,v3,.vn); JavaS

6、cript數(shù)組長度可變,數(shù)組對象的自動(dòng)屬性length標(biāo)明了其長度 數(shù)組元素訪問格式為數(shù)組名元素下標(biāo)，有效元素下標(biāo)為0length-1,函數(shù),JavaScript中的函數(shù)(function)相當(dāng)于其他編程語言中的方法(method)或 子程序(subroutine),是用來完成相對獨(dú)立功能的一段代碼的集合。 格式: function () JavaScript函數(shù)在定義時(shí)不需要指定其返回值類型和是否有返回值,事件以及事件處理機(jī)制,1、事件(Event) 用于描述發(fā)生了什么事情，用戶的鼠標(biāo)或鍵盤操作(如點(diǎn)擊、文字輸入、選中條目等)以及其他的頁面操作(如頁面加載和卸載等)都會(huì)觸發(fā)相應(yīng)的事件 2、事

7、件源(Event Source) 可能產(chǎn)生事件的組件，通常為表單組件 3、事件驅(qū)動(dòng)(Event Driven) 由事件引發(fā)程序的響應(yīng)，執(zhí)行事先準(zhǔn)備好的事件處理代碼，這種程序運(yùn)行方式成為事件驅(qū)動(dòng) 4、事件處理代碼(Enevt Handle) JavaScript中事件處理代碼通常定義為函數(shù)的形式，其中加入所需要處理的邏輯， 并將之關(guān)聯(lián)到所關(guān)注的事件源組件上。,常用事件類型及處理,JavaScript常用事件類型： onClick 組件被點(diǎn)擊 onDbclick 組件被雙擊 onLoad 頁面加載 onUnload 頁面卸載 onChange 組件內(nèi)容或條目選中狀態(tài)發(fā)生改變 onMousemove

8、 鼠標(biāo)移動(dòng) onFocus 獲得焦點(diǎn) onBlur 失去焦點(diǎn),JavaScript常用對象,1、數(shù)學(xué)對象 內(nèi)置對象Math提供常規(guī)的數(shù)學(xué)運(yùn)算方法和數(shù)學(xué)常量 PI,E,abs(),sin(),cos(),.,round(), sqrt(),pow(),random() 2、時(shí)間對象 封裝日期和時(shí)間信息并提供相關(guān)操作功能 使用前需要聲明/創(chuàng)建對象: var currentTime = new Date(); getYear(),getMonth(),getDate(),getDay(), getHours(),getMinutes(),getSeconds(),getTime(),JavaScri

9、pt常用對象,3、字符串對象 String對象描述和處理文本字符串信息 length charAt(idx) indexof(chr) indexof(chr,fromidx) lastindexof(chr) substring(m,n) substring(m) toLowerCase() toUpperCase() split() -將字符串按照指定分隔符轉(zhuǎn)換成數(shù)組,系統(tǒng)函數(shù),系統(tǒng)函數(shù)不從屬于任何的對象，可以在JavaScript代碼中的任何位置直接使用 常用系統(tǒng)函數(shù)： eval(str) 計(jì)算字符串形式給出的表達(dá)式的值 parseInt(str) parseInt(str,radix)

10、將字符串形式的數(shù)值解析為整數(shù)，如果解析到字符串中間遇到非法字符則返回已解析的內(nèi)容、而不是出錯(cuò)；如果字符串的開頭第一位就是非法字符，則返回NaN(not a number,非數(shù)值型) parseFloat(str)將字符串形式的數(shù)值解析為浮點(diǎn)數(shù) isNaN(v)判斷參數(shù)的值是否為NaN,瀏覽器對象,瀏覽器對象屬于JavaScript內(nèi)置對象，使用這些對象可以實(shí)現(xiàn)與HTML頁面間的交互 主要瀏覽器對象層次： navigator links location anchors window document forms formElements history images event DOM模型(D

11、ocument Object Model, 文檔對象模型),Window對象,Window對象表示的是瀏覽器窗口 (1)可以使用Window對象獲取瀏覽器窗口的狀態(tài)信息，也可以通過它來訪問其他的瀏覽器對象及窗口中發(fā)生事件信息。 (2)Window對象是其他瀏覽器對象的共同祖先，所以一般在JavaScript程序中可以省略Window對象。 (3)瀏覽器打開HTML文檔時(shí)，通常會(huì)創(chuàng)建一個(gè)Window對象。 Window對象常用方法 alert(); open(URL,windowName,parameterList); close(); prompt(text,defaulttext); con

12、firm(text); setInterval(func,timer); clearInterval(timer);,Document對象,Document對象是Window對象的屬性，它表示的是當(dāng)前顯示的文檔，其中封裝了文檔中元素的相關(guān)信息，并提供了相應(yīng)的操作功能。 Document對象主要方法 write();,Location對象,Location對象是Window對象的屬性，表示的是當(dāng)前打開的URL，并提供相關(guān)的基本操作方法。 Location對象常用方法 Window.location=URL 指向目標(biāo)頁面 reload(); 刷新，重新加載,History對象,History對象是Window對象的屬性，他封裝了當(dāng)前瀏覽器窗口(Window對象)曾經(jīng)訪問過的網(wǎng)頁URL信息，并提供了相應(yīng)的訪問和頁面跳轉(zhuǎn)功能。 History對象主要屬性和方法 go(index); 前進(jìn)或后退指定的多個(gè)頁面 back(); 后退一