JAVASCRIPT教學(xué)文檔

1、.*1. javascript簡(jiǎn)介html是我們做網(wǎng)頁(yè)時(shí)所用的語(yǔ)言。能夠做出很多漂亮的頁(yè)面。但是頁(yè)面上的東西都是靜止不動(dòng)的，這跟我們平時(shí)上網(wǎng)的時(shí)候看到的，網(wǎng)上的頁(yè)面有點(diǎn)不同。上網(wǎng)時(shí)，我們可以看到，有些頁(yè)面當(dāng)我們鼠標(biāo)在頁(yè)面上滑動(dòng)的時(shí)候，鼠標(biāo)的指針會(huì)變成其它形狀；有些頁(yè)面兩邊還掛有廣告。不管我們?cè)趺礉L動(dòng)頁(yè)面，廣告都會(huì)在上邊。等等這些效果，我們用單用html是實(shí)現(xiàn)不了的。但是如果有了javascrpit的幫助卻可以做到。JavaScript定義JavaScript 被設(shè)計(jì)用來(lái)向 HTML 頁(yè)面添加交互行為。JavaScript 是一種腳本語(yǔ)言（腳本語(yǔ)言是一種輕量級(jí)的編程語(yǔ)言）。JavaScript

2、通常被直接嵌入 HTML 頁(yè)面。JavaScript 是一種解釋性語(yǔ)言（就是說(shuō)，代碼執(zhí)行不進(jìn)行預(yù)編譯）。所有的人無(wú)需購(gòu)買許可證均可使用 JavaScript。JavaScript作用1、處理頁(yè)面控件動(dòng)態(tài)效果；2、處理數(shù)據(jù)以及輸入數(shù)據(jù)時(shí)或提交數(shù)據(jù)前的數(shù)據(jù)驗(yàn)證JavaScript特點(diǎn)JavaScript是一種腳本編寫語(yǔ)言基于對(duì)象的語(yǔ)言簡(jiǎn)單性安全性：不允許訪問本地資源動(dòng)態(tài)性的: 可以直接對(duì)用戶或客戶輸入做出響應(yīng)，無(wú)須經(jīng)過(guò)Web服務(wù)程序跨平臺(tái)性: 與操作環(huán)境無(wú)關(guān)，只需運(yùn)行，并支持JavaScript的瀏覽器就可正確執(zhí)行。JavaScript運(yùn)行環(huán)境JavaScript的運(yùn)行需要JavaScript解釋

3、器的支持，而與具體的操作系統(tǒng)無(wú)關(guān)。目前支持JavaScript的Web瀏覽器有Internet Explorer、Firefox、Opera和Maxthon等。另外，各種HTML、JavaScript的IDE工具也屬于JavaScript運(yùn)行的軟件環(huán)境。JavaScript與java區(qū)別在概念和設(shè)計(jì)方面，Java 和 JavaScript 是兩種完全不同的語(yǔ)言2.javascript中的輸出語(yǔ)句window.alert();document.write();*1.javascript書寫規(guī)范大小寫敏感 注釋: /單行 /* 多行 */語(yǔ)句行: 以;分隔，也可以以自然行分隔。變量定義: 無(wú)論什么

4、類型都用var來(lái)定義變量，也可以不定義直接使用變量可以直接使用。變量命名: 數(shù)字、字母、下劃線、$符號(hào)。不能以數(shù)字開頭。2.數(shù)據(jù)類型1.數(shù)值：包括整型與浮點(diǎn)型。如12、12.3、-90 2.字符串：用單引號(hào)或雙引號(hào)括起來(lái)的。如abc、”abc”3.布爾型：只有兩個(gè)值：true、false 4.空類型（null）只有一個(gè)值null，其代表的意思“空”，代表沒有值，什么數(shù)據(jù)類型都不是。 5. 未定義(undefined )只有一個(gè)值：undefined。也是一個(gè)很特殊的數(shù)據(jù)類型，使用了一個(gè)未賦值的變量或者是使用了一個(gè)不存在的對(duì)象的屬性時(shí)，才返回undefined6.復(fù)合數(shù)據(jù)類型(引用類型)：對(duì)象(

5、window、document)、 數(shù)組（可以是任意類型數(shù)據(jù)）7.用typeof（）可以判斷數(shù)據(jù)的類型（特殊情況：用typeof判斷null時(shí)，返回值為object，目的是向下兼容）作業(yè)：1.定義變量a，并為a賦值為各種數(shù)據(jù)類型。并打印出此時(shí)a的數(shù)據(jù)類型 3.數(shù)組1.定義數(shù)組：var arr=1,2,32.數(shù)組中的值可以是任意類型3.數(shù)組的長(zhǎng)度可變作業(yè)：1.定義數(shù)組arr并賦值。遍歷數(shù)組。*4.運(yùn)算符與表達(dá)式1.算術(shù) + - * / % + - 2.邏輯 & | !3.關(guān)系 = = = != = (全等于)4.賦值 = += -= 5.條件 ? :作業(yè)：1.定義一個(gè)變量a值為“123”變量b值

6、為123，輸出a與b相加，減，乘，除后的結(jié)果。2.定義一個(gè)變量a值為“123”變量b值為123，分別用=與=判斷a與b是否相等，并輸出結(jié)果。*流程控制1.選擇結(jié)構(gòu)if-elseswitch: 可以匹配任意類型注意，在布爾環(huán)境中，非布爾類型的值會(huì)自動(dòng)轉(zhuǎn)換為布爾： 數(shù)值0為假，非0為真 字符串“”為假，非”為真 null和undefined為假 所有對(duì)象為真2.循環(huán)forfor-in : 遍歷一個(gè)對(duì)象的每個(gè)屬性，或一個(gè)數(shù)組的每個(gè)元素。語(yǔ)法：for(var 變量名 in 對(duì)象名或數(shù)組名)/語(yǔ)句whiledo-while3.跳轉(zhuǎn)continue、break作業(yè)：1.夫妻工資總和如果超過(guò)一萬(wàn)五，輸出夫妻

7、各自工資，小康水平；低于五千輸出夫妻各自工資,革命尚未成功，同志仍需努力，否則輸出夫妻各自工資,一小般吧2.定義一個(gè)一維數(shù)組輸出所有奇數(shù)值的和; （for-in）3.循環(huán)輸出window對(duì)象的屬性名稱，與document對(duì)象的屬性名稱4.10-30+50-70.1010=? for5.竹竿320米 每天截取十二米 多少天后 竹竿長(zhǎng)度少于40米 while*1.函數(shù)1.函數(shù)的定義格式function 函數(shù)名（ 參數(shù)1, 參數(shù)2）語(yǔ)句注意事項(xiàng)1）函數(shù)由關(guān)鍵字function定義；2）函數(shù)必須先定義后使用，否則將出錯(cuò)；3）函數(shù)名是調(diào)用函數(shù)時(shí)引用的名稱，區(qū)分大小寫；3. 函數(shù)的參數(shù) 參數(shù)表示傳遞給函數(shù)

8、使用或操作的值，它可以是常量，也可以是變量，不用var定義4.函數(shù)的返回值return語(yǔ)句用于返回表達(dá)式的值，也可以沒有。5. 函數(shù)的調(diào)用調(diào)用函數(shù)時(shí)是由window對(duì)象來(lái)調(diào)用的，而javascript里默認(rèn)的對(duì)象就是window。所以可以省略前綴”window.”,直接調(diào)用。window.funcName(參數(shù)列表)eg.1.定義一個(gè)函數(shù)，實(shí)現(xiàn)打印角形功能。2.定義一個(gè)函數(shù)，算BMI(身體健康指數(shù))：算法:體重KG/身高(米)的平方，如果指數(shù)在19-25之間體重正常，25偏胖 3. 定義一個(gè)函數(shù)，輸入兩個(gè)數(shù)字，返回兩個(gè)數(shù)相加的和。2.引入外部js文件通常，我們把寫好的函數(shù)，放在一個(gè)單獨(dú)的文件中

9、（擴(kuò)展名為.js），用的時(shí)候引入到網(wǎng)頁(yè)中來(lái)。引入外部js的語(yǔ)法： 作業(yè)：1.定義一個(gè)函數(shù)，輸入一個(gè)數(shù)，返回這個(gè)數(shù)的階乘 并測(cè)試2.設(shè)計(jì)一個(gè)函數(shù)，輸入一個(gè)數(shù)，返回圓的面積 并測(cè)試3.定義一個(gè)函數(shù)，返回?cái)?shù)組中的最大值的下標(biāo) 并測(cè)試4.設(shè)計(jì)一個(gè)函數(shù)，一個(gè)菜5元 輸入菜的個(gè)數(shù) 返回錢數(shù) 并測(cè)試5.設(shè)計(jì)函數(shù) 輸入菜的價(jià)格和菜的個(gè)數(shù) 返回錢數(shù) 并測(cè)試6.設(shè)計(jì)函數(shù) 輸入菜的價(jià)錢和菜的個(gè)數(shù) 如果錢數(shù)=100元打八折 如果80100之間打8.5折 如果5080之間 打9折 否則不打折 返回錢數(shù) 并測(cè)試*1.獲得元素對(duì)象的方法document.getElementById(idvalue) ：找到頁(yè)面中id值為i

10、dvalue的對(duì)象。返回object2.獲得/設(shè)置元素對(duì)象值的方式 元素對(duì)象.value(value屬性的值)3獲得/設(shè)置元素對(duì)象文檔內(nèi)容的方式元素對(duì)象.innerHTML(元素中包含的html代碼) 4.單擊事件onclick：當(dāng)點(diǎn)擊鼠標(biāo)左鍵的時(shí)候，會(huì)觸發(fā)該事件的執(zhí)行。【例】1.輸入圓的半徑，求圓的面積與周長(zhǎng)?！纠?.定義一個(gè)函數(shù)，實(shí)現(xiàn)兩個(gè)數(shù)相加功能【例】1.計(jì)算文本域中的字?jǐn)?shù)【例】2.驗(yàn)證用戶名密碼作業(yè)：1.夫妻工資總和如果超過(guò)一萬(wàn)五，輸出小康水平；低于五千輸出革命尚未成功，同志仍需努力，否則輸出一小般吧。 2.實(shí)現(xiàn)計(jì)算器功能可以實(shí)現(xiàn)加減乘除 3.用戶注冊(cè)驗(yàn)證不能為空(用戶名，密碼)。在

11、文本框后提示出錯(cuò)信息。4.計(jì)算BMI指數(shù)5.留言版功能*Global對(duì)象parseInt（）：返回由字符串轉(zhuǎn)換得到的整數(shù)parseFloat（）：返回由字符串轉(zhuǎn)換得到的浮點(diǎn)數(shù)isNaN（）：返回一個(gè) Boolean 值如果返回為true,說(shuō)明是NaN如果返回為falseNaN表示不是數(shù)字作業(yè)：1.驗(yàn)證數(shù)值的填寫是否合法（年齡，價(jià)格等）*內(nèi)置對(duì)象javascript中的對(duì)象：Array、String、Math、Date*1.一維數(shù)組的使用一維數(shù)組對(duì)象的定義(1)var arr = 元素0,元素1.;(2)var arr = new Array(元素0,元素1.);(3)var arr = new

12、 Array(length);eg:用javascript在文檔中，實(shí)現(xiàn)一個(gè)城市下拉選擇框。2.二維數(shù)組的使用二維數(shù)組的創(chuàng)建var arr=元素0,元素1.,元素0,元素1.,.var arr=數(shù)組0,數(shù)組1,.var arrr=new Array(數(shù)組0,數(shù)組1,.) eg:定義一個(gè)二維數(shù)組，計(jì)算其中所有能被3整除的奇數(shù)的和。3.數(shù)組的屬性與方法數(shù)組對(duì)象的屬性length數(shù)組對(duì)象的方法：concat: 將數(shù)組與其他數(shù)組或字符進(jìn)行連接，返回一個(gè)更長(zhǎng)的數(shù)組。join: 用一個(gè)字符將數(shù)組里的每一項(xiàng)連接起來(lái)，得到一個(gè)“長(zhǎng)”的字符串 (數(shù)組變成字符串)pop: 移除數(shù)組中的最后一個(gè)元素并返回該元素。p

13、ush: 將新元素添加到一個(gè)數(shù)組中的尾部，并返回?cái)?shù)組的新長(zhǎng)度值。 作業(yè)：1.參考幫助文檔，實(shí)現(xiàn)對(duì)一個(gè)數(shù)組中內(nèi)容的反轉(zhuǎn)。（如原來(lái)：1,5,3，轉(zhuǎn)換后為3,5,1）(reverse)2.參考幫助文檔，將一個(gè)長(zhǎng)度為8的數(shù)組排序后輸出。(sort)*Math數(shù)學(xué)對(duì)象的方法Math.floor() 向下取整Math.ceil() 向上取整 Math.round() 四舍五入 Math.abs () 取絕對(duì)值 Math.random() 取隨機(jī)數(shù)【例】求3-10之間的隨機(jī)數(shù)【例】已知有30名學(xué)生，根據(jù)學(xué)生的學(xué)號(hào)隨機(jī)抽取6名不重復(fù)的學(xué)生進(jìn)行晨迎。作業(yè)：模擬老虎機(jī)抽獎(jiǎng)（圖片方式）題庫(kù)中有50道題號(hào)不連續(xù)的題目

14、，試做抽出5到不相同的題*1. 字符串對(duì)象的創(chuàng)建var str = abdfshfsiohof;var str = new String(haoifhaohfoah);2. 字符串對(duì)象的屬性與方法屬性：length方法：charAt()：返回指定索引位置處的字符。indexOf()：返回字符串內(nèi)第一次出現(xiàn)子字符串的字符位置。substr()：返回一個(gè)從指定位置開始的指定長(zhǎng)度的子字符串。substring()：返回位于字符串對(duì)象中指定位置的子字符串。replace()：返回根據(jù)正則表達(dá)式進(jìn)行文字替換后的字符串的復(fù)制split()：將一個(gè)字符串分割為子字符串，然后將結(jié)果作為字符串?dāng)?shù)組返回作業(yè)：1.

15、將” Hello! Nice to meet you!”變成全大寫后輸出。2.將字符串反轉(zhuǎn)3.請(qǐng)判斷一個(gè)字符串是不是合法的電子郵件地址 規(guī)則：包含與.在.之前只有一個(gè)*保留2位小數(shù)toFixted()：返回一個(gè)字符串，代表一個(gè)以定點(diǎn)表示法表示的數(shù)字var a=3.4567;alert(a.toFixed(2);*1.Date對(duì)象的創(chuàng)建格式：var d1=new Date();/顯示當(dāng)前系統(tǒng)時(shí)間var d2=new Date(2000/4/13 13:13:24);/顯示的是括號(hào)里面自定義的時(shí)間var d4=new Date(123456789);/括號(hào)里面的時(shí)間是毫秒數(shù)，這個(gè)數(shù)指的是從1970

16、年1月1日 0點(diǎn)0分0秒所經(jīng)過(guò)的時(shí)間2.Date對(duì)象的方法getDay() 獲取日期（一周中的日期）（0 - 6）（0為周日）getDate() 獲取日期（月份中的日期）（1-31）getYear() 獲取年份（1900-1999返回2位年份，其它為4位年份）getMonth() 獲取月份（0-11）gettime() 獲取時(shí)間的毫秒值(從1970 年 1 月 1 日開始計(jì)算到 Date 對(duì)象中的時(shí)間之間的毫秒數(shù))getSeconds() 獲取時(shí)間的秒數(shù)getMinutes() 獲取分鐘getHours() 獲取時(shí)間的小時(shí)數(shù)toLocaleString（）將時(shí)間轉(zhuǎn)換成本地格式的時(shí)間顯示eg：1

17、.用戶輸入一個(gè)日期（年，月，日），請(qǐng)算出該天是星期幾。2.計(jì)算來(lái)到八維學(xué)習(xí)一共經(jīng)歷了多少天作業(yè)：根據(jù)您的年齡計(jì)算您在這美好的世界生活了多少天？*窗口對(duì)象window1.窗口對(duì)象的屬性name：名稱，用來(lái)唯一標(biāo)識(shí)一個(gè)窗口。sratus：狀態(tài)欄。就是窗口最下邊一欄。例如：=”w1”;window.status=”還未準(zhǔn)備就緒”;2.窗方口對(duì)象的方法alert()：彈出一個(gè)只包含“確定”按鈕的對(duì)話框。顯示內(nèi)容confirm()：彈出一個(gè)包含“確定”和“取消”按鈕的對(duì)話框。按下“確定”，則返回 true值，如果按下“取消”，則返回 false 值prompt(, )：彈出一個(gè)包含

18、“確認(rèn)”“取消”和一個(gè)文本框的對(duì)話框，要求用戶在文本框輸入一些數(shù)據(jù)open(url,新視窗名,規(guī)格)：打開新窗口setTimeout(“函數(shù)( )”,毫秒值)：隔參數(shù)中毫秒值時(shí)間，調(diào)用參數(shù)中函數(shù)( )。（只調(diào)用一次函數(shù)）clearTimeout()：取消setTimeout ()的設(shè)置setInterval(“函數(shù)( )”,毫秒值)：每隔參數(shù)中毫秒值時(shí)間，調(diào)用一次參數(shù)中函數(shù)( ) （調(diào)用多次函數(shù)）clearInterval()：取消setInterval ()的設(shè)置。作業(yè) 1.實(shí)現(xiàn)會(huì)走的時(shí)鐘2.打開一個(gè)子窗口，包含菜單欄，工具欄，長(zhǎng)600px,寬200px,不可以縮放。3.隨機(jī)抽取學(xué)生，有開始

19、，結(jié)束。*其它窗口對(duì)象1. location對(duì)象href屬性：設(shè)置或獲取整個(gè) URLreload()方法：重新載入目前的文件(刷新)replace()方法：以指定的文件取代目前的文件2. history對(duì)象 （用來(lái)儲(chǔ)存客戶端曾訪視過(guò)的URL資料）back()方法：從歷史列表中裝入前一個(gè) URLforward()方法：從歷史列表中裝入下一個(gè) URLgo(n)方法：跳轉(zhuǎn)到n值所對(duì)應(yīng)的某一個(gè)URL3. navigator對(duì)象（包含關(guān)于 Web 瀏覽器的信息）常用來(lái)判斷瀏覽器以寫出適應(yīng)不同瀏覽器的代碼（瀏覽器兼容問題）appName屬性：獲取瀏覽器的名稱appVersion屬性：獲取瀏覽器運(yùn)行的平臺(tái)和

20、版本4. screen對(duì)象 （包含關(guān)于顯示器屏幕的信息）height屬性：獲取屏幕的垂直分辨率。width屬性：獲取屏幕的水平分辨率。*doucument對(duì)象1.write(“信息”)方法：向文檔中寫內(nèi)容，可包含文本與其它標(biāo)簽2. getElementById(“id的值”)方法：按元素的ID名稱來(lái)訪問（返回一個(gè)值）3. getElementsByName(“name的值”)方法按元素的name名稱來(lái)訪問（返回?cái)?shù)組）4. getElementsByTagName(“標(biāo)簽名稱”)方法按標(biāo)簽來(lái)訪問（返回?cái)?shù)組）5. forms集合 （表示表單對(duì)象數(shù)組）document.forms.length：對(duì)應(yīng)

21、頁(yè)面上標(biāo)簽的個(gè)數(shù)document.forms0：第1個(gè)標(biāo)簽document.formsi.length：第i-1個(gè)中的控件數(shù)document.formsi.elementsj：第i-1個(gè)中第j-1個(gè)控件1）訪問表單中元素（1）document.formsi.元素名（2）document.表單名.元素名2）訪問表單的屬性（1）document.formsi.屬性名（2）document.表單名.屬性名作業(yè)：1.全部選中，跟全部取消功能。2.驗(yàn)證表單。包含用戶名，密碼，年齡三項(xiàng)數(shù)據(jù)。并進(jìn)行驗(yàn)證，用戶名密碼不能為空，并且需要在6-10個(gè)字符數(shù)之間。年齡必需為數(shù)值。 *event對(duì)象與事件1.常用事件

22、（1） 頁(yè)面事件：載入頁(yè)面事件：onload卸載頁(yè)面事件：onunload（2） 鼠標(biāo)事件：鼠標(biāo)單擊事件：onclick鼠標(biāo)雙擊事件：ondblclick鼠標(biāo)移動(dòng)事件：onmousemove 鼠標(biāo)按下事件：onmousedown鼠標(biāo)抬起事件：onmouseup鼠標(biāo)移入事件：onmouseover鼠標(biāo)移出事件：onmouseout（3） 鍵盤事件：鍵按下事件：onkeydown鍵抬起事件：onkeyup（4） 表單事件：表單提交事件：onsubmit（5） 其他事件：獲得焦點(diǎn)事件：onfocus失去焦點(diǎn)事件：onblur內(nèi)容改變事件：onchange2. event對(duì)象屬性1)Event 對(duì)象代

23、表事件的狀態(tài)，比如事件在其中發(fā)生的元素、鍵盤按鍵的狀態(tài)、鼠標(biāo)的位置、鼠標(biāo)按鈕的狀態(tài)。事件通常與函數(shù)結(jié)合使用，函數(shù)不會(huì)在事件發(fā)生前被執(zhí)行！2)x或clientX：返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。3)y或clientY：返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。4)keyCode：獲取鍵盤事件發(fā)生時(shí)鍵盤的按鍵值。為一個(gè)int型數(shù)據(jù)。比如字母A的keyCode值為65，回車鍵的 keyCode值為13。*正則表達(dá)式1.定義是指一個(gè)用來(lái)描述或者匹配一系列符合某個(gè)句法規(guī)則的字符串的單個(gè)字符串。如：13d9|15d9$、 1-9d4,8$2.預(yù)定義字符集（別人定義好的字符集）1）. 匹配除換行符以外的任何的單個(gè)字符 r.t匹配這些字符串rat,rot2）w 匹配字母或者數(shù)字或者下劃線 a-zA-Z0-9_3）s 匹配任意的空白符4）d 匹配數(shù)字 0-95）b 匹配單詞的開始或結(jié)束 bjavab匹配java 不匹配javasss bjavab6） 匹配字符串的開始 d 2sfsdf 不匹配sfds27）$ 匹配字符串的結(jié)束 end$ sfsdendW 匹配任意非字母、數(shù)字、下劃線、漢字的字符S 匹配任意不是空白符的字符D 匹配任意非數(shù)字的字符B 匹配不是單詞開頭或結(jié)束的位置3. 定義字符集用來(lái)定義字符集1）abcde表示這五個(gè)字符其中的一個(gè)字符2