复习：HTML新（语义）标签

视频和音频

HTML5提供了引入视频（video）和音频（audio）文件的标签：

    <video>
        <source src="/小九姐姐.mp4" />
    </video>

也可以简写成：

<video id="xj" src="/小九姐姐.mp4"></video>

代码非常清晰简洁。

video {    /* video就是一个html5标签 */
    width:100%; 
    height:auto
}

添加一个controls属性，就可以有原生的操作按钮：（演示）

<video id="xj" controls src="/小九姐姐.mp4"></video>

也可以通过调用JavaScript的

• play()方法，播放

  document.getElementById("play").onclick=function(){
      document.getElementById("xj").play();

• pause()方法，暂停

  document.getElementById("xj").pause();

等。在此之前，通常都只能通过插件（flash）实现。

地理定位

QQ珊瑚虫：一款腾讯QQ的外挂辅助软件，可以显示好友的IP地址以及地理位置……最终引发诉讼

二审维持了原判，法院判定被告人陈寿福犯侵犯著作权罪，判处有期徒刑三年，追缴117万，再处罚金120万，总共涉案金额达237万。

IP地址（如果不做特殊处理的话）是可以映射到真实地址的。

HTML5引入了这个功能，但需要浏览器支持，并由用户允许开启。

以下代码即可获取当前用户的经纬度：

 navigator.geolocation.getCurrentPosition(function (position) {
            console.log('经度：' + position.coords.longitude);
            console.log('维度：' + position.coords.latitude);
            console.log('海拔：' + position.coords.altitude);
        }, function(error) {
            switch (error.code) {
                case error.PERMISSION_DENIED:
                    console.log("User denied the request for Geolocation.");
                    break;
                case error.POSITION_UNAVAILABLE:
                    console.log("Location information is unavailable.");
                    break;
                case error.TIMEOUT:
                    console.log("The request to get user location timed out.");
                    break;
                case error.UNKNOWN_ERROR:
                    console.log("An unknown error occurred.");
                    break;
            }
        });

背后原理：

1. 上述js代码会通过浏览器，向（浏览器厂商的）服务器索取当前IP所对应的位置，所以需要网络保持畅通……
2. 通过经纬度我们就可以获取到用户的省市街道等地理位置，演示：百度拾取坐标系统

canvas

HTML5提供了绘图功能！即：可以使用JavaScript代码进行图形绘制，(〃'▽'〃)，那么理论上通过代码就可以不断的进行绘制，实现动画效果了！示例

目前最常用的是canvas（画布）标签，使用JavaScript进行绘制。

    <canvas id="mole" width="200" height="100"></canvas>
    <script>
        let canvas = document.getElementById('mole').getContext('2d');
        canvas.fillStyle = '#FF0000';    //设定填充颜色
        canvas.fillRect(0, 0, 150, 75);
    </script>

其他API：（演示：略）

• 线条：moveTo()/LineTo()/stroke()；

  canvas.beginPath();    //开始画线条
  canvas.moveTo(20,20);    //设定起点
  canvas.lineTo(50,60);    //设定终点
  canvas.stroke();    //绘制！

• 弧线：arc(x,y,r,start,stop)

本地（local）存储

传统的Web应用，数据都存储在后端（服务器），这样更安全，更可控。

但为了提升应用性能，减少网络流量消耗，HTML5为我们提供了通过浏览器，存储在本地的：

• sessionStorage：临时存储，当对话结束（关闭tab或浏览器）自动清除
• localStorage：长期存储，除非主动删除不会被清除（演示）

数据以文本“键值对”的形式存储，相应的API（增删改查方法）如下：

• setItem(key, value)：添加一条信息
• getItem(key)：根据键（key）获取一条信息
• clear()：清除/删除所有信息
• removeItem(key)：移出（由key指定的）某条信息
• key(n)：根据索引获取键值，常用于遍历整个storage：

  for (let i = 0; i < localStorage.length; i++) {
      console.log(localStorage.getItem(localStorage.key(i)));
  }

注意：内存形式的对象是不能直接存储的，一般要通过JSON序列化之后再存储。（演示：[Object object]）

@想一想@：实际开发中，storage可以存储什么信息？

Cookie

复习

#常见面试题，cookie和Storage的区别#

1. cookie会在每次请求/响应的时候，在客户端和服务器端之间传输；storage不需要；
2. cookie能够/应该存储的数据没有storage大

JavaScript中操作cookie，非常简陋，几乎纯手写，(；′⌒`)：

document.cookie = 'name=fg';

cookie的其他“属性”，用分号（;）分割，包含在字符串中：

document.cookie = 'id=; SameSite=None'

注意：不同的path，是不同的cookie

添加：看起来就像是继续赋值：

document.cookie = 'id=1981;' 

演示：添加之后，获取的cookie还是一个字符串

修改：只能再次赋值……

document.cookie = 'id=; SameSite=Lax'

删除：添加expires，值可以省略（反正要删除了）

document.cookie = 'name=; expires=Wed Dec 31 1969 00:00:00 GMT+0800 (GMT+08:00);' 

不要以为可以（演示）：

document.cookie = null;

所以很多时候，我们都是使用现成的cookie库……

拖放

演示效果

其实是由两个动作组成：

1. 拖（drag）：把DOM元素拖动起来，使其离开原来的位置
2. 放（drop）：将被拖动的DOM元素放到另外一个地方

演示用HTML元素：

<div></div>
<span>来拖我呀！</span>
<img id="xj" src="/images/源栈小九-small.png" />

样式设定：

div, span{
    border: 1px solid;
}
div{
    width: 200px;
    height: 200px;
}

JavaScript代码准备：

    let div = document.getElementsByTagName('div')[0],
        img = document.getElementById('xj');

具体来说，包括以下几个步骤：

1. 大部分元素默认是不能拖拽的，需要将其设置为可拖拽（但img默认是可拖拽的）：

   <span draggable="true">来拖我呀！</span>

   演示：能够拖拽时显示“小虚线方框”
2. 当元素被拖动时，在ondragstart事件中用setData()，记录下被拖拽的元素信息

   img.ondragstart = function (event){
       event.dataTransfer.setData("Text",event.target.id);   //Text指定数据类型
   }

3. 在被放置的元素上，利用ondragover事件，解除默认的限制：

   div.ondragover = function (event) {
       event.preventDefault();
   }

4. 在元素将要放置的元素上，进行放置 - ondrop

   div.ondrop = function (event) {
       event.preventDefault();    //同样要解除限制先
       div.append(document.getElementById(
           event.dataTransfer.getData("text")));    //对应setData
   }

WebSocket

是HTML5引入的一种不同于HTTP的双向通信新协议（uri中协议头：ws/wss），可以替代（需要发起多次HTTP请求的）轮询，但：

1. 因为与 HTTP 协议良好的兼容性，（尤其是前端）使用时有可能感觉不到它是一个新协议
2. 需要服务器的支持。

在客户端，只需要：

新建 WebSocket 实例，建立和服务器端的连接

send()：向服务器发送数据

使用回调函数

• onopen 
• onmessage
• onerror
• onclose

一样可以由readyState属性返回实例对象的当前状态

数据也可以是二进制类型：

.js引入

一般情况下，JavaScript只在当前页面 有效。即：

• A页面的JavaScript代码不能操作B页面的DOM树
• A页面定义的function，不能在B页面使用；

但有时候，一个function可能需要在多个页面使用，怎么办，复制粘贴？！

（和CSS的解决方案类似），可以将该function放入一个独立的.js文件中，然后在需要的页面引用它：

<script src="/js/site.js" type="text/javascript"></script>

注意：

• js文件中不能包含<script>标签 
• 函数提升不适用于.js文件引入，所以要安排好先后顺序（演示）

很多类库（比如jquery），其实就是一个或多个.js文件而已。

#常见面试题：应该使用嵌入还是引用？#

标准套路：具体情况具体分析……(＾＿－)

追求“纯粹”的前端开发人员要求只使用.js文件引入，因为“HTML和JavaScript应该隔离”。

但其实他们是割不断的，所以飞哥的意见：

• 仅供单个页面使用：嵌入。好处：不影响/污染其他页面，这一点其实很重要，尤其是你的js代码越来越多的时候
• 多个页面共用：.js文件引用

#常见面试题：js（以及css）代码放在头部还是底部？#

主要是考虑性能。当一个页面需要加载几十个js文件的时候……

目前流行的是放在<body>底部，以便优先加载非JavaScript内容，可以：

• 有更好的用户体验：先看到内容再说……
  
• 能保证DOM操作的正确执行

.css文件可以放在<head>中，因为它只是“渲染”，不是“执行”，比较快，不影响；而且页面按HTML呈现之后再按CSS渲染，用户体验不好。

作业

1. 用canvas绘制一枚铜钱（外圆内方）
   
2. 为文章列表页面添加一个功能，可以通过拖放调整文章的顺序，并确保调整之后的顺序能够被浏览器永久记录，不因页面关闭而消失。
   

源栈学历

在当前系列 Javascript入门 中继续学习：

多快好省！前端后端，线上线下，名师精讲

• 先学习，后付费；
• 不满意，不要钱。
• 编程培训班，我就选源栈

更多了解 加：