客戶端中的window對象
- window對象表示當前瀏覽器的窗口，它是一個頂級對象，我們創建的所有對象、函數、變量都是window對象的成員。
- window對象自帶了一些非常有用的方法、屬性。
window的子對象：
- document:可操作顯示在窗口的文檔內容。
- location:可讓窗口載入新的URL。
- navigator：包含當前瀏覽器的信息。
- history：包含當前瀏覽器的歷史。
window的方法：
- open()：打開一個新的窗體。
- close()：關閉窗體。
- window對話框函數：
- alert():彈出消息對話框（對話框中只有一個ＯＫ按鈕）。
- confirm():彈出消息對話框（對話框中包含一個ＯＫ按鈕與Cancel按鈕）。
- prompt():彈出消息對話框（對話框中包含一個ＯＫ按鈕、Cancel按鈕與一個文本輸入框）。
web文檔里使用Javascript
- Javascript程序可以操作文檔對象(window.document,通常window可以省略)，遍歷和管理文檔內容，改變CSS的樣式，注冊適當的事件來改變文檔元素的行為。
- Javascript可增強用戶瀏覽web文檔的體驗。
- Javascript可操作XMLHttpRequest對象，實現從服務器獲取新信息，而不重新載入頁面。通常叫Ajax應用
html中嵌入script代碼簡單示例
<html>
<head>
<script>
function showTime(){
var ele = document.getElementById('clock');//通過id＝clock獲取文檔元素
var d = new Date();//取得當前時間
console.log(ele);
ele.innerHTML = d.toLocaleTimeString();//轉換為本地時間
setTimeout(showTime,1000);//定時調用
}
</script>
<style>
#clock{
font:bold 26pt;
}
</style>
</head>
<body onload="showTime();">
<h1>顯示當前時間：</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執行順序
javascript程序執行有兩個階段。
- 第一階段，載入文檔內容，并執行<script>元素里的代碼，按javascript代碼順序從上往下執行。
- 第二階段，此階段是異步的，而且由事件驅動。事件驅動階段里發生的第一個事件是onload事件，表示文檔已經載入完成
javascript的線程模型
- javascript中沒有任何關于線程的定義，也就是javascript是按單線程一樣工作，單線程執行是為讓編程更加簡單。
- 當響應用戶的某個事件處理過程中，如果過程復雜可能導致瀏覽器會變的無響應。所以我們在處理時要反饋用戶當前瀏覽器是正在活動，以獲得最好的用戶體驗。
- 如果有些計算而導致明顯的延遲，應在文檔完全載入后做計算，也可用setTimeout()或setInterval()方法在后臺運行子任務。
- 可通過setTimeout()可以把計算任務分成若干個小任務來執行，提高頁面的響應能力。
<html>
<head>
<script>
//判斷質數
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("計算完成，質數個數為：" + 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>有大量的計算，頁面立即顯示出來，大量的計算在后臺運行。</h1>
</body>
</html>
兼容性
測試網站來測試瀏覽器的兼容性：http://www.quirksmode.org/dom/core/
- javascript編程中很多是不兼容性都是針對的IE的。
- 可以用IE支持的條件注釋來處理對ＩＥ的不兼容。
- 條件注釋可以應用到js,css,內容
<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顯示的內容
<![endif]-->
<!--[if !IE ]><-->
這不是IE要顯示的內容
<!--><![endif]-->
</body>
</html>
javascript框架
- jQuery是當前最流行的框架之一。
http://jquery.com/ - Prototype與jQuery類似，是專門針對DOM和Ajax實現的實用工具。
http://prototypejs.org/ - Dojo是一個大型的框架，它包含一個ＵＩ組件集合、包管理系統、數據抽象層等。
http://dojotoolkit.org/
