JavaScript進階（二）window物件
前言
本章學習JS的window物件的相關知識
方法
特別的,window物件不用new，直接進行使用即可，類似Math的使用方式，window關鍵字可以省略不寫。
一、框體方法
alert(內容)
該方法提示一個警告資訊，沒有返回，這個我們已經用了多次了，這次終於知道怎麼回事了！
例子我也不多說了。
confirm(內容)
該方法是一個確認框，提示使用者選擇一項操作（確定/取消）
範例：模擬提交
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS事件</title> <script type="text/javascript"> function change(){ if(confirm("確認提交？")){ alert("提交成功！"); } } </script> </head> <body> 使用者名稱：<input type="text" id="test" value="" /><br> 密 碼：<input type="password" name="" /><br> <input type="button" name="" id="" value="提交" onclick="change();"/> </body> </html>
prompt(提示內容，預設值)
提示框， 提示用某個資訊的錄入
點選確定，返回當前錄入的資料，預設返回空字串
點選取消,返回null
範例：模擬提示框
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS事件</title> <script type="text/javascript"> function change(){ var str = prompt("請輸入簡訊驗證碼:","請輸入簡訊驗證碼"); if(str == '123'){ alert("驗證成功!"); }else{ alert("驗證失敗!"); } } </script> </head> <body> 使用者名稱：<input type="text" id="test" value="" /><br> 密 碼：<input type="password" name="" /><br> <input type="button" name="" id="" value="提交" onclick="change();"/> </body> </html>
二、定時和間隔方法
setTimeout:指定的時間後執行指定的函式
引數1：函式物件
引數2：時間，單位毫秒。
返回值：返回當前定時器的id
範例：兩秒後執行某個函式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>JS事件</title> <script type="text/javascript"> function change(){ setTimeout(function(){ alert("提交成功！"); },2000); } </script> </head> <body> 使用者名稱：<input type="text" id="test" value="" /><br> 密 碼：<input type="password" name="" /><br> <input type="button" name="" id="" value="提交" onclick="change();"/> </body> </html>
setInterval:每間隔指定的時間執行指定的函式
引數1：函式物件
引數2：時間，單位毫秒。
返回值：返回當前間隔器的id
範例：每隔兩秒執行相應函式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
setInterval(function(){
alert("我每兩秒執行一次！");
},2000);
</script>
</head>
<body>
使用者名稱：<input type="text" id="test" value="張三" /><br>
密 碼：<input type="password" name="" value="123"/><br>
<input type="button" name="" id="" value="提交"/>
</body>
</html>
clearTimeout:用來停止指定的定時器
引數：定時器的id
clearInterval:用來停止指定的間隔器
引數：間隔器的id
三、子視窗方法
window.open('子頁面的資源(相對路徑)','開啟方式','配置');
示例：在一個視窗開啟另一個視窗
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change(){
window.open("03_WJ_form.html");
}
</script>
</head>
<body>
使用者名稱：<input type="text" id="test" value="" /><br>
密 碼：<input type="password" name="" /><br>
<input type="button" name="" id="" value="提交" onclick="change();"/>
</body>
</html>window.close();關閉頁面
window.opener.父頁面的函式 該物件可以呼叫父頁面相關函式
四、window物件的常用屬性
位址列屬性:location
window.location.href="新的資源路徑（相對路徑/URL）"
window.location.reload()重新載入頁面資源
範例：點選提交將網頁定位到其他網頁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JS事件</title>
<script type="text/javascript">
function change(){
window.location.href="03_WJ_form.html";
}
</script>
</head>
<body>
使用者名稱：<input type="text" id="test" value="" /><br>
密 碼：<input type="password" name="" /><br>
<input type="button" name="" id="" value="提交" onclick="change();"/>
</body>
</html>特別的：注意與window.open的區別，open開啟的新視窗，而location覆蓋本頁面開啟新網頁
歷史記錄屬性
window.history.forward() 頁面資源前進，歷史記錄的前進。
window.history.back() 頁面資源後退，歷史記錄後退
window.history.go(index) 跳轉到指定的歷史記錄資源
注意window.history.go(0)相當於重新整理。
螢幕屬性
window.srceen.width;//獲取螢幕的寬度解析度
window.screen.height;//獲取螢幕的高度解析度