《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的标准,其核心是各种标签和属性。编辑公式就是编辑其所包含的各种标签。

目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
64 24
|
1月前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
135 52
|
18天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
21天前
|
存储 JavaScript NoSQL
Node.js新作《循序渐进Node.js企业级开发实践》简介
《循序渐进Node.js企业级开发实践》由清华大学出版社出版,基于Node.js 22.3.0编写,包含26个实战案例和43个上机练习,旨在帮助读者从基础到进阶全面掌握Node.js技术,适用于初学者、进阶开发者及全栈工程师。
46 9
|
21天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
65 2
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
50 5
|
1月前
|
缓存 监控 JavaScript
Vue.js 框架下的性能优化策略与实践
Vue.js 框架下的性能优化策略与实践
|
1月前
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
1月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
75 1