《JS原理、方法与实践》- HTML5简介

简介: 《JS原理、方法与实践》- HTML5简介

HTML5是近几年非常热门的话题,它提供了很多使用功能,例如:

* 本地存储

* canvas作图

* WebSocket

* 多线程

* 获取地理位置

* 富文本编辑器

* 公式编辑器

#### 本地存储

本地存储主要包含Cookie、Storage和IndexedDB数据库三种方式。

不同数据库存储上限:

Cookie: 4k

Storage: 5M(chrome),不同浏览器上限大小不同

IndexedDB: 无上限

![](https://upload-images.jianshu.io/upload_images/2789632-d048330472d30cdc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

#### canvas作图

canvas作图是通过canvas标签来完成的,但是该标签及其所对应的HTMLCanvasElement对象本身并没有太多的操作,它主要是通过getContext方法获取的环境对象进行操作的。context分为2D和3D两种,要使用哪种就将参数传入getContext来获取相应的context,但是,对于一个canvas来说,只可以作为2D或3D中的一种来使用,当第一次调用getContext方法时,其类型就确定下来了,之后不可以再使用不同的参数来获取另一种。

#### WebSocket

WebSocket是一种新的与服务端通信的方式,它是一种长连接的通信方式,也就是说连接成功后若不主动断开,则会一直保持连接状态,而不像HTTP(s)协议那样会自动断开连接,使用WebSocket可以很容易实现服务端推送相关的业务。

#### 多线程

JS中的多线程是使用Worker对象来实现的,是基于事件的模式进行处理的。这里需要注意线程之间传递的数据不是引用而是数据的副本,这样不同线程之间进行数据处理时就不会造成相互干扰,但是这并不表示就不存在线程同步的问题,线程同步问题还需要手动解决。

#### HTML5获取位置信息

HTML5中获取位置信息是通过navigator的geolocation属性对象来操作的,可以获取一次也可以连续获取,在获取位置信息前需要征得用户的同意。获取成功后会返回Position对象,其中包含经度、维度、运动速度等信息;如果获取失败,则会返回PositionError对象,其中包含获取失败的原因。如果要将获取的信息显示到地图上,则可以使用已有的地图API来实现。

#### 富文本编辑器

富文本编辑器可以直接通过contenteditable属性制作。虽然理论上可以使用任何标签来做编辑器,但是为了安全建议大家最好使用iframe,这样可以避免对页面内的其他内容造成影响。对样式的修改可以使用getSelection获取到选区,然后手工修改,也可以通过document的execCommand方法使用命令来修改。插入图片时三个不同的地址要区分清除,一个用于上传图片,一个用于在编辑器中显示图片,一个用于在文章中显示图片,后两个地址是同一个地址,如果在编辑器中可以正常显示图片而在文章中无法正常显示就要考虑这两个地址所处的环境。

#### 公式编辑器

公式编辑器主要使用的是MathML标准。这是一个独立的、基于XML的标准,其核心是各种标签和属性。编辑公式就是编辑其所包含的各种标签。

目录
相关文章
|
20天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
5天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
|
19天前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
19天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
8天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
|
12天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
54 1
|
19天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
36 7
|
17天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
32 3
|
20天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
33 4
|
19天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
46 0
html5+three.js公路开车小游戏源码
下一篇
无影云桌面