好程序员技术分享html5和JavaScript的区别
好程序员技术分享html5和JavaScript的区别,HTML5广义上讲是前端开发学科的代名词,包含HTML5、CSS3及JavaScript三个重要的部分,是运行在浏览器上应用的统称。如PC端网站、管理系统、手机网页应用(WebApps)、混合应用(HybridApps)、微信公众号、小程序、小游戏、数据可视化等。
HTML5狭义上讲是指HTML版本5(v5),相较HTML4,增加了很多新的元素(标签)和元素属性,大大增强了HTML的语义化和表现力,这一部分属于页面结构的内容,比如媒体标签video、audio,画布canvas标签,这三个新标直接K.O了flash。另外,HTML5增加了很多API,为移动APP开发奠定了坚实的基础,比如优化了本地存储(WebStorage)、应用的离线缓存(Application Cache)、地理定位(Geolocation)、监听网络状态等。
上述的HTML5新增的API就是通过JavaScript来调用的,或者本身就是JavaScript程序。下面列示一些重要的API:
API名称 |
功能描述 |
API举例 |
应用缓存 |
web 应用可进行缓存,并可在没有因特网连接时进行访问 |
通过配置Manifest文件实现缓存 |
WebSQL |
Web SQL Database概念,它使用 SQL 来操纵客户端数据库的 API |
openDatabase() |
本地存储 |
web 应用程序能够在用户浏览器中对数据进行本地的存储 |
window.localStorage |
Canvas |
HTML5 <canvas> 标签通过JavaScript绘制图像 |
createLinearGradient() |
文件API |
让前端操作文件变的可能 |
FileList、File、Blob、FileReader、URL |
地理定位 |
HTML5 Geolocation(地理定位)用于定位用户的位置 |
navigator.geolocation.getCurrentPosition(showPosition) |
多媒体 |
在网页里播放音频和视频的新的Api |
video,audio系列API |
拖放 |
优化了原生JavaScript实现的拖放 |
ondragstart、setData()、ondragover、ondrop |
history |
window对象通过history对象提供了对浏览器历史的访问 |
pushState()、replaceState() |
网络状态 |
HTML5网络状态检测 |
window.ononline、window.onoffline |
WebWorker |
web worker 是运行在后台的 JavaScript,不会影响页面的性能 |
new Worker()、postMessage() |
WebSocket |
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议 |
Socket.send()、Socket.close() |
以上可见,HTML5新增的API,是离不开JavaScript的,JavaScript是前端开发的核心,只学HTML5,或者说只学HTML5标签是不能进行前端开发的,或者这样说本来就是不全面的,因为HTML5是包含JavaScript Api的。
目前,大前端的概念已经深入人心,大前端开发的职业前景越发的广阔,Google fluter,人工智能(AI)在前端的应用赋能大前端开发,使这些从业者越来越抢手。
大前端开发包括很多内容: HTML5,CSS3,JavaScript,ES,TypeScript,BootStrap,jQuery,Vue.js, React, RN, Angular, 各类小程序,JavaScript库,前端开发工具,Node.js,状态管理,桌面开发(Electron), 前端单元测试,服务器,Socket编程,服务端渲染,前端架构等等。
小白入门,一时间还真有点无从下手。如果基础好,自学能力强,自制能力强,可以买些书籍或视频学习,如果想系统的短期速成,可以考虑报个培训班。
希望能帮到你,祝你早日炼成前端达人。
好程序员技术分享html5和JavaScript的区别的更多相关文章
- 好程序员技术教程分享JavaScript运动框架
好程序员技术教程分享JavaScript运动框架,有需要的朋友可以参考下. JavaScript的运动,即让某元素的某些属性由一个值变到另一个值的过程.如让div的width属性由200px变到400 ...
- 【原文】前端程序员必须知道的高性能Javascript知识
原文:前端程序员必须知道的高性能Javascript知识 想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...
- 自学android半年,已从.net转型成android程序员,分享下这个过程
自学从来都是一件难以坚持的事情,看过太多人三分钟热度之后就颓然放弃,然后告诉下一个要自学的人,自学很难,还是正儿八经去培训机构吧 所以首先你要对安卓开发非常感兴趣,发自内心喜欢安卓系统,日常手机如果是 ...
- 【好程序员笔记分享】——iOS开发之纯代码键盘退出
-iOS培训,iOS学习-------型技术博客.期待与您交流!------------ iOS开发之纯代码键盘退出(非常简单) iOS开发之纯代码键盘退出 前面说到了好几次关于键盘退出的,但 ...
- 非名校毕业年薪20W程序员 心得分享
大家好,我是落落http://blog.csdn.net/robinson1988/ QQ692162374,其实我选择Oracle是一件很神奇的事情,但是现在回想起来又觉得是命中注定.我2006年就 ...
- 黄文俊:Serverless小程序后端技术分享
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 黄文俊,现任腾讯云SCF无服务器云函数高级产品经理,多年企业级系统开发和架构工作经验,对企业级存储.容器平台.微服务架构.无服务器计算等领域 ...
- 关于PHP程序员技术职业生涯规划
看到很多PHP程序员职业规划的文章,都是直接上来就提Linux.PHP.MySQL.Nginx.Redis.Memcache.jQuery这些,然后就直接上手搭环境.做项目,中级就是学习各种PHP框架 ...
- 关于PHP程序员技术职业生涯规划[转]
看到很多PHP程序员职业规划的文章,都是直接上来就提Linux.PHP.MySQL.Nginx.Redis.Memcache.jQuery这些,然后就直接上手搭环境.做项目,中级就是学习各种PHP框架 ...
- 关于PHP程序员技术职业生涯规划 转自 韩天锋
转自 http://rango.swoole.com/ 看到很多PHP程序员职业规划的文章,都是直接上来就提Linux.PHP.MySQL.Nginx.Redis.Memcache.jQuery这些, ...
随机推荐
- 关于bootstrap报错
在使用bootstrap报错.报错的位置如下 if("undefined"==typeof jQuery)throw new Error("Bootstrap's Jav ...
- Vue2.x源码学习笔记-Vue源码调试
如果我们不用单文件组件开发,一般直接<script src="dist/vue.js">引入开发版vue.js这种情况下debug也是很方便的,只不过vue.js文件代 ...
- 【干货】快速部署微软开源GPU管理利器: OpenPAI
[干货]快速部署微软开源GPU管理利器: OpenPAI 介绍 不管是机器学习的老手,还是入门的新人,都应该装备上尽可能强大的算力.除此之外,还要压榨出硬件的所有潜力来加快模型训练.OpenPAI作为 ...
- 微信小程序页面跳转方法和携带参数详解
1.页面跳转方式 (1)标签跳转 open-type的属性值对应api里的用法即wx.的用法 1 <navigator url="/page/navigate/navi ...
- 【RL-TCPnet网络教程】第41章 HTTP超文本传输协议基础知识
第41章 HTTP超文本传输协议基础知识 本章节为大家讲解HTTP(HyperText Transfer Protocol,超文本传输协议),从本章节开始,正式进入嵌入式Web的设计和学习. ...
- 微擎where范围查询in
where sale_time in($todayStart,$todayEnd)
- Servlet+JSP及Tomcat常见面试题(面试必备)
1. 什么是servlet? servlet是用来处理客户端请求并产生动态网页内容的java类 2. Tomcat的缺省端口是多少,怎么修改? a) 默认端口号是8080 b) ...
- Python就业指导
一年一度的金三银四招聘旺季又要到了,最近有很多同学希望我能给他们一些关于python的就业指导:之前出过一期关于java的就业指导,但是并不是很完善,所以希望这期关于python的就业指导能够很全面很 ...
- [SpringBoot guides系列翻译]调用RESTfulWebService
原文 参考链接 CommandLineRunner Bean 翻译如何调用RESTful WebService 这节将演示如何在SpringBoot里面调用RESTful的WebService. 构建 ...
- 用.net写Textbox控件关于数字的判断的二则方法
方法一.使用textboxSelected事件进行判断首界面源码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...