JavaScript語言.ppt

第4章JavaScript語言 Web標(biāo)準(zhǔn) 的網(wǎng)頁組成 結(jié)構(gòu) 決定網(wǎng)頁 是什么 各級標(biāo)題 段落 列表等 表現(xiàn) 決定網(wǎng)頁 是什么樣子 字號 字體 顏色等 行為 決定網(wǎng)頁 做什么 變化 交互等 決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容 設(shè)定網(wǎng)頁的表現(xiàn)樣式 控制網(wǎng)頁的行為 第4章JavaScript語言 任務(wù)4 1用定時器為新聞首頁添加時鐘顯示任務(wù)4 2為新聞首頁狀態(tài)欄添加走馬燈效果 任務(wù)4 1用定時器為新聞首頁添加時鐘顯示 知識目標(biāo) 1 掌握J(rèn)avaScript基本語法 2 掌握window對象的定時操作技能目標(biāo) 1 會用JavaScript語言進行客戶端編程教學(xué)重點 1 JavaScript基本語法 2 DOM操作中獲取節(jié)點和屬性的方法 3 window對象 4 日期 Date 對象教學(xué)難點 1 將Date對象按照指定格式轉(zhuǎn)換為字符串 2 定時操作 X HTML中使用JavaScript的三種方式 方式1 javascript基本例子 X HTML中使用JavaScript的三種方式 方式2 functiontest alert 你單擊了按鈕 javascript基本例子 X HTML中使用JavaScript的三種方式 方式3 javascript基本例子 functiontest alert 你單擊了按鈕 CSS x HTML JavaScript模式常見構(gòu)成 x HTML頁面 functiona JavaScript文件 body font size 24px CSS樣式文件 網(wǎng)頁的基本元素 功能邏輯的實現(xiàn) 網(wǎng)頁美化 瀏覽器對象模型 BOM 瀏覽器對象模型 BOM 是JavaScript編程技術(shù)的重要組成部分 BOM由一系列相關(guān)的對象構(gòu)成 用于JavaScript和瀏覽器窗口進行交互 window對象是整個BOM的核心 其他5個對象都是window對象的屬性 BOM中定義了6種重要的對象 1 window對象表示瀏覽器中打開的窗口 2 document對象表示瀏覽器中加載頁面的文檔對象 3 location對象包含了瀏覽器當(dāng)前的URL信息 4 navigator對象包含了瀏覽器本身的信息 5 screen對象包含了客戶端屏幕及渲染能力的信息 6 history對象包含了瀏覽器訪問網(wǎng)頁的歷史信息 DOM模型概述 DOM DocumentObjectModel 文檔對象模型 是由W3C國際組織制定的Web標(biāo)準(zhǔn)之一 它為應(yīng)用程序訪問和操作XML和HTML文檔提供了一套標(biāo)準(zhǔn)的API 屬性 方法和事件 主要作用 定義文檔的操作 文檔一般指HTML頁和XML文件 Dom模型 DOM模型是HTML頁面元素組成的基本框架 基于HTML的DOM架構(gòu) DOM操作 1 獲取節(jié)點主要方法getElementById 用于元素id名getElementsByTagName 用于XHTML標(biāo)記名 如input 返回數(shù)組類型2 節(jié)點屬性處理格式 元素結(jié)點 屬性名稱獲取屬性格式 document getElementById 元素id 屬性名獲取屬性例子 document getElementById div1 innerHTML設(shè)置屬性格式 document getElementById 元素id 屬性名 屬性值 設(shè)置屬性例子 document getElementById div1 innerHTML 你好 varobj document getElementById image1 obj src 1 jpg 窗口 window 對象 window對象對應(yīng)著Web瀏覽器的窗口 使用它可以直接對瀏覽器窗口進行操作 window對象提供的主要功能有 1 系統(tǒng)提示框window alert用于顯示消息提示框用法 window alert 字符串 2 狀態(tài)欄控制瀏覽器狀態(tài)的顯示信息可以通過window status屬性直接進行修改 用法 window status 字符串 3 定時操作 定時操作 定時操作通常有兩種使用目的 一種是周期性地執(zhí)行腳本 例如在頁面上顯示時鐘 需要每隔一秒鐘更新一次 另一種則是將某個操作延時一段時間執(zhí)行 例如某個特別耗時的操作 可以使用window setTimeout函數(shù)使其延時執(zhí)行 而后面的腳本可以繼續(xù)運行不受影響 1 window setInterval和window clearInterval setInterval函數(shù)用于設(shè)置定時器 每隔一段時間執(zhí)行指定的代碼 用法 timer window setInterval code interval clearInterval函數(shù)用于清除setInterval函數(shù)設(shè)置的定時器 用法 window clearInterval timer 2 window setTimeout和window clearTimeout setTimeout函數(shù)用于設(shè)置定時器 在一段時間之后執(zhí)行指定的代碼 用法 timer window setTimeout code time clearTimeout函數(shù)用于清除setTimeout函數(shù)設(shè)置的定時器 用法 window clearTimeout timer 任務(wù)4 2為新聞首頁狀態(tài)欄添加走馬燈效果 知識目標(biāo) 1