2.1-HTML語言與網(wǎng)頁設(shè)計(jì)ppt課件

1、HTML語言與網(wǎng)頁設(shè)計(jì)語言與網(wǎng)頁設(shè)計(jì)DHTML技術(shù)技術(shù)學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)理解客戶端腳本的作用，掌握在理解客戶端腳本的作用，掌握在網(wǎng)頁中使用客戶端腳本的方法。網(wǎng)頁中使用客戶端腳本的方法。理解理解JavaScript語言的基本語法。語言的基本語法。理解理解JavaScript對(duì)象和瀏覽器對(duì)對(duì)象和瀏覽器對(duì)象在腳本編程中的作用。象在腳本編程中的作用。理解理解DHTML的原理，能夠在網(wǎng)頁的原理，能夠在網(wǎng)頁中應(yīng)用中應(yīng)用DHTML特效。特效。Part1在網(wǎng)頁中使用腳本在網(wǎng)頁中使用腳本什么是腳本什么是腳本腳本腳本Script實(shí)際上就是一段實(shí)際上就是一段程序，用來完成某些特殊的功能。程序，用來完成某些特殊的功能。

2、服務(wù)器端腳本：例如服務(wù)器端腳本：例如 ASP、JSP、PHP等等客戶端腳本：例如客戶端腳本：例如JavaScript、VBScript等。等。 客戶端腳本的作用客戶端腳本的作用客戶端腳本經(jīng)常用來檢測(cè)瀏覽器、客戶端腳本經(jīng)常用來檢測(cè)瀏覽器、響應(yīng)用戶動(dòng)作、驗(yàn)證表單數(shù)據(jù)以響應(yīng)用戶動(dòng)作、驗(yàn)證表單數(shù)據(jù)以及顯示各種自定義內(nèi)容，如特殊及顯示各種自定義內(nèi)容，如特殊動(dòng)畫、對(duì)話框等。動(dòng)畫、對(duì)話框等。 使用客戶端腳本使用客戶端腳本方式方式1：插入腳本：插入腳本用用script標(biāo)記符嵌入腳本程序，標(biāo)記符嵌入腳本程序，例如：例如： 此處為程序代碼此處為程序代碼演示演示插入腳本插入腳本使用客戶端腳本使用客戶端腳本方式方式2

3、：直接添加腳本：直接添加腳本直接將代碼作為事件響應(yīng)屬性的直接將代碼作為事件響應(yīng)屬性的值。值。例如：例如：演示演示直接添加腳本直接添加腳本使用客戶端腳本使用客戶端腳本方式方式3：鏈接腳本文件：鏈接腳本文件用用script的的src屬性指定一個(gè)外部屬性指定一個(gè)外部javascirpt文件后綴為文件后綴為.js ）例如：例如：演示演示鏈接腳本文件鏈接腳本文件Part 2JavaScript簡(jiǎn)介簡(jiǎn)介JavaScript簡(jiǎn)介簡(jiǎn)介變量不需要指定類型，用變量不需要指定類型，用var定定義，也可不定義義，也可不定義JavaScript運(yùn)算符與運(yùn)算符與C語言非常語言非常相似，包括算術(shù)運(yùn)算符、邏輯運(yùn)相似，包括算術(shù)

4、運(yùn)算符、邏輯運(yùn)算符、比較運(yùn)算符、字符串運(yùn)算算符、比較運(yùn)算符、字符串運(yùn)算符、條件運(yùn)算符等。符、條件運(yùn)算符等。JavaScript簡(jiǎn)介簡(jiǎn)介JavaScript語句也與語句也與C語言很相語言很相似，包括：條件語句似，包括：條件語句if else, switch）、循環(huán)語句）、循環(huán)語句for, while, do while等。等。如果一行用多個(gè)語句，應(yīng)用分號(hào)如果一行用多個(gè)語句，應(yīng)用分號(hào)分隔，否則可以省略分號(hào)。分隔，否則可以省略分號(hào)。JavaScript函數(shù)函數(shù)JavaScript函數(shù)用函數(shù)用function作作為關(guān)鍵字，通常在為關(guān)鍵字，通常在HEAD標(biāo)記符標(biāo)記符內(nèi)定義，形式如下：內(nèi)定義，形式如下：

5、function fun_name(參數(shù)，參數(shù)，參數(shù)參數(shù)) 語句語句 演示演示使用函數(shù)使用函數(shù)使用使用JavaScript對(duì)象對(duì)象對(duì)象的兩個(gè)要素：對(duì)象的兩個(gè)要素：屬性數(shù)據(jù)）屬性數(shù)據(jù)）方法動(dòng)作）方法動(dòng)作）JavaScript中的兩類對(duì)象：中的兩類對(duì)象：JavaScript內(nèi)置對(duì)象內(nèi)置對(duì)象瀏覽器對(duì)象瀏覽器對(duì)象JavaScript內(nèi)置對(duì)象內(nèi)置對(duì)象日期對(duì)象日期對(duì)象先用先用new關(guān)鍵字創(chuàng)建關(guān)鍵字創(chuàng)建數(shù)學(xué)對(duì)象數(shù)學(xué)對(duì)象不需創(chuàng)建，可直接使用不需創(chuàng)建，可直接使用演示演示使用內(nèi)置對(duì)象使用內(nèi)置對(duì)象瀏覽器對(duì)象瀏覽器對(duì)象文檔對(duì)象模型文檔對(duì)象模型DOM） 用于表示用于表示HTML元素以及元素以及Web瀏覽器信息的一個(gè)模型

6、，它使腳瀏覽器信息的一個(gè)模型，它使腳本可以訪問本可以訪問Web頁上的信息。頁上的信息。文檔對(duì)象模型示意圖文檔對(duì)象模型示意圖對(duì)象的引用對(duì)象的引用根據(jù)對(duì)象的包含關(guān)系，使用成員根據(jù)對(duì)象的包含關(guān)系，使用成員引用操作符一層一層地引用對(duì)象引用操作符一層一層地引用對(duì)象例如：例如：window.location較低層次對(duì)象一般用名稱對(duì)應(yīng)較低層次對(duì)象一般用名稱對(duì)應(yīng)于于id屬性或?qū)傩曰騨ame屬性引用屬性引用例如：例如：document.form1.testdocument對(duì)象對(duì)象屬性屬性all, bgcolor, forms, title事件事件onload, onunload方法方法write()事件機(jī)制事件

7、機(jī)制JavaScript事件處理器瀏覽器顯示鍵盤鼠標(biāo)操作更新瀏覽器顯示鍵盤鼠標(biāo)事件演示演示使用使用document對(duì)象對(duì)象window對(duì)象對(duì)象屬性屬性document, history, loction, status方法方法alert(), confirm(), prompt(), open(), setInterval()演示演示使用使用window對(duì)象對(duì)象演示演示使用使用form對(duì)象對(duì)象Example1Example2DHTML技術(shù)技術(shù)動(dòng)態(tài)動(dòng)態(tài)HTMLDynamic HTML，簡(jiǎn)稱簡(jiǎn)稱DHTML技術(shù)建立在原有技術(shù)建立在原有技術(shù)之上，包括三個(gè)方面：技術(shù)之上，包括三個(gè)方面：HTMLCSS客戶端腳本客戶端腳本演示演示使用使用dhtml技術(shù)技術(shù)