腳本語言-JavaScript.ppt

第3講腳本語言 了解JavaScript掌握JavaScript的語法結(jié)構(gòu)會編寫JavaScript的應用程序 學習目標 本章主要內(nèi)容 1在HTML中插入JavaScript2變量 數(shù)據(jù)類型與表達式3JavaScript對象實例與函數(shù)4JavaScript的選擇語句5JavaScript的循環(huán)語句6JavaScript事件與事件處理程序7JavaScript應用實例8思考與上機 1在HTML中插入JavaScript JavaScript是Java的子集 具有Java語言的基本語句 具有Java語言的基本特性 是由對象 對象屬性與對象方法 函數(shù) 構(gòu)成的 是一種基于對象和事件驅(qū)動 具有安全性的腳本語言 其主要特點是比Java語言容易理解 能與HTML語言一起完成顯示頁面信息的任務 1 1什么是JavaScript 1 2在HTML文檔中插入JavaScript的方式 例3 1一個包含有JavaScript語言的HTML文檔 P41 隱藏下面JavaScript語句多行注釋多行不顯示多行不顯示的情況 document write 這是我們第一次使用JavaScript語言 隱藏一行 效果圖 1 2在HTML文檔中插入JavaScript的方式 1 插入JavaScript語言的標記碼從上例中可以看出JavaScript語言是通過標記碼對插入到HTML文檔中的 而且可以放在HTML文檔中的任何地方 它以開始 以結(jié)束 插入JavaScript語言的語法格式 JavaScript語句 2 JavaScript命令的大小寫之別JavaScript與Java命令一樣區(qū)別大小寫 因此 在3 1 htm中的JavaScript命令代碼都是小寫字母 如例子中的document write 語句 1 2在HTML文檔中插入JavaScript的方式 3 JavaScript的注釋標記JavaScript有自己的注釋標記 用來告訴瀏覽器將JavaScript語句隱藏起來不顯示 JavaScript注釋標記的語法格式 一行注釋 多行注釋 說明 標記注釋一行 即一行不顯示 而 標記可以將多行隱藏起來不顯示 4 document對象及write方法document對象為JavaScript內(nèi)置的文檔對象 它具有write 方法 可以在頁面中顯示指定的文字 1 3使用JavaScript對象屬性與方法 創(chuàng)建一個包含多個JavaScript對象的文檔例3 2 P43 上次修改時間 document write document lastModified alert 歡迎你第二次使用JavaScript prompt 請輸入你的姓名 張馳 效果圖 上例知識點分析 1 調(diào)用對象方法和屬性的方式上例中使用了document對象的write 方法和lastModified屬性 write 方法的功能是輸出圓括號內(nèi)的參數(shù)值到窗口 JavaScript語言通過對象定義其方法 通過對象名 方法名來調(diào)用對象的方法完成指定的功能 write 方法完成顯示信息的任務 顯示的信息由圓括號對內(nèi)的參數(shù)提供 調(diào)用對象方法和使用對象屬性有如下語法格式 對象名 方法名 參數(shù) 對象名 屬性名 上例知識點分析 2 alert方法的功能在3 2 htm中還使用了window對象的alert方法 它的功能是顯示一個帶有提示信息的對話框 alert 方法一般用于提示或提醒用戶某一事情 調(diào)用alert方法的語法格式 alert 提示信息 alert 方法前面沒有對象名 這是因為alert 方法為window對象的方法 沒有指明對象名 JavaScript默認為window對象 上例知識點分析 3 prompt 方法的功能在3 2 htm中還使用了window對象的prompt 方法 它的功能是顯示一個可以讓用戶輸入信息的對話框 輸入信息對話框由 提示信息 初值 一個 確定 按鈕和一個 取消 按鈕組成調(diào)用prompt 方法的語法格式 prompt 提示信息 初值 prompt 方法的括號中包括了兩個字符串 一個是要顯示的信息 一個是輸入文本框內(nèi)顯示的初始信息 2JavaScript變量 數(shù)據(jù)類型與表達式 變量與常量變量是計算機提供的存放數(shù)據(jù)的內(nèi)存空間的代號 變量的功能就是保存數(shù)據(jù) 存放在變量中的數(shù)據(jù)可以改變常量是計算機中存放固定不變數(shù)據(jù)的內(nèi)存空間的代號 在JavaScript中使用變量和常量前要先聲明其代號 即變量名 2 1聲明JavaScript變量的方法 例3 3帶有JavaScript變量 并給變量賦值的文檔 P45 varname prompt 請輸入你的姓名 張馳 varx 7vary 8document write 歡迎你 name document write x y x y 上例知識點歸納 1 聲明變量的方法var變量名 數(shù)據(jù)值 2 選取變量名的規(guī)則變量名對大小寫非常敏感 大小寫字母代表不同的變量 另外 變量名稱的長度是任意的 但必須遵循以下規(guī)則 第一個字符必須是一個字母 大小寫均可 或一個下劃線 或一個美元符 后續(xù)的字符可以是字母 數(shù)字 下劃線或美元符 變量名稱不能是JavaScript的關鍵字 2 2JavaScript的數(shù)據(jù)類型 1 數(shù)值數(shù)據(jù)類型數(shù)值數(shù)據(jù)類型包括整型int 浮點型float2 字符串類型string字符串數(shù)據(jù)必須使用單引號或雙引號括起來 3 邏輯類型booleanboolean數(shù)據(jù)類型的值只有兩個 true與false 4 空數(shù)據(jù)類型nullnull數(shù)據(jù)類型只有一個值null 表示沒有任何值5 undefined未定義數(shù)據(jù)類型undefined數(shù)據(jù)類型只有一個值undefined 表示變量被創(chuàng)建后未給該變量賦值 6 Object對象類型 2 3JavaScript的運算符 按照運算符的運算規(guī)律來劃分有如下6種運算符 1 賦值運算符賦值運算符有如下6種類型 表示將右邊數(shù)賦值給左邊變量 表示左 右兩邊數(shù)相加 結(jié)果賦給左邊變量 表示左 右兩邊數(shù)相減 結(jié)果賦給左邊變量 表示左 右兩邊數(shù)相乘 結(jié)果賦給左邊變量 表示右邊數(shù)除左邊數(shù) 結(jié)果賦給左邊變量 表示右邊數(shù)除左邊數(shù) 余數(shù)賦給左邊變量 2 3JavaScript的運算符 2 算術運算符算術運算符有加 減 乘 除 余 和取負X X 加1 減1 等 例如Y 5 Y的值為6 例如Y 6 Y的值為5 3 字符串運算符字符串運算符只有一個合并運算符 表示將兩個字符串合并在一起 例如 abc 你好 合并后的值為 abc你好 2 3JavaScript的運算符 4 比較運算符比較運算符有如下6種類型 如果兩邊數(shù)據(jù)相等返回true 例如 2 2返回true 如果兩邊數(shù)據(jù)不相等返回true 例如 THE TH 返回true 如果左邊數(shù)大于右邊數(shù)返回true 例如 2 1返回true 如果左邊數(shù)大于或等于右邊數(shù)返回true 如果左邊數(shù)小于或等于右邊數(shù)返回true 2 3JavaScript的運算符 5 邏輯運算符邏輯運算符有如下3種類型 稱為邏輯與 例如 2 1 51 5 4 其結(jié)果為false 稱為邏輯或 例如 2 1 51 5 4 其結(jié)果也為true 稱為邏輯非 當表達式的邏輯值為true時返回結(jié)果false 當表達式的邏輯值為false時返回結(jié)果true 例如 2 1結(jié)果為false 2 3JavaScript的運算符 6 條件運算符條件運算符只有一個 條件運算符與上面的運算符略有不同 條件表達式的結(jié)構(gòu)如下 條件 結(jié)果1 結(jié)果27 運算符優(yōu)先級當表達式里有多種運算符號的時候 其優(yōu)先級從高到低順序為 乘 除 模 加 減 比較 邏輯與 邏輯或 條件 2 3JavaScript的運算符 1 JavaScript表達式JavaScript表達式是JavaScript變量 常量 運算符以及表達式的任意組合 表達式在使用上是先計算后使用 因此 不管一個表達式有多么復雜 其最終結(jié)果都是一個有確定類型和大小的數(shù)值 表達式的類型確定其值的數(shù)據(jù)類型 2 JavaScript表達式的類型JavaScript的表達式有6種類型 賦值表達式 算術表達式 字符串表達式 比較表達式 邏輯表達式和條件表達式 例3 4使用JavaScript表達式 給出表達式結(jié)果 P48 varquestion 10 20是多少 varanswer 30 varx1 計算正確 varx2 計算錯了 varx5 prompt question 0 varoutput x5 answer x1 x2 document write output 如圖所示對話框 輸入30并單擊 確定 按鈕后 會出現(xiàn)圖所示頁面 3JavaScript對象實例與函數(shù) 1 什么是對象實例在JavaScript中有許多已定義好的內(nèi)置對象 如窗口對象window 文檔對象document 日期對象Date等 對象實例即對象的一個具體例子 可以用任意名字來定義對象實例 對象實例是一個具體的對象 它具有原對象的一切屬性和方法 通過對象實例還可以定義新的屬性和方法 有的對象的屬性與方法必須通過對象實例才能調(diào)用 3 1什么是對象實例 例3 5包含Date對象實例 P50 today newDate document write 現(xiàn)在的時間是 today getHours today getMinutes document write 今天的日期是 today getMonth 1 today getDate today getYear 知識點歸納 1 創(chuàng)建對象實例的方式創(chuàng)建對象實例的語法格式 實例名 new對象名 2 通過對象實例調(diào)用原對象的屬性與方法Date 的對象實例today能調(diào)用Date 的屬性與方法 在創(chuàng)建對象實例today時如果未在Date 中指定具體日期與時間 將使用本地計算機的當前時間初始化實例對象 因此 通過today對象的get 方法可以得到當前時間與日期 注意getMonth屬性所取得的月份范圍是從0到11 必須加1以才能代表現(xiàn)實中的1月至12月 3 2創(chuàng)建JavaScript的自定義函數(shù) 1 什么是JavaScript函數(shù)JavaScript的函數(shù)是執(zhí)行某個指定任務或功能的一系列JavaScript命令的集合 通過調(diào)用一個函數(shù)名能方便地實現(xiàn)函數(shù)中定義的功能 JavaScript已經(jīng)定義好一些內(nèi)置函數(shù) 在編寫JavaScript腳本時可以直接使用 這里要介紹的是根據(jù)任務和活動的具體內(nèi)容自定義函數(shù)的方式 JavaScript的函數(shù)與JavaScript的方法相似 不同之處是方法與某個對象有關系 通過對象才能使用其方法 而函數(shù)與任何對象都沒有關系 可直接調(diào)用 例3 6一個包含產(chǎn)生隨機數(shù)的自定義函數(shù) P51 functionRandomNumber today newDate num Math abs Math sin today getTime returnnum document write 這是自定義函數(shù)RandomNumber 產(chǎn)生的隨機數(shù) RandomNumber 創(chuàng)建自定義函數(shù)的方法 創(chuàng)建自定義函數(shù)的語法格式 function函數(shù)名 參數(shù)1 參數(shù)2 命令塊 returnx JavaScript通過函數(shù)命令塊中的return關鍵字給出函數(shù)的返回值 JavaScript函數(shù)也可以不帶返回值 不使用return關鍵字即可函數(shù)不會自動運行 只有通過調(diào)用函數(shù)的命令才能運行該函數(shù) 執(zhí)行函數(shù)中定義的功能 4JavaScript的選擇語句 if else單選語句的結(jié)構(gòu)if else語句的語法格式 if條件 JavaScript命令 else 其他命令 4 1if else單選語句 4 1if else單選語句 嵌套使用if else的語法格式 if條件1 JavaScript命令 else if條件2 JavaScript命令 else 其他命令 例3 7使用if else單選語句 P53 varmess1 document write day newDate hr day getHours if hr 6 4 2switch多選語句 switch多選語句是解決多種情況選擇的最好方案 switch多選語句的結(jié)構(gòu)switch多選語句的語法格式 switch 條件表達式 case常量值1 語句1 break case常量值2 語句2 break default 語句n 例3 8使用switch多選語句 P54 varmess1 day newDate hr day getHours switch hr 0 document write mess1 4 2switch多選語句 switch多選語句的執(zhí)行順序先計算switch后的 條件表達式 然后將表達式的值與各個case后的 常量值 比較 如果表達式的值與某個常量的值相等 就執(zhí)行該常量值后面的語句 如果都不相等 就執(zhí)行default下面的語句 碰到break語句程序流程將跳出switch語句體 default子句default子句可以沒有命令語句 即什么都不執(zhí)行 直接跳出分支語句 如果有命令語句 當case語句都不成立時 執(zhí)行default子句中的命令 4 2switch多選語句 使用switch多選語句要注意的事項 case后面的常量必須是整數(shù)或字符型數(shù)據(jù) 而且不能有相同的值 通常在每一個case中都應使用break語句提供一個出口 使程序流程能夠跳出多選語句 否則 在第一個滿足條件case后面的所有語句都會被執(zhí)行 這種情況叫做落空 5JavaScript的循環(huán)語句 for循環(huán)語句的語法格式 for 初值 條件 步長表達式 命令 功能 循環(huán)前先計算條件 值為true 真 時 執(zhí)行循環(huán)語句中的命令 值為false 假 時跳出循環(huán)語句 每循環(huán)一次計數(shù)變量增加或減少一個步長單位的值 其中 初值用來設置計數(shù)變量并給它賦值 初值表達式能夠用var來聲明一個新變量 步長表達式用來說明計數(shù)變量的變化規(guī)律 一般用i j k l等作為循環(huán)的計數(shù)變量 5 1for循環(huán)語句 5 2for in循環(huán)語句 for in循環(huán)語句可用于在對象的所有屬性內(nèi)自動移位 for in循環(huán)語句的語法格式 for jin對象 命令語句 循環(huán)會從0增加j 直到達到該對象中的最后一個屬性的下標為止 5 3while循環(huán)語句 while循環(huán)語句的語法格式 while 條件 命令breakcontinue while循環(huán)中的條件可以是JavaScript邏輯表達式 條件為true是 執(zhí)行循環(huán)體中的命令語句 break語句可以隨時終止循環(huán) 即使循環(huán)沒有結(jié)束也如此 continue語句可跳到循環(huán)體中命令語句的第一句開始下一次循環(huán) while循環(huán)一定要注意其結(jié)束方式 以防陷入死循環(huán)中出不來 break continue命令在其他循環(huán)中同樣可用 例3 10使用for循環(huán) 隨機顯示不同圖像文件的文檔 P57 a 3 varpp Math random varp1 Math round pp a 1 1 varpic document write pic 刷新會顯示不同的圖片 刷新會顯示不同的圖片 知識點歸納 1 隱式方式聲明變量的方式在3 10 htm可以發(fā)現(xiàn) 聲明變量時有的變量用了var關鍵字 有的沒有用var關鍵字 不用var聲明的變量是以隱式方式定義的變量 2 this的作用在JavaScript中this有特殊的作用 它表示當前的對象 這里的對象是指函數(shù)c1 3 Array數(shù)組對象在3 10 htm還使用了Array數(shù)組對象 其實例對象b為一個一維的包含3個元素的數(shù)組變量 4 使用圖像文件夾腳本程序用到的三張圖片文件要先存放在與當前文件夾的子文件夾img中 名字分別為1 gif 2 gif 3 gif 使用圖像文件夾可以區(qū)別管理不同格式的文件 6JavaScript的事件與事件處理程序 6 1什么是事件事件通常是指用戶在頁面上通過鼠標進行活動時產(chǎn)生的一種行為 如單擊某個按鈕就是一個事件 改變了表單的文本域或在鏈接上移動鼠標也是事件 歸納起來 JavaScript的事件可以分為如下3種類型 頁面之間跳轉(zhuǎn)的事件 主要是超鏈接事件 瀏覽器自身引起的事件 表單內(nèi)部元素同頁面中元素的交互事件 6 2自定義函數(shù)構(gòu)成的事件處理程序 例3 11使用onload事件處理程序?qū)㈨撁嫣砑拥接脩羰詹貖A的文檔 P59 functionfolder window external AddFavorite 新浪首頁 你希望把新浪首頁添加到收藏夾嗎 在瀏覽器打開網(wǎng)頁 將彈出如圖所示對話框 單擊 確定 按鈕 可添加 新浪首頁 地址到當前用戶瀏覽器的收藏夾中 知識點歸納 1 load 載入頁面 事件與onload事件處理器3 11 htm中在load 載入頁面 事件發(fā)生時 將觸發(fā)onload事件處理器調(diào)用自定義函數(shù)folder 執(zhí)行函數(shù)中定義的JavaScript命令完成指定的任務 2 external AddFavorite 方法external AddFavorite 方法的功能是在IE瀏覽器中自動打開 添加到收藏夾 對話框 在名稱文本框會出現(xiàn)方法中確定的名稱 如本例中的 新浪首頁 方法中的網(wǎng)址 可以添加到收藏夾中 external AddFavorite 方法只能在IE瀏覽器中使用 6 3由JavaScript命令構(gòu)成的事件處理程序 1 在程序中通過事件處理器調(diào)用JavaScript的命令語句例3 12使用onchange事件處理器確認用戶在頁面中輸入的數(shù)據(jù) P60 請輸入你的姓名 請輸入一個小于5的數(shù) 知識點歸納 1 確認對話框當change 正在進行的活動改變時 事件發(fā)生時 觸發(fā)onchange事件處理器直接調(diào)用JavaScript命令alert 感謝你的合作 與confirm 你想繼續(xù)嗎 打開提示對話框與確認對話框 2 轉(zhuǎn)換函數(shù)parseInt3 12 htm中使用轉(zhuǎn)換函數(shù)parseInt this value 將string類型的數(shù)據(jù)this value 用戶在文本框輸入的數(shù)據(jù) 轉(zhuǎn)換為整型數(shù)據(jù) 6 4通過命令按鈕實現(xiàn)數(shù)據(jù)計算功能 通過程序中的命令按鈕調(diào)用事件處理器onclick例3 13 P61 functionc1 form form results value eval form entry value 請輸入一個算術表達式 這個表達式的結(jié)果為 效果圖 7JavaScript應用實例 7 1創(chuàng)建保存JavaScript的腳本代碼的js文件 1 js文件JavaScript代碼可以單獨存放在一個文件內(nèi) 并以 js作為文本文件的后綴名 注意js文件里不能有或其他注釋語句 2 在HTML文檔調(diào)用js文件的方式在html文件中如果要使用js文件 要在script標記碼中使用src屬性指定js文件的存放路徑 參見下面的代碼 1創(chuàng)建js文件3 14 js vara passwort a 1234 passwort prompt 請你輸入口令 if passwort a location href 3 15 htm else alert 對不起 你輸入的口令不對 location href 3 16 htm 2 創(chuàng)建載入js文件的HTML文檔 3 顯示歡迎的HTML文件例3 16顯示歡迎文字的靜態(tài)頁面文檔 3 15 htm 歡迎你進入我的網(wǎng)站 4 顯示再見的HTML文件例3 17顯示再見文字的靜態(tài)頁面文檔 3 16 htm 再見 效果圖 在頁面上滾動顯示的菜單 1 創(chuàng)建js文件例3 20創(chuàng)建在頁面上具有滾動菜單功能的js文件 3 19 js varindex 7link newArray 6 text newArray 6 link 0 3 1 htm link 1 3 2 htm link 2 3 3 htm link 3 3 4 htm link 4 3 5 htm link 5 3 6 htm link 6 3 7 htm text 0 新聞1 text 1 新聞2 text 2 菜單一 text 3 菜單二 text 4 菜單三 text 5 菜單四 text 6 菜單五 document write for i 0 i document write text i document write 2 創(chuàng)建包含js文件的HTML文件 例3 21創(chuàng)建包含3 19 js文件的htm文件 3 20 htm 注意 一會兒 在頁面上能看到滾動的菜單 在瀏覽器打開3 20 htm網(wǎng)頁 可以看到如圖所示頁面 瀏覽器對象模型 BOM 瀏覽器對象模型 BOM BOM是browserobjectmodel的縮寫 簡稱瀏覽器對象模型 BOM提供了獨立于內(nèi)容而與瀏覽器窗口進行交互的對象 由于BOM主要用于管理窗口與窗口之間的通訊 因此其核心對象是window 其它對象都是通過它延伸出來的 也可以稱為window的子對象 BOM由一系列相關的對象構(gòu)成 并且每個對象都提供了很多方法與屬性 瀏覽器對象模型 BOM 由于window是頂層對象 因此調(diào)用它的子對象時可以不顯示的指明window對象 例如下面兩行代碼是一樣的 document write test window document write test 另外W3school有關于window對象的詳細介紹 Document對象 該對象代表瀏覽器窗口中所加載的文檔 使用Document對象可以操作文檔中的內(nèi)容 在整個BOM中 只有Document對象是與HTML文檔的內(nèi)容相關的 Frames數(shù)組 該數(shù)組代表瀏覽器窗口中的框架 HTML中允許將一個瀏覽器窗口分為多個框架 每個框架中可以加載一個HTML文檔 在這種框架頁中 每一個框架都是Frames數(shù)組中的一個元素 而Frames數(shù)組中的每一個元素都是一個Window對 History對象 該對象代表當前瀏覽器窗口的瀏覽歷史 通過該對象可以將當前瀏覽器窗口中的文檔前進或后退到某一個已經(jīng)訪問過的URL 統(tǒng)一資源定位符 Location對象 該對象代表當前文檔的URL URL分為幾個部分 如協(xié)議部分 主機部分 端口部分等 使用Location對象可以分別獲