js高级-h5新特性
新增标签
表示区块表示文章。如文章、评论、帖子、博客 表示页眉
新增的表单元素
email 只能输入 email 格式。自动带有验证功能。
tel 手机号码。
url 只能输入 url 格式。
number 只能输入数字【必须】
search 搜索框
range 滑动条
color 拾色器
time 时间
date 日期
datetime 时间日期
month 月份
week 星期
(二)web本地缓存
web缓存有 sessionstorage,localstorage,cookie
(1)相同点:
cookie,sessionstorage,localstorage 这三者都可以用来在浏览器端存储数据
(2)不同点:
1.存储大小不一样
cookie数据不超过4kb localstorage,sessuibstorage是5M
2.数据有效期不同
cookie在设置的(服务器设置)有效期内有效
localstorage 一直有效，除非主动删除，否则不会过期
sessionstorage当在浏览器关闭之前有效,关闭及销毁
注 ：localstorage可以理解为永远存储,sessionstorage是临时存储
方法:
setItem()存数据
getItem()取数据
(三)websocket
作用:可以让前端和后台一直连接，这方便我我们对数据的前后台交互
使用步骤:
1.初始化项目
npm init -y
2.安装依赖(及安装模块)
npm i koa koa-websocket koa-static
3.运行项目
// 服务器端代码app.js
const Koa = require("koa");
const path = require("path");
const websockify = require("koa-websocket");
const app = websockify(new Koa());
const serv = require("koa-static");
app.use(serv(__dirname + "/public"));
app.ws.use((ctx, next) => {
// 给前端发信息
let count = 1;
setInterval(() => {
ctx.websocket.send(
`${count++}. 如果没有躺赢的命,那就站起来奔跑`
);
}, 2000);
// 监听前端发来的信息
ctx.websocket.on("message", function (message) {
console.log(message);
});
});
app.listen(3000,()=>{
console.log('http://localhost:3000');
})
// html端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 创建sock
var ws = new WebSocket("ws://localhost:3000");
ws.onopen = function (evt) {
console.log("连接成功");
ws.send("我是张三");
};
// 监听服务器信息
ws.onmessage = function (evt) {
document.write("收到服务器端发来的信息: " + evt.data+'
');
};
ws.onclose = function (evt) {
console.log("Connection closed.");
};
</script>
</body>
</html>
音频和视频
(1)音频
html5通过标签来解决音频播放的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<audio src="https://www.w3school.com.cn/i/horse.ogg" controls>
no supper <!-- 这里是当我们音频不兼容的时候让他来显示 -->
</audio>
</body>
</html>
视频
HTML5 通过标签来解决视频播放的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<video src="https://www.w3school.com.cn/i/movie.ogg" controls autoplay>
no supper <!-- 当视频不兼容的时候显示 -->
</video>
</body>
</html>
Dom操作
(1).选择器
document.queryselector()
document.queryselectorAll()获取的是dom元素的伪数组
(2) 自定义属性
h5可以添加自定义的属性
语法：data-xx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div title="我是一个title" data-time="1">我是一个div</div>
<script>
var div=document.querySelector('div');
//获取dom元素的title属性
console.log(div.title);
//获取我们自定义属性的值
console.log(div.dataset.time);
</script>
</body>
</html>
总结： 存储数据的方式有哪些?
1.浏览器缓存：cookie,sessionStorage,localStorage
2.存放到变量
3.存放到数据库
4.存放到标签（通过自定义属性）
数据存储:搞清楚如何存数据，如何取数据,如何修改数据
即将要学的数据存储:
1.promise存数据
2.vuex
3.小程序本地缓存
小程序拖拽
1.需要被拖拽的元素设置 draggable=“true”
2.目标元素
(1).绑定dragover 事件，阻止默认行为(默认是不能放的)
(2).绑定drop事件,把拖放的元素放入其中
3.绑定拖拽相关事件
ondrag 当拖动元素或选中的文本时触发。
ondragstart 当用户开始拖动一个元素或选中的文本时触发
ondragend 当拖拽操作结束时触发
ondrop 当元素或选中的文本在可释放目标上被释放时触发
ondragover 当元素或选中的文本被拖到一个可释放目标上时触发
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div {
width: 198px;
height: 66px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<p>请把 W3School 的图片拖放到矩形中：</p>
<div id="div" ondrop="test()" ondragover="dev()"> </div>
<div id="div1" ondrop="test()" ondragover="dev()"> </div>
<img draggable="true" src="https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif" alt="">
<script>
function dev(){
event.preventDefault();
}
function test(){
var div=event.target;
var img =document.querySelector('img');
div.appendChild(img);
}
</script>
</body>
</html>
离线缓存
html5中我们可以轻松的构建一个离线(无网络状态),只需要创建一个cachemanifest 缓存清单文件
(1).离线缓存优势
1.可配置需要缓存的资源
2.网络无连接应用仍可用;
3.本地读取缓存资源,提升访问速度,增强用户的体验
4.减少请求,缓解服务器负担.
（2）缓存清单文件
缓存清单文件中列出了浏览器应缓存，以供离线访问的资源。推荐使用 .appcache作为后缀名，另外还要添加 MIME 类型。
缓存清单文件里的内容怎样写：
（1）顶行写 CACHE MANIFEST。
（2）CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js 等。
（3）NETWORK: 换行 指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。
（4）FALLBACK: 换行 当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。
##（3）实例
（1）例如我们创建一个名为demo.appcache的文件.如下
demo.appcache
CACHE MANIFEST
# 注释以#开头
#下面是要缓存的文件
CACHE:
http://img.smyhvae.com/2016040101.jpg
（2）在需要应用缓存在页面的根元素(html)里，添加属性 manifest=“demo.appcache”。路径要保证正确。例如：
<!DOCTYPE html>
<html manifest="demo.appcache">
<head lang="en">
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<img src="http://img.smyhvae.com/2016040101.jpg" alt="" />
</body>
</html>
地图和地理定位
获取地理定位:
1.html5提供了获取定位的api
2.可以使用百度地图, 腾讯地图或者高德地图提交的公共 api 完成地图地位和地图绘制
建议使用的是腾讯声明
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hello world!</title>
<style type="text/css">
#container{
/*地图(容器)显示大小*/
width:1200px;
height:400px;
}
</style>
<!--引入Javascript API GL，参数说明参见下文-->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
<script>
//地图初始化函数，本例取名为init，开发者可根据实际情况定义
function initMap() {
//定义地图中心点坐标
var center = new TMap.LatLng(28.160613,112.985095)
//定义map变量，调用 TMap.Map() 构造函数创建地图
var map = new TMap.Map(document.getElementById('container'), {
center: center,//设置地图中心点坐标
zoom: 17.2, //设置地图缩放级别
pitch: 43.5, //设置俯仰角
rotation: 45 //设置地图旋转角度
});
}
</script>
</head>
<!-- 页面载入后，调用init函数 -->
<body onload="initMap()">
<!-- 定义地图显示容器 -->
<div id="container"></div>
</body>
</html>
绘图 canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
canvas {
border: 1px solid;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="600"></canvas>
<script>
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d"); //获取2d作图对象
cxt.moveTo(10, 10); //画线的的起始点
cxt.lineTo(150, 50); //画线
cxt.lineTo(10, 50);
cxt.stroke(); //线
cxt.fillStyle = "#FF0000"; //填充颜色
cxt.beginPath(); //开始路径
cxt.arc(70, 18, 15, 0, Math.PI * 2, true); //画圆
cxt.closePath(); //结束路径
cxt.fill(); //填充
var img = document.createElement("img");
img.src = "https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif";
img.onload = function () {
cxt.drawImage(img, 200, 200); //画布填充图片
};
</script>
</body>
</html>