首頁 > 開發者 > JavaScript
第一章。現代JS程式設計
分離式DOM指令碼編程
使用DOM定位並操作不同的DOM元素
<html>
<head>
<title> introduction to the dom </title>
<script>
//我們必須在文檔完成載入後再操作DOM
window.onload = function() {
//擷取文檔中的所有 <li>
var li = document.getElementsByTagName("li");
//並給它們全部添加一個黑邊框
for(var j=0;j<li.length;j++)
{
li[j].style.border = "1px solid #000";
}
//添加事件處理函數
for(var i=0;i< li.length;i++)
{
li[i].onmouseover = function()
{
this.style.backgroundColor = 'blue';
};
li[i].onmouseout = function(){
this.style.backgroundColor = 'white'; //大小寫必須全對，否則不顯示。
};
}
//擷取ID 為 'everywhere'的元素，並從文檔中刪除
var every = document.getElementById("everywhere");
every.parentNode.removeChild(every);
};
</script>
</head>
<body>
<h1> introduction to the dom</h1>
<ul>
<li id="everywhere">it can be found.</li>
<li class="test"> it's easy to use.</li>
</ul>
</body>
</html>
第二章 物件導向的JS
引用
1.多個變數引用同一個對象
//將OBJ 設定為空白對象
var obj = new Object();
// objRef 現在是另一個對象的引用
var objRef = obj;
//修改原對象的一個屬性
obj.oneProperty = true;
//我們現在看到，這個改變在兩個變數中都反映出來了，因為他們引用的是同一對象）
alert(obj.oneProperty == objRef.oneProperty);
2. 自修改對象的例子
//建立一個數組
var items = new Array("one","two");
//建立數組的一個引用
var itemsRef = items;
//將一個元素添加到原數組中
items.push("six");
//這兩數組長度一樣，因為他們指向同一個數組對象
3.修改對象的引用，同時保持完整性
//將items 設定為字串的數組
var items = new Array("one","two");
//將itemsRef 設定為items的引用
var itemsRef = items;
//將items 設定為一個新對象
items = new Array("new","array");
//items 和itemsRef 現在指向不同的對象了。
alert(items != itemsRef);
4.修改對象而產生新對象
//將item設定為一個新的字串對象
var item = "test";
//itemRef 現在指向同一個字串對象
var itemRef = item;
//將一些新文本接在這字串後面， 注意，這會建立一個新的對象，而非修改原對象
item += "ing";
//item 和 itemRef值不相等了，因為新的字串對象已被建立
alert(item != itemRef);
判斷物件類型
1. typeof
if(typeof num == "string )
num = parseInt(num);
2. 使用建構函式屬性來判斷對象的類型
//檢測我們的數學實際上是否為字串
if(nu.constructor == String)
num = parseInt(num);
//是否為數組
if(str.constructor == Array)
str = str.join(',');
變數的類型檢測
變數 typeof變數 變數。建構函式
{an:"object"} object Object
["an","array"] object Array
function(){} function Function
"a string" string String
55 number Number
true boolean Boolean
new User() object User
一個函數，可以用來嚴格維護傳入函數的所有參數
//用一個變數類型列表嚴格檢查一個參數列表
function strict(types, args)
{
//保證類型的數量和參數的數量相匹配
if(types.length != args.length)
{
//否則拋出一個有用的異常
throw "Invalid number of arguments .Expected " + types.length + ", received " + args.length + " instead.";
}
//遍曆所有的參數，檢查它們的類型
for(var i=0 ; i < args.length ; i++)
{
if(args[i].constructor != types[i])
{
throw "Invalid argument type. Expected " + types[i].name + ",received " + args[i].constructor.name + " instead.";
}
}
}
//一個簡單的函數，列印使用者列表
function userList(prefix, num,users)
{
//保證prefix 是字串， num 是數字 , users 是數組
strict( [String,Number,Array], arguments);
//遍曆 'num' 個使用者
for(var i=0; i <num ;i++)
{
//顯示每個使用者的資訊
print( prefix + ":" + users[i]);
}
}
閉包:(closure)
1.閉包如何使代碼更清晰
//找出ID為‘main'的元素
var obj = document.getElementById("main");
//修改樣式
obj.style.border = "1px solid red";
//初始化一個在一秒後執行的回呼函數( callback)
setTimeout(function() {
//它將隱藏此對象
obj.style.display = 'none';
},1000);
//一個用於延時顯示警告資訊的通用函數
function delayedAlert(msg,time) {
//初始化一個封裝的回呼函數
setTimeout(function() {
// 它將使用包含本函數的外圍函數傳入的 msg變數
alert(msg);
},time};
}
//用兩個參數調用 delayedAlert函數
delayedAlert("welcome!",2000);
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
