《JavaScript程序設計》課件-項目6 BOM操作_第1頁
《JavaScript程序設計》課件-項目6 BOM操作_第2頁
《JavaScript程序設計》課件-項目6 BOM操作_第3頁
《JavaScript程序設計》課件-項目6 BOM操作_第4頁
《JavaScript程序設計》課件-項目6 BOM操作_第5頁
已閱讀5頁,還剩26頁未讀 繼續(xù)免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

JavaScript程序設計20211課程導入2任務導入3知識講解4任務實施項目6-1BOM簡介5任務總結知識回顧任務導入知識講解任務實施任務總結什么是事件對象?通過事件對象可以實現(xiàn)哪些操作?提問知識回顧任務導入知識講解任務實施任務總結任務重難點完成3s后自動關閉廣告完成60s內只能發(fā)送一次短信重點:BOM簡介window對象的常見事件定時器知識回顧任務導入知識講解任務實施任務總結BOM簡介1.BOM簡介BOM:瀏覽器對象模型(BrowerObjectModel,BOM)提供了獨立于內容而與瀏覽器窗口進行交互的對象,其核心對象是window。

1.1

什么是BOMDOM是文檔對象模型,把文檔當作一個對象來看待,它的頂級對象是document。BOM是瀏覽器對象模型,是把瀏覽器當做一個對象來看待,它的頂級對象是window。

1.2BOM與DOM的區(qū)別知識回顧任務導入知識講解任務實施任務總結BOM簡介BOM構成:1.3

BOM的構成知識回顧任務導入知識講解任務實施任務總結window對象的常見事件

2.1

窗口加載事件window.onload:是窗口(頁面)加載事件,當文檔內容(包括圖像、腳本文件、CSS文件等)完全加載完成會觸發(fā)該事件,調用該事件對應的事件處理函數(shù)。//方式1window.onload=function(){};//方式2window.addEventListener('load',function(){});window.onload2.window對象的常見事件知識回顧任務導入知識講解任務實施任務總結window對象的常見事件document.DOMContentLoaded:document.DOMContentLoaded加載事件,會在DOM加載完成時觸發(fā),這里所說的加載不包括CSS樣式表、圖片和flash動畫等額外內容的加載。知識回顧任務導入知識講解任務實施任務總結window對象的常見事件

2.2

調整窗口大小事件window.onresize:當調整window窗口大小的時候,就觸發(fā)window.onresize事件,調用事件處理函數(shù)。//方式1window.onresize=function(){};//方式2window.addEventListener('resize',function(){});window.onresize知識回顧任務導入知識講解任務實施任務總結定時器定時器方法如下:方法說明setTimeout()在指定的毫秒數(shù)后調用函數(shù)或執(zhí)行一段代碼setInterval()按照指定的周期(以毫秒計)來調用函數(shù)或執(zhí)行一段代碼clearTimeout()取消由setTimeout()方法設置的定時器clearInterval()取消由setInterval()設置的定時器

3.1

定時器方法3.定時器知識回顧任務導入知識講解任務實施任務總結定時器使用setTimeout()實現(xiàn)3秒后自動關閉廣告的效果。案例代碼如下:

【案例】3s后自動關閉廣告

<body>

<script>

var

timer

=

setTimeout(fn,

3000);

function

fn(){console.log('廣告關閉了');}

</script></body>知識回顧任務導入知識講解任務實施任務總結定時器

【案例】60s內只能發(fā)送一次短信

實現(xiàn)思路:在頁面中放一個文本框和一個“發(fā)送”按鈕。在文本框中輸入手機號碼,然后單擊“發(fā)送”按鈕,就可以發(fā)送短信。在按鈕單擊之后,按鈕上的文字會變?yōu)椤斑€剩x秒再次單擊”。知識回顧任務導入知識講解任務實施任務總結定時器實現(xiàn)代碼如下:

var

btn

=

document.querySelector('button');

var

time

=

60;

//

定義剩下的秒數(shù)

btn.addEventListener('click',

function()

{

btn.disabled

=

true;//此處添加timer定時器;

})知識回顧任務導入知識講解任務實施任務總結定時器timer定時器:

var

timer

=

setInterval(function()

{

if

(time

==

0)

{

clearInterval(timer);

btn.disabled

=

false;

btn.innerHTML

=

'發(fā)送';

}

else

{

btn.innerHTML

=

'還剩下'

+

time

+

'秒';

time--;

}

},

1000);知識回顧任務導入知識講解任務實施任務總結完成3s后自動關閉廣告完成60s內只能發(fā)送一次短信知識回顧任務導入知識講解任務實施任務總結總結:本章主要講解了BOM的構成,以及其各屬性的作用。然后通過案例的形式講解了定時器的應用,重點講解了window對象。作業(yè):完成課上兩個案例。1課程導入2任務導入3知識講解4任務實施項目6-1BOM常見對象5任務總結知識回顧任務導入知識講解任務實施任務總結BOM的構成?常用的window對象事件有哪些?提問知識回顧任務導入知識講解任務實施任務總結任務重難點完成獲取URL參數(shù)案例重點:location對象navigator對象history對象知識回顧任務導入知識講解任務實施任務總結location對象1.location對象1.1

URL的組成URL組成:各部分說明protocol網絡協(xié)議,常用的如http,ftp,mailto等host服務器的主機名,如port端口號,可選,省略時使用協(xié)議的默認端口,如http默認端口為80path路徑,如“/web/index.html”query參數(shù),鍵值對的形式,通過“&”符號分隔,如“a=3&b=4”知識回顧任務導入知識講解任務實施任務總結location對象1.2

location常用屬性location常用屬性:屬性說明location.search返回(或設置)當前URL的查詢部分(“?”之后的部分)location.hash返回一個URL的錨部分(從“#”開始的部分)location.host返回一個URL的主機名和端口location.hostname返回URL的主機名location.href返回完整的URLlocation.pathname返回URL的路徑名location.port返回一個URL服務器使用的端口號tocol返回一個URL協(xié)議知識回顧任務導入知識講解任務實施任務總結location對象

【案例】獲取URL參數(shù)

創(chuàng)建login.html登錄頁面:<form

action="index.html">

用戶名:

<input

type="text"

name="uname">

<input

type="submit"

value="登錄"></form>知識回顧任務導入知識講解任務實施任務總結location對象創(chuàng)建index.html首頁:console.log(location.search);

//

結果為:?uname=andy

//

1.去掉search中的問號“?”

var

params

=

location.search.substr(1);

console.log(params);//

結果為:uname=andy

//

2.把字符串分割為數(shù)組

var

arr

=

params.split('=');

console.log(arr);

//

結果為:["uname",

"andy"]

var

div

=

document.querySelector('div');

//

3.把數(shù)據(jù)寫入div中

div.innerHTML

=

arr[1]

+

'歡迎您';知識回顧任務導入知識講解任務實施任務總結location對象

1.3

location的常用方法常用方法:方法說明assign()載入一個新的文檔reload()重新加載當前文檔replace()用新的文檔替換當前文檔,覆蓋瀏覽器當前記錄知識回顧任務導入知識講解任務實施任務總結navigator對象2.navigator對象2.1

常用屬性屬性說明appCodeName返回瀏覽器的內部名稱appName返回瀏覽器的完整名稱appVersion返回瀏覽器的平臺和版本信息cookieEnabled返回指明瀏覽器中是否啟用Cookie的布爾值platform返回運行瀏覽器的操作系統(tǒng)平臺知識回顧任務導入知識講解任務實施任務總結navigator對象

2.2

常用方法常用方法javaEnabled():指定是否在瀏覽器中啟用Java。知識回顧任務導入知識講解任務實施任務總結history對象3.history對象

3.1

常用屬性history.length屬性:返回歷史列表中的網址數(shù)。知識回顧任務導入知識講解任務實施任務總結history對象

3.2

常用方法常用方法:方法說明back()加載history列表中

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現(xiàn)方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論