JavaScript基础学习笔记 绝对原创
JavaScript概述
1.什么是JavaScript
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基
于对象和事件驱动并具有相对安全性的客户端脚本语言。因为他不需要在一个语言环境下运
行，而只需要支持它的浏览器即可。它的主要目的是，验证发往服务器端的数据、增加Web
互动、加强用户体验度等。
2.JavaScript的特点
松散性
JavaScript 语言核心与C、C++、Java 相似，比如条件判断、循环、运算符等。但，它
却是一种松散类型的语言，也就是说，它的变量不必具有一个明确的类型。
对象属性
JavaScript 中的对象把属性名映射为任意的属性值。它的这种方式很像哈希表或关联数
组，而不像C 中的结构体或者C++、Java 中的对象。
继承机制
JavaScript 中的面向对象继承机制是基于原型的，这和另外一种不太为人所知的Self 语
言很像，而和C++以及Java 中的继承大不相同。
3.JavaScript历史
引子
大概在1992 年，有一家公司Nombas 开发一种叫做C--(C-minus-minus,简称Cmm)的嵌
入式脚本语言。后应觉得名字比较晦气，最终改名为ScripEase。而这种可以嵌入网页中的
脚本的理念将成为因特网的一块重要基石。
诞生
1995 年，当时工作在Netscape(网景)公司的布兰登(Brendan Eich)为解决类似于“向服务
器提交数据之前验证”的问题。在Netscape Navigator 2.0 与Sun 公司联手开发一个称之为
LiveScript 的脚本语言。为了营销便利，之后更名为JavaScript(目的是在Java 这课大树下好
乘凉)。
邪恶的后来者
因为JavaScript 1.0 如此成功，所以微软也决定进军浏览器，发布了IE 3.0 并搭载了一
个JavaScript 的克隆版，叫做JScript（这样命名是为了避免与Netscape 潜在的许可纠纷），
并且也提供了自己的VBScript。
标准的重要
在微软进入后，有3 种不同的JavaScript 版本同时存在：Netscape Navigator 3.0 中的
JavaScript、IE 中的JScript 以及CEnvi 中的ScriptEase。与C 和其他编程语言不同的是，
JavaScript 并没有一个标准来统一其语法或特性，而这3 种不同的版本恰恰突出了这个问题。
随着业界担心的增加，这个语言标准化显然已经势在必行。
ECMA
1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA）。第39
技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法
和语义”（http://www.ecma-international.org/memento/TC39.htm）。由来自Netscape、Sun、微
软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的TC39 锤炼出了
ECMA-262，该标准定义了叫做ECMAScript 的全新脚本语言。
灵敏的微软、迟钝的网景
虽然网景开发了JavaScript 并首先提交给ECMA 标准化，但因计划改写整个浏览器引擎
的缘故，网景晚了整整一年才推出“完全遵循ECMA 规范”的JavaScript1.3。而微软早在一
年前就推出了“完全遵循ECMA 规范”的IE4.0。这导致一个直接恶果：JScript 成为JavaScript
语言的事实标准。
标准的发展
在接下来的几年里，国际标准化组织及国际电工委员会（ISO/IEC）也采纳ECMAScript
作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同程度的成功和失
败）将ECMAScript 作为JavaScript 实现的基础。
山寨打败原创
JScript 成为JavaScript 语言的事实标准，加上Windows 绑定着IE 浏览器，几乎占据全
部市场份额，因此，1999 年之后，所有的网页都是基于JScript 来开发的。而JavaScript1.x
4.JavaScript核心
虽然JavaScript 和ECMAScript 通常被人们用来表达相同的含义，但JavaScript 的含义
却比ECMA-262 中规定的要多得多。一个完整的JavaScript 应该由下列三个不同的部分组成。
1.核心(ECMAScript)
2.文档对象模型(DOM)
3.浏览器对象模型(BOM)
ECMAScript介绍
由ECMAScript-262 定义的ECMAScript 与Web 浏览器没有依赖关系。ECMAScript 定
义的只是这门语言的基础，而在此基础之上可以构建更完善的脚本语言。我们常见的Web
浏览器只是ECMAScript 实现可能的宿主环境之一。
既然他不依赖于Web 浏览器，那么他还在哪些环境中寄宿呢？比如：ActionScript、
ScriptEase 等。而他的组成部分有：语法、类型、语句、关键字、保留字、操作符、对象等。
文档对象模型(DOM)
文档对象模型(DOM，Document Object Model)是针对XML 但经过扩展用于HTML 的应
用程序编程接口(API，Application Programming Interface)。
浏览器对象模型(BOM)
访问和操作浏览器窗口的浏览器对象模型(BOM，Browser Object Model)。开发人员使
用BOM 可以控制浏览器显示页面以外的部分。而BOM 真正与众不同的地方(也是经常会导
致问题的地方)，还是它作为JavaScript 实现的一部分，至今仍没有相关的标准。
5.开发工具集
代码编辑器：Notepad++。(在360 软件管家里找到，直接下载安装即可)
浏览器：谷歌浏览器，火狐浏览器，IE 浏览器，IETest 工具等。
JavaScript使用
<script>标签的解析
<Script>标签解析
<script>xxx</script>这组标签，是用于在html 页面中插入js 的主要方法。它主要有以下
几个属性：
1.charset：可选。表示通过src 属性指定的字符集。由于大多数浏览器忽略它，所以很
少有人用它。
2.defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。由于大多数浏
览器不支持，故很少用。
3.language：已废弃。原来用于代码使用的脚本语言。由于大多数浏览器忽略它，所以
不要用了。
4.src：可选。表示包含要执行代码的外部文件。
5.type：必需。可以看作是language 的替代品。表示代码使用的脚本语言的内容类型。
范例：type="text/javascript"。
<script type="text/javascript">
alert('欢迎来到JavaScript 世界！');
</script>
alert("\<\/script\>");
alert('</scr'+'pit>');
JS代码嵌入到html页面中的方式
1.第一种方法(导入外部.js文件)
<script type="text/javascript" src="demo1.js"></script>
注意：这样标签内就没有任何JS 代码了。但，要注意的是，虽然没有任何代码，也不能用单标签，可以放在页面中的其他位置，不仅仅可以放在<head></head>中。
2.第二种放在html中的任意位置
3.放在herf="javascript:alert('嵌入在此')"
4.οnclick="alert('鼠标点击事件')"
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>test</title>
<script src="test.js">
//第一种嵌入代码方式
//如果是使用src来导入文件，这里写的代码都无效
//不仅可以放在head 头内
alert('我是src'); //此代码无效
</script>
<script language="javascript" type="text/javascript">
//第二种嵌入js代码方式
alert('第二种非简写模式');
</script>
</head>
<body>
<h3>这是一段在BODY内的文字</h3>
<a href="javascript:alert('a标记中的js');">一个JS触发事件</a>
<a href="#bottom" οnclick="alert('onclick触发事件');">onclick点击触发事件</a>
<div>
<script>
alert('在DIV标签中弹出');
</script>
</div>
</p>###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
<a name="bottom">底部</a>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
###############################</p>
</body>
</html>
<script language="javascript" type="text/javascript">
//第二种嵌入js代码方式
alert('第二种非简写模式');
</script>
<script>
//js 代码按顺序执行 找到对象的时候 对象要存储
test = document.getElementById('pp');
test.style.color = 'green';
</script>
语法、关键保留字及变量
语法
1.JS里面所有的东西 严格区分大小写
ECMAScript 中的一切，包括变量、函数名和操作符都是区分大小写的。例如：text 和
Text 表示两种不同的变量。
2.JS 是一个弱类型语言 同PHP
3.标识符
所谓标识符，就是指变量、函数、属性的名字，或者函数的参数。标识符可以是下列格
式规则组合起来的一或多个字符：
1.第一字符必须是一个字母、下划线(_)或一个美元符号($)。
2.其他字符可以是字母、下划线、美元符号或数字。
3.不能把关键字、保留字、true、false 和null 作为标识符。
例如：myName、book123 等
4.
注释
ECMAScript 使用C 风格的注释，包括单行注释和块级注释。
// 单行注释
/*
这是一个多行
注释
*/
作用：对代码说明 和调试代码
5.
直接量(字面量 literal)
所有直接量(字面量)，就是程序中直接显示出来的数据值。
100 //数字字面量
'李炎恢' //字符串字面量
false //布尔字面量
/js/gi //正则表达式字面量
null //对象字面量
{x:1,y:2} 对象字面量表达式
[1,2,3,4,5] 数组字面量表达式
6.
关于分号
//JS里面的换行和分号都是语句的结束标志
//换行只是需要的时候充当结束标志
document.write('@@@@@@@@'); alert('######'); //不报错
alert('aaaaaa') //可以不写分号 一句话的结束 和PHP有区别
alert
('bbbbb')
//不报错，宽松方式，换行优先检测不报错优先执行 在检测是否结束
关键字、保留字
注：关键字、保留字不能作为标识符
变量
//定义变量规则
//同PHP 字母 下划线 $ 中文 开头 的中文 字母下划线数字组合
//不能使用关键字和保留字
//声明后在赋值
var a;
a = 10;
//声明时就赋值
var b = 20;
//声明多个变量
var c,d;
//var 2a = 50;
// alert(2a); 不能以数字开头
alert(b);
//声明多个变量使用逗号隔开，换行写格式更清晰
var aa = 10,
bb = 20,
cc;
var 变量;
变量 = '我是中文变量'; //不推荐使用中文
alert(变量);
//查看变量类型typeof
alert(typeof bb);
数据类型
简单数据类型说明
ECMAScript 中有5 种简单数据类型：Undefined、Null、Boolean、Number 和String。
还有一种复杂数据类型——Object。ECMAScript 不支持任何创建自定义类型的机制，所有
值都成为以上6 中数据类型之一。
说明：其中Null 数组 Object 都属于对象，还有一个函数类型。 只是个别书籍说法不一样。
第一个类型Undefined
var box;
alert(box);
alert(typeof box); //box是Undefined类型，值是undefined,类型返回的字符串也是undefined
第二种类型Boolean 布尔型
var box = true;
alert(box);
alert(typeof box); //box 是Boolean类型，值是true,类型返回的字符串是boolean.
第三种类型 String 字符串
var box = 'vilin'; //使用双引号也可以
alert(box);
alert(typeof box); //box是String类型，值是vilin,类型返回字符串是string.
第四种类型 Number 数值
var box = 110;
alert(box);
alert(typeof box); //box是Number类型，值是110，类型返回的字符串是number.
第五种类型 Object
var box = {};
var box = new Object(); //另一种创建对象方法
alert(box);
alert(typeof box); //box 是Object类型，值是[object Object],类型返回字符串是object
第六种类型 Null Object的一种
var box = null;
alert(box);
alert(typeof box); //box是Null类型，值是null,类型返回字符串是object.
第七种类型 函数
function box(){
}
alert(box);
alert(typeof box); //box是Function 函数，值是function(){},类型返回字符串是function.
typeof操作符说明
typeof 操作符可以操作变量，也可以操作字面量。虽然也可以这样使用：typeof(box)，
但，typeof 是操作符而非内置函数。PS：函数在ECMAScript 中是对象，不是一种数据类型。
所以，使用typeof 来区分function 和object 是非常有必要的。
数据类型详细说明：
第一种类型 Undefined
Undefined 类型只有一个值，即特殊的undefined。在使用var 声明变量，但没有对其初
始化时，这个变量的值就是undefined。没有声明的变量也是Undefined.
说明：没必要把声明undefined类型和声明变量不进行初始化(不赋值)
第二种类型 Null Object的一种
主要是用来做对象的初始化
var box = null;
if (box != null) {
alert('box 对象已存在！');
}
在数值上 undefined == null ，类型不相等
alert(undefined == null); //返回true,
字符串初始化
var box = '';空字符串
var box= 0；数值
var box = false;
第三种类型 Boolean 布尔型
布尔型的值只有两种 true false
在进行比较判断时，其他类型的值会进行Boolean的转换，转换分为隐式类型转换 和显示类型转换（强制转换），强制转换使用Boolean(变量或值)
第四种类型 Number 数值类型
Number 类型包含两种数值：整型和浮点型。为了支持各种数值类型，ECMA-262 定义
了不同的数值字面量格式。
不同进制的数值类型： 十进制 、八进制、十六进制
var num = 129;
alert(num); //129
var num = 070; //八进制
alert(num); //56
var num = 079;
alert(num); //79 会自动去掉前导零
var num = 0xA; //十六进制
alert(num); //10
浮点类型
var num = 3.8
alert(num); //3.8
var num = 3.80 //3.8
var num = .8 //0.8 不推荐
var num = 12.0 //12 自动转换
var num = 4.12e3 //4.12 10的3次方
var num = 0.00000000412; //4.12e-9
注意：浮点运算不准确，所以不要用浮点做运算
alert(0.1+0.2); //0.3000000000004
如果超过了浮点数值的范围的最大值和最小值，那么就会 出现Infinity(正无穷)或-Infinity(负无穷)
alert(Number.MIN_VALUE);
alert(Nnmber.MAX_VALUE);
alert(-100e1000);
alert(100e1000);
alert(Number.POSITIVE_INFINITY); //正无穷
alert(Number.NEGATIVE_INFINITY); //负无穷
要想确定一个数值到底是否超过了规定范围，可以使用isFinite()函数。如果没有超过，
返回true，超过了返回false。 alert(isFinite(1000));
NaN，即非数值(Not a Number)是一个特殊的值，这个数值用于表示一个本来要返回数
值的操作数未返回数值的情况(这样就不会抛出错误了)。比如，在其他语言中，任何数值除
以0 都会导致错误而终止程序执行。但在ECMAScript 中，会返回出特殊的值，因此不会影
响程序执行。
var box = 0 / 0; //NaN
var box = 12 / 0; //Infinity
var box = 12 / 0 * 0; //NaN
如果得到NaN
alert(Number.NaN); //NaN
alert(NaN+1); //NaN
alert(NaN == NaN) //false 可以通过它来判断数值变量是不是非NaN
判断是不是NaN类型
alert(isNaN(NaN)); //true
alert(isNaN(25)); //false，25 是一个数值
alert(isNaN('25')); //false，'25'是一个字符串数值，可以转成数值
alert(isNaN('Lee')); //true，'Lee'不能转换为数值
alert(isNaN(true)); //false true 可以转成成1
alert(isNaN(undefined)); //true
isNaN()函数也适用于对象。在调用isNaN()函数过程中，首先会调用valueOf()方法，然
后确定返回值是否能够转换成数值。如果不能，则基于这个返回值再调用toString()方法，
再测试返回值。
var box = {
toString : function () {
return '123'; //可以改成return 'Lee'查看效果
}
};
alert(isNaN(box)); //false
有3 个函数可以把非数值转换为数值：Number()、parseInt()和parseFloat()。Number()
函数是转型函数，可以用于任何数据类型，而另外两个则专门用于把字符串转成数值。
alert(Number(true)); //1，Boolean 类型的true 和false 分别转换成1 和0
alert(Number(25)); //25，数值型直接返回
alert(Number(null)); //0，空对象返回0
alert(Number(undefined)); //NaN，undefined 返回NaN
字符串转换规则
alert(Number('456')); //456
alert(Number('070')); //70
alert(Number('08.90')); //8.9
alert(Number('')); //0
alert('Lee123'); //NaN
alert('123abc'); // 只要带有非数字字符就返回NaN
Number转换的是对象，首先会调用valueOf()方法，然后确定返回值是否能够转换成数值。如果
转换的结果是NaN，则基于这个返回值再调用toString()方法，再测试返回值。
var box = {
toString : function () {
return '123'; //可以改成return 'Lee'查看效果
}
};
alert(Number(box)); //123
由于Number()函数在转换字符串时比较复杂且不够合理，因此在处理整数的时候更常
用的是parseInt()。只能转换字符串为整数
alert(parseInt('456Lee')); //456，会返回整数部分
alert(parseInt('Lee456Lee')); //NaN，如果第一个不是数值，就返回NaN
alert(parseInt('12Lee56Lee')); //12，从第一数值开始取，到最后一个连续数值结束
alert(parseInt('56.12')); //56，小数点不是数值，会被去掉
alert(parseInt('')); //NaN，空返回NaN
parseInt()除了能够识别十进制数值，也可以识别八进制和十六进制。
alert(parseInt('0xA')); //10，十六进制
alert(parseInt('070')); //56，八进制 Number会转换为70
alert(parseInt('0xALee')); //100，十六进制，Lee 被自动过滤掉
ECMAScript 为parseInt()提供了第二个参数，用于解决各种进制的转换。
alert(parseInt('0xAF')); //175，十六进制
alert(parseInt('AF',16)); //175，第二参数指定十六进制，可以去掉0x 前导
alert(parseInt('AF')); //NaN，理所当然
alert(parseInt('101010101',2)); //314，二进制转换
alert(parseInt('70',8)) //56，八进制转换
parseFloat()是用于浮点数值转换的，和parseInt()一样，从第一位解析到非浮点数值位置。
alert(parseFloat('123Lee')); //123，去掉不是别的部分
alert(parseFloat('0xA')); //0，不认十六进制
alert(parseFloat('123.4.5')); //123.4，只认一个小数点
alert(parseFloat('0123.400')); //123.4，去掉前后导
alert(parseFloat('1.234e7')); //12340000，把科学技术法转成普通数值
String 字符串
字符串概念
String 类型用于表示由于零或多个16 位Unicode 字符组成的字符序列，即字符串。字
符串可以由双引号(")或单引号(')表示。
单双引号的说明
1.与PHP类似，都是用来声明字符串类型的。
2.不同点是：单双引号都不能解析变量，所以要用+连接变量
3.单双引号都可以解析一些特殊字符，如\n \t等（php中单引号只能单引号和转义字符本身）
4.必须成对出现，不能自插，只能互插。
一些特殊的转义序列（字面量）
声明字符串的方法
1.var box = "abc"; //推荐使用双引号，符合大多数语言习惯
2.box1 = "bcd"; //不适用var来声明
3. var box2 = new String('good'); //使用对象的方式声明
//三种方式得到的字符串都可以使用string对象里面的属性和方法
alert(str3.toUpperCase());
toString方法
toString()方法可以把值转换成字符串。
var box = 11;
//alert(box); //11 数值类型
//alert(typeof box); 返回number
//alert(box.toString()); 11 字符串类型
//alert(typeof box.toString()); string
var bool = true;
//alert(bool); //true 布尔型
//alert(typeof bool); //boolean
//alert(bool.toString()); //true 字符串类型
//alert(typeof bool.toString()); //string
toString()方法一般是不需要传参的，但在数值转成字符串的时候，可以传递进制参数。
var box = 10;
alert(box.toString()); //10，默认输出 字符串类型
alert(box.toString(2)); //1010，二进制输出 字符串类型
alert(box.toString(8)); //12，八进制输出 字符串类型
alert(box.toString(10)); //10，十进制输出 字符串类型
alert(box.toString(16)); //a，十六进制输出 字符串类型
子主题 4
String方法
toString不能转换Null和Undefined类型。这是就需要使用String()来进行转换了。
var box;
alert(box); //undefined 值为
alert(typeof box); //undefined 类型
alert(String(box)); //undefined 字符串类型
alert(typeof String(box)); //string 类型
var box = null;
alert(box); //null 值为
alert(typeof box); //object 类型
alert(String(box)); //null 字符串类型
alert(typeof String(box)); //string 类型
PS：使用String方法如果有值将调用toString()方法，则调用该方法并返回相应的结果；如果是null 或者
undefined，则返回"null"或者"undeinfed"。
Object 对象类型
ECMAScript 中的对象其实就是一组数据和功能的集合。对象可以通过执行new 操作符
后跟要创建的对象类型的名称来创建。
var box = new Object();
Object()是对象构造，如果对象初始化时不需要传递参数，可以不用写括号，但这种方
式我们是不推荐的。
var box = new Object;
Object()里可以任意传参，可以传数值、字符串、布尔值等。而且，还可以进行相应的
计算。
var box = new Object(2); //Object 类型，值是2
var age = box + 2; //可以和普通变量运算
alert(age); //输出结果，转型成Number 类型了
既然可以使用new Object()来表示一个对象，那么我们也可以使用这种new 操作符来创
建其他类型的对象。
var box = new Number(5); //new String('Lee')、new Boolean(true)
alert(typeof box); //Object 类型
//创建对象
var obj = {};
var obj1 = {a:'test',b:18};
alert(obj1);
alert(typeof obj1);
alert(obj1.a);
alert(obj1.toString());
var obj2 = new Object(true);
//数据类型Null 也是对象的一种
var obj = null;
//null {} undefined 都是空 使用 ==判断是相等的
数组也是对象的一种
/* //创建一个数组
var arr = [];
//alert(arr); //值 空的
//alert(typeof arr); //Object类型 值为 空的 typeof 输出字符串为 object
var arr1 = ['a','b','c','d'];
//alert(arr1); //值 a,b,c,d
//alert(typeof arr1); //Object类型 值为 a,b,c,d typeof 输出字符串为object
//alert(arr1[2]); //c 访问数组中的元素
//创建数组的另外一种方法
var arr2 = new Array();
//alert(arr2); //值 空的
//alert(typeof arr2); //Object类型 值为 空的 typeof 输出字符串为 object
var arr3 = new Array(5); //5代表数组的个数
alert(arr3.length); //数组长度 5
alert(arr3); //值 ,,,,
alert(typeof arr3); //Object类型 值为 ,,,, typeof 输出字符串为object
var arr4 = new Array(5,6,7,8);
var arr5 = new Array('5'); //有个元素 */
//alert(typeof arr4[2]); 查看元素类型
PS：面向对象是JavaScript 课程的重点，这里我们只是简单做个介绍。详细的课程将在
以后的章节继续学习。
Function 函数类型
//数据类型：function
function test(){
alert(1);
}
//函数是一种特殊的数据类型，可以直接赋值给变量
var a = test; //把函数赋给变量
//alert(a); //整个函数体
//test(); //调用函数
//匿名函数
var show = function(){
alert(2);
}
//show(); //调用匿名函数
//alert(show); //整个函数体
alert(typeof show); //typeof 输出字符串function
var hanshu = new Function();
alert(hanshu);
alert(typeof hanshu); //typeof 输出字符串function
//总结 函数定义的三种方式
/*
function test(){}
var fun = function(){}
var fun1 = new Function(); //不传参数，则产生一个空的函数，传一个参数，这个
//参数作为函数体，多个参数，前面的所有的参数作为形参，放在小括号里，最后一个
//参数作为函数体放在花括号里
*/
1087
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
