标签：浏览器 菜鸟 JavaScript 进阶篇 HTML HTML5 var WebSocket
一、HTML5新特性
上一节复习了HTML基础以及CSS样式，本节及复习HTML5的新特性，HTML5是目前超文本标记语言的最新版，相对与老版新增了很多元素同时也删除了一部分。比较重要的更新有：
1. canvas 画布
该元素可以定义图形，比如图表和其他图像。他基于 JavaScript 的绘图 API设定的。
使用好画布，可以进行很多操作，游戏开发、简单的动画设计等等，通过方法的封装还可以写出画板的效果，用户可直接在画布上进行写入，可应用与本人签名、简笔画、网络课程的“黑板等…”
可参考:由博主：一只飞蛾 原创的canvas签名板
canvas由JavaScript进行操作。后面将会对JavaScript进行复习，下面是一个简单的canvas实例：
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
2.HTML5 拖放（Drag 和 Drop）
拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
具体步骤为：
Ⅰ. 设置元素为可拖放
即把要拖动的元素的 draggable 属性设置为 true
Ⅱ.设置所要拖动元素的类型
ondragstart 调用方法
dataTransfer.setData() 方法设置被拖数据的数据类型和值
Ⅲ. 放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
Ⅳ. 进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。ondrop 属性调用了一个函数，触发以下方法：
ev.preventDefault(); 避免浏览器对数据的默认处理
var data=ev.dataTransfer.getData(“Text”);获取ev中指定数据类型的元素
ev.target.appendChild(document.getElementById(data));执行拖动（appendChild为添加元素的方法）。
3.HTML5 WebSocket
WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断的向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。
HTML5 定义的 WebSocket 协议，能更好的节省服务器资源和带宽，并且能够更实时地进行通讯。
摘自 菜鸟教程
使用WebSocket可实现即时通讯，常用于提醒信息的接受、网页客服即时聊天等。
参照 菜鸟教程HTML5 WebSocket
4.HTML5 Web Workers
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。类似于Java的多线程，但是引文webworkers是在文档整体之外，所以无法获取页面的document等对象。
它可以用作计时器、计数器等独立脚本。web worker 通常不用于简单的脚本，而是用于更耗费 CPU 资源的任务。如对图片、视频资源进行预处理等。
5.总结
HTML5相对上个版本有很大的变化，新功能的出现使写出一个动态网站更加容易，更加友好。还有部分新增的全局属性如data-*方便和JavaScript进行数据传递，减少代码的重复行，增加可读性。
canvas的出现促进了网页游戏的发展，目前大多数的页游都在向H5转变，代码更加单一，团队和更契合，配合主流的前端框架如vue、jQuery等可大大减轻后端的工作量，再加上node环境，一些轻小型应用可以直接全栈开发。
二、JavaScript 脚本
JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。
作为web开发的三大将之一，JavaScript是每一个开发人员必须学习的内容。
HTML 定义了网页的内容， CSS 描述了网页的布局，而JavaScript 网页的行为。
1.JavaScript 简介
JavaScript作为一个脚本语言，主要是对HTML的document进行操作，他的部分语法这点和java很像，但两者不同之处也有很多，比如java在声明变量的时候，需要指明变量类型，而JS就不需要。
JavaScript有内部脚本和外部脚本两种，内部脚本必须包括再script标签中。
它主要由以下的功能：
- 可将内容直接写入 HTML 输出流（需要包括在script标签内）
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
- 可以对浏览器做出反应
<button type="button" onclick="alert('欢迎!')">点我!</button>
- 可以改变 HTML 内容
x=document.getElementById("demo"); //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
- 还可以改变 HTML 样式、验证输入等
2.语法
常量
| 值类型 | 写法 |
|---|---|
| 数字 | 123、89e15 |
| 字符串(string) | “HelloWorld” |
| 表达式 | 1+1 |
| 数组 | [40, 100, 1, 5, 25, 10] |
| 对象 | {firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”} |
| 函数 | function myFunction(a, b) { return a * b;} |
变量
- JavaScript为弱语言，不用对变量的类型进行声明，系统会自动判别变量的类型。
- var x=1；有var标识的为局部变量，只可在相应的区块内使用。
- y=2；没有var标识则为全局变量，再整个script标签中都可调用。
操作符
| 类型 | 实例 | 描述 |
|---|---|---|
| 赋值，算术和位运算符 | = + - * / | 进行加减乘除赋值运算 |
| 条件，比较及逻辑运算符 | == != < > | 两个对象之间关系的比较，返回值为true和false |
语句
在 HTML 中，JavaScript 语句向浏览器发出的命令。
语句是用分号分隔：
x = 5 + 6;
y = x * 10;
关键字
JavaScript 关键字用于标识要执行的操作。 和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。
注释
双斜杠 // 后的内容将会被浏览器忽略
数据类型
| 数据 | 描述 |
|---|---|
| var length = 16; | Number 通过数字字面量赋值 |
| var points = x * 10; | Number 通过表达式字面量赋值 |
| var lastName = “Johnson”; | String 通过字符串字面量赋值 |
| var cars = [“Saab”, “Volvo”, “BMW”]; | Array 通过数组字面量赋值 |
| var person = {firstName:“John”, lastName:“Doe”}; | Object 通过对象字面量赋值 |
函数
function myFunction(a, b) {
return a * b; // 返回 a 乘以 b 的结果
}
注意：JavaScript 对大小写是敏感的。
3.小结
本篇文章复习了HTML5的部分新特性以及Javascript的基础知识，通过复习我对相关的技术认识更加的深刻，同时也学到了一些新东西，古人云：温故而知新，作为一个菜鸟程序员只有不断的重复熟悉基础知识，才能更快速的掌握新技术,地基的好坏决定了大楼高度。
注：本文部分内容选自菜鸟教程。
下一篇进行JavaScript深入复习以及jQuery的复习。
标签：浏览器,菜鸟,JavaScript,进阶篇,HTML,HTML5,var,WebSocket 来源： https://blog.csdn.net/qq_42275943/article/details/107286323
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。