您的位置：首页 > Web前端 > JavaScript

pro javascript techniques(精通JAVASCRIPT）读书

2010-02-04 10:19 471 查看

第一章。现代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);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航