HTML5 中引入了哪些新的JavaScript API?具体有什么作用?

html-css012

HTML5 中引入了哪些新的JavaScript API?具体有什么作用?,第1张

简而言之,HTML5就是由新的标记引进的新元素形式和为现有元素新增的某些属性,与新的JavaScript APIs的结合体。那HTML5中引入了新增加了哪些新标签与JavaScript API结合体呢?我这里例举了我们平时最常用的几种:

1、 Canvas API是一个具有完整功能的JavaScript API并伴随产生了新HTML5元素<Canvas>。通过Canvas API,您可以利用它和WebGL在浏览器中创建一个2 D或3 D绘图场景,

2、 Contacts API主要应用在移动设备上,为浏览器提供对用户通用通讯录的访问。它在浏览器内建立一个本地存储库,来存储联系人信息。而不是通过访问让你所有联系人信息直接保存在Google +、Facebook或其他网站上, Contacts API将允许您有本地存储库,网站可以通过本地存储库访问存储的联系人信息。现在的主流浏览器都支持Contacts API

3、 通过File API 浏览器可以直接访问用户计算机的沙箱区域将数据存储到文件系统。

4、 在HTML5中Forms API得到了发展,内置了验证功能,在接下来的课程中,您将会学习到如何通过使用内置的规则实现表单验证,以及如何添加自定义规则进行表单验证。

5、 允许浏览器请求用户的位置信息,一旦获权,浏览器可以通过许多不同的方法来确定计算机或设备的实际位置,它将会有一个比例尺来确认精确的地点位置。通过该API能获取经纬度等数据,非常适合应用程序定位。

6、 Media Capture的功能是将本地设备通过JavaScript将与浏览器相连。你将能够访问摄像头,摄像头,等等。

7、 Messaging API被用来与其他API一起使用,比如web web workers,这个我们将将在后面的课程中进一步讨论。

8、 选择(Selection)API的就像jQuery库一样运用非常广泛。在流行jQuery 、HTML5的今天,试图从文档对象模型选择元素是比较复杂的。jQuery弥补了这一差距。其实变得很容易,HTML5将高级选择功能直接内置在浏览器中。使得浏览器的选择性能得到很大的改善,甚至于JQuery选择工具一样速度。我并不是贬低jQuery。jQuery的优势就是DOM的选择,但是,jQuery不仅仅只提供了选择功能,事实上,在本课程中未来的演示的案例中,您将清楚的知道什么时候使用jQuery会更加便利,然后什么时候切换到本地选择会更加方便。.

9、 Server-Sent Events API:一个网页获取新的数据通常需要发送一个请求到服务器,也就是向服务器请求的页面.使用Server-Sent Events API,服务器可以在任何时刻向我们的web页面推送数据和信息.这些被推送进来的信息可以在这个页面上作为事件/数据来处理。服务器推送事件(Server-Sent Events)的优点在于: 只要响应的内容类型是事件/数据流,事件就通过HTTP发送,浏览器能够识别该传输。

10、 Web Notifications API即web消息提醒,它可以使页面可以发出通知,通知将被显示在页面之外的系统层面上(通常使用操作系统的标准通知机制,但是在不同的平台和浏览器上的表现会有差异)。这个功能使 web 应用可以向用户发送信息,即使应用处于空闲状态。最明显的用例之一是一个网页版电子邮件应用程序,每当用户收到了一封新的电子邮件都需要通知用户,即使用户正在使用另一个应用程序。在2013年夏天,这个API还是在被W3C在试用,并没有被很多浏览器所应用。

11、 Web Sockets API:Web Sockets是一种基于 ws 协议的技术,它使得建立全双工连接成为可能。websocket 常见于浏览器中,但是这个协议不受使用平台的限制。它允许你收发信息到服务器端。这个典型的示例就是即时通信。你建立一个对话,如果没有sockets,你可能会去从服务器中去获取新的消息。如果具有了sockets,当消息通过浏览器发到服务端的时候,对方的客户端通过已经建立好的sockets链接就能自动的接收到信息。

12、 Web存储,它有两种版本,本地存储和会话存储。就WEB开发来说,一个会话就是你通过浏览器与服务器之间的一次通话,所以,如果你熟悉服务器端web开发,会话存储可能不是头一次听说。基本上,只要用户页在页面上的统一个会话内,工作数据就不会丢失。如果浏览器关闭或者转向另一个会话,那么此时数据就不复存在。本地存储在不同会话之间仍然能保存数据, 本地存储与cookie 和IndexedDB相比,它可以让你来贮存更多的信息。Web存储与cookie,数据不发送到请求的服务器而是保存在客户端。

这些都是HTML5中新加入的一些比较常用的功能API,如果你想要系统的了解HTML5的新功能,推荐你去一个叫做秒秒学的教程网站上看看,里面有专门的课程来讲解HTML5中的新特性,希望对你有帮助。

html5中引入3d模型的方法是借助第三方PlayCanvas插件来完成的。

比如可以用以下方法实现图片的360度旋转:

代码示例:

var render, loop, t, dt, //定义变量

DEG2RAD = Math.PI / 180, //角度转弧度

cvs = document.querySelector('canvas'), //创建canvas

ctx = cvs.getContext('2d'),//绘制2d图形上下文

teddy = new Image(), //创建图像

heart = new Image(), //创建图像中心

angle = 0,//初始化角度为0

reqAnimFrame =

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.msRequestAnimationFrame ||

window.oRequestAnimationFrame

//创建动画帧

cvs.width = 400

cvs.height = 200

teddy.src = 'xxx.jpg'

heart.src = 'yyy.jpg'

//开始渲染

render = function (timestamp) {

dt = timestamp - t

t = timestamp

// cavas设置为白色

ctx.fillStyle = "rgb(255,255,255)"

ctx.fillRect(0, 0, cvs.width, cvs.height)

// 绘制中心

ctx.drawImage(heart, -20, -120)

// 绘制teddy

ctx.save()

ctx.translate(cvs.width/2, cvs.height/2)// 移动鼠标到画布中心

ctx.rotate(DEG2RAD * angle)// 旋转画布

ctx.drawImage(teddy, -teddy.width/2, -teddy.height/2)// 绘制中心图片

angle += dt / 16.67 * 6// increment angle ~ 360 deg/sec

ctx.restore()

}

loop = function (timestamp) {

reqAnimFrame(loop)

render(timestamp)

}

t = Date.now()

loop(t)

HTML5新特性如下:

1、脱机缓存。您可以在关闭浏览器并再次打开时还原数据,以减少网络流量。

2、音频和视频可以自由嵌入,多媒体形式更加灵活。

3、地理位置。地理位置定位使得定位导航不再是专属导航软件,地图也不需要下载很大的地图包。它可以通过缓存、去哪里、去哪里以及更灵活的方式来解决。

4、画布绘制提高了移动平台的绘制能力。canvas API可以用来绘制一个简单的热点地图来收集用户体验数据,并支持对图像的移动、旋转、缩放等常规编辑。

5、丰富的互动方式。提高交互能力:拖动、撤消历史操作、文本选择等。

6、与原生app相比,开发维护成本低。降低开发和维护成本;?使页面更小,减少用户不必要的开销;性能更好,功耗更低。

7、CSS3视觉设计师的辅助利器支持。CSS3支持字体嵌入、布局和最令人印象深刻的动画功能。

8、HTML5调用相机、相册和通讯录的功能。

扩展资料:

2014年10月29日,万维网联盟宣布,HTML第五次重大修订,经过近8年的努力,标准规范终于完成。HTML5旨在支持移动设备上的多媒体。引入了新的语法特性来支持这一点,如视频、音频和画布标记。HTML5还引入了一些新功能,这些功能可以真正改变用户与文档交互的方式,包括增强灵活性的新解析规则、新属性、过时或冗余属性等。