JavaScript高级程序设计(第三版)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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="java4_two.jpg"; } else{ element.src="java3_one.jpg"; } } <img id="myimage" onClick="changeImage()" src="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 // 返回 object
NaN数据类型是 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高级程序设计(第三版)的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript高级 引用类型《JavaScript高级程序设计(第三版)》