赵工的个人空间


（专业技术部分）（转网页计算）（转业余爱好部分）


  网站建设

首页 > 专业技术 > 网站建设 > HTML5的API
HTML5的API
HTML5被认为是HTML、CSS和JavaScript结合的产物，在规范下组成一个整体，HTML负责结构，CSS负责呈现，而JavaScript则负责其余一些仍极为重要的工作。为了实现HTML5的新功能，不仅增加了一些新元素和新属性，还增强了JavaScript、增加了相应的API，用以处理更复杂的问题、实现更强的功能。

JavaScript是一种解释语言，目前只作为补偿语言。浏览器的新引擎都默认集成了完整的应用程序接口API，以实现语言的基本特性。这些新API都是嵌入浏览器的库接口，设计思想是通过简单和标准的编程技术实现实用和强大的Web软件开发。

1.引入JavaScript：

在HTML中引入JavaScript的方法有三种，只有加入外部文件才是HTML5推荐使用的方法。

1）内联脚本：

最简单的方法是使用HTML元素的属性，直接在文档中插入JavaScript。这些属性是事件处理程序，可以根据用户的操作执行代码。
最常用的事件处理程序是鼠标处理程序，如onclick、onMouseOver或onMouseOut。也有一些网站要实现关键字和窗口事件，在按下键盘或窗口环境发生变化时（如onload或onfocus）执行一些操作。示例：
<div id="main">
  <p onclick="alert('you clicked me')">Click Me</p>
  <p>You Can't Click Me</p>
</div>
如果将事件处理程序onclick修改为onMouseOver，那么效果就变成当鼠标指针悬停元素时执行代码。
HTML5允许在HTML元素中使用JavaScript，但不推荐使用这种方法，这会使代码不断增多，最后变得很难维护或更新，而且将代码分散到文档各处也会增加应用程序开发难度。

2)嵌入脚本：

为了处理大量的代码和自定义函数，必须使用<script>标记对脚本进行分组，这种方式将代码集中在一处，然后通过引用影响文档的任意元素。
在HTML5中，JavaScript是<script>标记的默认值，不需要使用type属性指定标记的语言。<script>元素及其内容可以出现在文档的任意位置，也可以在其他元素之内或之间。为了简单，推荐将脚本添加到文档头部位置，然后使用相应的JavaScript方法引用所需要的元素。
<script>
  function showalert () {
   alert('you click me!');
  }
  function clickme() {
   document.getElementsByTagName('p')[0].onclick=showalert;
  }
  window.onload=clickme;
</script>
目前，在JavaScript中可以使用三种方法引用HTML元素：
·getElementsByTagName，可以根据关键字引用元素
·getElementById，可以根据id属性引用元素
·getElementsByClassName是新方法，可以使用class属性值引用元素
由于浏览器按顺序读取脚本代码，因此无法引用还未创建的元素。脚本位于文档头部，这时代码中引用的一些HTML元素还未创建，必须将代码添加到一个函数中，而引用HTML元素的和事件处理程序位于另一个函数中，最后使用事件处理程序调用前面创建的函数，这个处理程序会在窗口完成加载并且所有元素都创建之后执行传入的函数。

3)外部文件：

推荐将JavaScript代码保存在一个或多个外部文件中，然后使用src属性导入这些文件。示例：
<head>
  <title>This text is the title of the document</title>
  <script src="mycode.js"></script>
</header>

2.新选择器：

可以使用新方法querySelector()和querySelectorAll()应用各种CSS选择器实现HTML元素的选择。

1)querySelector()：

这个方法会返回匹配圆括号中指定的选择器分组的第一个元素。这些选择器包括引号和CSS语法。示例：
  function clickme() {
   document.querySelector("#main p:first-child")[0].onclick=showalert;
  }
  function showalert () {
   alert('you click me!');
  }
  window.onload=clickme;
上述特殊查询的选择器会引用一个p元素，在id属性值为main的元素的子元素中，它是第一个p元素。querySelector()可以接受各种类型的有效CSS选择器和CSS。
如果要声明多个选择器组，则需要使用逗号分隔。querySelector()方法会返回匹配这些选择器的第一个元素。

2)querySelectorAll()：

querySelectorAll()可以返回每一个与圆括号中指定的选择器分组相匹配的元素，返回值是一个数组，其中包含按文档顺序排列的所有匹配元素。示例：
  function clickme() {
   var list=document.querySelectorAll("#main p");
   list[0].onclick=showalert;
  }
  function showalert () {
   alert('you click me!');
  }
  window.onload=clickme;
通常这种方法用于影响多个元素，使用for循环，就可以遍历方法返回的元素列表。示例：
  function clickme() {
   var list=document.querySelectorAll("#main p");
   for (var f=0; f<list.length; f++) {
    list[f].onclick=showalert;
   }
  }
将这种方法都包含一个或多个由逗号分隔的选择器分组，与之前的方法进行组合，就可以查找到想要的元素。示例：
  function clickme() {
   var list=document.getElementById('main').querySelectorAll("p");
   list[0].onclick=showalert;
  }

3.事件处理程序：

在HTML元素上注册事件处理程序有三种方法：在元素上增加一个新属性，在元素的属性上注册一个事件处理程序，或者使用新的addEventListener()标准方法。
在addEventListener()方法标准化后，这个过程通常称为“监听事件”，而准备事件响应代码就是给指定元素添加事件监听器。

1)内联事件处理程序：

  <p onclick="alert('you clicked me')">Click Me</p>
上述代码在p元素上添加onclick属性。这是一种弃用的方法，但是在一些特定情形中仍然非常实用。

2)在属性中添加事件处理程序：

使用JavaScript选择器就可以引用HTML元素，然后将事件处理程序作为属性添加到元素中。
document.getElementsByTagName('p')[0].onclick=showalert;
上述代码将事件处理程序onclick通过代码的选择器getElementsByTagName注册到文档中第一个p元素上。在HTML5之前，这是唯一一种在JavaScript代码中使用事件处理程序的跨浏览器方法。在HTML5中不推荐使用这种方法，只是为了兼容旧版本浏览器使用。

3)addEventListener()方法：

addEventListener()方法是最佳方法，也是HTML5的标准方法。这个方法有三个参数：事件类型、执行的函数和一个布尔值。示例：
<script>
  function showalert () {
   alert('you clicked me!');
  }
  function clickme() {
    var pelement=document.getElementsByTagName('p')[0];
    pelement.addEventListener('click', showalert, false);
  }
  window.addEventListener('load', clickme, false);
</script>
在clickme()函数中，将元素引用赋值给变量pelement，然后通过这个变量添加click事件的侦听器。
addEventListener()方法中，第一个参数是事件名称，第二个参数是执行的函数，可以是函数引用或完整的匿名函数，第三个参数是true或false，用于规定多个事件的触发方式。比如，如果监听了两个嵌套元素（一个元素位于另一个元素之中）中的click事件，那么当用户单击这些元素时，这个值决定两个click事件的触发顺序。如果在一个元素上将这个参数设置为true，那么它的事件先触发，而另一个后触发。通常，这个参数都设为false。
addEventListener()支持给一个元素添加多个事件监听器，这是一个优点，因此成为HTML应用程序的理想实现方法。
匿名函数是指动态声明且未命名（匿名）的函数。在JavaScript中，这些函数非常有用，可以帮助组织代码和限制独立函数的全局作用域。
可以使用removeEventListener()删除事件侦听器，使事件处理程序失效，参数与addEventListener()相同。

不过，Microsoft的IE浏览器并不支持addEventListener()方法，而要使用attachEvent()方法，而其中的类型参数需要的事件名称带“on”，比如“onclick”、“onmouseover”、“onkeydown”等。为了兼容这两种方法，代码使用：

if (typeof window.addEventListener=="function") {
window.addEventListener("load", showDatetime, false);
} else {
window.attachEvent("onload", showDatetime);
}

而在IE浏览器上删除事件监听使用detachEvent()函数。

4.API：

JavaScript与专业编程语言一样拥有帮助程序员处理复杂问题的API。HTML5引入了几种API，支持通过简单的代码使用强大的库。

1)Canvas API：

Canvas API是一种强大的基础绘图API，能够在网页上动态生成和渲染图片、创建动画或处理图像与视频。Canvas API能够生成位图，通过一些函数和方法就能够创建和处理图像像素。

2)拖放API：

拖放API支持在Web上实现桌面应用程序常见的拖放操作。通过简短的代码，就可以创建支持拖放的元素，包括图形、文字、链接、文件或数据。

3)地理位置API：

可用于确定访问应用程序的设备物理位置。有几种方法可以获取地理信息，包括作为IP地址的网络信号和全球定位系统GPS，返回的信息包括经纬度。这个API可以与外部地图API整合，或者访问特定的本地信息，开发一些实用的应用程序。

4)存储API：

可用于实现存储的API有两种，Web存储和索引数据库。第一种Web存储API具有两个重要属性，sessionStorage负责保持页面会话的一致性，以及保存一些临时信息，如购物车安全内容，以防止出现意外或误用情况；localStorage属性则用于在用户计算机上保存文件，出于安全性的考虑，保存的信息是持久化的，永远不会过期。这两种都可以替换cookie的功能和克服其缺点。
索引数据库API，也被称为IndexedDB，用于存储结构化的数据，是Web SQL数据库API的替代品，但还未形成标准。

5)文件API：

是指用于实现文件管理的标准API，目前有File API、File API:Directories&system和File API:Write三种。通过这组API，就能够在用户计算机上读取、处理和创建文件。

6)通信API：

包括XMLHttpRequest API Level2、Cross Document Messaging API和Web Sockets API。XMLHttpRequest是用于创建Ajax应用程序的API，即不需要刷新页面就可以访问服务器的应用程序。这个API的第2级增加了新的事件，支持更多的功能（跟踪进度的事件）、可移植性（API标准化）和可访问性（使用跨域请求）。Cross Document Messaging 创建跨文档消息API，能够帮助开发者突破不同窗体和窗口之间的通信限制，多个位置之间的安全通信可以通过这个特性的消息传递实现。Web Sockets的作用是提供实时应用程序所需要的工具（例如聊天室），这个API使应用程序能够在短时间内将信息发送到服务器，实现应用程序的实时性。

7)Web Workers API：

JavaScript不支持多线程，每次只能执行一个任务。Web Workers API支持在后台独立线程中执行代码，且不会干扰页面的活动。有了这个API，JavaScript就能执行多任务操作。

8)历史API：

Ajax可以改变用户与网站的Web应用程序的交互方式。历史API可以帮助应用程序兼容浏览器跟踪用户活动的方式，这个API支持人工生成过程中各个步骤对应URL的方法，从而可以通过标准访问过程返回之前的状态。

9)离线API：

现在移动设备随处可见，但是通信信号却无法保证随处都有。离线API整合了HTML属性、JavaScript事件控制和文本文件，使应用程序能够根据用户状态切换在线或离线工作方式。

5.外部库：

HTML5理论上完全不依赖第三方技术，但有时候必须借助外部资源。这些库增强了JavaScript，并不属于HTML5，但是属于Web的重要组成部分，其中一些现在已经成功应用到一些最成功的网站和应用程序。

1)jQuery：

这是目前最流行的一个JavaScript库，免费，可以简化使用JavaScript创建应用程序，主要包括简化了HTML元素选择、简化了动画创建、能够处理事件和有助于实现Ajax。
jQuery是一个很小的文件，可以从www.jquery.com下载，然后使用<script>标记加到文档中，简单易用。jQuery支持旧版浏览器，可以与HTML5一起使用，或者在不支持HTML5的浏览中替代一些基本的HTML5特性。

2)Google Maps：

Google Maps是一组独特复杂的工具集，可以通过JavaScript API访问，并应用于各种Web地图服务。可以搜索特定位置、计算距离、查找热点地区或者查看某个地点的建筑情况。
Google Maps API是免费的，所有开发者都可以使用，下载地址code.google.com/apis/maps/。

Copyright@dwenzhao.cn All Rights Reserved   备案号：粤ICP备15026949号
联系邮箱：dwenzhao@163.com  QQ:1608288659