JavaScript 第三章 DOM編程基礎 使用document對象
JavaScript 第二章 使用window對象
1、技術目標
- window對象的open()方法打開並定製窗口
- Date對象處理日期
- window對象的setInterval()函數設置定時器
- window對象的setTimeout()函數設置延時器
- history、location對象的使用
2、window對象的常用屬性、方法、事件
常用屬性：
| 名稱 | 說明 |
| screen | 有關客戶端的屏幕和顯示性能的信息 |
| history | 有關客戶訪問過的URL的信息 |
| location | 有關當前 URL 的信息 |
常用方法：
| 名稱 | 說明 |
| prompt | 顯示可提示用戶輸入的對話框 |
| alert | 顯示帶有一個提示信息和一個確定按鈕的警示框 |
| confirm | 顯示一個帶有提示信息、確定和取消按鈕的對話框 |
| close | 關閉瀏覽器窗口 |
| open | 打開一個新的瀏覽器窗口，加載給定 URL 所指定的文檔 |
| setTimeout | 在指定的毫秒數後調用函數或計算表達式 |
| setInterval | 按照指定的週期（以毫秒計）來調用函數或表達式 |
常用事件：
| 名稱 | 說明 |
| onload | 一個頁面或一幅圖像完成加載 |
| onmouseover | 鼠標移到某元素之上 |
| onclick | 當用戶單擊某個對象時調用的事件句柄 |
| onkeydown | 某個鍵盤按鍵被按下時 |
| onchange | 域的內容被改 |
3、使用confirm()方法
confirm方法的返回值爲true或者false，當你點"確定"按鈕時返回true，
否則false
示例代碼：
<script language="javascript" type="text/javascript">
var flag = confirm ("確認要刪除此條信息嗎？");
if(flag == true){
alert("刪除成功！");
}else{
alert("你取消了刪除");
}
</script>
4、使用open()方法
open方法可打開一個瀏覽器窗口並在窗口中加載你指定的頁面，語法爲：
window.open("彈出窗口的url","窗口名稱","窗口特徵“)
窗口特徵有如下可選設置：
| 名稱 |
說明 |
| height、width |
窗口文檔顯示區的高度、寬度，以像素計 |
| left、top | 窗口的x座標、y座標，以像素計 |
| toolbar=yes | no |1 | 0 | 是否顯示瀏覽器的工具欄，黙認是yes |
| scrollbars=yes | no |1 | 0 | 是否顯示滾動條，黙認是yes |
| location=yes | no |1 | 0 | 是否顯示地址地段，黙認是yes |
| status=yes | no |1 | 0 | 是否添加狀態欄，黙認是yes |
| menubar=yes | no |1 | 0 | 是否顯示菜單欄，黙認是yes |
| resizable=yes | no |1 | 0 | 窗口是否可調節尺寸，黙認是yes |
| titlebar=yes | no |1 | 0 | 是否顯示標題欄，黙認是yes |
| fullscreen=yes | no |1 | 0 |
是否使用全屏模式顯示瀏覽器，黙認是no，處於全屏模式的窗口必須同時處於劇院模式 |
5、window對象的屬性、方法綜合應用
- 使用winow對象完成如下功能：
- 彈出窗口
- 彈出固定大小且無菜單欄的窗口
- 當前頁面全屏顯示，使用快捷鍵Alt + F4退出全屏
- 彈出確認消息框
- 關閉窗口
示例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>window對象演示例子</title>
<script type="text/javascript">
/*彈出窗口*/
function open_adv(){
window.open("adv.html");
}
/*彈出固定大小窗口，並且無菜單欄等*/
function open_fix_adv(){
window.open("adv.html", "", "height=380,width=320,toolbar=0,scrollbars=0,location=0,status=0,menubar=0,resizable=0");
}
/*全屏顯示*/
function fullscreen(){
window.open("plan.html","","fullscreen=yes");
}
/*彈出確認消息框*/
function confirm_msg(){
if(confirm("你相信自己是最棒的嗎？")){
alert("有信心必定會贏，沒信心一定會輸！");
}
}
/*關閉窗口*/
function close_plan(){
window.close();
}
</script>
</head>
<body>
<form action="" method="post">
<p><input name="open1" type="button" value="彈出窗口"
onclick="open_adv()" /></p>
<p><input name="open2" type="button" value="彈出固定大小窗口，且無菜單欄等"
onclick="open_fix_adv()"/></p>
<p><input name="full" type="button" value="全屏顯示"
onclick="fullscreen()"/></p>
<p><input name="con" type="button" value="打開確認窗口"
onclick="confirm_msg()"/></p>
<p><input name="c" type="button" value="關閉窗口"
onclick="close_plan()"/></p>
</form>
</body>
</html>
6、關於匿名函數
顧名思義，匿名函數就是沒有函數名的函數，其語法如下：
語法1， 直接定義：
(function(){JavaScript代碼;}())
語法1，示例：
<input type="button" value="Test"
onclick="(function(){alert('Test');}()); " />
語法2， 事件處理中使用匿名函數：
事件名 = function(){…};
語法2，示例：
<input id="testId" type="button" value="Test" />
<script type="text/javascript">
document.getElementById("testId").onclick = function(){
alert("Test");
};
</script>
7、window對象的onload事件
onload事件在HTML文檔加載完成後觸發 ，如，
<body onload="事件處理函數();...">...</body>
或者
<script type="text/javascript">
//設置onload事件處理函數
window.onload = function(){
...
};
</script>
8、Date對象
Date 對象存儲的日期爲自 1970年1月1日00:00:00 以來的毫秒數
創建Date對象有如下語法，
語法1： var 對象名 = new Date("日期字符串");
語法1說明：
日期字符串的格式爲，"MM DD, YYYY, hh:mm:ss"，
無日期字符串表示當前日期
語法2： var 對象名 = new Date(毫秒數);
語法2說明：
參數爲自1970年1月1日00:00:00以來的毫秒數
語法3： var 對象名 = new Date(年, 月, 日, 時, 分, 秒, 毫秒);
語法3說明：時、分、秒、毫秒可選
Date對象的常用方法有get開頭的方法和set開頭的方法，
get方法用於獲取日期中的時間信息，set方法用於設置，如下：
Date方法分組 說 明
setXxx 這些方法用於設置時間和日期值
getXxx 這些方法用於獲取時間和日期值
部分get或set方法說明：
| 值(指上表中的Xxx) | 整數 |
| Seconds 和 Minutes | 0 至 59 |
| Hours | 0 至 23 |
| Day | 0 至 6（星期幾） |
| Date | 1 至 31（月份中的天數） |
| Months | 0 至 11（一月至十二月） |
比如：getDay()，返回值爲0 ~ 6，0表示星期天
9、延時器與定時器
設置延時器： var 延時器對象 = setTimeout("函數()", 間隔時間);
延時器說明：
時間間隔的單位是毫秒，在一定的時間間隔後執行函數，執行後
延時器停止執行(只執行1次)，好比是空調的"定時關閉"功能
設置定時器： var 定時器對象 = setInterval("函數()", 間隔時間);
定時器說明：
時間間隔的單位是毫秒，按時間間隔定時執行函數(反覆執行)
關閉定時器或延時器：
clearTimeout(定時器/延時器對象);
10、使用Date對象與定時器製作動態時鐘效果
示例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>時鐘特效</title>
<script type="text/javascript">
function disptime(){
var today = new Date(); //獲得當前日期
var hh = today.getHours(); //獲得小時、分鐘、秒
var mm = today.getMinutes();
var ss = today.getSeconds();
/*設置div的內容爲當前時間*/
document.getElementById("myclock").innerHTML =
"<h1>現在是："+hh+":"+mm+":"+ss+"<h1>";
}
var myTime;
function startTime(){
//使用setInterval()每間隔指定毫秒後調用disptime()
myTime = setInterval("disptime()", 1000);
}
/*關閉定時器*/
function stopTime(){
clearTimeout(myTime);
}
</script>
</head>
<body onload="disptime();">
<div id="myclock"></div>
<input type="button" value=" 開始" onclick="startTime();" />
<input type="button" value=" 結束 " onclick="stopTime();" />
</body>
</html>
12、製作12小時制時鐘
- 使用Date對象以及定時器，實現步驟如下：
- getFullYear()獲得當前年份
- getMonth() + 1 獲得當前月份
- getDate()獲得當前日期
- 根據getHours()獲得的小時，使用if語句判斷當前時間是否大於12
- getDay()獲取當前表示星期幾的數字，然後使用switch設置當前星期幾
示例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>製作12小時進制的時鐘</title>
<script type="text/javascript">
function clock12h(){
var today = new Date(); //獲得當前時間
//獲得年、月、日，Date()函數中的月份是從0－11計算
var year = today.getFullYear();
var month = today.getMonth()+1;
var date = today.getDate();
var hour = today.getHours(); //獲得小時、分鐘、秒
var minute = today.getMinutes();
var second = today.getSeconds();
var apm="AM"; //默認顯示上午: AM
if (hour>12) { //按12小時制顯示
hour=hour-12;
apm="PM" ;
}
var weekday = 0;
switch(today.getDay()){
case 0:
weekday = "星期日";
break;
case 1:
weekday = "星期一";
break;
case 2:
weekday = "星期二";
break;
case 3:
weekday = "星期三";
break;
case 4:
weekday = "星期四";
break;
case 5:
weekday = "星期五";
break;
case 6:
weekday = "星期六";
break;
}
/*設置div的內容爲當前時間*/
document.getElementById("myclock").innerHTML="<h2>你好，歡迎訪問本商城！</h2><h2>"+year+"年
"+month+"月"+date+"日 "+hour+":"+minute+":"+second+" "+apm+" "+weekday+"</h2>";
}
/*使用setInterval()每間隔指定毫秒後調用clock12h()*/
var myTime = setInterval("clock12h()",1000);
</script>
</head>
<body>
<div id="myclock"></div>
</body>
</html>
13、history對象
history對象提供最近瀏覽過的URL列表以及逐個返回訪問過的頁面的方法
history對象的方法：
back() 加載前一個URL
forward() 加載下一個URL
go(URL順序號) 按順序號加載URL，比如，go(-1)和back效果一樣，
go(1)和forward效果一樣
14、location對象
location對象提供當前頁面的URL信息，還可刷新(重新加載)當前頁面或指定加載
新的也沒
location對象的屬性：
host 設置或返回主機名和當前URL的端口號
hostname 設置或返回當前URL的主機名
href 設置或返回完整的URL，通過該屬性可指定當前窗口
加載新的頁面
location對象的方法：
reload() 刷新(重新加載)當前頁面
replace("URL") 用新的頁面替換當前頁面
15、location和history對象的使用
功能描述：
- 主頁面使用href實現跳轉和刷新本頁
- 詳情頁面實現返回主頁面功能
主頁面，示例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>主頁面</title>
<style type="text/css">
body{
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align:center;
}
</style>
</head>
<body>
<img src="images/flow.jpg" alt="鮮花" /><br />
<a href="javascript:location.href='flower.html' ">查看鮮花詳情</a>
<a href="javascript:location.reload() ">刷新本頁</a>
</body>
</html>
詳情頁面，示例代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鮮花詳情頁面</title>
<style type="text/css">
body{
font-size:12px;
line-height:20px;
margin-top: 0px;
margin-right: 10px;
margin-bottom: 0px;
margin-left: 10px;
}
p{font-size:14px;
font-weight:bold;
}
</style>
</head>
<body>
<img src="images/flow.jpg" />
<p style="text-align:right;">
<a href="javascript:history.back() ">返回主頁面</a>
</p>
<p>服務提示：</p>非節日期間，可指定時間段送達；並且允許指定送達收貨人的最快時間爲兩小時；節日期間，只保證當日送達。<br />
配送範圍：<br />
鮮花配送範圍：北京、上海、深圳、天津、廣州、重慶等各大中城市。<br />
蛋糕、果籃配送範圍：全國大中城市。<br />
綠植配送範圍：僅限於直轄市，省會城市市區。<br />
更多詳細的配送區域與相應配送費率請點擊這裏！<br />
配送方式：<br />
專業鮮花、蛋糕禮品速遞機構，送貨上門。 <br />
服務時間：<br />
全年365天，節假日不休息，24小時接單； 每日送花時間：8:00-20：00。<br />
其它時間送花酌情加收10-30服務費用。 <br />
替換原則：<br />由於地域或季節的限制，需要更換主花材時，我們將電話向訂貨人提出更換建議，假如在有效配送時間內得不到訂貨人的確認，我們將採用同等價值或相同寓意的花材代替。實際送花以圖片爲參考，以商品規格文字說明爲主。鮮花爲手工做品，實際花束可能會與圖示有些出入，但我們保證鮮花的主花材品種、新鮮程度、數量、顏色與說明一致。<br />
</body>
</html>
16、總結：
- window對象有哪些常用的方法及其含義？
- Date對象有哪些方法？
- setTimeout()方法與setInterval()方法的區別？
- 事件onload和onclick的用法
- location和history在什麼情況下使用？
17、瀏覽器對象模型
window對象是根對象，其下屬還有很多其他對象，如下圖：
JavaScript 第三章 DOM編程基礎 使用document對象