下载掌阅APP，畅读海量书库
立即打开
JavaScript是一种广泛用于客户端的语言，可插入HTML页面，常用来进行网页表单验证、实现网页的动态效果和网页交互等。伴随JavaScript诞生了很多优秀的框架，比如jQuery、AngularJs等。近年来，随着前端技术的快速发展，JavaScript越来越受开发者青睐。
在HTML文件中，JavaScript代码必须写在<script>和</script>之间，如果是采取引入外部JavaScript文件的形式，即在HTML文件中写入<script src='xxs.js'></script>，则在该JavaScript文件中不加入<script>标签。
JavaScript有字符串（string）、数字（number）、布尔（boolean）、数组（array）、对象（object）、空（null）、未定义（undefined）7种数据类型。JavaScript拥有动态类型，即相同的变量可用作不同的类型。
字符串是存储字符的变量。字符串可以是引号中的任意文本，可以使用单引号或双引号，例如：
var name= 'chen xiaolong';
var name="chen xiaolong";
下面介绍几个常用的字符串函数。
var str= 'hello,world';
var n=str.indexOf('l');
返回n的值为2。如果没有找到字符串，那么返回值为－1。
var str='hello,world';
var newstr=str.replace('world', 'chenxiaolong');
此时newstr的值为‘hello,chenxiaolong’。
var str='a,b,c,d';
var arr=str.split(', ');
arr将会变成一个包含a,b,c,d的数组。
var str='hello,world';
var newstr=str.slice(2,5);
表示提取从str字符串的第2个位置到第5个位置的字符，此时newstr的值是‘lo’。
var str='hello,world';
var newstr=str.charAt(2);
此时newstr的值是‘l’。
数字分为带小数点和不带小数点的两种。
var n=11;
var n=11.11;
极大和极小的数字可以使用科学技术法（指数）来书写。
var n=123e5 ; //表示 12300000
var n=123-e5； //表示 0.00123
下面介绍几个常用的Math方法。
var n=5.1;
var newn=Math.ceil(n);
则newn的值为6。
var n=5.6;
var newn=Math.floor(n);
此时newn的值为5。
var n=Math.round(4.3);
var nn=Math.round(4.6);
n的值为4，nn的值为5。
var n=Math.max(4,8);
此时n的值为8。
var n=Math.cos(Math.PI);
n的值为1。Math.PI表示数学中的π。
var n=Math.random();
此时n的值可能是一个类似0.6744568887788值。
布尔（逻辑）只能有两个值：true和false。
var x=true;
var y=false；
布尔值常用在条件测试if语句中。
数组是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种创建数组的方法。
下面介绍几个常用的数组对象方法。
以上面的person数组为例，以下所有的例子都使用上面创建的person数组。
var n=person.pop();
此时返回的n值为‘evan’。
var n=person.push('thomas');
此时n的值为4。
var n=person.shift();
此时n的值为‘john’。
var n=person.unshift('shallon');
此时n的值为4。
var n=person.join('。');
此时n为‘john。ricky。evan’。
JavaScript对象由花括号分割，在括号的内部，对象的属性以名称和值对的形式来定义，属性由逗号分割。
var person={
name : 'john',
age : 15,
gender : 'male',
}
对象属性有两种寻址方式，person.name和person['name']得到的值都是‘john’。
undefined表示变量不含值，如果要将变量清空，可将变量值设为null。
person=null；
JavaScript语句用分号分割，分号是可选的。浏览器按照代码的编写顺序依次执行每条语句，本小节介绍if、switch、while、break和continue几种语句。
条件语句基于不同的条件来执行不同的动作，只有当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');
}
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部分的代码。
JavaScript支持不同类型的循环：
（1）for循环
for循环是创建循环时常会用到的工具。
语法：
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
实例如下：
for (var i=0; i<5; i++)
{
x=x + "The number is " + i + "<br>";
}
从上面的例子中，可以看到：
（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);
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时，将跳出循环。
本小节介绍JavaScript的函数和事件，可以将一段代码定义成函数，这样在以后使用的时候就可以直接调用，JavaScript的事件则可以实现网页和用户的交互。
JavaScript使用关键字function定义函数，其语法格式如下：
function functionName(parameters) {
代码部分
}
说明： 这里定义了一个名为functionName的函数，parameters为函数参数。
函数在需要的时候被调用。例如，定义一个add函数：
function add(a,b) {
return a + b;
}
本例中，如果给add函数传的两个参数都是数字类型，就返回两个参数的和；如果两个或其中一个是字符串类型，则此时的＋是连字符，函数返回的是拼接后的字符串。关于JavaScript函数的更多用法可查阅相关资料。
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事件列表
(续表)
(续表)
来源：http://www.cnblogs.com/skylaugh/archive/2006/09/01/492450.html javascript事件列表解说。
JavaScript有很多优秀的框架和库，通过使用这些框架和库能简化开发流程，提高开发效率。
jQuery是一个无须介绍的库。它凭一己之力让跨浏览器网站使用成为现实，同时把Web带到今天的位置。Web标准已经被大多数浏览器制造商采纳并真正地尊重，jQuery是其中的原因之一。jQuery是世界上最常用的JavaScript库，使得DOM遍历、事件处理、动画、Ajax在所有浏览器上变得更简单、更容易。
Angular是流行的企业级框架，许多开发人员都在使用它来构建和维护复杂的Web应用程序。Angular的人气非常高，很多企业都在使用。Angular是一个由谷歌支持的开源框架。Angular自称是HTML的一个扩展，用来构建复杂的Web应用程序。
React是近年最受欢迎的JavaScript项目，是一个开源软件，主要由Facebook开发，其他大型科技公司也有贡献。React自称是一个用于构建用户界面的JavaScript库。React主要是MVC中的V。它的重点完全在MVC的V部分，忽视应用程序架构的其余部分。它提供了一个组件层，使得创建UI元素、组合元素变得更容易。它使用虚拟DOM，因此优化了渲染，且允许从node.js渲染React。此外，它实现了单向响应的数据流，因此比其他框架更容易理解和使用。
Backbone是一个著名的简易框架，适合单个JavaScript文件。Backbone已经存在有一段时间了。对于一些为小型Web应用寻找一个结构简单的框架而不想引入像Angular似的大型框架的团队，Backbone特别受欢迎。Backbone提供了一个完整的MVC框架及路由，模型允许键-值绑定和数据变化的事件处理，模型（和集合）可以连接到RESTful API，视图具有声明式事件处理，路由在处理URL和状态管理上做得很出色。它包含你创建一个单页面应用程序所需要的一切，且没有提供太多东西，没有不必要的复杂度。