2018-11-13
第1章 简介
javascript=DOM(文档对象模型:多层节点结构)+BOM(浏览器对象模型)+ECMAScript
-
ECMAScript,由ECMA-262定义,提供核心语言功能;
-
文档对象模型(DOM),提供访问和操作网页内容的方法和接口;
-
浏览器对象模型(BOM),提供与浏览器交互的方法和接口
第2章 在html中使用javascript
1、通过转义字符 解决浏览器误解问题:
<script type="text/javascript">
function sayScript(){
alert("<\/script>");
}
</script>
2、在文档的<head>元素中包含所有JavaScript文件,意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后,才能开始呈现页面的内容(浏览器在遇到<body>标签时才开始呈现内容)。对于那些需要很多JavaScript代码的页面来说,这无疑会导致浏览器在呈现页面时出现明显的延迟,而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题,现代Web应用程序一般都把全部JavaScript引用放在<body>元素中,放在页面的内容后面。
3、defer属性延迟脚本
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" defer="defer" src="example1.js"></script>
<script type="text/javascript" defer="defer" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
虽然我们把<script>元素放在了文档的<head>元素中,但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件(详见第13章)执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。
defer属性只适用于外部脚本文件。这一点在HTML5中已经明确规定,因此支持HTML5的实现会忽略给嵌入脚本设置的defer属性。IE4~IE7还支持对嵌入脚本的defer属性,但IE8及之后版本则完全支持HTML5规定的行为。
5、async属性异步脚本
<script type="text/javascript" async src="example1.js"></script>
<script type="text/javascript" async src="example2.js"></script>
只适用于外部脚本文件。、
第二个脚本文件可能会在第一个脚本文件之前执行。因此,确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。为此,建议异步脚本不要在加载期间修改DOM。
异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。支持异步脚本的浏览器有Firefox 3.6、Safari 5和Chrome。
6、外部文件优点
-
可维护性:遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScript文件都放在一个文件夹中,维护起来就轻松多了。而且开发人员因此也能够在不触及HTML标记的情况下,集中精力编辑JavaScript代码。
-
可缓存:浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说,如果有两个页面都使用同一个文件,那么这个文件只需下载一次。因此,最终结果就是能够加快页面加载的速度。
-
适应未来:通过外部文件来包含JavaScript无须使用前面提到XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。
小结:
-
在包含外部JavaScript文件时,必须将src属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件,也可以是其他任何域中的文件。
-
所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用defer和async属性的情况下,只有在解析完前面<script>元素中的代码之后,才会开始解析后面<script>元素中的代码。
-
由于浏览器会先解析完不使用defer属性的<script>元素中的代码,然后再解析后面的内容,所以一般应该把<script>元素放在页面最后,即主要内容后面,</body>标签前面。
-
使用defer属性可以让脚本在文档完全呈现之后再执行。延迟脚本总是按照指定它们的顺序执行。
-
使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
第3章 基本概念
1、严格模式
要在整个脚本中启用严格模式,可以在顶部添加如下代码:
"use strict";
2、使用保留字
会报错:Identifier Expected
3、变量
函数作用域
function test(){
message = "hi"; // 全局变量
}
test();
alert(message); // "hi"
省略了var操作符,因而message就成了全局变量。(太不推荐了!什么鬼)
4、数据类型
简单数据类型:Undefined、Null、Boolean、Number和String
复杂数据类型:Object
typeof操作符:判断数据类型
会得到如下结果:
-
"undefined"——如果这个值未定义;
-
"boolean"——如果这个值是布尔值;
-
"string"——如果这个值是字符串;
-
"number"——如果这个值是数值;
-
"object"——如果这个值是对象或null;
-
"function"——如果这个值是函数。
强制转换数据类型:Boolean() String() Number()
Boolean()
数据类型 | 转换为true的值 | 转换为false的值 |
---|---|---|
Boolean | true | false |
String | 任何非空字符串 | "" (空字符串) |
Number | 任何非零数字值(包括无穷大) | 0和NaN (参见本章后面有关NaN的内容) |
Object | 任何对象 | null |
Undefined | undefined |
isNaN():判断是否是NaN
alert(isNaN(NaN)); //true
alert(isNaN(10)); //false(10是一个数值)
alert(isNaN("10")); //false(可以被转换成数值10)
alert(isNaN("blue")); //true(不能转换成数值)
alert(isNaN(true)); //false(可以被转换成数值1)
有3个函数可以把非数值转换为数值:Number()、parseInt()和parseFloat()
var num2 = Number(""); //0
var num2 = parseInt(""); // NaN
-
如果是Boolean值,true和false将分别被转换为1和0。
-
如果是数字值,只是简单的传入和返回。
-
如果是null值,返回0。
-
如果是undefined,返回NaN。
-
如果是字符串,遵循下列规则:
-
-
前面是数字后面是字符串,会从字符串开始截取,Number('123number') //123
如果字符串中只包含数字(包括前面带加号或头号的情况),则将其转换为十进制数值,即"1"会变成1,"123"会变成123,而"011"会变成11(注意:前导的零被忽略了); -
如果字符串中包含有效的浮点格式,如"1.1",则将其转换为对应的浮点数值(同样,也会忽略前导零);
-
如果字符串中包含有效的十六进制格式,例如"0xf",则将其转换为相同大小的十进制整数值;
-
如果字符串是空的(不包含任何字符),则将其转换为0;
-
如果字符串中包含除上述格式之外的字符,则将其转换为NaN。
-
-
如果是对象,则调用对象的valueOf()方法,然后依照前面的规则转换返回的值。如果转换的结果是NaN,则调用对象的toString()方法,然后再次依照前面的规则转换返回的字符串值。
指定了16作为第二个参数,字符串可以不带前面的"0x",如下所示:
var num1 = parseInt("AF", 16); //175
var num2 = parseInt("AF"); //NaN
toString()方法;数值、字符串、对象、布尔;都有toString方法;这个方法唯一能做的就是返回相应的字符串;其中null和undefined没有toString()方法;
String()属于强制转换, null转换的结果为null;undefined转换的结果为undefined;其余的如果有toString()方法,即调用该方法,返回相应的结果
5、for-in语句
for (var propName in window) {
document.write(propName);
}
6、break和continue
break是结束整个循环体,会执行完本次循环
continue是结束单次循环,直接进行下一次循环
var num = 0;
for (var i=1; i < 10; i++) {
if (i % 5 == 0) {
break;
}
num++;
}
alert(num); //4
var num = 0;
for (var i=1; i < 10; i++) {
if (i % 5 == 0) {
continue;
}
num++;
}
alert(num); //8
var num = 0;
outermost:
for (var i=0; i < 10; i++) {
for (var j=0; j < 10; j++) {
if (i == 5 && j == 5) {
break outermost;
}
num++;
}
}
alert(num); //55
break只退出一层循环,要想退出两层,得加一个标记
var num = 0;
outermost:
for (var i=0; i < 10; i++) {
for (var j=0; j < 10; j++) {
if (i == 5 && j == 5) {
continue outermost;
}
num++;
}
}
alert(num); //95
7、函数的参数:arguments