JavaScript語言基礎(chǔ)課件

1、JavaScript語言基礎(chǔ)第4章 JavaScript語言基礎(chǔ) JavaScript語言基礎(chǔ)第4章 JavaScript語言基礎(chǔ)v本章主要內(nèi)容包括：4.1 JavaScript 簡 介4.2 JavaScript 函 數(shù)4.3 JavaScript事件4.4 JavaScript對象化編程4.5 訪問文檔對象4.6 用VS2008編輯與調(diào)試JavaScript4.7 JavaScript實例JavaScript語言基礎(chǔ)4.1 JavaScript 簡 介v4.1.1 將JavaScript插入網(wǎng)頁 使用標簽在網(wǎng)頁中插入JavaScript代碼，插入方法如下： document.write(我

2、是菜鳥我怕誰!); language=“javascript”表示使用JavaScript腳本語言 document.write用來輸出內(nèi)容 JavaScript語言基礎(chǔ)v4.1.2 插入JavaScript的位置JavaScript腳本在網(wǎng)頁中的位置：（1）放在body標記里的腳本在網(wǎng)頁讀取到該語句時就會執(zhí)行。（2）放在head標記里的腳本在被調(diào)用時才會執(zhí)行。通常是在.中定義函數(shù)，通過調(diào)用函數(shù)來執(zhí)行該腳本。（3）可以添加外部腳本文件，其后綴通常為.js，添加方法如下：JavaScript語言基礎(chǔ)v4.1.3 JavaScript語句在JavaScript中，一行的結(jié)束就被認定為語句的結(jié)束。最

3、好還是在結(jié)尾加上一個英文半角分號“;”，示例如下： document.write(This is a header); document.write(This is a paragraph); JavaScript語言基礎(chǔ)v4.1.4 JavaScript注釋1單行注釋 插入單行注釋的符號是：“/”。2多行注釋 多行注釋以“/*”開始，以“*/”結(jié)束。3HTML注釋標記 是HTML注釋標記，對于標記中符合JavaScript語法規(guī)則的內(nèi)容仍然會執(zhí)行，否則會被注釋掉，示例如下： /*簡單的例子 說明三種注釋的使用 */ JavaScript語言基礎(chǔ)v4.1.5 JavaScript彈出框 v1警

4、告（alert） alert()的方法以對話框顯示信息，并有一個“確定”按鈕。v2確認（confirm） 確認框用于作出選擇：“是”或“不是”。 confirm( ) 有兩種取值：true或false。例： var r=confirm(你是學(xué)生嗎); if (r=true) document.write(是); else document.write(不是); v3提問（prompt） prompt和confirm類似，不過它允許訪客輸入回答內(nèi)容，例： var name=prompt(請輸入你的姓名：, ) document.write(歡迎你！,+name) prompt( ) 可以給出初始

5、值，格式如下： prompt(提示信息,初值)JavaScript語言基礎(chǔ)4.2 JavaScript 函 數(shù)v4.2.1 定義函數(shù)定義函數(shù)的格式如下：function 函數(shù)名()函數(shù)代碼;編寫兩數(shù)相加的簡單函數(shù)，函數(shù)的名字為add，如下：function add() sum = 1 + 1; alert(sum);v4.2.2 函數(shù)的調(diào)用可以通過多種方法調(diào)用函數(shù)，最簡單的函數(shù)調(diào)用方式：按鈕的單擊事件。通過button按鈕的鼠標單擊事件onclick調(diào)用add()函數(shù)，代碼如右邊： function add() sum = 1 + 1; alert(sum); JavaScript語言基礎(chǔ)4.

6、3 JavaScript事件 JavaScript有很多事件，例如：鼠標單擊、移動，網(wǎng)頁的載入和關(guān)閉。v4.3.1 單擊事件v4.3.2 鼠標經(jīng)過、移出事件使用鼠標經(jīng)過事件調(diào)用函數(shù)的代碼如下：鼠標滑過調(diào)用函數(shù) 當鼠標經(jīng)過按鈕時，觸發(fā)onmouseover事件，調(diào)用函數(shù)displaymessage()。使用鼠標移出事件調(diào)用函數(shù)的代碼如下： 鼠標移出調(diào)用函數(shù) 鼠標移動到這個按鈕中，當再移動出去時，觸發(fā)onmouseout事件，調(diào)用函數(shù)displaymessage()。v4.3.3 其他事件P(35)JavaScript語言基礎(chǔ)4.4 JavaScript對象化編程vJavaScript對象有基本對

7、象、全局對象、文檔對象;v對象有它自己的屬性、方法和事件。 v引用對象的屬性、方法和事件用“.”這種方法。 4.4.1 基本對象4.4.4.1 String 字符串對象聲明一個字符串對象的方法： var s = 我有個美好的愿望;訪問其length屬性的方法。 var L = s.length；/返回該字符串的長度。字符串對象的方法： indexOf()： indexOf(, )；該方法從中查找（如果給出就忽略之前的位置），如果找到了，就返回它的位置，沒有找到就返回-1。所有的“位置”都是從零開始的。 JavaScript語言基礎(chǔ)4.4.1.2 Array數(shù)組對象數(shù)組對象v數(shù)組的定義方法：va

8、r = new Array();v使用數(shù)組元素： = .;v在定義數(shù)組時直接初始化數(shù)據(jù)：var = new Array(, , .);例如： var myArray = new Array(1, 4.5, Hi); v定義時指定有n個空元素的數(shù)組： var a=new Array(n);JavaScript語言基礎(chǔ)4.4.1.3 Math數(shù)學(xué)對象數(shù)學(xué)對象vMath對象提供對數(shù)據(jù)的數(shù)學(xué)計算，對象使用格式：“Math.”。v方法：abs(x)：返回x的絕對值。max(a, b)：返回a、b中較大的數(shù)。min(a, b)：返回a、b中較小的數(shù)。pow(n, m)：返回n的m次冪（nm）。random

9、()：返回大于0小于1的一個隨機數(shù)。round(x)：返回x四舍五入后的值。sin(x)：返回x的正弦。.JavaScript語言基礎(chǔ)4.4.1.4 Date日期對象日期對象v定義一個日期對象：var d = new Date();vDate日期對象方法的使用格式為:“.”。方法getXXX()是獲得某個數(shù)值，方法setXXX()是設(shè)定某個數(shù)值。get/setFullYear()：返回/設(shè)置年份，用4位數(shù)表示。get/setYear()：返回/設(shè)置年份，用2位數(shù)表示。get/setMonth()：返回/設(shè)置月份，0表示1月。get/setDate()：返回/設(shè)置日期。get/setDay()：

10、返回/設(shè)置星期幾，0表示星期天。get/setHours()：返回/設(shè)置小時數(shù)，24小時制。get/setMinutes()：返回/設(shè)置分鐘數(shù)。get/setSeconds()：返回/設(shè)置秒鐘數(shù)。JavaScript語言基礎(chǔ)v下面的例子顯示當前日期today = new Date();var day; var date;if(today.getDay()=0) day = 星期日if(today.getDay()=1) day = 星期一if(today.getDay()=2) day = 星期二if(today.getDay()=3) day = 星期三if(today.getDay()=4

11、) day = 星期四if(today.getDay()=5) day = 星期五if(today.getDay()=6) day = 星期六 date = 今天是 + (today.getYear() + 年 + (today.getMonth() + 1 ) + 月 + today.getDate() + 日 + day +;document.write(date);JavaScript語言基礎(chǔ)4.4.2 全局對象全局對象就是一些全局函數(shù)，可以直接使用。veval()：把字符串當作標準語句或表達式來運行。例如： b = 2+5*2; var a=eval(b);visNaN()：如果括號內(nèi)

12、的值是NaN（不是數(shù)字），則返回true，否則返回false。vparseInt()：把括號內(nèi)的內(nèi)容轉(zhuǎn)換成整數(shù)。如果是字符串，則字符串開頭的數(shù)字部分被轉(zhuǎn)換成整數(shù)，如果以字母開頭，則返回NaN。vparseFloat()：把括號內(nèi)的字符串轉(zhuǎn)換成浮點數(shù)，如果字符串開頭的數(shù)字部分被轉(zhuǎn)換成浮點數(shù)，如果以字母開頭，則返回NaN。vtoString()：.toString()；把對象轉(zhuǎn)換成字符串。JavaScript語言基礎(chǔ)4.4.3 文檔對象v文檔對象是指在網(wǎng)頁文檔里劃分出來的對象。v主要對象：window、document、location、navigator、screen、history等。v這些文

13、檔對象組成一個文檔對象模型（Document Object Model，DOM)，DOM結(jié)構(gòu)如圖所示。要引用某個對象，就要把父級的對象都列出來。例如，要引用表單MyForm的文本框UserName，就要用erName JavaScript語言基礎(chǔ)4.4.3.1 window對象 window 窗口對象是最大的對象，它描述的是一個瀏覽器窗口。 在引用它的屬性和方法時，一般不需要用window.xxx這種形式，而直接使用xxx。v1window對象的方法（1）open()方法：打開一個窗口。 用法：open(頁面地址,窗口名稱,窗口風(fēng)格);頁面地址：表示要打開的網(wǎng)頁地址。如果用單引號（ ），則不打

14、開任何網(wǎng)頁。窗口名稱：表示被打開的窗口的名稱（），可以使用_top、_blank等內(nèi)建名稱。窗口風(fēng)格：表示被打開的窗口的樣式。如果只需要打開一個普通窗口，該字符串用單引號（ ），如果要指定樣式，就在字符串里寫上一到多個參數(shù)，參數(shù)之間用逗號隔開。例如，打開一個 400100的干凈窗口。open( ,_blank,width=400,height=100,menubar=no,toolbar=no,location=no,directories=no,status=no,scrollbars=yes,resizable=yes) open() 方法有返回值，返回的就是它打開的窗口對象 JavaSc

15、ript語言基礎(chǔ)v（2）close()：關(guān)閉一個已打開的窗口。用window.close() 或 self.close()關(guān)閉本窗口；用.close()關(guān)閉指定的窗口。v（3）延時方法setTimeout()和setInterval()。兩個方法都可以用來實現(xiàn)在一個固定時間段之后執(zhí)行JavaScript。但兩者各有各的應(yīng)用場景。相同：都有兩個參數(shù)：一個是將要執(zhí)行的代碼字符串；一個是以毫秒為單位的時間間隔，當過了指定“時間間隔”之后就將執(zhí)行“代碼字符串”。區(qū)別：setInterval在執(zhí)行完一次代碼之后，經(jīng)過固定的時間間隔，它還會自動重復(fù)執(zhí)行代碼，而setTimeout只執(zhí)行一次那段代碼。使用s

16、etInterval每隔5秒鐘就顯示一次時間，代碼如下：setInterval(showTime(), 5000);function showTime()var today = new Date();alert(The time is: + today.toString();用setInterval命令創(chuàng)建的對象，可以用 clearInterval() 命令終止。例如： var MyMar=setInterval(showTime(),speed); clearInterval(MyMar);JavaScript語言基礎(chǔ)2window對象的屬性v（1）closed和opener屬性。close

17、d屬性可以判斷一個窗口是否已經(jīng)被關(guān)閉。如果一個窗口是通過open()方法打開的，在opener中存放的是打開的它的父窗口，通過opener屬性可以操縱它的父窗口。父窗口可以通過open()方法的返回值和子窗口發(fā)生聯(lián)系。 例如，通過opener屬性可以獲取父窗口的屬性信息：aler);v下面的語句可以判斷一個窗口的父窗口是否已經(jīng)被用戶關(guān)閉。if (window.opener.closed) document.write(父窗口已經(jīng)被關(guān)閉); else document.write(父窗口還沒有被關(guān)閉);v（2）defaultStatus和status屬性。defaultStatus屬性的值是瀏覽

18、器狀態(tài)欄默認的顯示信息，status屬性是狀態(tài)欄中當前顯示的信息。JavaScript語言基礎(chǔ)4.4.3.2 history對象4.4.3.3 location對象JavaScript語言基礎(chǔ)4.4.3.4 document對象vdocument文檔對象描述當前窗口或指定窗口對象的文檔。它包含文檔從到的內(nèi)容。vwrite()方法向文檔寫入數(shù)據(jù)，所寫入的內(nèi)容會被當成標準HTML文檔處理。網(wǎng)站彈出式通知窗口例子： !- var whatsNew = open(,_blank,top=50,left=50,width=200,height=300, + menubar=no,toolbar=no, directories=no,location=no, + status=no,resizable=no,