笔记(1)

发表于 | 分类于

知识笔记

网络状态

在移动端，我们经常需要检测设置是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性用于检测设备是否联网。navigator.onLine 在不同浏览器中有细微的差别。

网络状态

【01.网络状态.html】

1
2
3
navigator.onLine返回用户当前的网络状况，是一个布尔值
1. 如果浏览器连不上网(包括局域网)，就是离线状态，也就是脱机状态，会返回false
2. 否则就是在线状态，返回true

注意：返回true不一定就是说一定能访问互联网，因为有可能连接的是局域网。但是返回false则表示一定连不上网。

监听网络变化

【02-判断网络状态.html】

为了更好的确定网络是否连接，HTML5还定义了两个事件，用于监听网络状态的变化。

1
2
3
4
5
6
7
8
//网络连接时会被调用
window.addEventListener("online", function () {
    alert("online");
});
//网络断开时会被调用
window.addEventListener("offline", function () {
    alert("offline");
});

地理位置

在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务LBS(Location Base Service)

隐私

HTML5规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。在获取地理位置之前，会询问用户，只有在获得许可之后，才能获取到用户的位置信息。

相关的方法

【03-获取地理位置.html】

1
2
3
4
5
6
//successCallback:获取成功后会调用,并返回一个position对象，里面包含了地理位置信息
//获取失败了会调用，并返回error对象，里面包含了错误信息。
//获取当前的地理位置信息
navigator.geolocation.getCurrentPosition(successCallback, errorCallback)
//重复的获取当前的地理位置信息
navigator.geolocation.watchPosition(successCallback, errorCallback)

实例：

1
2
3
4
5
6
7
8
9
10
navigator.geolocation.getCurrentPosition(function(position){
    // 定位成功会调用该方法
    // position.coords.latitude 纬度
    // position.coords.longitude 经度
    // position.coords.accuracy 精度
    // position.coords.altitude 海拔高度
}, function(error){
    // 定位失败会调用该方法
    // error 是错误信息
});

在iOS 10中，苹果对webkit定位权限进行了修改，所有定位请求的页面必须是https协议的。

百度地图

仅仅获取到经纬度对于用户来说意义并不大，因为用户也不知道经度和纬度表示的是地球上的哪一个地方，因为我们可以结合百度地图，准确的将用户的位置显示出来。

百度地图官网：http://lbsyun.baidu.com/

1
2
3
1. 在开发中，找到javascript API
2. 直接查看示例demo
3. 复制相应的代码，替换掉秘钥就行，秘钥只需创建一个新的应用就可以了。

【04-百度地图的用法.html】
【05-百度地图(设置新的图标).html】

web存储

在代码执行的时候，数据都是存储在内存中的，当页面关闭或者浏览器关闭的时候，内存就被释放掉了。数据只有存储在硬盘上，才不会被释放。

【01-web存储初体验.html】

1
2
3
4
5
6
7
//存储在内存中，会被释放
    var str = "hello world";
    console.log(str);
    //存储在硬盘上，不会被释放
    localStorage.setItem("name", "张三");
    console.log(localStorage.getItem("name"));

传统方式，我们以document.cookie进行存储，但是存储起来特别麻烦，并且，存储大小只有4k，常用来做自动登录，即存储用户的账号和密码信息。每次请求都会带上cookie

【02-cookie存储.html】
cookie是以字符串形式存在的，这个字符串有固定的格式：key=value;key1=value1;

在获取cookie内容时，一般需要通过正则或者字符串的方法进行处理，转换成对象，最终得到数据。

1
2
3
4
5
6
7
document.cookie = "name=zhangsan";
document.cookie = "age=18";
document.cookie = "sex=23";
//读取cookie
var result = document.cookie;
console.log(result);

使用原生js操作cookie太过麻烦，尤其是cookie的获取和删除操作，使用jquery.cookie插件，能够简化我们的操作。

【03-cookie存储（jquery插件）.html】

1
2
3
4
5
6
//设置cookie
$.cookie("name", "zs");
//获取cookie
console.log($.cookie("name"));
//删除cookie
$.removeCookie("name");

使用cookie：操作太麻烦，最多只能存储4k ,每次请求都会带上cookie，所以用户名和密码、还有sessionID会存储在cookie中

sessionStorage与localStorage

HTML5规范提出了解决方案，使用sessionStorage和localStorage存储数据。设置、读取、删除操作很方便

window.sessionStorage的特点

1
2
3
1. 声明周期为关闭浏览器窗口
2. 不能在多个窗口下共享数据。
3. 大小为5M

window.localStorage的特点

1
2
3
1. 永久生效，除非手动删除
2. 可以多个窗口共享
3. 大小为20M

window.sessionStorage与window.localStorage的方法

1
2
3
4
5
setItem(key, value) //设置存储内容
getItem(key) //读取存储内容
removeItem(key) //删除键值为key的存储内容
clear() //清空所有存储内容
key(n) //以索引值来获取存储内容

【04-sessionStorage与localStorage的用法.html】
【05-案例-换肤效果.html】

面试题：请描述一下cookies，sessionStorage和localStorage的区别？

自定义播放器

全屏切换API：

1
video.requestFullScreen()

方法：load()、play()、pause()
属性：

1
2
3
4
currentTime:当前时间
duration：总长时间
timeupdate:播放进度更改时触发
volume：控制音量

参考文档
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

主要目的是练习一下video的属性和方法，还有之前我们学过的js

推荐网站：https://www.awesomes.cn/

前端最大学习社区：https://developer.mozilla.org/zh-CN/

github:https://github.com/

video.js

文件读取

通过FileReader对象我们可以读取本地存储的文件，可以使用 File 对象来指定所要读取的文件或数据。其中File对象可以是来自用户在一个 元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的 DataTransfer

files

对于file类型的input框，在这个DOM对象中，存在一个files属性，这个属性是FileList对象，是一个伪数组，里面存储着上传的所有文件，当input框指定了multiple属性之后，就可以上传多个文件了。

也就是说，通过files这个属性，我们就可以获取到所有上传的文件。

file对象

File对象中包含了文件的最后修改时间、文件名、文件类型等信息。

FileReader对象

FileReader是一个HTML5新增的对象，用于读取文件。

1
2
3
4
5
6
7
8
9
//创建一个fileReader对象
var fr = new FileReader;
//读取文件的两个方法
readAsText() 以文本的方式读取文件
readAsDataURL() 以DataURL形式读取文件
//文件读取完成事件：
fr.onload = function(){}
//当文件读取完成，可以通过result属性获取结果
fr.result

参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader#toc

案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var file = document.getElementById("file");
    var box = document.getElementById("box");
    file.addEventListener("change", function () {
        console.dir(file);
        
        //files:里面存储了所有上传的文件
        //这个data就是我们上传的那个文件
        var data = file.files[0]
      
        //1. 创建一个文件读取器
        var fr = new FileReader();
        //2. 让文件读取器读取整个文件
        fr.readAsDataURL(data);
        //3. 等待文件读取完
        //onload：文件读取完成后，就会触发
        fr.onload = function () {
            var img = document.createElement("img");
            img.src = fr.result;
            box.innerHTML = "";
            box.appendChild(img);
        }
    });

拖拽

【01-拖拽初体验.html】

【02-拖拽上传.html】

在HTML5的规范中，我们可以通过为元素增加draggable=”true”来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。

拖拽元素

页面中设置了draggable=”true”属性的元素，其中<img>、<a>标签默认是可以被拖拽的

目标元素

页面中任何一个元素都可以成为目标元素

事件监听

根据元素类型不同，需要设置不同的事件监听

1
2
3
4
5
6
7
//1、拖拽元素
ondrag 		应用于拖拽元素，整个拖拽过程都会调用
ondragstart	应用于拖拽元素，当拖拽开始时调用
ondragend	应用于拖拽元素，当拖拽结束时调用
//2、目标元素
ondragover	应用于目标元素，当停留在目标元素上时调用
ondrop		应用于目标元素，当在目标元素上松开鼠标时调用(浏览器默认不让拖拽，需要组织dragover的默认行为。)

-------------本文结束感谢您的阅读-------------