一，對話框

一，對話框的分類

警告框 alert, 常用。
詢問框返回提示框中的值。
確認框返回true/false.

1，警告框

alert(‘警告的內容’);

2，詢問框

 var name = prompt("您沒有登錄，請輸入用戶名：");
  alert("your name: " + name);

3，確認框

1.               var isLogin = confirm("您確認登錄嗎？");
2.                if (isLogin) {
3.                    alert("您同意登錄");
4.                }
5.                else {
6.                    alert("您不同意登錄");
7.                   // alert("您不同意登錄2");
8.                }

二，DOM對象

HTML DOM 樹

通過可編程的對象模型，JavaScript 獲得了足夠的能力來創建動態的 HTML。

簡單的說，就是文檔內部的一些”對話“

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

一，DOM Event 對象

Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。

事件通常與函數結合使用，函數不會在事件發生前被執行！

1，事件句柄　(Event Handlers) 也就是事件觸發源

HTML 4.0 的新特性之一是能夠使 HTML 事件觸發瀏覽器中的行爲，比如當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表，可將之插入 HTML 標籤以定義事件的行爲。

2，鼠標 / 鍵盤屬性

3，IE 屬性

除了上面的鼠標/事件屬性，IE 瀏覽器還支持下面的屬性：【基本不怎麼用，IE是個奇葩】

4，相關實例

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
  {
  alert("您點擊了鼠標右鍵！")
  }
else if(btnNum==0)
  {
  alert("您點擊了鼠標左鍵！")
  }
else if(btnNum==1)
  {
  alert("您點擊了鼠標中鍵！");
  }
else
  {
  alert("您點擊了" + btnNum+ "號鍵，我不能確定它的名稱。");
  }
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>請在文檔中點擊鼠標。一個消息框會提示出您點擊了哪個鼠標按鍵。</p>
</body>
</html>

得到客戶端的座標

<html>
<head>
<script type="text/javascript">
function show_coords(event)
{
x=event.clientX
y=event.clientY
alert("X 座標: " + x + ", Y 座標: " + y)
}
</script>
</head>
<body onmousedown="show_coords(event)">
<p>請在文檔中點擊。一個消息框會提示出鼠標指針的 x 和 y 座標。</p>
</body>
</html>

得到鍵盤的事件

<html>
<head>
<script type="text/javascript">
function whichButton(event)
{
alert(event.keyCode)
}
</script>
</head>
<body onkeyup="whichButton(event)">
<p><b>註釋：</b>在測試這個例子時，要確保右側的框架獲得了焦點。</p>
<p>在鍵盤上按一個鍵。消息框會提示出該按鍵的 unicode。</p>
</body>
</html>

得到屏幕的座標

<html>
<head>
<script type="text/javascript">
function coordinates(event)
{
x=event.screenX
y=event.screenY
alert("X=" + x + " Y=" + y)
}
</script>
</head>
<body onmousedown="coordinates(event)">
<p>
在文檔中點擊某個位置。消息框會提示出指針相對於屏幕的 x 和 y 座標。
</p>
</body>
</html>

二，DOM Document 對象【window.document.】

每個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。

Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。

提示: Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。

Document 對象集合

Document 對象屬性

Document 對象方法

Document 對象描述

HTMLDocument 接口對 DOM Document 接口進行了擴展，定義 HTML 專用的屬性和方法。

很多屬性和方法都是 HTMLCollection 對象（實際上是可以用數組或名稱索引的只讀數組），其中保存了對錨、表單、鏈接以及其他可腳本元素的引用。

這些集合屬性都源自於 0 級 DOM。它們已經被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因爲他們很方便。

write() 方法值得注意，在文檔載入和解析的時候，它允許一個腳本向文檔中插入動態生成的內容。

注意，在 1 級 DOM 中，HTMLDocument 定義了一個名爲 getElementById() 的非常有用的方法。在 2 級 DOM 中，該方法已經被轉移到了 Document 接口，它現在由 HTMLDocument 繼承而不是由它定義了。

以上說明的使用方法是document.xxxx 或者 window.document.xxx

三，DOM Element 對象【元素對象】

在 HTML DOM 中，Element 對象表示 HTML 元素。

Element 對象可以擁有類型爲元素節點、文本節點、註釋節點的子節點。

NodeList 對象表示節點列表，比如 HTML 元素的子節點集合。

四，DOM Attribute 對象【訪問元素中的屬性，先得到元素，再根據元素去訪問屬性】

在 HTML DOM （文檔對象模型）中，每個部分都是節點：

文檔本身是文檔節點

所有 HTML 元素是元素節點

所有 HTML 屬性是屬性節點

HTML 元素內的文本是文本節點

註釋是註釋節點cookie

注意，要訪問屬性必須是document文檔加載完成才能訪問，也就是script代碼必須寫到body之後

屬性

document.getElementsByTagName(“button”)[0].attributes[0].name;

三，BOM對象

前言

定義：瀏覽器對象模型（Browser Object Model）尚無正式標準。
作用：瀏覽器對象模型 (BOM) 使 JavaScript 有能力與瀏覽器“對話”。

由於現代瀏覽器已經（幾乎）實現了 JavaScript 交互性方面的相同方法和屬性，因此常被認爲是 BOM 的方法和屬性。

以下是所有的BOM對象

Window【掌握】
Screen【掌握】
Location【掌握】
History【掌握】
Navigator
PopupAlert
Timing
Cookies【熟悉】

一，Window

注意：Window 和window不是同一個東西

1.window.name=1;  
2.console.log(Window.name);//Window  
3.console.log(window.name);//1  
4.console.log(window instanceof  Window);//true

從上面的代碼可以看出來Window並不等於window 通過instanceof進行判斷window是Window的實例

1，所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。

所有 JavaScript 全局對象、函數以及變量均自動成爲 window 對象的成員。
全局變量是 window 對象的屬性。
全局函數是 window 對象的方法。
甚至 HTML DOM 的 document 也是 window 對象的屬性之一：

window.document.getElementById(“header”);

與下面的代碼相同：

document.getElementById(“header”);

2，Window 尺寸

有三種方法能夠確定瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。

對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 瀏覽器窗口的內部高度

window.innerWidth - 瀏覽器窗口的內部寬度

對於 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight

document.documentElement.clientWidth

或者

document.body.clientHeight

document.body.clientWidth

實用的 JavaScript 方案（涵蓋所有瀏覽器）：

1.<!DOCTYPE html>
2.<html>
3.<body>
4.
5.<p id="demo"></p>
6.
7.<script>
8.var w=window.innerWidth
9.|| document.documentElement.clientWidth
10.|| document.body.clientWidth;
11.
12.var h=window.innerHeight
13.|| document.documentElement.clientHeight
14.|| document.body.clientHeight;
15.
16.x=document.getElementById("demo");
17.x.innerHTML="瀏覽器的內部窗口寬度：" + w + "，高度：" + h + "。"
18.</script>
19.
20.</body>
21.</html>

其他 Window 方法

一些其他方法：

window.open(‘http://www.baidu.com’) - 打開新窗口

window.close() - 關閉當前窗口只能關閉使用window.open的窗口

window.moveTo(x,y) - 移動當前窗口

window.resizeTo(width,height) - 調整當前窗口的尺寸

window.setInterval(code,millisec[,“lang”])

1.<html>
2.<body>
3.
4.<input type="text" id="clock" size="35" />
5.<script language=javascript>
6.var int=self.setInterval("clock()",50)
7.function clock()
8.  {
9.  var t=new Date()
10.  document.getElementById("clock").value=t
11.  }
12.</script>
13.<button onclick="int=window.clearInterval(int)">Stop interval</button>
14.
15.</body>
16.</html>

window.setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。

setTimeout() 只執行 code 一次。如果要多次調用，請使用 setInterval() 或者讓 code 自身再次調用 setTimeout()。

一個時鐘

1.<!DOCTYPE html>
2.<html>
3.    <head>
4.        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5.        <title>Untitled Document</title>
6.        <script>
7.            function showtime(){
8.                var d=new Date();
9.                var year=d.getFullYear();
10.                var month=d.getMonth();
11.                var day=d.getDay();
12.                var hours=d.getHours();
13.                var min=d.getMinutes();
14.                var sec=d.getSeconds();
15.                var misec=d.getMilliseconds();
16.                var str=year+"-"+month+"-"+day+" "+hours+":"+min+":"+sec+":"+misec;
17.                var mytime=window.document.getElementById("mytime");
18.                mytime.innerHTML=str;
19.                window.setTimeout('showtime()',1000);
20.            }
21.        </script>
22.    </head>
23.    <body onload="showtime()">
24.       	<div id="mytime" style="border: 2px solid; border-color: green;color: red;">
25.       	</div>
26.    </body>
27.
28.</html>

二，Screen

window.screen 對象包含有關用戶屏幕的信息。

window.screen 對象在編寫時可以不使用 window 這個前綴。

一些屬性：

screen.availWidth - 可用的屏幕寬度

screen.availHeight - 可用的屏幕高度

可以寬度 screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如窗口任務欄。

可用高度 screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如窗口任務欄。

<script>
document.write("可用寬度：" + screen.availWidth);
document.write("可用高度：" + screen.availHeight);
</script>

三，Location

window.location 對象在編寫時可不使用 window 這個前綴。

對象屬性

對象方法

window.location.replace(“http://www.w3school.com.cn”)

window.location.assign(“http://www.w3school.com.cn”)

四，History

History 對象包含用戶（在瀏覽器窗口中）訪問過的 URL。

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

註釋：沒有應用於 History 對象的公開標準，不過所有瀏覽器都支持該對象。

例子

下面一行代碼執行的操作與單擊後退按鈕執行的操作一樣：

history.back()

下面一行代碼執行的操作與單擊兩次後退按鈕執行的操作一樣：

history.go(-2)

五，Cookies【熟悉】

1，創建Cookie

JavaScript 可以使用 document.cookie 屬性來創建、讀取、及刪除 cookie。

JavaScript 中，創建 cookie 如下所示：

document.cookie=“username=Leijh”;

您還可以爲 cookie 添加一個過期時間（以 UTC 或 GMT 時間）。默認情況下，cookie 在瀏覽器關閉時刪除：document.cookie=“username=Leijh; expires=Thu, 18 Dec 2017 12:00:00 GMT”;

您可以使用 path 參數告訴瀏覽器 cookie 的路徑。默認情況下，cookie 屬於當前頁面。

document.cookie=“username=Leijh; expires=Thu, 18 Dec 2017 12:00:00 GMT; path=/”;

2,讀取 Cookie

在 JavaScript 中, 可以使用以下代碼來讀取 cookie：

var x = document.cookie;

注意：document.cookie 將以字符串的方式返回所有的 cookie，類型格式： cookie1=value; cookie2=value; cookie3=value;

3，修改 Cookie

在 JavaScript 中，修改 cookie 類似於創建 cookie，如下所示：

document.cookie=“username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/”;

舊的 cookie 將被覆蓋。

4，刪除 Cookie

刪除 cookie 非常簡單。您只需要設置 expires 參數爲以前的時間即可，如下所示，設置爲 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;

注意，當您刪除時不必指定 cookie 的值。

5，完整實例

1.<!DOCTYPE html>
2.<html>
3.<head>
4.<meta charset="utf-8">
5.<title>Cookies的使用</title>
6.</head>
7.<head>
8.<script>
9.function setCookie(cname,cvalue,exdays){
10.	var d = new Date();
11.	d.setTime(d.getTime()+(exdays*24*60*60*1000));
12.	var expires = "expires="+d.toGMTString();
13.	document.cookie = cname+"="+cvalue+"; "+expires;
14.}
15.function getCookie(cname){
16.	var name = cname + "=";
17.	var ca = document.cookie.split(';');
18.	for(var i=0; i<ca.length; i++) {
19.		var c = ca[i].trim();
20.		if (c.indexOf(name)==0) return c.substring(name.length,c.length);
21.	}
22.	return "";
23.}
24.function checkCookie(){
25.	var user=getCookie("username");
26.	if (user!=""){
27.		alert("Welcome again " + user);
28.	}
29.	else {
30.		user = prompt("Please enter your name:","");
31.  		if (user!="" && user!=null){
32.    		setCookie("username",user,30);
33.    	}
34.	}
35.}
36.</script>
37.</head>
38.	
39.<body onload="checkCookie()"></body>
40.	
41.</html>

四，JavaScript對象

一，Date

http://www.w3school.com.cn/jsref/jsref_obj_date.asp

二，Math

http://www.w3school.com.cn/jsref/jsref_obj_math.asp

三，自定義對象

1.<script type="text/javascript">  
2.    function Person(name,age){  
3.        this.name=name;  
4.        this.age=age;  
5.    }  
6.    Person.prototype.sayHello=function(){  
7.        alert("使用原型得到Name："+this.name);  
8.    }  
9.    var per=new Person("馬小倩",21);  
10.    per.sayHello(); //輸出：使用原型得到Name:馬小倩  
11.
12.      
13.    function Student(){}  
14.    Student.prototype=new Person("洪如彤",21);  
15.    var stu=new Student();  
16.    Student.prototype.grade=5;  
17.    Student.prototype.intr=function(){  
18.        alert(this.grade);  
19.    }  
20.    stu.sayHello();//輸出：使用原型得到Name:洪如彤  
21.    stu.intr();//輸出：5  
22.</script>

JavaScript詳解（7.對話框和DOM、BOM、JavaScript對象）

文章目錄