首页 > 代码库 > JavaScript高级程序设计（第三版）
JavaScript高级程序设计（第三版）
1、JavaScript是一种专为与网页交互而设计的脚本语言；
由三个不同的部分组成：ECMAScript、文档对象模型（DOM）、浏览器对象模型（BOM）；
在当前五个主要浏览器（IE、Firefox、Chrome、Safari、Opera）中都得到了不同程度的支持。
2、向HTML页面中插入JavaScript的主要方法，就是使用 <script> 元素 。
3、 <script> 元素会按顺序被解析
传统： 所有的 <script> 元素都应该放在页面的 <head> 元素中，（可以用defer="defer"代替）延迟执行。最好只有一个，只适用于外部脚本文件。
现代：把全部的JavaScript引用放在 <body> 元素中页面内容的后面（在解析JavaScript代码之前，页面内容将完全呈现在浏览器中，用户会感觉打开页面的速度变快了）。最佳选择
4、浏览器在遇到 <body> 标签时才开始呈现内容
5、async，异步加载页面其他内容，不保证.js文件执行的先后顺序，确保多个.js文件之间互不依赖非常重要。
6、最好在html中尽可能使用外部文件来包含JavaScript代码，
优点：可维护性、可缓存
7、严格模式：一些不确定的行为将得到处理，而且某些不安全的操作也会抛出错误
function doSomething ( ) {
"use strict"；
//函数体
}8、全局变量
function test ( ) {
message = "hi"； //全局变量
}test()； alert (message)；//hi
省略了 var 操作符，因而message就成了全局变量。这样，只要调用过一次test( )函数，这个变量就有了定义，就可以在函数外部的任何地方被访问到。
9、类型显示
var massage = "this is my first"; alert(typeof massage); --string alert(typeof (massage)); --string alert(typeof 95); --number
10、逐个遍历数组
var myObject = new Object();
myObject.name = "lvhazhou";
myObject.age = "22";
myObject.phone = "13951245632"
for(prop in myObject){
window.alert("The property " + prop + " is " + myObject[prop]);
}11、向所取id的参数插入内容 innerHTML
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>
<button type="button" onClick="displayDate()">显示日期</button>12、点击图片，两个图片直接互相切换
function changeImage(){
element=document.getElementById("myimage");
if(element.src.match("one")){
element.src="http://www.mamicode.com/java4_two.jpg";
}
else{
element.src="http://www.mamicode.com/java3_one.jpg";
}
}
<img id="myimage" onClick="changeImage()" src="http://www.mamicode.com/java3_one.jpg" width="100" height="180">
match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
13、声明数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
var cars=new Array("Saab","Volvo","BMW");
var cars=["Saab","Volvo","BMW"];14、声明对象
var person={firstname:"John", lastname:"Doe", id:5566};对象属性的寻址方式：
name=person.lastname; name=person["lastname"];
15、声明对象类型
当声明新变量时，可以使用关键词 "new" 来声明其类型：
var carname=new String; var x=new Number; var y=new Boolean; var cars=new Array; var person= new Object;
JavaScript对象均为变量，当声明一个变量时，就创建了一个新的对象。
16、两种访问属性的方法
person.lastName; person["lastName"];
17、JavaScript变量的生存期
JavaScript变量的生命周期从它被声明的时间开始，
局部变量会在函数运行以后被删除，
全局变量会在页面关闭以后被删除。
18、向未声明的JavaScript变量分配值
如果把值赋给尚未声明的变量，该变量将会自动作为全局变量声明
carname = “voloe” ;
将声明一个全局变量carname，即使它在函数内执行。
19、代码将修改自身元素的内容
<button onclick="this.innerHTML=Date()">现在的时间是?</button>
20、常见的HTML事件
onchange HTML元素改变
onclick 用户点击HTML元素
用户在一个HTML元素上移动鼠标
用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
浏览器已完成页面的加载
21、绝对相等符号 ===
var x = "John";
var y = new String("John");
(x === y) // 结果为 false，因为 x 是字符串，y 是对象===为绝对相等，既数据类型和值都必须相等
22、跳出代码块
cars=["BMW","Volvo","Saab","Ford"];
list:{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
} 23、清空对象
你可以设置为 null 来清空对象:
var person = null; // 值为 null(空), 但类型为对象
你可以设置为 undefined 来清空对象:
var person = undefined; // 值为 undefined, 类型为 undefined
24、JavaScript数据类型
5种数据类型：string、number、boolean、object、function
3种对象类型：Object、Date、Array
2种不包含任何值的数据类型：null、undefined
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof{name:‘John‘, age:34} // 返回 object
typeof new Date() // 返回 object
typeof function() {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 objectNaN数据类型是 number
数组（Array）数据类型是object
日期（Date）数据类型是object
null数据类型是object
未定义变量的数据类型是undefined
25、constructor
constructor属性返回所有JavaScript变量的构造函数
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:‘John‘,age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function(){}.constructor // 返回函数 Function(){ [native code] }可以用constructor属性查看对象是否为数组
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}26、将字符串转换为数字
空字符串转换为 0
其他字符串会转换为NaN
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN将布尔类型转换为数字
Number(false) // 返回 0 Number(true) // 返回 1
27、使用字符串方法
在JavaScript中，正则表达式通常用于两个字符串方法：search( ) 和 replace( ) 。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
search()方法使用正则表达式：
使用正则表达式搜索 "w3cschool" 字符串，且不区分大小写：
var str = "Visit w3cschool";
var n = str.search(/w3cschool/i);
输出结果为：6
replace()方法使用正则表达式：
使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 w3cschool :
var str ="Visit Microsoft!"; var res = str.replace(/microsoft/i, "w3cschool");
28、正则表达式修饰符
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
29、正则表达式模式
方括号用于查找某个范围内的字符
[abc] 查找方括号之间的任何字符。
[0-9] 查找任何从0至9的数字。
(x|y) 查找任何以 | 分隔的选项。
元字符是拥有特殊含义的字符
\d 查找数字。
\s 查找空白字符。
\b 匹配单词边界。
\uxxx 查找已16进制数 xxx 规定的Unicode字符。
量词
n+ 匹配任何包含至少一个n的字符串。
n* 匹配任何包含零个或多个n的字符串。
n? 匹配任何包含零个或一个n的字符串。
在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。
test() 方法是一个正则表达式方法。
test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
以下实例用于搜索字符串中的字母 "e":
/e/.exec("The best things in life are free!");
输出：e
30、自己抛出异常
function myFunction(){
try{
var x=document.getElementById("demo").value;
if(x==""){
throw "值为空";
}
if(isNaN(x)){
throw "不是数字";
}
if(x>5){
throw "太大";
}
if(x<5){
throw "太小";
}
}
catch(err){
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
<input id="demo" type="text">
<button type="button" onClick="myFunction()">测试输入</button>
<p id="mess"></p>本文出自 “夜那么深” 博客，请务必保留此出处http://lvhz94zm6.blog.51cto.com/9805380/1873772
JavaScript高级程序设计（第三版）