javascript第一課

時間 2019-11-18

原文原文鏈接

JavaScriptjavascript

一個完整的JavaScript實現由如下三個不一樣的部分組成html

ECMAScript(ECMA歐洲計算機製造商協會)：規定了這門語言的語法，類型，語句，關鍵字，保留字，操做符，對象等。java

Dom：（Document Object Model）文檔對象模型，DOM把整個頁面映射爲一個多層次的節點結構。HTML頁面中的每個組成部分都是某種類型的節點。好比下面的HTML頁面。chrome

<html>
<head>
<title></title>
</head>
<body></body>
</html>

BOM：（Brower Object Model）瀏覽器對象模型。通過BOM能夠實現：數組

彈出新瀏覽器窗口的功能
移動，縮放，和關閉瀏覽器窗口的功能
提供瀏覽器的詳細信息
提供用戶顯示器分辨率詳細信息等

BOM瀏覽器

BOM下5大對象服務器

Window，location，navigator，screen，historycookie

Window(窗體信息)app

Window 對象的屬性框架

屬性	描述	IE	F	O
closed	返回窗口是否已被關閉。	4	1	9
defaultStatus	設置或返回窗口狀態欄中的默認文本。	4	No	9
document	對 Document 對象的只讀引用。請參閱 Document 對象。	4	1	9
history	對 History 對象的只讀引用。請參數 History 對象。	4	1	9
innerheight	返回窗口的文檔顯示區的高度。	No	No	No
innerwidth	返回窗口的文檔顯示區的寬度。	No	No	No
length	設置或返回窗口中的框架數量。	4	1	9
location	用於窗口或框架的 Location 對象。請參閱 Location 對象。	4	1	9
name	設置或返回窗口的名稱。	4	1	9
Navigator	對 Navigator 對象的只讀引用。請參數 Navigator 對象。	4	1	9
opener	返回對建立此窗口的窗口的引用。	4	1	9
outerheight	返回窗口的外部高度。	No	No	No
outerwidth	返回窗口的外部寬度。	No	No	No
pageXOffset	設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。	No	No	No
pageYOffset	設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。	No	No	No
parent	返回父窗口。	4	1	9
Screen	對 Screen 對象的只讀引用。請參數 Screen 對象。	4	1	9
self	返回對當前窗口的引用。等價於 Window 屬性。	4	1	9
status	設置窗口狀態欄的文本。	4	No	9
top	返回最頂層的先輩窗口。	4	1	9
window	window 屬性等價於 self 屬性，它包含了對窗口自身的引用。	4	1	9
screenLeft screenTop screenX screenY	只讀整數。聲明瞭窗口的左上角在屏幕上的的 x 座標和 y 座標。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。	4	1	9

Window 對象的方法

方法	描述	IE	F	O
alert()	顯示帶有一段消息和一個確認按鈕的警告框。	4	1	9
blur()	把鍵盤焦點從頂層窗口移開。	4	1	9
clearInterval()	取消由 setInterval() 設置的 timeout。	4	1	9
clearTimeout()	取消由 setTimeout() 方法設置的 timeout。	4	1	9
close()	關閉瀏覽器窗口。	4	1	9
confirm()	顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。	4	1	9
createPopup()	建立一個 pop-up 窗口。	4	No	No
focus()	把鍵盤焦點給予一個窗口。	4	1	9
moveBy()	可相對窗口的當前座標把它移動指定的像素。	4	1	9
moveTo()	把窗口的左上角移動到一個指定的座標。	4	1	9
open()	打開一個新的瀏覽器窗口或查找一個已命名的窗口。	4	1	9
print()	打印當前窗口的內容。	5	1	9
prompt()	顯示可提示用戶輸入的對話框。	4	1	9
resizeBy()	按照指定的像素調整窗口的大小。	4	1	9
resizeTo()	把窗口的大小調整到指定的寬度和高度。	4	1.5	9
scrollBy()	按照指定的像素值來滾動內容。	4	1	9
scrollTo()	把內容滾動到指定的座標。	4	1	9
setInterval()	按照指定的週期（以毫秒計）來調用函數或計算表達式。	4	1	9
setTimeout()	在指定的毫秒數後調用函數或計算表達式。	4	1	9

Window 對象的描述

Window 對象表示一個瀏覽器窗口或一個框架。在客戶端 JavaScript 中，Window 對象是全局對象，全部的表達式都在當前的環境中計算。也就是說，要引用當前窗口根本不須要特殊的語法，能夠把那個窗口的屬性做爲全局變量來使用。例如，能夠只寫 document，而沒必要寫 window.document。

一樣，能夠把當前窗口對象的方法看成函數來使用，如只寫 alert()，而沒必要寫 Window.alert()。

除了上面列出的屬性和方法，Windos 對象還實現了核心 JavaScript 所定義的全部全局屬性和方法。

Window 對象的 window 屬性和 self 屬性引用的都是它本身。當你想明確地引用當前窗口，而不只僅是隱式地引用它時，可使用這兩個屬性。除了這兩個屬性以外，parent 屬性、top 屬性以及 frame[] 數組都引用了與當前 Window 對象相關的其餘 Window 對象。

要引用窗口中的一個框架，可使用以下語法：

frame[i] //當前窗口的框架

self.frame[i] //當前窗口的框架

w.frame[i] //窗口 w 的框架

要引用一個框架的父窗口（或父框架），可使用下面的語法：

parent //當前窗口的父窗口

self.parent //當前窗口的父窗口

w.parent //窗口 w 的父窗口

要從頂層窗口含有的任何一個框架中引用它，可使用以下語法：

top //當前框架的頂層窗口

self.top //當前框架的頂層窗口

f.top //框架 f 的頂層窗口

新的頂層瀏覽器窗口由方法 Window.open() 建立。當調用該方法時，應把 open() 調用的返回值存儲在一個變量中，而後使用那個變量來引用新窗口。新窗口的 opener 屬性反過來引用了打開它的那個窗口。

通常來講，Window 對象的方法都是對瀏覽器窗口或框架進行某種操做。而 alert() 方法、confirm() 方法和 prompt 方法則不一樣，它們經過簡單的對話框與用戶進行交互。

窗口關係及框架

Collection	Description	IE	F	O
frames[]	返回窗口中全部命名的框架。該集合是 Window 對象的數組，每一個 Window 對象在窗口中含有一個框架或 <iframe>。屬性 frames.length 存放數組 frames[] 中含有的元素個數。注意，frames[] 數組中引用的框架可能還包括框架，它們本身也具備 frames[] 數組。	4	1	9

建立一個框架集，其中一個框架居上，兩個框架居下，能夠經過window.frames[0]或者window.frames["topFrame"]來引用上方的框架，可是，最好是經過top而不是window來引用這些框架。top對象始終指向最高最外層的框架，也就是瀏覽器窗口，使用top能夠確保在一個框架中正確訪問另外一個框架，由於在一個框架中編寫的任何代碼來講，其中的window對象指向的都是那個框架的特定實例，而非最高層的框架。

於top相對的另外一個window對象是parent。Parent對象始終指向當前框架的直接上層框架。

<head>
<title>Frame例子</title>
</head>
<frameset rows="160,*">
<frame src="/Lesson/frame/up.html" name="top">  </frame>
<frameset cols="50,50">
<frame  src="/Lesson/frame/down_left.html" name="leftFrame">  </frame>
<frame  src="/Lesson/frame/down_right.html" name="rightFrame">  </frame>
</frameset>
</frameset>

訪問方式

window.frames[0]

window.frames["topFrame"]

top.frames[0]

top.frames["topFrame"]

frames[0]

frames["topFrame"]

窗口大小

在IE9+,Firefox，Safari，Opera和chrome均提供了4個屬性：

innerWidth，innerHeight，outerWidth和outerHeight。其中innerWidth於innerHeight表示頁面尺寸的寬度高度，而outerWidth於outerHeight表示瀏覽器窗口自己的尺寸。

IE9,Firefox，Safari，Opera和chrome中document.documentElement.clientWidth和document.documentElement.clientHeight同樣能夠取得頁面窗口的信息。

間歇調用和超時調用

setTimeout(code,time);取消:clearTimeout

setInterval(code,time);取消:clearInterval

第一個參數能夠是一個包含JavaScript代碼的字符串,也能夠是一個函數,第二參數是表示等待多長時間的毫秒數.

setTimeout是到指定時間就執行一次code,接下來就再也不執行

setInterval是每隔指定時間就執行一次code.

系統對話框

瀏覽器通過alert(),confirm()和prompt()方法能夠調用系統對話框向用戶顯示消息.

location(跳轉頁面等)

Location 對象其實是 JavaScript 對象，而不是 HTML DOM 對象。

Location 對象是由 JavaScript runtime engine 自動建立的，包含有關當前 URL 的信息。

例子：把用戶帶到一個新的地址

Location 對象是 Window 對象的一個部分，可經過 window.location 屬性來訪問。

有關 Location 對象的詳細描述。

IE: Internet Explorer, F: Firefox, O: Opera.

Location 對象的屬性

屬性	描述	IE	F	O
hash	設置或返回從井號 (#) 開始的 URL（錨）。	4	1	9
host	設置或返回主機名和當前 URL 的端口號。	4	1	9
hostname	設置或返回當前 URL 的主機名。	4	1	9
href	設置或返回完整的 URL。	4	1	9
pathname	設置或返回當前 URL 的路徑部分。	4	1	9
port	設置或返回當前 URL 的端口號。	4	1	9
protocol	設置或返回當前 URL 的協議。	4	1	9
search	設置或返回從問號 (?) 開始的 URL（查詢部分）。	4	1	9

Location 對象的方法

方法	描述	IE	F	O
assign()	加載新的文檔。	4	1	9
reload()	從新加載當前文檔。	4	1	9
replace()	用新的文檔替換當前文檔。	4	1	9

Location 對象的描述

Location 對象存儲在 Window 對象的 Location 屬性中，表示那個窗口中當前顯示的文檔的 Web 地址。它的 href 屬性存放的是文檔的完整 URL，其餘屬性則分別描述了 URL 的各個部分。這些屬性與 Anchor 對象（或 Area 對象）的 URL 屬性很是類似。當一個 Location 對象被轉換成字符串，href 屬性的值被返回。這意味着你可使用表達式 location 來替代 location.href。

不過 Anchor 對象表示的是文檔中的超連接，Location 對象表示的倒是瀏覽器當前顯示的文檔的 URL（或位置）。可是 Location 對象所能作的遠遠不止這些，它還能控制瀏覽器顯示的文檔的位置。若是把一個含有 URL 的字符串賦予 Location 對象或它的 href 屬性，瀏覽器就會把新的 URL 所指的文檔裝載進來，並顯示出來。

除了設置 location 或 location.href 用完整的 URL 替換當前的 URL 以外，還能夠修改部分 URL，只須要給 Location 對象的其餘屬性賦值便可。這樣作就會建立新的 URL，其中的一部分與原來的 URL 不一樣，瀏覽器會將它裝載並顯示出來。例如，假設設置了Location對象的 hash 屬性，那麼瀏覽器就會轉移到當前文檔中的一個指定的位置。一樣，若是設置了 search 屬性，那麼瀏覽器就會從新裝載附加了新的查詢字符串的 URL。

除了 URL 屬性外，Location 對象的 reload() 方法能夠從新裝載當前文檔，replace() 能夠裝載一個新文檔而無須爲它建立一個新的歷史記錄，也就是說，在瀏覽器的歷史列表中，新文檔將替換當前文檔。

使用location對象能夠瀏覽器的位置,最經常使用的是設置location.href屬性.

location.href="http://net2005";

使用location.href會在瀏覽器的歷史記錄中生成一條新紀錄,所以能夠通過單擊'後退'按鈕導航到前一個頁面,若是要禁止這種行為,可使用replace()方法.該方法只接受一個參數:到導航到的url.

使用location.reload()刷新頁面,若是調用reload()時不傳遞任何參數,頁面就會以最有效的方式加載,意思就是若是頁面自上次請求以來並沒有改變過,頁面就會從瀏覽器緩存中從新加載,若是要強制從服務器從新加載,則須要傳遞參數true,即location.reload(true);

navagator(檢測瀏覽器信息)

Navigator 對象其實是一個 JavaScript 對象,而不是 HTML DOM 對象。

Navigator 對象是由 JavaScript runtime engine 自動建立的，包含有關客戶機瀏覽器的信息。

IE: Internet Explorer, F: Firefox, O: Opera.

Navigator 對象的集合

集合

描述

plugins[]

返回對文檔中全部嵌入式對象的引用。

該集合是一個 Plugin 對象的數組，其中的元素表明瀏覽器已經安裝的插件。Plug-in 對象提供的是有關插件的信息，其中包括它所支持的 MIME 類型的列表。

雖然 plugins[] 數組是由 IE 4 定義的，可是在 IE 4 中它卻老是空的，由於 IE 4 不支持插件和 Plugin 對象。

Navigator 對象的屬性

屬性	描述	IE	F	O
appCodeName	返回瀏覽器的代碼名。	4	1	9
appMinorVersion	返回瀏覽器的次級版本。	4	No	No
appName	返回瀏覽器的名稱。	4	1	9
appVersion	返回瀏覽器的平臺和版本信息。	4	1	9
browserLanguage	返回當前瀏覽器的語言。	4	No	9
cookieEnabled	返回指明瀏覽器中是否啓用 cookie 的布爾值。	4	1	9
cpuClass	返回瀏覽器系統的 CPU 等級。	4	No	No
onLine	返回指明系統是否處於脫機模式的布爾值。	4	No	No
platform	返回運行瀏覽器的操做系統平臺。	4	1	9
systemLanguage	返回 OS 使用的默認語言。	4	No	No
userAgent	返回由客戶機發送服務器的 user-agent 頭部的值。	4	1	9
userLanguage	返回 OS 的天然語言設置。	4	No	9

Navigator 對象的方法

方法	描述	IE	F	O
javaEnabled()	規定瀏覽器是否啓用 Java。	4	1	9
taintEnabled()	規定瀏覽器是否啓用數據污點 (data tainting)。	4	1	9

navagator現在已經成為識別客戶端瀏覽器的事實標準,全部支持JavaScript的瀏覽器都支持navigator,下圖是列出了存在於全部瀏覽器中的屬性和方法,以及支持它們的瀏覽器版本.

檢測插件

檢測瀏覽器中是否安裝了特定的插件，可使用plugins數組來達到這個目的。

Screen(檢測主機信息)

Screen 對象

Screen 對象其實是 JavaScript 對象，而不是 HTML DOM 對象。

Screen 對象是由 JavaScript runtime engine 自動建立的，包含有關客戶機顯示屏幕的信息。

每一個 Window 對象的 screen 屬性都引用一個 Screen 對象。Screen 對象中存放着有關顯示瀏覽器屏幕的信息。JavaScript 程序將利用這些信息來優化它們的輸出，以達到用戶的顯示要求。例如，一個程序能夠根據顯示器的尺寸選擇使用大圖像仍是使用小圖像，它還能夠根據顯示器的顏色深度選擇使用 16 位色仍是使用 8 位色的圖形。另外，JavaScript 程序還能根據有關屏幕尺寸的信息將新的瀏覽器窗口定位在屏幕中間。

IE: Internet Explorer, F: Firefox, O: Opera.

Screen 對象的屬性

屬性	描述	IE	F	O
availHeight	返回顯示屏幕的高度 (除 Windows 任務欄以外)。	4	1	9
availWidth	返回顯示屏幕的寬度 (除 Windows 任務欄以外)。	4	1	9
bufferDepth	設置或返回在 off-screen bitmap buffer 中調色板的比特深度。	4	No	No
colorDepth	返回目標設備或緩衝器上的調色板的比特深度。	4	1	9
deviceXDPI	返回顯示屏幕的每英寸水平點數。	6	No	No
deviceYDPI	返回顯示屏幕的每英寸垂直點數。	6	No	No
fontSmoothingEnabled	返回用戶是否在顯示控制面板中啓用了字體平滑。	4	No	No
height	返回顯示屏幕的高度。	4	1	9
logicalXDPI	返回顯示屏幕每英寸的水平方向的常規點數。	6	No	No
logicalYDPI	返回顯示屏幕每英寸的垂直方向的常規點數。	6	No	No
pixelDepth	返回顯示屏幕的顏色分辨率（比特每像素）。	No	1	9
updateInterval	設置或返回屏幕的刷新率。	4	No	No
width	返回顯示器屏幕的寬度。	4	1	9

Scrren對象基本上只用來代表客戶端的能力，其中包括瀏覽器窗口外部的顯示器的信息，如像素寬度和高度等。【大部分情況下都用不到】

History(上一步,下一步等)

History 對象其實是 JavaScript 對象，而不是 HTML DOM 對象。

History 對象是由 JavaScript runtime engine 自動建立的，由一系列的 URL 組成。這些 URL 是用戶在一個瀏覽器窗口內已訪問的 URL 。

History 對象最初設計來表示窗口的瀏覽歷史。但出於隱私方面的緣由，History 對象再也不容許腳本訪問已經訪問過的實際 URL。惟一保持使用的功能只有 back()、forward() 和 go() 方法。

History 對象是 window 對象的一部分，可經過 window.history 屬性對其進行訪問。

IE: Internet Explorer, F: Firefox, O: Opera.

History 對象的屬性

屬性	描述	IE	F	O
length	返回瀏覽器歷史列表中的 URL 數量	4	1	9

History 對象的方法

方法	描述	IE	F	O
back()	加載 history 列表中的前一個 URL	4	1	9
forward()	加載 history 列表中的下一個 URL	4	1	9
go()	加載 history 列表中的某個具體頁面	4	1	9

history保存着用戶的歷史記錄，每個瀏覽器窗口，每個標籤頁，乃至每個框架，都有本身的history對象與特定的window對象關聯。

使用go()方法能夠在用戶的歷史記錄中任意跳轉，該方法只接受一個參數，負數表示向後跳轉，整數表示向前跳轉。

刷新頁面

history.go(0);

location.href=當前瀏覽頁;

location.reload(true);

location.replace(當前瀏覽頁);

Document 對象

Document 對象表明整個 HTML 文檔，可用來訪問頁面中的全部元素。

Document 對象是 Window 對象的一個部分，可經過 window.document 屬性來訪問。

有關 Document 對象的詳細描述。

IE: Internet Explorer, F: Firefox, O: Opera, W3C: World Wide Web Consortium (Internet 標準).

Document 對象的集合

集合	描述	IE	F	O	W3C
all[]	提供對文檔中全部 HTML 元素的訪問。	4	1	9	Yes
anchors[]	返回對文檔中全部 Anchor 對象的引用。	4	1	9	Yes
applets	返回對文檔中全部 Applet 對象的引用。	-	-	-	-
forms[]	返回對文檔中全部 Form 對象引用。	4	1	9	Yes
images[]	返回對文檔中全部 Image 對象引用。	4	1	9	Yes
links[]	返回對文檔中全部 Area 和 Link 對象引用。	4	1	9	Yes

Document 對象的屬性

屬性	描述	IE	F	O	W3C
body	提供對 <body> 元素的直接訪問。對於定義了框架集的文檔，該屬性引用最外層的 <frameset>。
cookie	設置或返回與當前文檔有關的全部 cookie。	4	1	9	Yes
domain	返回當前文檔的域名。	4	1	9	Yes
lastModified	返回文檔被最後修改的日期和時間。	4	1	No	No
referrer	返回載入當前文檔的文檔的 URL。	4	1	9	Yes
title	返回當前文檔的標題。	4	1	9	Yes
URL	返回當前文檔的 URL。	4	1	9	Yes

Document 對象的方法

方法	描述	IE	F	O	W3C
close()	關閉用 document.open() 方法打開的輸出流，並顯示選定的數據。	4	1	9	Yes
getElementById()	返回對擁有指定 id 的第一個對象的引用。	5	1	9	Yes
getElementsByName()	返回帶有指定名稱的對象集合。	5	1	9	Yes
getElementsByTagName()	返回帶有指定標籤名的對象集合。	5	1	9	Yes
open()	打開一個流，以收集來自任何 document.write() 或 document.writeln() 方法的輸出。	4	1	9	Yes
write()	向文檔寫 HTML 表達式或 JavaScript 代碼。	4	1	9	Yes
writeln()	等同於 write() 方法，不一樣的是在每一個表達式以後寫一個換行符。	4	1	9	Yes