1.3 JavaScript简介
JavaScript是一种广泛用于客户端的语言，可插入HTML页面，常用来进行网页表单验证、实现网页的动态效果和网页交互等。伴随JavaScript诞生了很多优秀的框架，比如jQuery、AngularJs等。近年来，随着前端技术的快速发展，JavaScript越来越受开发者青睐。
在HTML文件中，JavaScript代码必须写在<script>和</script>之间，如果是采取引入外部JavaScript文件的形式，即在HTML文件中写入<script src='xxs.js'></script>，则在该JavaScript文件中不加入<script>标签。
1.3.1 JavaScript数据类型
JavaScript有字符串（string）、数字（number）、布尔（boolean）、数组（array）、对象（object）、空（null）、未定义（undefined）7种数据类型。JavaScript拥有动态类型，即相同的变量可用作不同的类型。
1．字符串
字符串是存储字符的变量。字符串可以是引号中的任意文本，可以使用单引号或双引号，例如：
var name= 'chen xiaolong';
var name="chen xiaolong";
下面介绍几个常用的字符串函数。
● indexOf () 查找特定字符在字符串中首次出现的位置。
var str= 'hello, world';
var n=str.indexOf('l');
返回n的值为2。如果没有找到字符串，那么返回值为－1。
● replace () 在字符串中用某些字符替换另一些字符。
var str='hello, world';
var newstr=str.replace('world','chenxiaolong');
此时newstr的值为‘hello, chenxiaolong'。
● split() 此函数可将字符串转换成数组。
var str='a, b, c, d';
var arr=str.split(',');
arr将会变成一个包含a, b, c, d的数组。
●slice() 提取字符串中的某一部分，并以新的字符串返回被提取的部分。
var str='hello, world';
var newstr=str.slice(2,5);
表示提取从str字符串的第2个位置到第5个位置的字符，此时newstr的值是‘lo'。
● charAt() 返回指定位置的字符。
var str='hello, world';
var newstr=str.charAt(2);
此时newstr的值是‘l'。
2．数字
数字分为带小数点和不带小数点的两种。
var n=11;
var n=11.11;
极大和极小的数字可以使用科学技术法（指数）来书写。
var n=123e5 ; //表示 12300000
var n=123-e5; //表示 0.00123
下面介绍几个常用的Math方法。
● Math.ceil() 对一个数进行上舍入。
var n=5.1;
var newn=Math.ceil(n);
则newn的值为6。
● Math.floor() 对数字进行下舍入。
var n=5.6;
var newn=Math.floor(n);
此时newn的值为5。
● Math.round() 把数字四舍五入为最接近的整数。
var n=Math.round(4.3);
var nn=Math.round(4.6);
n的值为4, nn的值为5。
● Math.max() 返回两个指定数中较大的那个。
var n=Math.max(4,8);
此时n的值为8。
● Math.cos() 返回一个数字的余弦值。
var n=Math.cos(Math.PI);
n的值为1。Math.PI表示数学中的π。
● Math.random() 返回0到1之间的一个随机数。
var n=Math.random();
此时n的值可能是一个类似0.6744568887788值。
3．布尔值
布尔（逻辑）只能有两个值：true和false。
var x=true;
var y=false；
布尔值常用在条件测试if语句中。
4．数组
数组是JavaScript中非常重要且常用的数据类型，可使用下面的代码创建一个数组：
var person=new Array();
person[0]='john';
person[1]='ricky';
person[2]='evan';
或者用
var person=new Array('john', 'ricky', 'evan')
或者用
var person=['john', 'ricky', 'evan'];
这样3种创建数组的方法。
下面介绍几个常用的数组对象方法。
● pop() 删除并返回数组的最后一个元素。
以上面的person数组为例，以下所有的例子都使用上面创建的person数组。
var n=person.pop();
此时返回的n值为‘evan'。
● push() 向数组的末尾添加一个或多个元素，并返回新的长度。
var n=person.push('thomas');
此时n的值为4。
● shift() 删除并返回第一个数组元素的值。
var n=person.shift();
此时n的值为‘john'。
● unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
var n=person.unshift('shallon');
此时n的值为4。
● join() 将数组中所有元素放入一个字符串，并返回该字符串。
var n=person.join('。');
此时n为‘john。ricky。evan'。
5．对象
JavaScript对象由花括号分割，在括号的内部，对象的属性以名称和值对的形式来定义，属性由逗号分割。
var person={
name : 'john',
age : 15,
gender : 'male',
}
对象属性有两种寻址方式，person.name和person['name']得到的值都是‘john'。
6. undefined和null
undefined表示变量不含值，如果要将变量清空，可将变量值设为null。
person=null；
1.3.2 JavaScript基本语句
JavaScript语句用分号分割，分号是可选的。浏览器按照代码的编写顺序依次执行每条语句，本小节介绍if、switch、while、break和continue几种语句。
1. if条件语句
条件语句基于不同的条件来执行不同的动作，只有当if后面括号内的内容为true时，才执行紧邻的大括号里的代码块。
例如：
if(1<2){
alert('yes');
}else{
alert('no');
}
判断if括号里的内容正确，所以会在浏览器弹窗显示‘yes', else后面的代码块只在if条件为false时才执行，例如：
if(11<10){
alert('good morning');
} else {
alert('good evening');
}
还可以继续在代码中增加else if来判断多种不同的情形，例如：
var test=5;
if (test<5){
alert('test小于5');
}else if( test>=5&&test<10){
alert('test大于等于5但是小于10');
}else if (test>=10&&test<20){
alert('test大于等于10 但是小于20');
}else{
alert('test大于等于20');
}
2. switch语句
switch语句可以判断当前变量值的多种可能，选择执行代码块，语法如下：
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n与case 1和case 2不同时执行的代码
}
首先设置表达式n（通常是一个变量），随后表达式的值会与结构中每个case的值做比较，如果存在匹配，则与该case关联的代码块会被执行。注意在每个case后面的代码块中须使用break阻止继续向下执行case语句。下面的一个例子显示今天的星期名称，请注意Sunday=0, Monday=1, Tuesday=2，等等。
var day=new Date().getDay();
switch (day)
{
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
case 3:
x="Today it's Wednesday";
break;
case 4:
x="Today it's Thursday";
break;
case 5:
x="Today it's Friday";
break;
default:
x="Today it's weekend';
}
程序会根据当前情况判断日期为多少，此时x的值是‘Today it's Wednesday'，当规定没有匹配到，则执行default部分的代码。
3．循环语句
JavaScript支持不同类型的循环：
● for：循环代码块一定的次数。
● for/in：循环遍历对象的属性。
● while：当指定的条件为true时循环指定的代码块。
●do/while：当指定的条件为true时循环指定的代码块。
（1）for循环
for循环是创建循环时常会用到的工具。
语法：
for (语句 1；语句 2；语句 3)
{
被执行的代码块
}
● 语句1循环（代码块）开始前执行。
● 语句2定义运行循环（代码块）的条件。
● 语句3在循环（代码块）已被执行之后执行。
实例如下：
for (var i=0; i<5; i++)
{
x=x+"The number is "+i+"<br>";
}
从上面的例子中，可以看到：
● 语句1在循环开始之前设置变量（var i=0）。
● 语句2定义循环运行的条件（i必须小于5）。
● 语句3在每次代码块已被执行后增加一个值（i++）。
（2）for/in循环
for/in语句循环用来遍历对象的属性。
实例如下：
var person={fname:"John", lname:"Doe", age:25};//声明一个pesson对象
var txt='';
for (x in person) //循环遍历
{
txt=txt+person[x];
}
alert(txt);
本例中var声明了一个person对象，使用for循环遍历这个对象获得对象属性。执行这段程序将会在浏览器弹窗显示JohnDoe25。
（3）While循环
While循环会在指定条件为true（真）时循环执行代码块。
语法：
while (条件)
{
需要执行的代码
}
请看如下实例，只要变量i小于5循环就将一直运行。
while (i<5)
{
x=x+"The number is "+i+"<br>";
i++;
}
如果忘记增加条件中所用变量i的值，循环条件i<5将会永远为真，该循环永远不会结束，这可能导致浏览器崩溃。
（4）do/While循环
do/while循环是while循环的变体。该循环至少会执行一次循环体中的代码块，然后检查条件是否为true（真），如果条件为true（真），就会重复这个循环，否则跳出循环。
语法：
do
{
需要执行的代码
}
while (条件);
下面的例子使用do/while循环，即使条件是false（假），该循环也至少会执行一次，因为代码块会在条件被测试前执行：
do
{
x=x+"The number is "+i+"<br>";
i++;
}
while (i<5);
4. Break和Continue语句
break语句用于终止循环，continue语句用于跳过循环中的一个迭代。
Break语句的使用方法如下：
for (i=0; i<10; i++)
{
if (i==3)
{
break;
}
x=x+"The number is "+i+"<br>";
}
本例中，当循环到i=3时，终止循环。
Continue语句的使用方法如下：
for (i=0; i<=10; i++)
{
if (i==3) {continue;
x=x+"The number is "+i+"<br>";
}
}
本例中，当i=3时，将跳出循环。
1.3.3 JavaScript函数和事件
本小节介绍JavaScript的函数和事件，可以将一段代码定义成函数，这样在以后使用的时候就可以直接调用，JavaScript的事件则可以实现网页和用户的交互。
1．函数
JavaScript使用关键字function定义函数，其语法格式如下：
function functionName(parameters){
代码部分
}
说明：这里定义了一个名为functionName的函数，parameters为函数参数。
函数在需要的时候被调用。例如，定义一个add函数：
function add(a, b) {
return a + b;
}
本例中，如果给add函数传的两个参数都是数字类型，就返回两个参数的和；如果两个或其中一个是字符串类型，则此时的+是连字符，函数返回的是拼接后的字符串。关于JavaScript函数的更多用法可查阅相关资料。
2．事件
JavaScript通过操作HTML DOM做出事件反应，在HTML页面应用JavaScrip事件的例子如下：
<html>
<head>
<title></title>
</head>
<body>
<h1 onclick='clickFunction(this)'>click here</h1>
</body>
<script type="text/javascript">
function clickFunction(e){
e.innerHTML='change';
}
</script>
</html>
当单击文字click here时，其中的内容将会变成change, JavaScript中事件的用法便是如此。JavaScript事件列表如表1-6所示。
表1-6 JavaScript事件列表
（续表）
1.3.4 常用的JavaScript框架和库
JavaScript有很多优秀的框架和库，通过使用这些框架和库能简化开发流程，提高开发效率。
1. jQuery
jQuery是一个无须介绍的库。它凭一己之力让跨浏览器网站使用成为现实，同时把Web带到今天的位置。Web标准已经被大多数浏览器制造商采纳并真正地尊重，jQuery是其中的原因之一。jQuery是世界上最常用的JavaScript库，使得DOM遍历、事件处理、动画、Ajax在所有浏览器上变得更简单、更容易。
2. AngularJS
Angular是流行的企业级框架，许多开发人员都在使用它来构建和维护复杂的Web应用程序。Angular的人气非常高，很多企业都在使用。Angular是一个由谷歌支持的开源框架。Angular自称是HTML的一个扩展，用来构建复杂的Web应用程序。
3. React
React是近年最受欢迎的JavaScript项目，是一个开源软件，主要由Facebook开发，其他大型科技公司也有贡献。React自称是一个用于构建用户界面的JavaScript库。React主要是MVC中的V。它的重点完全在MVC的V部分，忽视应用程序架构的其余部分。它提供了一个组件层，使得创建UI元素、组合元素变得更容易。它使用虚拟DOM，因此优化了渲染，且允许从node.js渲染React。此外，它实现了单向响应的数据流，因此比其他框架更容易理解和使用。
4. Backbone
Backbone是一个著名的简易框架，适合单个JavaScript文件。Backbone已经存在有一段时间了。对于一些为小型Web应用寻找一个结构简单的框架而不想引入像Angular似的大型框架的团队，Backbone特别受欢迎。Backbone提供了一个完整的MVC框架及路由，模型允许键-值绑定和数据变化的事件处理，模型（和集合）可以连接到RESTful API，视图具有声明式事件处理，路由在处理URL和状态管理上做得很出色。它包含你创建一个单页面应用程序所需要的一切，且没有提供太多东西，没有不必要的复杂度。