《Windows 8 开发权威指南：HTML5 和JavaScript卷》——2.2 JavaScript概述

xiaoxiao2024-07-27 33

本节书摘来自异步社区《Windows 8 开发权威指南：HTML5 和JavaScript卷》一书中的第2章，第2.2节，作者：尹成 , 李亚男 , 王腾 , 丁宽帅 , 尹子磊著，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.2 JavaScript概述

2.2.1 什么是JavaScript1．什么是脚本语言脚本语言是一种应用程序扩展语言，用于系统的扩展，使其按用户的意愿去运行。

所有的基础功能由系统提供，脚本语言在更高一层次描述如何调用系统接口。

解释执行。

2．脚本语言的分类嵌入式。

非嵌入式。

3．什么是JavaScript一种计算机程序设计语言。

脚本语言。

解释语言：程序语言代码→语言翻译程序→机器代码。

可以直接嵌入到HTML文档中。

增强用户交互性。

下面通过一个例子来对JavaScript有一个感性的认识，代码如下。

HTML代码：

CSS代码：

JavaScript代码：

2.2.2 第一个JavaScript程序JavaScript编辑器可以是记事本，Aptana，Visual Studio，本书选择Visual Studio 2012。第一个JavaScript程序的代码如下所示。

<html> <body> 　　<script type=”text/javascript”> 　　document.write(“Hello World!”); 　　</script> </body> </html>

当浏览器遇到< script>标记后，并不将脚本块中的内容显示给用户，而是使用浏览器内的JavaScript解释器来解释并运行脚本代码中的指令。

2.2.3 JavaScript的新特性JavaScript作为互联网浏览器中的一门脚本语言，曾经只为了简化Web站点上Http通信请求而被使用，很多Web程序员起初并不屑使用JS，可是随着时间的推移，开发者对各种Web应用的体验要求越来越高，JS在Web开发过程中所占的比重也越来越大，开发人员也不断意识到使用JS在浏览器客户端能将很多问题变得更简单。

随着RIA概念的提出，JS的应用面更加广泛，虽然JS的功能没有其他第三方插件（如flash、 silverlight）那样强大，但是仍然有很多JS的拥护者利用JS来完成很多不可能完成的任务，由此诞生出了很多优秀的开源JS框架，大大降低了使用JS开发各种应用的成本。比如利用jQuery来简化ajax请求操作、处理xml、制作DHTML动画等。

虽然利用JS能够实现一些简单的页面动画特效，可是开发人员要想用JS来完成如游戏开发这样的任务时将会遇到不小的麻烦，因为用JS来开发游戏应用除了游戏逻辑的编写之外，开发人员还需要去考虑到页面DOM、CSS等很多游戏逻辑之外的事情，无形中加大了游戏开发的难度。就因为这许多的缺点使得很多Web游戏开发者放弃了JS而选择as在Flash插件中来开发各种游戏应用，使得Flash在过去的10年间逐渐成为了Window平台下Web游戏开发的核心。

然而HTML5的问世，将打破现有的格局，诸如canvas（画布）、video（视频）、audio（音频）、localStorage（本地存储）、webSocket（浏览器端套接字）等强大的API功能库在各大浏览器中正逐渐得到支持，并且完全基于JS来进行调用，有了这么多强大的功能支持，再加上JS在各大浏览器中的运行效率已经有了质的提升，使得HTML5在未来的前途不可限量！

在HTML5提供的新功能中最新得到应用的应该是canvas画布了，目前所有主流的标准浏览器（chrome、safari、firefox、opera）均能很好地支持。现在JS开发人员只需要重新阅读下新的API文档就可以很轻松地完成游戏开发任务，开发出来的游戏应用可以很平滑地移植到各大平台的标准浏览器内，并不像Flash等插件那样需要考虑各个平台的兼容问题。再加上与CSS3的完美结合，可以做到任何用Flash能做到的事，甚至可以做得更好。

随着HTML5其他功能的不断完善、各大巨头公司的推崇、JavaScript得天独厚的特性将会在跨平台Web应用开发这个领域得到长足的发展!

本小节后面的内容主要讲解HTML5中关于JavaScript的新特性。

（1）二维绘图API，可以用在一个新的画布（canvas）元素上以呈现图像、游戏图形或者其他运行中的可视图形。

HTML5 规范引进了很多新特性，其中最令人期待的之一就是 canvas 元素。HTML5 canvas 提供了通过 JavaScript 绘制图形的方法，此方法使用简单但功能强大。每一个canvas元素都有一个“上下文（context）”（想象成绘图板上的一页），在其中可以绘制任意图形。浏览器支持多个 canvas 上下文，并通过不同的 API 提供图形绘制功能。

创建canvas创建canvas的方法很简单，只需要在HTML页面中添加< canvas>元素：

<canvas id="myCanvas" width="300" height="150">若浏览器不支持，将显示此处的字符串。

</canvas>为了能在JavaScript中引用元素，最好给元素设置ID；也需要给canvas 设定高度和宽度。创建好了画布后，让我们来准备画笔。要在画布中绘制图形需要使用JavaScript 。首先通过getElementById函数找到canvas元素，然后初始化上下文。之后可以使用上下文API绘制各种图形。

使用canvas绘制线条通过canvas 路径（path）可以绘制任意形状。可以先绘制轮廓，然后绘制边框和填充。创建自定义形状很简单，使用 beginPath()开始绘制，然后使用直线、曲线和其他图形绘制你的图形。绘制完毕后调用 fill 和 stroke 即可添加填充或者设置边框。调用 closePath() 结束自定义图形绘制。下面的代码是一个绘制三角形的例子：

//设置画笔类型 context.fillStyle = ‘#00f’; context.strokeStyle = ‘#f00‘; context.lineWidth = 4; context.beginPath(); //从左顶点开始 context.moveTo(10, 10); //给定坐标 context.lineTo(100, 10); context.lineTo(10, 100); context.lineTo(10, 10); //画完形状之后，开始填充 context.fill(); context.stroke(); context.closePath();

使用canvas插入图像drawImage 方法允许在 canvas 中插入其他图像（img和canvas元素）。在 Opera 中，可以在canvas 中绘制 SVG 图形。此方法比较复杂，可以有3个、5个或9个参数。

3个参数：最基本的 drawImage使用方法。一个参数指定图像位置，另两个参数设置图像在 canvas中的位置。

5个参数：中级的 drawImage 使用方法，包括上述3个参数，加两个参数指明插入图像宽度和高度（如果你想改变图像大小）。

9个参数：最复杂的drawImage使用方法，除包含上述5个参数外，另外4个参数设置源图像中的位置和高度宽度。这些参数允许你在显示图像前动态裁剪源图像。

使用canvas进行像素操作

2D Context API提供了3个方法用于像素级操作：createImageData, getImageData和putImageData。ImageData对象保存了图像像素值。每个对象有3个属性：width, height 和data。data 属性类型为CanvasPixelArray，用于储存widthheight4个像素值。每一个像素有RGB值和透明度alpha值（其值为 0 至255，包括alpha在内）。像素的顺序从左至右，从上到下，按行存储。为了更好地理解其原理，让我们来看一个例子——绘制红色矩形：

// 创建ImageData对象 var imgd = context.createImageData(50,50); var pix = imgd.data; //遍历像素 for (var i = 0; n = pix.length, i<n; i += 4) { pix[i ] = 255; //红色通道 pix[i+3] = 127; //alpha通道 } //在给定的坐标绘制图像 context.putImageData(imgd, 0,0);

（2）一个能够播放视频和音频的API，可以使用新的video和audio元素。

顾名思义，video就是视频，audio就是音频。下面我们以视频为例。

Windows Internet Explorer 10 Release Preview 和使用 JavaScript 的 Microsoft Design 风格应用引入了对 HTML5 视频的支持。video元素与audio元素都是最先在 Windows Internet Explorer 9 中提供支持的。

保持录制的视频方向Internet Explorer 10 中的 HTML5 video 元素根据存储在视频中的方向元数据（即它是纵向还是横向模式）自动设置视频的方向。元数据通过录制设备（通常是照相机或具有照相功能的手机）设置。此功能没有任何 API 或设置，但是开发者应当注意，它会影响 video 元素在页面上的布局。

支持 track 元素Internet Explorer 10 和使用 JavaScript 的 Microsoft Design 风格应用支持 track 元素。使用 track 元素，可以为 HTML5 video 元素添加计时文本轨道（如隐藏字幕、翻译或文字解说词）。

元素的语法如下所示。

< track>元素代表为用户针对视频提供多种语言或解说词的计时文本文件。你可以使用多个轨道，并将其中一个设置为开始播放视频时所使用的默认轨道。

文本在视频播放器的底部显示。这时无法控制位置和颜色，但你可以通过脚本检索文本，并以自己的方式显示它。

轨道文件格式文本轨道使用 Web 视频文本轨道（WebVTT）的简化版本，或计时文本标记语言（TTML）计时文本文件格式。Internet Explorer 10和使用JavaScript的Microsoft Design风格应用目前仅支持计时提示和文本字幕。

WebVTTWebVTT文件是8 bit Unicode 转换格式（UTF-8）的文本文件，如下所示。

WEBVTT 00:00:01.878 --> 00:00:05.334 Good day everyone, my name is John Smith 00:00:08.608 --> 00:00:15.296 This video will teach you how to build a sand castle on any beach

该文件在第一行以标记 WebVTT开始，随后换行。计时提示的格式是 HH:MM:SS.sss。“开始”和“结束”提示之间由一个空格、两个连字符、一个大于号和另一个空格（ -->）进行分隔。计时提示所在行不包含其他内容，并在结尾处换行。紧接着计时提示的是字幕文本。文本字幕可以是一行或多行。唯一的限制是文本行之间不能有空行。WebVTT 文件的 MIME 类型是“text/vtt”""。

TTMLInternet Explorer 10和使用 JavaScript 的 Microsoft Design 风格应用使用 TTML（计时文本标记语言）文件格式的一个子集，该文件格式在 TTML 规范中进行定义。Windows Internet Explorer 和使用JavaScript的Microsoft Design风格应用支持以下结构。

<?xml version='1.0' encoding='UTF-8'?> <tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en' > <body> <div> <p begin="00:00:01.878" end="00:00:05.334" >Good day everyone, my name is John Smith</p> <p begin="00:00:08.608" end="00:00:15.296" >This video will teach you how to<br/>build a sand castle on any beach</p> </div> </body> </tt>

TTML文件在根元素（tt）中使用命名空间声明和语言属性。下面紧接着的是 body 和 div 元素。计时提示位于div元素内。实际时间被设置为段落开始标记（< p>）的（begin，end）属性，文本后面以段落结束标记< /p>作为结尾。空行和空格都将被忽略。如果有多个行，则使用< br/>标记进行分隔。

TTML文件的 MIME 类型是“application/ttml+xml”""或“text/xml”""。

在创建你的计时文件时，将起始值设置为非零值。在当前的 Internet Explorer 10预发行版本中，当第一个计时提示被设置为零（即“00:00:00.000”""）时，可能会有问题。由于HTML5 video元素的currentTime属性的分辨率大约是1/4秒，因此将第一个计时提示设置为 0.250 秒或更大值应该可以解决此问题。例如，你的第一个startTime应该是“00:00:00.250”。

多个轨道文件可以使用多个计时文本文件——例如，为你的用户提供多种语言或备用解说词。如果你使用多个轨道，可将其中一个设置为默认值，以便当页面没有指定或者用户没有选择语言时使用它。在视频播放器内，用户可以通过内置的用户界面选择备用轨道。

下面的示例显示了包含3个轨道元素的视频元素。

在此示例中，source元素用于指定视频文件，而每个 track 元素则指定一种文本翻译。track 元素是 video 元素的子元素。track元素接受如表2.1所示的属性。为轨道元素编写脚本与大多数元素一样，track元素可以通过编写脚本来操作。以下对象、方法和属性可用于管理轨道内容和提示。轨道就是提供与视频相关的时间和文本内容的提示的集合。

如表2.2所示是对textTrack和textTrackList对象的描述。textTrackList 是与包含textTrack对象列表的视频元素相关联的对象。为获取用于某个视频的轨道列表（如果有），video对象可提供 textTracks 属性。textTracks 属性是类型 textTrackList 的对象，并且是与视频有关的textTrack对象的数组。

（3）WebSocket的应用。WebSocket 技术为通过 Internet 进行的双向通信提供了一种新的万维网联合会（W3C）JavaScript API 和协议。这个新协议更便于直接处理固定数据格式，它会绕过速度较慢的基于文档的HTTP。

当前的 HTTP 标准协议很慢，因为它必须从服务器请求文档而且必须等待该文档发送，才能显示网页。使用 WebSocket，你可以使用文本、二进制数组或 BLOB 立即发送和接收你的数据。

WebSocket API 非常简单，它只需非常少的代码。你可以方便地利用低延迟双向数据交换，从而有助于快速创建在线游戏、即时社交网络通知、实时显示股市和天气信息，以及其他实时数据。

WebSocket 支持Windows Internet Explorer 10 Release Preview 和使用JavaScript的Microsoft Design风格应用添加了对于 WebSocket API的支持，WebSocket API是在W3C的有关WebSocket API的HTML5规范中定义的，该规范当前处于工作草案阶段。

实现 WebSocket如果你按照下列步骤进行操作，则实现此数据交换技术非常简单。

（1）使用WebSocket客户端。Internet Explorer 10 实现 WebSocket 协议，如同其他主流浏览器的行为。你可在 caniuse.com 网站上看到浏览器支持的当前状态。

在 IETF 工具网站中指定的 WebSocket 协议使用以下新的URL方案。

ws://

wss://（2）编写 WebSocket 客户端代码。你的网页代码必须执行以下操作：

初始化WebSocket 并连接到服务器。

测试以查看它是否成功。

发送和接收数据。

以下代码显示了指定 websocket URL 的典型代码：

var host = 'ws://example.microsoft.com';（3）编写WebSocket 服务器代码。处理套接字的服务器代码能够以任何服务器语言编写。无论你选择哪种语言，都必须编写代码以接受 WebSocket 请求并相应地处理它们。

（4）本地存储（LocalStorage）。LocalStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。存储内容不会发送到服务器：当设置了Cookie后，Cookie的内容会随着请求一并发送到服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。Web Storage提供了一套更为丰富的接口，使得数据操作更为简便。每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

（5）JavaScript对于HTML的离线存储。为了解决SQLite的难题，HTML5使用JavaScript，在浏览器中，将数据库的语义用 JavaScript 实现。最终，我们或许可以直接使用 JavaScript 实现数据库查询，消除HTML5 在这方面的问题。

一个离线网络应用程序就是一个URL的列表——HTML，CSS，JavaScript，图片，或者其他类型的资源。离线网络应用程序的指针指向一个叫做名单文件并用于定位网络服务器上任何文本文件的列表。用于执行HTML5离线应用程序的网络浏览器将从名单文件中读取URL列表，下载这些资源，将它们在本地缓存，并自动在这些本地副本改变时保持它们更新。当你尝试在没有网络连接时访问网络应用程序时，你的网络浏览器将自动切换并使用本地代替。

离线网络应用程序与缓存名单文件紧密相联。什么是名单文件？它是你的网络应用程序在失去网络连接时需要访问的所有资源列表。为了引导下载进程并缓存这些资源，你需要在< html>元素中使用manifest属性指向名单文件。

你的缓存名单文件可以放在你网络服务器的任何地方，但它需要type text/cache-manifest内容类别的支持。如果你正使用基于Apache的网络服务器，你大概只需要在网络根目录的.htaccess文件中添加一个AddType指令：AddType text/cache-manifest.manif。

相关资源：Android开发权威指南(第一版扫描版).李宁.pdf

最新回复(0)