javascript第一课

浏览数：16 / 时间：2015年06月08日

JavaScript

一個完整的JavaScript實現由以下三個不同的部分組成

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

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

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

BOM：（Brower Object Model）瀏覽器對象模型。通過BOM可以實現：

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

BOM

BOM下5大對象

Window，location，navigator，screen，history

Window(窗体信息)

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