首頁 > 開發者 > JavaScript
標籤：獨立 win timeout 隱私 set 交換 實現 cloc val
第一章 JavaScript操作BOM對象一.window對象瀏覽器物件模型（BOM）是javascript的組成之一，它提供了獨立與瀏覽器視窗進行交換的對象，使用瀏覽器物件模型可以實現與HTML的互動。
他的作用是將相關的元素組織封裝起來，提供給程式設計人員使用，從而降低開發人員的勞動量，提高設計Web頁面的能力。
BOM是一個分層結構：
Window對象是整個BOM的核心，在瀏覽器中開啟網頁後，首先看到是瀏覽器視窗，即頂層的window對象；其次是網頁內容，即document(文檔)。
Window對象也稱為瀏覽器對象。當瀏覽器開啟HTML文檔時，通常會建立一個window對象，如果文檔定義了一個或多個架構，瀏覽器將為原始文檔建立一個window對象，同時為每個架構另外建立一個window對象。
1. BOM的作用1）.彈出的瀏覽器視窗。
2）.移動、關閉瀏覽器視窗及調整視窗的大小。
3）.在瀏覽器視窗中實現頁面的前進、後退功能。
2.window常用的屬性
名稱 |
說明 |
history |
有關客戶訪問過的URL的資訊 |
location |
有關當前的URL的資訊 |
Screen |
唯讀屬性，包含有關用戶端顯示螢幕的資訊 |
文法： windoe.屬性名稱=”屬性值”；
例：window.location=”http//www.baidu.com”,表示跳轉到百度的官方首頁。
screen.height返回顯示瀏覽器的螢幕的高度，單位為像素。
3.window常用的方法名稱 |
說明 |
prompt() |
顯示一個可提示並且使用者可以輸入的對話方塊，取消返回null,確定返回使用者輸入的值 |
alert() |
顯示一個帶有提示資訊和一個“確定”按鈕的警示對話方塊,無傳回值 |
confrim() |
顯示一個帶有提示資訊、“確定”和“取消”按鈕的對話方塊，返回true或false |
colse() |
關閉瀏覽器視窗 |
open() |
開啟一個新的瀏覽器視窗，載入給定的URL所指定的穩定 |
setTimeout() |
在指定的毫秒數後調用函數或計算運算式 |
setInterval() |
按照指定的周期（單位毫秒）來調用函數或運算式 |
快顯視窗文法：
Window.open(“快顯視窗的URL”,”視窗的名稱”,”視窗特徵”);
1. 視窗的特徵屬性名稱 |
說明 |
height、width |
視窗文檔顯示區的高度、寬度、單位是像素 |
left、top |
視窗的x座標、y座標，單位是像素 |
toolbar=yes|no|1|0 |
是否顯示瀏覽器的工具列，預設是yes |
scrollbars=yes|no|1|0 |
是否顯示捲軸，預設是yes |
loaction= 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 |
二.history對象和location對象1. history對象
history對象提供使用者最近瀏覽過的URL列表，即瀏覽曆史。出於隱私方面的考慮，history對象不再允許指令碼訪問已經訪問過的實際URL
History對象的方法 |
|
名稱 |
描述 |
back() |
載入history對象列表中的前一個URL |
forward() |
載入history對象列表中的後一個URL |
go() |
載入history對象列表中的某個位置的URL,參數為正負整數 |
go(n)方法中的n是一個具體的數字，當n>0時，進入曆史列表中前進的第幾個頁面。
當n<0時，進入曆史列表中後退的第幾個頁面。
A） history.go(1)代表前進一頁，等價於forward()方法。
B） History.go(-1)代表後退一頁，等價於back()方法。
2. location對象laction對象提供當前頁面的URL資訊，並且可以重新裝載當前頁面（重新整理）或裝入新頁面。
Location對象的屬性 |
|
名稱 |
描述 |
Host |
設定或返回主機名稱和當前URL的連接埠號碼 |
Hostname |
設定或返回當前URL的主機名稱 |
href |
設定或返回完整的URL |
loaction對象的方法 |
|
reload() |
重新載入(重新整理)當前文檔 |
replace() |
用新的文檔替換當前文檔 |
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>首頁面</title>
</head>
<body>
<img src="flow.jpg" alt="鮮花"/><br/>
<!--跳轉到鮮花頁面-->
<a href="javascript:location.href=‘flower.html‘">查看鮮花詳情</a>
<a href="javascript:location.reload()">重新整理本頁</a>
</body>
</html>
一.document對象
document對象即是window對象的一部分，又代表了整個HTML文檔，可以用來訪問頁面中的所有元素。所以在使用document對象時，除了要適用於各個瀏覽器外，也要符合W3C的標準。
Document對象的常用屬性 |
|
referrer |
返回當前文檔的URL |
URL |
返回當前文檔的URL |
1.referrer的文法格式如下：
document.referrer;
當前文檔如果不是通過超串連訪問的，則document.referrer的值為null
例：通過跳轉地址判斷使用者是否從指定的頁面登入的。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var preUrl=document.referer;//載入跳轉到當前文檔的地址
if(preUrl==""){
document.write("<h2>您不是從領獎的登入頁面進入，五秒後將自動跳入到領獎頁面</h2>")
setTimeout("location.href=‘login.html‘",3000);//使用setTimeout延遲5秒後跳轉到領獎頁面的登入頁面
}else{
document.write("<h2>大獎趕快拿！筆記本！數位相機！</h2>")
}
</script>
</body>
</html>
2.URL的文法：
document.URL;
Document對象的常用方法 |
|
方法 |
描述 |
getElementByID() |
返回對擁有指定id的第一個對象的引用 |
getElementsByName() |
返回帶有指定名稱的對象的集合 |
getElementsByTagName() |
返回指定帶有表簽名的對象的集合 |
write() |
向文檔寫入文本，HTML運算式或JavaScript代碼 |
二.javascript的內建對象
在javaScript中，系統的內建對象有Date對象、Array對象、String對象和Math對象等。
A） Date對象：用於操作日期和事件。
B） Array對象：用於在單獨的變數名中儲存一系列的值。
C） String對象：用於支援對字串的處理。
D） Math對象：執行常用的數學任務，它包含了若干個數字常量和函數。
1.Date對象文法：var 日期執行個體=new Date(參數)；
例：var today=new Date(); //將當前的時間儲存在變數today中
var tdate=new Date(“July 15,2013,16:10:12”);//以字串格式傳入值
Date對象的常用方法 |
|
方法 |
說明 |
getDate() |
返回Date對象中的一個月中每一天，值1~31 |
getDay() |
返回Date對象的行其中的每一天，值0~6 |
getHours() |
返回Date對象的小時數，值0~23 |
getMinutes() |
返回Date對象的分鐘數，值0~59 |
getSeconds() |
返回Date對象的秒數，值0~59 |
getMonth() |
返回Date對象的月份，值0~11 |
getFullYear() |
返回Date對象中年份，其值為4位元 |
getTime() |
返回來自某一刻（1970年1月1日）以來的毫秒數 |
例：顯示時間
<!DOCTYPE html>2.Math對象
<html>
<head lang="en">
<meta charset="UTF-8">
<title>時鐘特效</title>
</head>
<body>
<div id="myclock"></div>
<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="現在是："+hh+":"+mm+":"+ss;
}
disptime();
</script>
</body>
</html>
Math對象提供了許多與數學相關的功能，它是javaScript的一個全域對象，不需要建立，直接作為對象使用就可以調用其屬性和方法。
Math對象的常用方法 |
||
方法 |
說明 |
樣本 |
ceil() |
對數進行上舍入（方向第一象限） |
Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25 |
floor() |
對數進行下舍入（方向第三象限） |
Math.floor(25.5);返回25 Math.floor(-25.5);返回-26 |
round() |
四捨五入 |
Math.round(25.5);返回26 Math.round(-25.5);返回-26 |
random() |
返回0~1的隨機數 |
Math.random(); |
三.定時函數
JavaScript中提供了兩個定時函數setTimeout()和setInterval().
此外，還提供了用於清除定時器的兩個函數clearTimeout()和clearInterval()。
1. setTimeoutsetTimeout()用於在指定的毫秒後調用函數或計算運算式，文法：
setTimeout(“調用的函數名稱”，等待的毫秒數)；
2. setInterval按照指定的周期（單位毫秒）來調用函數或運算式。文法：
setInterval(“調用的函數名稱”,周期性調用函數之間間隔的毫秒數)；
setInterval()會不停的調用函數，知道視窗關閉或被其他方法強制停止。
第三章JavaScript操作BOM對象
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
