《JavaScript程序設(shè)計(jì)》課件-項(xiàng)目6-3 BOM常見對(duì)象

JavaScript程序設(shè)計(jì)20211課程導(dǎo)入2任務(wù)導(dǎo)入3知識(shí)講解4任務(wù)實(shí)施項(xiàng)目6-3BOM常見對(duì)象5任務(wù)總結(jié)知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)BOM的構(gòu)成？常用的window對(duì)象事件有哪些？提問知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)任務(wù)重難點(diǎn)完成獲取URL參數(shù)案例重點(diǎn)：location對(duì)象navigator對(duì)象history對(duì)象知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)location對(duì)象1.location對(duì)象1.1

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

location常用屬性location常用屬性：屬性說明location.search返回（或設(shè)置）當(dāng)前URL的查詢部分（“?”之后的部分）location.hash返回一個(gè)URL的錨部分（從“#”開始的部分）location.host返回一個(gè)URL的主機(jī)名和端口location.hostname返回URL的主機(jī)名location.href返回完整的URLlocation.pathname返回URL的路徑名location.port返回一個(gè)URL服務(wù)器使用的端口號(hào)tocol返回一個(gè)URL協(xié)議知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)location對(duì)象

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

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

action="index.html">

用戶名：

<input

type="text"

name="uname">

<input

type="submit"

value="登錄"></form>知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)location對(duì)象創(chuàng)建index.html首頁：console.log(location.search);

//

結(jié)果為：?uname=andy

//

1.去掉search中的問號(hào)“?”

var

params

=

location.search.substr(1);

console.log(params);//

結(jié)果為：uname=andy

//

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

var

arr

=

params.split('=');

console.log(arr);

//

結(jié)果為：["uname",

"andy"]

var

div

=

document.querySelector('div');

//

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

div.innerHTML

=

arr[1]

+

'歡迎您';知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)location對(duì)象

1.3

location的常用方法常用方法：方法說明assign()載入一個(gè)新的文檔reload()重新加載當(dāng)前文檔replace()用新的文檔替換當(dāng)前文檔，覆蓋瀏覽器當(dāng)前記錄知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)navigator對(duì)象2.navigator對(duì)象2.1

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

2.2

常用方法常用方法javaEnabled()：指定是否在瀏覽器中啟用Java。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)history對(duì)象3.history對(duì)象

3.1

常用屬性history.length屬性：返回歷史列表中的網(wǎng)址數(shù)。知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)history對(duì)象

3.2

常用方法常用方法：方法說明back()加載history列表中的前一個(gè)URLforward()加載history列表中的下一個(gè)URLgo()加載history列表中的某個(gè)具體頁面知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總結(jié)完成獲取URL參數(shù)案例知識(shí)回顧任務(wù)導(dǎo)入知識(shí)講解任務(wù)實(shí)施任務(wù)總