2.3 JavaScript技术
2.3.1 JavaScript技术概述
JavaScript为一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。其特性如下。
1 是一种解释性脚本语言（代码不进行预编译）。
2 主要用来向HTML页面添加交互行为。
3 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
4 跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行（如Windows、Linux、Mac、Android、iOS等）。
JavaScript脚本语言具有以下特点。
1 脚本语言。JavaScript是一种解释性的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。
2 基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。
3 简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。
4 动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作，JavaScript都可直接对这些事件做出相应的响应。
5 跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，目前JavaScript已被大多数的浏览器所支持。
不同于服务器端脚本语言，如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较青睐于JavaScript以减少服务器的负担，而与此同时也带来另一个问题：安全性。而随着服务器的强壮，虽然程序员更喜欢运行于服务器端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（如AJAX）必须依赖Javascript在客户端进行支持。随着引擎，如V8和框架，如Node.js的发展及其事件驱动及异步IO等特性，JavaScript逐渐被用来编写服务器端程序。
虽然JavaScript与Java的名字中都有Java，但是它们之间除了语法上有一些相似之处外，两者毫不相干。JavaScript与Java的区别主要表现在以下几个方面。
1 JavaScript是一种基于对象和事件驱动的脚本语言，它本身提供了非常丰富的内部对象供设计人员使用；而Java是一种真正的面向对象的语言，即使是开发简单的程序，也必须设计对象。
2 JavaScrip是一种解释性编程语言，其源代码在发往客户端执行之前不需要经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行；而Java的源代码在传递到客户端执行之前，必须经过编译才可以执行。
3 JavaScript采用弱变量，即变量在使用前无须声明，解释器在运行时将检查其数据类型；而Java则使用强类型变量检查，即所有变量在编译之前必须声明。
2.3.2 在Web页面中使用JavaScript
通常情况下载Web页面中使用JavaScript有两种方法：一种是在页面中直接嵌入JavaScript；另一种是链接外部JavaScript，下面分别介绍。
1. 在页面中直接嵌入JavaScript
在Web页面中，可以使用<scipt>…</script>标签对封装脚本代码，当浏览器读到<scipt>标签时将解释执行其中的脚本。在使用<scipt>标签时还需要通过language属性指定使用的脚本语言。例如：在<scipt>中指定使用JavaScript脚本语言的代码如下。
<script language="javascript">...</script>
下面通过一个代码例子讲解在页面中直接嵌入JavaScript，下述代码插入HTML页面的<head>…</head>标签中（当然也可以插入<body>标签中，这会在显示顺序上有所不同）。
<script language="javascript">
var now=new Date();
var hour=now.getHours();
var minu=now.getMinutes();
alert("您好！现在是"+hour+":"+minu+"\r欢迎访问智慧城市！");
</script>
2. 链接外部JavaScript
可以将脚本代码放置在一个单独的文件中（文件扩展名为.js），然后在需要使用该代码的Web页面中链接该文件即可。语法格式如下。
<script language="javascript" src="javascript.js"></script>
2.3.3 JavaScript语言基础
1. JavaScript的语法
JavaScript与Java在语法上有些相似，但也不尽相同。编写JavaScript代码时需要注意以下几点。
1 JavaScript区分大小写，这点与Java语言相同。
2 每行结尾的分号可有可无。
3 变量是弱类型的，因此在定义变量时只使用var运算符就可以将变量初始化为任意的值。例如：var age=20。
4 使用大括号{}标记代码块，这点与Java语言相同。
5 注释：在JavaScript中提供了两种注释，即单行注释“//”和多行注释“/ *……* /”。
2. JavaScript中的关键字
JavaScript中的关键字是指在JavaScript中具有特定含义的、可以成为JavaScript语法中一部分的字符。JavaScript中的关键字如表2.2所示。
表2.2 JavaScript中关键字
3. JavaScript的数据类型
JavaScript的数据类型有数值型、字符型、布尔型、转义字符、空值和未定义值6种。
1 数值型：又可分为整型和浮点型两种。整型：071//表示八进制的71；浮点型：3.1415926。
2 字符型：使用单引号或双引号括起来的一个或多个字符。
3 转义字符：以反斜杠开头的不可显示的特殊字符通常称为控制字符，也被称为转义字符。如\b退格、\r回车符、\n换行。
4 布尔型：只有两个值，即true或false。在JavaScript中，也可以使用整数0表示false，使用非0的整数表示true。
5 空值：用于定义空的或不存在的引用。
6 未定义值：当使用了一个并未声明的变量或者使用了一个已经声明但没有赋值的变量时，将返回未定义值undefined。
4. 变量的定义及使用
变量是指程序中一个已经命名的存储单元，其主要作用就是为数据操作提供存放信息的容器。在使用变量前必须明确变量的命名规则、声明方法及作用域。
1 变量的命名规则如下：变量名由字母、数字或下划线组成，但必须以字母或下划线开头；变量名中不能有空格、加号、减号或逗号等符号；不能使用关键字。
2 变量的声明：使用关键字var声明变量，可以使用一个关键字var同时声明多个变量，例如：var now, year, month, date;另外可以在声明变量的同时对其进行赋值，例如：var now="2009-05-12"，year="2009"，month="5"，date="12"；如果只声明了变量未对其赋值，则其默认值为undefined。
3 变量的作用域：是指变量在程序中的有效范围。在JavaScript中根据变量的作用域可以将变量分为全局变量和局部变量两种。全局变量是定义在函数之外，作用于整个脚本代码的变量；局部变量是定义在函数体内，只作用于函数体内的变量。
5. 运算符的应用
运算符是用来完成计算或者比较数据等一系列操作的符号。常用的JavaScript运算符按类型可分为赋值运算符、算术运算符、比较运算符、逻辑运算符、调节运算符和字符串运算符6种。
赋值运算符如表2.3所示。
表2.3 JavaScript赋值运算符
算术运算符如表2.4所示。
表2.4 JavaScript算术运算符
比较运算符如小于、大于。
条件运算符是一种特殊的三目运算符，语法格式如下：操作数？结果1：结果2；如果“操作数”的值为true，则整个表达式的结果为“结果1”，否则为“结果2”。
字符串运算符是用于两个字符型数据之间的运算符，除了比较运算符外，还可以是“+”和“+=”运算符。“+”运算符用于连接两个字符串，而“+=”运算符则连接两个字符串，并将结果赋给第一个字符串。
2.3.4 函数
函数实质上就是可以作为一个逻辑单元对待的一组JavaScript代码，使用函数可以使代码更为简洁，提高重用性。
（1）函数的定义
函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段代码定义的。语法如下。
function functionName([parameter 1, parameter 2,……]){
statements;
[return expression;]
}
（2）函数的调用
函数的调用比较简单，如果调用不带参数的函数，使用函数名加上括号即可；如果要调用的函数带参数，则在括号中加上需要传递的参数；如果包含多个参数，各参数间用逗号分隔。下面用一个实例来讲解，该实例定义了一个JavaScript函数checkRealName()，通过表单中“检测”按钮的onClick事件中调用checkRealName()用于验证输入的字符是否为汉字。
1 checkRealName()函数。
<script language=“javascript”>
function checkRealName(){
var str=form1.realName.value; //获取输入的真实姓名
if(str==""){ //当真实姓名为空时
alert("请输入真实姓名！");form1.realName.focus();return;
}else{ //当真实姓名不为空时
var objExp=/[\u4E00-\u9FA5]{2,}/; //创建RegExp对象
if(objExp.test(str)==true){ //判断是否匹配
alert("您输入的真实姓名正确！");
}else{
alert("您输入的真实姓名不正确！");
}
}
}
</script>
2 在页面中添加用于输入真实姓名的表单及表单元素，在其中“检测”按钮的onClick事件中调用checkRealName()用于验证输入的字符是否为汉字。
<form name="form1" method="post" action=""> 请输入真实姓名：<input name="realName" type="text" id="realName" size="40"> <br><br> <input name="Button" type="button" class="btn_grey" onClick="checkRealName()" value="检测"> </form>
3 运行程序，输入英文或者中文汉字，程序可以检测姓名正确与否。
（3）匿名函数
匿名函数的语法和function语句非常相似，只不过它被用作表达式，而不是用作语句，而且也无须指定函数名。例如，当页面载入完成后，调用无参数的匿名函数，弹出一个提示对话框。代码如下。
<script language="javascript">
window.onload=function{
alert("ok");
}
</script>
2.3.5 事件和事件处理程序
（1）什么是事件和事件处理程序
JavaScript与Web页面之间的交互是通过用户操作浏览器页面时触发相关事件实现的。例如，在页面载入完毕时将触发onload（载入）事件、当用户单击按钮时将触发按钮的onclick事件等。事件处理程序则是用于响应某个事件而执行的处理程序。事件处理程序可以是任意JavaScript语句，但通常使用特定的自定义函数（function）来对事件进行处理。
（2）JavaScript常用事件
多数浏览器内部对象都拥有很多事件，表2.5给出常用的事件及何时触发这些事件。
表2.5 JavaScript常用事件
（3）事件处理程序的调用
在使用事件处理程序对页面进行操作时，最主要的是如何通过对象的事件来指定事件处理程序。指定方式主要有以下两种。
1 在JavaScript中。
在JavaScript中调用事件处理程序，首先需要获得处理对象的引用，然后将要执行的处理函数赋值给对应的事件，如下面的代码所示。
<input name="bt_save" type="button" value="保存">
<script language="javascript">
var b_save=document.getElementById("bt_save");
b_save.onclick=function(){
alert("单击了保存按钮");
}
</script>
2 在HTML中。
在HTML中分配事件处理程序，只需要在HTML标签中添加相应的事件，并在其中指定要执行的代码或是函数名即可。例如：
<input name="bt_save" type="button" value="保存" onclick="alert('单击了保存按钮');">
2.3.6 常用对象
JavaScript是一种基于对象的语言，它可以应用自己已经创建的对象，因此许多功能来自于脚本环境中对象的方法与脚本的相互作用。下面将对JavaScript的常用对象详细介绍。
（1）String对象
String对象是动态对象，需要创建对象实例后才能引用属性和方法。可以直接在某个字符串后面加上“.”去调用String对象的属性和方法。下面介绍其常用属性和方法。
1 属性：string.length属性，返回String对象的长度。
2 方法：
string.indexOf(subString[, startIndex])方法，返回String对象内第一次出现子字符串的字符位置。
string.substr(start[,length])方法，返回指定字符串的一个子串。
string.replace(regExp,substring)方法，替换一个与正则表达式匹配的子串。
string.split(delimiter,limit)方法，将字符串分割为字符串数组。
（2）Math对象
Math对象提供了大量的数学常量和数学函数。在使用Math对象时，不能使用new关键字创建对象实例，而应直接使用“对象名.成员”的格式来访问其属性或方法。下面介绍其属性和方法。
1 属性：Math对象的属性是数学中常用的常量，如表2.6所示。
表2.6 Math对象的属性
2 方法：Math对象的方法是数学中常用的函数，如表2.7所示。
表2.7 Math对象的方法
（3）Date对象
Date对象用于对日期和时间进行操作。
1 创建Date对象：dateObj=new Date();dateObj=new Date(date value); dateObj=new Date(year,month,date[,hours[,minutes[,seconds[,ms]]]])。
2 方法：Date对象没有提供直接访问的属性，只具有获取、设置日期和时间的方法。Date对象的常用方法如表2.8所示。
表2.8 Date对象的方法
下面的这个例子使用Date对象的相关方法获取系统时间并将其显示在id为clock的div元素中。
<html>
<head>
<title> 实时显示系统时间</title>
<script language="javascript">
function realSysTime(clock){
var now=new Date(); // 创建Date 对象
var year=now.getFullYear(); // 获取年份
var month=now.getMonth(); // 获取月份
var date=now.getDate(); // 获取日期
var day=now.getDay(); // 获取星期
var hour=now.getHours(); // 获取小时
var minu=now.getMinutes(); // 获取分钟
var sec=now.getSeconds(); // 获取秒
month=month+1;
var arr_week=new Array(" 星期日"," 星期一"," 星期二"," 星期三"," 星期四"," 星期五"," 星期六");
var week=arr_week[day]; // 获取中文的星期
var time=year+" 年"+month+" 月"+date+" 日 "+week+" "+hour+":"+minu+":"+sec; // 组合系统时间
clock.innerHTML=" 当前时间："+time; // 显示系统时间
}
window.onload=function(){
window.setInterval("realSysTime(clock)",1000); // 实时获取并显示系统时间
}
</script>
</head>
<body>
<div id="clock"></div>
</body>
</html>
（4）Window对象
Window对象即浏览器窗口对象，是一个全局对象，是所有对象的顶级对象。Window对象提供了许多属性和方法，这些属性和方法被用来操作浏览器页面的内容。Window对象同Math对象一样，也不需要使用new关键字创建对象实例，而是直接使用“对象名.成员”的格式来访问其属性或方法。下面介绍其常用属性和方法。
1 Window对象的属性，如表2.9所示。
表2.9 Window对象的属性
2 Window对象的方法，如表2.10所示。
表2.10 Window对象的方法
2.3.7 Ajax技术
（1）什么是Ajax
Ajax是Asynchronous JavaScript and XML的缩写，意思是异步的JavaScript与XML。Ajax并不是一门新的语言，它是JavaScript、XML、CSS、DOM等多种已有技术的组合，可以实现客户端的异步请求操作，进而在不需要刷新页面的情况下与服务器通信，减少了用户的等待时间，减轻了服务器和带宽的负担，提供更好的服务响应。
Ajax以XMLHttpRequest作为核心技术，它是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议连接一个服务器。通过XMLHttpRequest对象，Ajax可以只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来完成，这样既减轻了服务器负担，又加快了响应速度、缩短了用户等待时间；同时本技术使得很多原有CS结构实现的客户端应用程序（例如物联网设备监控）可以完美地通过BS结构程序实现。
（2）Ajax的开发模式
在传统的Web应用模式中，页面中的每一次操作都将触发一次返回服务器的HTTP请求，服务器进行相应的处理（获得数据、运行与不同的系统会话）后，返回一个HTML页面给客户端，如图2.6所示。
图2.6 Web应用的传统模型
而在Ajax应用中，页面中用户的操作将通过Ajax引擎（XMLHttpRequest对象）与服务器端进行通信，然后将返回结果交给客户端页面的Ajax引擎，再由Ajax引擎决定将这些数据插入到页面的指定位置，如图2.7所示。
图2.7 Web应用的Ajax模型
从图2.6、图2.7可以看出，对于每个用户的行为，在传统的Web应用模型中，将生成一次HTTP请求，而在Ajax应用开发模型中，将变成对Aiax引擎的一次JavaScript调用。在Ajax应用开发模型中，通过JavaScript实现了在不刷新整个页面的情况下对部分数据进行更新，从而降低了网络流量，给用户带来了更好的体验。
（3）Ajax的优点
1 减轻服务器的负担。Ajax的原则是按需求获取数据，这可以最大程度地减轻冗余请求和响应对服务器造成的负担。
2 可以把一部分以前由服务器负担的工作转移到客户端，利用客户端闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和成本。
3 无刷新更新页面，从而使用户不用再像以前一样在服务器处理数据时，只能在死板的白屏前焦急地等待。
4 可以调用XML等外部数据，进一步促进页面显示和数据的分离。
5 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
2.3.8 jQuery和jQuery Mobile技术
（1）jQuery简介
jQuery是一套简洁、快速、灵活的JavaScript脚本库，它是由John Resig于2006年创建的，帮助我们简化了JavaScript代码。JavaScript脚本库类似于Java的类库，将一些工具方法或对象方法封装在类库中，方便用户使用。
（2）下载和配置jQuery
要在自己的网站中应用jQuery库，需要下载和配置它。jQuery是一个开源的脚本库，可以在官方网站中下载最新版本的库，在笔者写本书期间的最新版本是3.3.1。
将jQuery库下载到本地计算机后，还需要在项目中配置它，即将下载的jquery-3.3.1.min.js文件放置到项目的指定文件夹中，通常放置在JS文件夹中，然后在需要jQuery的页面中使用下面的语句，将其引用到文件中。
<script language="javascript" src="JS/jquery-3.3.1.min.js"></script>
或者
<script src="JS/jquery-3.3.1.min.js" type="text/javascript"></script>
（3）jQuery的工厂函数
在jQuery中，无论我们使用哪种类型的选择符都需要从一个"$"符号和一对"()"开始。下面介绍几种比较常见的用法。
1 在参数中使用标签名。
$("div")：用于获取文档中全部的<div>。
2 在参数中使用ID。
$("#username")：用于获取文档中ID属性值为username的一个元素。
3 在参数中使用CSS类名。
$(".btn_grey")：用于获取文档中使用CSS类名为btn_grey的所有元素。
（4）一个简单的jQuery脚本
在项目目录下创建一个名称为JS的文件夹，将jquery-3.3.1.min.js复制到该文件中；创建一个名称为index.html的文件，代码如下。
<html>
<head>
<meta charset="utf-8">
<title>我的第一个jQuery脚本</title>
<script type="text/javascript" src="JS/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
//获取超链接对象，并为其添加单击事件
$("a").click(function(){
alert(" 我的第一个jQuery 脚本！ ");
});
});
</script>
</head>
<body>
<body>
<a href="#">弹出提示对话框</a>
</body>
</html>
运行上述实例，单击页面中的链接，将弹出图2.8所示的提示对话框。
图2.8 jQuery实例所弹出的提示对话框
（5）jQuery Mobile
jQuery Mobile是jQuery框架的一个组件（而非jQuery的移动版本）。jQuery Mobile是一款基于HTML5的用户界面系统，旨在使所有智能手机、平板电脑和桌面设备都可以响应网站和应用。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。
jQuery驱动着Internet上的大量网站，在浏览器中提供动态用户体验，促使传统桌面应用程序越来越少。主流移动平台上的浏览器功能都可以媲美桌面浏览器，因此
jQuery团队引入了jQuery Mobile（或JQM）。JQM的使命是向所有主流移动浏览器提供一种统一体验，使整个Internet上的内容更加丰富，而不管用户使用哪种查看设备。
JQM的目标是在一个统一的UI中交付超级JavaScript功能，跨最流行的智能手机和平板电脑设备工作。与jQuery一样，JQM是一个在Internet上直接托管、免费可用的开源代码的基础。事实上，当JQM致力于统一和优化这个代码基时，jQuery核心库受到了极大关注。这种关注充分说明，移动浏览器技术在极短的时间内取得了巨大的发展。
与jQuery核心库一样，您的开发计算机上不需要安装任何东西；只需将各种*.js和*.css文件直接包含到您的Web页面中即可。这样，JQM的功能就好像被放到了您的指尖，供您随时使用。
JQM基本特性如下。
1 简单性：此框架简单易用。页面开发主要使用标记，无须或仅需很少的JavaScript。
2 优雅降级：尽管jQuery Mobile利用最新的HTML5、CSS3和JavaScript，但并非所有移动设备都提供这样的支持。jQuery Mobile的宗旨是同时支持高端和低端设备，例如那些没有JavaScript支持的设备，尽量提供最好的体验。
3 Accessibility：jQuery Mobile在设计时考虑了访问能力，它拥有Accessible Rich Internet Applications（WAI-ARIA）支持，以帮助使用辅助技术的残障人士访问Web页面。
4 小规模：jQuery Mobile框架的整体大小比较小，JavaScript库12KB，CSS 6KB，还包括一些图标。
5 主题设置：此框架还提供一个主题系统，允许您提供自己的应用程序样式。
jQuery Mobile也提供了针对移动端浏览器的事件。
1 触摸事件：当用户触摸屏幕时触发。
2 滑动事件：当用户左右滑动屏幕时触发。
3 定位事件：当设备水平或垂直翻转时触发。
4 页面事件：当页面显示、隐藏、创建、加载或未加载时触发。
下面列出了所有jQuery Mobile事件（注意：请使用on()方法绑定事件）。
1 hashchange：启用可标记#hash历史，哈希值会在一次独立的单击事件发生时变化，例如一个用户单击后退按钮，会通过hashchange事件进行处理。
2 navigate：包裹了hashchange和popstate的事件。
3 orientationchange：方向改变事件，在用户垂直或者水平旋转移动设备时触发。
4 pagebeforechange：在页面切换之前触发的事件。使用$.mobile.changePage()来切换页面，此方法触发两个事件，切换之前的pagebeforechange事件和切换完成后pagechange（成功）或者pagechangefailed（失败）。
5 pagebeforecreate：页面初始化时，初始化之前触发。
6 pagebeforehide：在页面切换后旧页面隐藏之前，触发的事件。
7 pagebeforeload：在加载请求发出之前触发。
8 pagebeforeshow：在页面切换后显示之前，触发的事件。
9 pagechange：在页面切换成功后，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发两个事件，切换之前的pagebeforechange事件和切换完成后pagechange（成功）或者pagechangefailed（失败）。
10 pagechangefailed：在页面切换失败时，触发的事件。使用$.mobile.changePage()来切换页面，此方法触发两个事件，切换之前的pagebeforechange事件和切换完成后pagechange（成功）或者pagechangefailed（失败）。
11 pagecreate：在页面创建成功之后，触发的事件。
12 pagehide：在页面切换后老页面隐藏之后，触发的事件。
13 pageinit：在页面初始化时，触发的事件。
14 pageload：在页面完全加载成功后触发。
15 pageloadfailed：页面请求失败时触发。
16 pageremove：在窗口视图从DOM中移除外部页面之前触发。
17 pageshow：在过渡动画完成后，到达页面时触发。
18 scrollstart：当用户开始滚动页面时触发。
19 scrollstop：当用户停止滚动页面时触发。
20 swipe：当用户在元素上水平滑动时触发。
21 swipeleft：当用户从左划过元素超过30px时触发。
22 swiperight：当用户从右划过元素超过30px时触发。
23 tap：当用户敲击某元素时触发。
24 taphold：当用户敲击某元素并保持一秒时触发。
25 throttledresize：启用可标记#hash历史记录。
26 updatelayout：由动态显示/隐藏内容的jQuery Mobile组件触发。
27 vclick：虚拟化的click事件处理器。
28 vmousecancel：虚拟化的mousecancel事件处理器。
29 vmousedown：虚拟化的mousedown事件处理器。
30 vmousemove：虚拟化的mousemove事件处理器。
31 vmouseout：虚拟化的mouseout事件处理器。
32 vmouseover：虚拟化的mouseover事件处理器。
33 vmouseup：虚拟化的mouseup事件处理器。
本节介绍的jQuery Mobile技术和下节将重点介绍的Ionic（PhoneGap/Cordova）技术是目前两个主流的跨平台移动应用程序快速开发框架。