新編249HTML語言與網(wǎng)頁設(shè)計課件

1、新編249HTML語言與網(wǎng)頁設(shè)計新編249HTML語言與網(wǎng)頁設(shè)計學(xué)習(xí)目標(biāo)理解客戶端腳本的作用，掌握在網(wǎng)頁中使用客戶端腳本的方法。理解JavaScript語言的基本語法。理解JavaScript對象和瀏覽器對象在腳本編程中的作用。理解DHTML的原理，能夠在網(wǎng)頁中應(yīng)用DHTML特效。2學(xué)習(xí)目標(biāo)理解客戶端腳本的作用，掌握在網(wǎng)頁中使用客戶端腳本的方Part1在網(wǎng)頁中使用腳本3Part1在網(wǎng)頁中使用腳本5什么是腳本腳本（Script）實際上就是一段程序，用來完成某些特殊的功能。服務(wù)器端腳本：例如 ASP、JSP、PHP等客戶端腳本：例如JavaScript、VBScript等。 4什么是腳本腳本（Sc

2、ript）實際上就是一段程序，用來完成某客戶端腳本的作用客戶端腳本經(jīng)常用來檢測瀏覽器、響應(yīng)用戶動作、驗證表單數(shù)據(jù)以及顯示各種自定義內(nèi)容，如特殊動畫、對話框等。 5客戶端腳本的作用客戶端腳本經(jīng)常用來檢測瀏覽器、響應(yīng)用戶動作、使用客戶端腳本方式1：插入腳本用script標(biāo)記符嵌入腳本程序，例如： 此處為程序代碼6使用客戶端腳本方式1：插入腳本8演示插入腳本7演示插入腳本9使用客戶端腳本方式2：直接添加腳本直接將代碼作為事件響應(yīng)屬性的值。例如：8使用客戶端腳本方式2：直接添加腳本10演示直接添加腳本9演示直接添加腳本11使用客戶端腳本方式3：鏈接腳本文件用script的src屬性指定一個外部java

3、scirpt文件（后綴為.js ）例如：10使用客戶端腳本方式3：鏈接腳本文件12演示鏈接腳本文件11演示鏈接腳本文件13Part 2JavaScript簡介12Part 2JavaScript簡介14JavaScript簡介變量不需要指定類型，用var定義，也可不定義JavaScript運算符與C語言非常相似，包括算術(shù)運算符、邏輯運算符、比較運算符、字符串運算符、條件運算符等。13JavaScript簡介變量不需要指定類型，用var定義，也JavaScript簡介JavaScript語句也與C語言很相似，包括：條件語句（if else, switch）、循環(huán)語句（for, while, do

4、 while）等。如果一行用多個語句，應(yīng)用分號分隔，否則可以省略分號。14JavaScript簡介JavaScript語句也與C語言很JavaScript函數(shù)JavaScript函數(shù)用function作為關(guān)鍵字，通常在HEAD標(biāo)記符內(nèi)定義，形式如下： function fun_name(參數(shù)，參數(shù)) 語句 15JavaScript函數(shù)JavaScript函數(shù)用funct演示使用函數(shù)16演示使用函數(shù)18使用JavaScript對象對象的兩個要素：屬性（數(shù)據(jù)）方法（動作）JavaScript中的兩類對象：JavaScript內(nèi)置對象瀏覽器對象17使用JavaScript對象對象的兩個要素：19Ja

5、vaScript內(nèi)置對象日期對象先用new關(guān)鍵字創(chuàng)建數(shù)學(xué)對象不需創(chuàng)建，可直接使用18JavaScript內(nèi)置對象日期對象20演示使用內(nèi)置對象19演示使用內(nèi)置對象21瀏覽器對象文檔對象模型（DOM） 用于表示HTML元素以及Web瀏覽器信息的一個模型，它使腳本可以訪問Web頁上的信息。20瀏覽器對象文檔對象模型（DOM）22文檔對象模型示意圖21文檔對象模型示意圖23對象的引用根據(jù)對象的包含關(guān)系，使用成員引用操作符一層一層地引用對象例如：window.location較低層次對象一般用名稱（對應(yīng)于id屬性或name屬性）引用例如：document.form1.test22對象的引用根據(jù)對象的包含

6、關(guān)系，使用成員引用操作符一層一層地引document對象屬性all, bgcolor, forms, title事件onload, onunload方法write()23document對象屬性25事件機制JavaScript事件處理器瀏覽器顯示鍵盤鼠標(biāo)操作更新瀏覽器顯示鍵盤鼠標(biāo)事件24事件機制JavaScript事件處理器瀏覽器顯示鍵盤鼠標(biāo)演示使用document對象25演示使用document對象27window對象屬性document, history, loction, status方法alert(), confirm(), prompt(), open(), setInterval()26window對象屬性28演示使用window對象27演示使用window對象29演示使用form對象Example1Example228演示使用form對象Example130DHTML技術(shù)動態(tài)HTML（Dynamic HTML，簡稱DHTML）技術(shù)建立在原有技術(shù)之上，包括三個方面：HTMLCSS客戶端腳本29DHTML技術(shù)動態(tài)HTML（Dynamic HTML，簡稱D演示使用dhtml技術(shù)DHTML example1DHTML example2DHTML example3DHTML example4DHTML example5D