客戶端中的window對(duì)象
- window對(duì)象表示當(dāng)前瀏覽器的窗口,它是一個(gè)頂級(jí)對(duì)象,我們創(chuàng)建的所有對(duì)象恢准、函數(shù)魂挂、變量都是window對(duì)象的成員。
- window對(duì)象自帶了一些非常有用的方法馁筐、屬性涂召。
window的子對(duì)象:
- document:可操作顯示在窗口的文檔內(nèi)容。
- location:可讓窗口載入新的URL敏沉。
- navigator:包含當(dāng)前瀏覽器的信息果正。
- history:包含當(dāng)前瀏覽器的歷史。
window的方法:
- open():打開一個(gè)新的窗體盟迟。
- close():關(guān)閉窗體舱卡。
- window對(duì)話框函數(shù):
- alert():彈出消息對(duì)話框(對(duì)話框中只有一個(gè)OK按鈕)。
- confirm():彈出消息對(duì)話框(對(duì)話框中包含一個(gè)OK按鈕與Cancel按鈕)队萤。
- prompt():彈出消息對(duì)話框(對(duì)話框中包含一個(gè)OK按鈕轮锥、Cancel按鈕與一個(gè)文本輸入框)。
web文檔里使用Javascript
- Javascript程序可以操作文檔對(duì)象(window.document,通常window可以省略)要尔,遍歷和管理文檔內(nèi)容舍杜,改變CSS的樣式,注冊(cè)適當(dāng)?shù)氖录砀淖兾臋n元素的行為赵辕。
- Javascript可增強(qiáng)用戶瀏覽web文檔的體驗(yàn)既绩。
- Javascript可操作XMLHttpRequest對(duì)象,實(shí)現(xiàn)從服務(wù)器獲取新信息还惠,而不重新載入頁面饲握。通常叫Ajax應(yīng)用
html中嵌入script代碼簡單示例
<html>
<head>
<script>
function showTime(){
var ele = document.getElementById('clock');//通過id=clock獲取文檔元素
var d = new Date();//取得當(dāng)前時(shí)間
console.log(ele);
ele.innerHTML = d.toLocaleTimeString();//轉(zhuǎn)換為本地時(shí)間
setTimeout(showTime,1000);//定時(shí)調(diào)用
}
</script>
<style>
#clock{
font:bold 26pt;
}
</style>
</head>
<body onload="showTime();">
<h1>顯示當(dāng)前時(shí)間:</h1>
<span id="clock"></span>
</body>
</html>
javascript代碼可以放置在html屬性里來定義事件處理程序。如onclick蚕键,onchange事件等救欧。
<html>
<head>
<script>
</script>
</head>
<body>
<input type="checkbox" name="sex" value="男" onchange="alert(this.checked);"/>男
</body>
</html>
javascript執(zhí)行順序
javascript程序執(zhí)行有兩個(gè)階段锣光。
- 第一階段笆怠,載入文檔內(nèi)容,并執(zhí)行<script>元素里的代碼誊爹,按javascript代碼順序從上往下執(zhí)行蹬刷。
- 第二階段,此階段是異步的频丘,而且由事件驅(qū)動(dòng)办成。事件驅(qū)動(dòng)階段里發(fā)生的第一個(gè)事件是onload事件,表示文檔已經(jīng)載入完成
javascript的線程模型
- javascript中沒有任何關(guān)于線程的定義搂漠,也就是javascript是按單線程一樣工作迂卢,單線程執(zhí)行是為讓編程更加簡單。
- 當(dāng)響應(yīng)用戶的某個(gè)事件處理過程中,如果過程復(fù)雜可能導(dǎo)致瀏覽器會(huì)變的無響應(yīng)冷守。所以我們?cè)谔幚頃r(shí)要反饋用戶當(dāng)前瀏覽器是正在活動(dòng)刀崖,以獲得最好的用戶體驗(yàn)。
- 如果有些計(jì)算而導(dǎo)致明顯的延遲拍摇,應(yīng)在文檔完全載入后做計(jì)算亮钦,也可用setTimeout()或setInterval()方法在后臺(tái)運(yùn)行子任務(wù)。
- 可通過setTimeout()可以把計(jì)算任務(wù)分成若干個(gè)小任務(wù)來執(zhí)行充活,提高頁面的響應(yīng)能力蜂莉。
<html>
<head>
<script>
//判斷質(zhì)數(shù)
var MAX = 1000000;
function isPrime(n) {
if (n == 0 || n == 1) {
return false;
}
var bound = Math.floor(Math.sqrt(n));
for (var i = 2; i <= bound; i++) {
if (n % i == 0) {
return false;
}
}
return true;
}
var jobs = 10, numberPerJob = Math.ceil(MAX / jobs);
var count = 0;
function calculate(start, end) {
for (var i = start; i <= end; i++) {
if (isPrime(i)) {
count++;
}
}
}
var start, end, timeout, finished = 0;
function manage() {
if (finished == jobs) {
window.clearTimeout(timeout);
alert("計(jì)算完成,質(zhì)數(shù)個(gè)數(shù)為:" + count);
}
else {
start = finished * numberPerJob + 1,
end = Math.min((finished + 1) * numberPerJob, MAX);
timeout = window.setTimeout(function() {
calculate(start, end);
finished++;
manage();
}, 100);
}
}
manage();
</script>
</head>
<body>
<h1>有大量的計(jì)算混卵,頁面立即顯示出來映穗,大量的計(jì)算在后臺(tái)運(yùn)行。</h1>
</body>
</html>
兼容性
測(cè)試網(wǎng)站來測(cè)試瀏覽器的兼容性:http://www.quirksmode.org/dom/core/
- javascript編程中很多是不兼容性都是針對(duì)的IE的幕随。
- 可以用IE支持的條件注釋來處理對(duì)IE的不兼容蚁滋。
- 條件注釋可以應(yīng)用到j(luò)s,css,內(nèi)容
<html>
<head>
<!--[if lt IE 9]>
<script type="text/javascript" src="http://www.itbegin.com/commonscripts/bootstrap/html5shiv.min.js?20150301" ></script>
<![endif]-->
</head>
<body>
<!--[if IE 6]>
這是IE6顯示的內(nèi)容
<![endif]-->
<!--[if !IE ]><-->
這不是IE要顯示的內(nèi)容
<!--><![endif]-->
</body>
</html>
javascript框架
- jQuery是當(dāng)前最流行的框架之一。
http://jquery.com/ - Prototype與jQuery類似赘淮,是專門針對(duì)DOM和Ajax實(shí)現(xiàn)的實(shí)用工具辕录。
http://prototypejs.org/ - Dojo是一個(gè)大型的框架,它包含一個(gè)UI組件集合梢卸、包管理系統(tǒng)走诞、數(shù)據(jù)抽象層等。
http://dojotoolkit.org/