JavaScript語(yǔ)言基礎(chǔ).ppt

第4章JavaScript語(yǔ)言基礎(chǔ) 第4章JavaScript語(yǔ)言基礎(chǔ) 本章主要內(nèi)容包括 4 1JavaScript簡(jiǎn)介4 2JavaScript函數(shù)4 3JavaScript事件4 4JavaScript對(duì)象化編程4 5訪問(wèn)文檔對(duì)象4 6用VS2008編輯與調(diào)試JavaScript4 7JavaScript實(shí)例 4 1JavaScript簡(jiǎn)介 4 1 1將JavaScript插入網(wǎng)頁(yè)使用標(biāo)簽在網(wǎng)頁(yè)中插入JavaScript代碼 插入方法如下 document write 我是菜鳥(niǎo)我怕誰(shuí) language javascript 表示使用JavaScript腳本語(yǔ)言document write用來(lái)輸出內(nèi)容 4 1 2插入JavaScript的位置JavaScript腳本在網(wǎng)頁(yè)中的位置 1 放在body標(biāo)記里的腳本在網(wǎng)頁(yè)讀取到該語(yǔ)句時(shí)就會(huì)執(zhí)行 2 放在head標(biāo)記里的腳本在被調(diào)用時(shí)才會(huì)執(zhí)行 通常是在 中定義函數(shù) 通過(guò)調(diào)用函數(shù)來(lái)執(zhí)行該腳本 3 可以添加外部腳本文件 其后綴通常為 js 添加方法如下 4 1 3JavaScript語(yǔ)句在JavaScript中 一行的結(jié)束就被認(rèn)定為語(yǔ)句的結(jié)束 最好還是在結(jié)尾加上一個(gè)英文半角分號(hào) 示例如下 document write Thisisaheader document write Thisisaparagraph 4 1 4JavaScript注釋1 單行注釋插入單行注釋的符號(hào)是 2 多行注釋多行注釋以 開(kāi)始 以 結(jié)束 3 HTML注釋標(biāo)記是HTML注釋標(biāo)記 對(duì)于標(biāo)記中符合JavaScript語(yǔ)法規(guī)則的內(nèi)容仍然會(huì)執(zhí)行 否則會(huì)被注釋掉 示例如下 簡(jiǎn)單的例子說(shuō)明三種注釋的使用 4 1 5JavaScript彈出框1 警告 alert alert 的方法以對(duì)話框顯示信息 并有一個(gè) 確定 按鈕 2 確認(rèn) confirm 確認(rèn)框用于作出選擇 是 或 不是 confirm 有兩種取值 true或false 例 varr confirm 你是學(xué)生嗎 if r true document write 是 else document write 不是 3 提問(wèn) prompt prompt和confirm類似 不過(guò)它允許訪客輸入回答內(nèi)容 例 varname prompt 請(qǐng)輸入你的姓名 document write 歡迎你 name prompt 可以給出初始值 格式如下 prompt 提示信息 初值 4 2JavaScript函數(shù) 4 2 1定義函數(shù)定義函數(shù)的格式如下 function函數(shù)名 函數(shù)代碼 編寫(xiě)兩數(shù)相加的簡(jiǎn)單函數(shù) 函數(shù)的名字為add 如下 functionadd sum 1 1 alert sum 4 2 2函數(shù)的調(diào)用可以通過(guò)多種方法調(diào)用函數(shù) 最簡(jiǎn)單的函數(shù)調(diào)用方式 按鈕的單擊事件 通過(guò)button按鈕的鼠標(biāo)單擊事件onclick調(diào)用add 函數(shù) 代碼如右邊 functionadd sum 1 1 alert sum 4 3JavaScript事件 JavaScript有很多事件 例如 鼠標(biāo)單擊 移動(dòng) 網(wǎng)頁(yè)的載入和關(guān)閉 4 3 1單擊事件4 3 2鼠標(biāo)經(jīng)過(guò) 移出事件使用鼠標(biāo)經(jīng)過(guò)事件調(diào)用函數(shù)的代碼如下 鼠標(biāo)滑過(guò)調(diào)用函數(shù)當(dāng)鼠標(biāo)經(jīng)過(guò)按鈕時(shí) 觸發(fā)onmouseover事件 調(diào)用函數(shù)displaymessage 使用鼠標(biāo)移出事件調(diào)用函數(shù)的代碼如下 鼠標(biāo)移出調(diào)用函數(shù)鼠標(biāo)移動(dòng)到這個(gè)按鈕中 當(dāng)再移動(dòng)出去時(shí) 觸發(fā)onmouseout事件 調(diào)用函數(shù)displaymessage 4 3 3其他事件P 35 4 4JavaScript對(duì)象化編程 JavaScript對(duì)象有基本對(duì)象 全局對(duì)象 文檔對(duì)象 對(duì)象有它自己的屬性 方法和事件 引用對(duì)象的屬性 方法和事件用 這種方法 4 4 1基本對(duì)象4 4 4 1String字符串對(duì)象聲明一個(gè)字符串對(duì)象的方法 vars 我有個(gè)美好的愿望 訪問(wèn)其length屬性的方法 varL s length 返回該字符串的長(zhǎng)度 字符串對(duì)象的方法 indexOf indexOf 該方法從中查找 如果給出就忽略之前的位置 如果找到了 就返回它的位置 沒(méi)有找到就返回 1 所有的 位置 都是從零開(kāi)始的 4 4 1 2Array數(shù)組對(duì)象數(shù)組的定義方法 var newArray 使用數(shù)組元素 在定義數(shù)組時(shí)直接初始化數(shù)據(jù) var newArray 例如 varmyArray newArray 1 4 5 Hi 定義時(shí)指定有n個(gè)空元素的數(shù)組 vara newArray n 4 4 1 3Math數(shù)學(xué)對(duì)象Math對(duì)象提供對(duì)數(shù)據(jù)的數(shù)學(xué)計(jì)算 對(duì)象使用格式 Math 方法 abs x 返回x的絕對(duì)值 max a b 返回a b中較大的數(shù) min a b 返回a b中較小的數(shù) pow n m 返回n的m次冪 nm random 返回大于0小于1的一個(gè)隨機(jī)數(shù) round x 返回x四舍五入后的值 sin x 返回x的正弦 4 4 1 4Date日期對(duì)象定義一個(gè)日期對(duì)象 vard newDate Date日期對(duì)象方法的使用格式為 方法getXXX 是獲得某個(gè)數(shù)值 方法setXXX 是設(shè)定某個(gè)數(shù)值 get setFullYear 返回 設(shè)置年份 用4位數(shù)表示 get setYear 返回 設(shè)置年份 用2位數(shù)表示 get setMonth 返回 設(shè)置月份 0表示1月 get setDate 返回 設(shè)置日期 get setDay 返回 設(shè)置星期幾 0表示星期天 get setHours 返回 設(shè)置小時(shí)數(shù) 24小時(shí)制 get setMinutes 返回 設(shè)置分鐘數(shù) get setSeconds 返回 設(shè)置秒鐘數(shù) 下面的例子顯示當(dāng)前日期today newDate varday vardate if today getDay 0 day 星期日 if today getDay 1 day 星期一 if today getDay 2 day 星期二 if today getDay 3 day 星期三 if today getDay 4 day 星期四 if today getDay 5 day 星期五 if today getDay 6 day 星期六 date 今天是 today getYear 年 today getMonth 1 月 today getDate 日 day document write date 4 4 2全局對(duì)象 全局對(duì)象就是一些全局函數(shù) 可以直接使用 eval 把字符串當(dāng)作標(biāo)準(zhǔn)語(yǔ)句或表達(dá)式來(lái)運(yùn)行 例如 b 2 5 2 vara eval b isNaN 如果括號(hào)內(nèi)的值是NaN 不是數(shù)字 則返回true 否則返回false parseInt 把括號(hào)內(nèi)的內(nèi)容轉(zhuǎn)換成整數(shù) 如果是字符串 則字符串開(kāi)頭的數(shù)字部分被轉(zhuǎn)換成整數(shù) 如果以字母開(kāi)頭 則返回NaN parseFloat 把括號(hào)內(nèi)的字符串轉(zhuǎn)換成浮點(diǎn)數(shù) 如果字符串開(kāi)頭的數(shù)字部分被轉(zhuǎn)換成浮點(diǎn)數(shù) 如果以字母開(kāi)頭 則返回NaN toString toString 把對(duì)象轉(zhuǎn)換成字符串 4 4 3文檔對(duì)象 文檔對(duì)象是指在網(wǎng)頁(yè)文檔里劃分出來(lái)的對(duì)象 主要對(duì)象 window document location navigator screen history等 這些文檔對(duì)象組成一個(gè)文檔對(duì)象模型 DocumentObjectModel DOM DOM結(jié)構(gòu)如圖所示 要引用某個(gè)對(duì)象 就要把父級(jí)的對(duì)象都列出來(lái) 例如 要引用表單MyForm的文本框UserName 就要用document MyForm UserName 4 4 3 1window對(duì)象 window窗口對(duì)象是最大的對(duì)象 它描述的是一個(gè)瀏覽器窗口 在引用它的屬性和方法時(shí) 一般不需要用window xxx這種形式 而直接使用xxx 1 window對(duì)象的方法 1 open 方法 打開(kāi)一個(gè)窗口 用法 open 頁(yè)面地址 窗口名稱 窗口風(fēng)格 頁(yè)面地址 表示要打開(kāi)的網(wǎng)頁(yè)地址 如果用單引號(hào) 則不打開(kāi)任何網(wǎng)頁(yè) 窗口名稱 表示被打開(kāi)的窗口的名稱 window name 可以使用 top blank 等內(nèi)建名稱 窗口風(fēng)格 表示被打開(kāi)的窗口的樣式 如果只需要打開(kāi)一個(gè)普通窗口 該字符串用單引號(hào) 如果要指定樣式 就在字符串里寫(xiě)上一到多個(gè)參數(shù) 參數(shù)之間用逗號(hào)隔開(kāi) 例如 打開(kāi)一個(gè)400 100的干凈窗口 open blank width 400 height 100 menubar no toolbar no location no directories no status no scrollbars yes resizable yes open 方法有返回值 返回的就是它打開(kāi)的窗口對(duì)象 2 close 關(guān)閉一個(gè)已打開(kāi)的窗口 用window close 或self close 關(guān)閉本窗口 用 close 關(guān)閉指定的窗口 3 延時(shí)方法setTimeout 和setInterval 兩個(gè)方法都可以用來(lái)實(shí)現(xiàn)在一個(gè)固定時(shí)間段之后執(zhí)行JavaScript 但兩者各有各的應(yīng)用場(chǎng)景 相同 都有兩個(gè)參數(shù) 一個(gè)是將要執(zhí)行的代碼字符串 一個(gè)是以毫秒為單位的時(shí)間間隔 當(dāng)過(guò)了指定 時(shí)間間隔 之后就將執(zhí)行 代碼字符串 區(qū)別 setInterval在執(zhí)行完一次代碼之后 經(jīng)過(guò)固定的時(shí)間間隔 它還會(huì)自動(dòng)重復(fù)執(zhí)行代碼 而setTimeout只執(zhí)行一次那段代碼 使用setInterval每隔5秒鐘就顯示一次時(shí)間 代碼如下 setInterval showTime 5000 functionshowTime vartoday newDate alert Thetimeis today toString 用setInterval命令創(chuàng)建的對(duì)象 可以用clearInterval 命令終止 例如 varMyMar setInterval showTime speed clearInterval MyMar 2 window對(duì)象的屬性 1 closed和opener屬性 closed屬性可以判斷一個(gè)窗口是否已經(jīng)被關(guān)閉 如果一個(gè)窗口是通過(guò)open 方法打開(kāi)的 在opener中存放的是打開(kāi)的它的父窗口 通過(guò)opener屬性可以操縱它的父窗口 父窗口可以通過(guò)open 方法的返回值和子窗口發(fā)生聯(lián)系 例如 通過(guò)opener屬性可以獲取父窗口的屬性信息 alert opener name 下面的語(yǔ)句可以判斷一個(gè)窗口的父窗口是否已經(jīng)被用戶關(guān)閉 if window opener closed document write 父窗口已經(jīng)被關(guān)閉 else document write 父窗口還沒(méi)有被關(guān)閉 2 defaultStatus和status屬性 defaultStatus屬性的值是瀏覽器狀態(tài)欄默認(rèn)的顯示信息 status屬性是狀態(tài)欄中當(dāng)前顯示的信息 4 4 3 2history對(duì)象4 4 3 3location對(duì)象 4 4 3 4document對(duì)象 document文檔對(duì)象描述當(dāng)前窗口或指定窗口對(duì)象的文檔 它包含文檔從到的