BOM編程：
BOM是（Broswer Object Model） 瀏覽器對象模型編程。在網頁被加載後，js引擎會將我們的瀏覽器的各個部分封裝成對象，我們通過操作這些不同的對象，來實現一些效果，這就叫BOM編程。
window對象方法：
setInterval() 每經過指定毫秒值後就會執行指定的代碼。一調用此方法就會返回指定任務的ID。
clearInterval() 根據任務的ID取消定時任務。
setTimeout() 經過指定毫秒值後執行指定的代碼一次。
註冊事件的方式：
方式一：直接在html元素上註冊。
方式二：可以用js代碼找到對應的對象再註冊。
常用的事件：
onload在瀏覽器完成對象的裝載後立即觸發。
鼠標移動相關：
onmousemove 當鼠標移出對象邊界時觸發
onmouseout 當鼠標移到對象上時觸發。
焦點相關：
onfocus當對象獲得焦點時觸發。
onblur 在對象失去輸入焦點時觸發。
其他：
onchange 當對象或者選中區的內容改變的時候觸發。
onsubmit 當表單將要被提交的時候觸發。
window對象
open(): 在一個窗口中打開頁面
參數一： 打開的頁面
參數二：打開的方式。 _self: 本窗口 _blank: 新窗口（默認）
參數三： 設置窗口參數。比如窗口大小
setInterval(): 設置定時器（執行n次）
setTimeout(): 設置定時器(只執行1次)
定時器： 每隔n毫秒調用指定的任務（函數）
參數一：指定的任務（函數）
參數二：毫秒數
clearInterval(): 清除定時器
clearTimeout(): 清除定時器
清除任務
參數一：需要清除的任務ID
alert(): 提示框
僅僅有確定按鈕
confirm(): 確認提示框
返回值就是用戶操作
true: 點擊了確定
false： 點擊了取消
propmt(): 輸入提示框
返回值就是用戶操作
true: 點擊了確定
false： 點擊了取消
注意：
因爲window對象使用非常頻繁，所以當調用js中的window對象的方法時，可以省略對象名不寫。
<script type="text/javascript">
/*
window對象:
1.open():打開另一個窗口
參數1:設置打開的網頁連接
參數2:打開的方式
參數3:設置打開的窗口的大小
2.設置定時器:
setInterval("執行的函數","每隔多少秒執行")--- 執行n次
setTimeOut("執行的函數","每隔多少秒執行") -- 執行一次
3.清除定時任務
clearInterval(): 清除定時器
clearTimeout(): 清除定時器
清除任務
參數一：需要清除的任務ID
4.alert(): 提示框
僅僅有確定按鈕
5.confirm有確定還有取消的提示框
確定:true
取消:false
6. propmt(): 輸入提示框
返回值就是用戶操作
true: 點擊了確定
false： 點擊了取消 */
function testOpen(){
window.open("1.廣告.html","_blank","width=200px;height=300px");
}
//開啓定時任務
var intervalId;
function testSetInterval(){
//調用上面的testOpen()方法,在這裏設置了一個定時任務,每一個定時任務其實都是有一個任務id的
intervalId = window.setInterval("testOpen()",3000);
}
//清除定時任務
function testClearInterval(){
window.clearInterval(intervalId);
}
//創建一個定時任務,只執行一次
var timeoutId;
function testSetTimeout(){
timeoutId = window.setTimeout("testOpen()",3000);
}
//清楚定時任務,setTimeOut()設定的定時任務
function testClearTimeout(){
window.clearTimeout(timeoutId);
}
//alert提示框
//window.alert("hello");
//彈出一個提示框,有確定還有取消
function testConfirm(){
var flag = window.confirm("確定要刪除硬盤上的內容嗎");
if(flag){
alert("內容正在刪除中...");
}else{
}
}
//創建一個方法,生成內容輸入提示框
function testPropmt(){
window.prompt("請輸入你的密碼");
}
</script>
</head>
<body>
<input type="button" value="open" onclick="testOpen()" />
<input type="button" value="setInterval" onclick="testSetInterval()" />
<input type="button" value="clearInterval" onclick="testClearInterval()" />
<input type="button" value="setTimeout" onclick="testSetTimeout()" />
<input type="button" value="clearTimeout" onclick="testClearTimeout()" />
<input type="button" value="confirm" onclick="testConfirm()" />
<input type="button" value="propmt" onclick="testPropmt()" />
</body>
location對象：
href屬性： 代表的是地址欄的URL，可以獲取和設置URL。URL表示統一資源定位符
reload方法： 刷新當前頁面
需求：實現每隔一秒刷新一次頁面
<script type="text/javascript">
/*
2.location對象
href屬性： 代表的是地址欄的URL，可以獲取和設置URL。URL表示統一資源定位符
reload方法： 刷新當前頁面
需求：實現每隔一秒刷新一次頁面
*/
//獲取地址欄中的url
function getHref(){
//獲取當前的地址欄中的url
var url = window.location.href;
alert(url);
}
//設置地址中的url
function setHref(){
window.location.href="1.廣告.html";
}
//reload方法： 刷新當前頁面,需求：實現每隔一秒刷新一次頁面
function refresh2(){
window.location.reload();
}
window.setTimeout("refresh2()",1000);
</script>
</head>
<body>
<input type="button" value="getHref" onclick="getHref()" />
<input type="button" value="setHref" onclick="setHref()" />
<input type="button" value="refresh" onclick="refresh2()" />
</body>
history對象
forward(): 前進到下一頁
back(): 後退上一頁
go(): 跳轉到某頁（正整數：前進 負整數：後退） 1 -2
<script type="text/javascript">
/*
3.history對象
forward(): 前進到下一頁
back(): 後退上一頁
go(): 跳轉到某頁（正整數：前進 負整數：後退） 1 -1
*/
//前進的方法
function testForward(){
//window.history.forward();
window.history.go(1);
}
</script>
</head>
<body>
<a href="3.history2.html">超鏈接</a>
<input type="button" value="forward" onclick="testForward()" />
</body>
<script type="text/javascript">
//寫一個方法沒執行這個方法的時候回退到上個頁面
function testBack(){
//window.history.back();
window.history.go(-1);
}
</script>
</head>
<body>
<input type="button" value="back" onclick="testBack()" />
</body>
screen對象（重點掌握四個屬性）：
availHeight和availWidth
是排除了任務欄之後的高度和寬度
width和height
是整個屏幕的像素值
<script type="text/javascript">
/*
4.screen對象（學習四個屬性）
availHeight和availWidth
是排除了任務欄之後的高度和寬度
width和height
是整個屏幕的像素值 */
document.write("屏幕的實際寬度"+window.screen.width);
document.write("<br>");
document.write("屏幕的實際高度"+window.screen.height);
document.write("<br>");
document.write("屏幕的可用寬度"+window.screen.availWidth);
document.write("<br>");
document.write("屏幕的可用高度"+window.screen.availHeight);
document.write("<br>");
</script>
事件編程
javascript事件編程的三個要素：（以單擊事件爲例講解事件編程三要素）
事件源：html標籤
事件 ：click dblclick mouseover。。。。
監聽器： 函數
javascript事件分類：
點擊相關的：
單擊： onclick
雙擊： ondblclick
焦點相關的：（獲得焦點輸入框內提示內容消失，失去焦點驗證用戶名信息並且在輸入框內提示）
聚焦： onfocus
失去焦點： onblur
選項相關的：（select選項改變，做一個籍貫選項）
改變選項： onchange
鼠標相關的：（畫一個div區塊進行演示）
鼠標經過： onmouseover
鼠標移除： onmouseout
頁面加載相關的：（一般用在body標籤中，用於網頁加載完畢後還需執行什麼操作進行觸發）
頁面加載： onload
<script type="text/javascript">
/*
javascript事件分類：
點擊相關的：
單擊： onclick
雙擊： ondblclick
焦點相關的：（獲得焦點輸入框內提示內容消失，失去焦點驗證用戶名信息並且在輸入框內提示）
聚焦： onfocus
失去焦點： onblur
選項相關的：（select選項改變，做一個籍貫選項）
改變選項： onchange
鼠標相關的：（畫一個div區塊進行演示）
鼠標經過： onmouseover
鼠標移除： onmouseout
頁面加載相關的：（一般用在body標籤中，用於網頁加載完畢後還需執行什麼操作進行觸發）
頁面加載： onload
*/
//寫一個單擊事件的監聽
function testClick(){
alert("單擊事件被觸發");
}
//協議而過雙擊事件的監聽
function testdbClick(){
alert("雙擊事件被執行");
}
//給獲取焦點寫一個監聽,當獲取焦點的時候,輸入框內部的內容消失
function testOnfocus(){
//獲取id爲username的input標籤對象
var username = document.getElementById("username");
//將上面的input標籤對象的values屬性置爲空串
username.value="";
}
//給input標籤設置一個失去焦點的事件,當失去焦點的時候,給予一個提示,這個用戶名到底可用不可用
function testBlur(){
//獲取input標籤對象的value值和sapn標籤的對象
var username = document.getElementById("username").value;
var usernameTip = document.getElementById("usernameTip");
//拿着用戶輸入的用戶名,做匹配,做判斷
if("jack"==username){
usernameTip.innerHTML="該用戶名已經被佔用".fontcolor("red");
}else{
usernameTip.innerHTML="該用戶可用".fontcolor("green");
}
}
//改變選項： onchange 做一個監聽
function testChange(){
//1.獲取用戶選擇了哪個選項
var sheng = document.getElementById("sheng").value;
var shi = document.getElementById("shi");
shi.innerHTML="<option>--請選擇--</option>";
//alert(sheng);
//2.根據用戶的選項進行判斷,動態的給市級的下拉選中天充對應的option選項
if(sheng=="shanxi"){
shi.innerHTML="<option>西安</option><option>渭南</option><option>寶雞</option>"
}else if(sheng=="sichuan"){
shi.innerHTML="<option>成都</option><option>雅安</option><option>廣安</option>"
}else if(sheng=="guangdong"){
shi.innerHTML="<option>廣州</option><option>深圳</option><option>佛山</option>"
}
}
//給鼠標移入加一個監聽
function testOut(){
alert("鼠標移入了")
}
//鼠標移除的事件
function testOver(){
alert("鼠標移出了")
}
</script>
</head>
<body>
<input type="button" value="單擊事件" onclick="testClick()" />
<input type="button" value="雙擊事件" ondblclick="testdbClick()" />
<br />
<hr />
<input type="text" value="請輸入你的用戶名" id="username" onfocus="testOnfocus()" onblur="testBlur()"/>
<span id="usernameTip"></span>
<br />
<hr />
<select onchange="testChange()" id="sheng">
<option>--請選擇--</option>
<option value="shanxi">陝西</option>
<option value="sichuan">四川</option>
<option value="guangdong">廣東</option>
</select>
<select id="shi">
</select>
<br />
<hr />
<div style="width:300px;height:300px;border:1px solid #FF0" onmouseout="testOut()" onmouseover="testOver()"></div>
</body>