JS入门

发表于 | 更新于

本次JS入门，做了一个导航页面，根据此页面来讲解JS相关知识。

一、HTML

1、kbd

HTML键盘输入元素() 用于表示用户输入，它将产生一个行内元素，以浏览器的默认monospace字体显示。

二、CSS

  • text-transform:uppercase; //将小写的英文转换成大写的
  • vh:视口高度的 1/100。vw:视口宽度的 1/100。可用于设置与100vh，100vw

三、JS

1、Web Storage

1)简介

Web Storage为浏览器端数据储存机制，为浏览器提供的API。这个API的作用是使网页可以在浏览器端存储数据。可分为两类：sessionStorage和localStroage。sessionStorage保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空；localStorage保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。除了保存期限的长短不同，这两个对象的属性和方法完全一样。

每个域名的存储上限视浏览器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的存储空间由一级域名决定，而其他浏览器没有这个限制。也就是说，在Firefox中，a.example.com和b.example.com共享5MB的存储空间。另外，与Cookie一样，它们也受同域限制。某个网页存入的数据，只有同域下的网页才能读取。

在使用之前，我们需要检查Window是否包含sessionStorage和localStroage属性，可以确定浏览器是否支持这两个对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
function checkStoragePort(){
  if(window.sessionStroage){
    return true;
  }else{
    return false;
  }

  if(window.localStorage){
    return true;
  }else{
    return false;
  }
}

2）使用
存入/读取数据setItem(key,val)/getItem(key)
1
2
3
4
5
6
//存入数据
sessionStorage.setItem('key','val');
localStorage.setItem('key','val');
//读取数据
var sessionVal = sessionStorage.getItem('key');
var localVal = localStorage.getItem('key');
清除数据removeItem()/clear()
1
2
3
4
5
6
//清除某个键名
sessionStorage.removeItem('key');
localStorage.removeItem('key');
//清除所有
sessionStorage.clear();
localStorage.clear();
遍历操作

利用length属性和key方法，可以遍历所有的键。

1
2
3
for(var i = 0;i<localStorage.length;i++){
  console.log(localStorage.key(i));   //其中key()方法是根据位置获得键值
}

事件监听

当存储的数据发生变化时，会触发storage事件。

1
2
3
4
5
6
window.addEventListener('storage',function(e){
  console.log(e.key);       //发生变化的键名
  console.log(e.oldValue);  //更新前的值。如果该键为新增加，则这个属性为null。
  console.log(e.newValue);  //更新后的值。如果该键被删除，则这个属性为null。
  console.log(e.url);       //原始触发storage事件的那个网页的网址。
})

此处有一点需要注意，在页面刚打开时首先需要判断当前是否存在本地缓存，如不存在可直接使用其对应hash值，否则使用本地缓存替换hash值：

1
2
var hash = {"0":0,"1",1};
hash = JSON.parse(localStorage.getItem['hash'] || null)

2、数据类型

Javascript的数据类型有哪些？这个是前端面试过程中经常考察的问题之一。这个问题一定要搞清楚。
Javascript的数据类型目前来说共7类：

  • Number : 整数和小数
  • String ：字符串
  • Boolean ：布尔值
  • undefined ：未定义或者不存在
  • Object ： 对象
  • null ： 空值
  • Symbol : 表示独一无二的值，暂时不进行过多介绍

3、null和undefined

null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，语法效果几乎没区别。
在if语句中，他们都会被转换成false,并且null==undefined返回的值为true（null === undefined返回值为false，原因是类型不同）。
null在转为数字时会自动转换为0，如下所示：

1
2
3
4
Number(null)      // 0
Number(null)      //NaN
5 + null          //5
5 + undefined     //NaN

具体用法为：
null : null表示空值，即该处的值现在为空。函数调用时，某个参数未设置任何值，这时就可以传入null，表示该参数为空。比如，某个函数接受引擎抛出的错误作为参数，如果运行过程中未出错，那么这个参数就会传入null，表示未发生错误。

undefined：表示未定义，介绍几个返回undefined的场景：

1
2
3
4
5
6
7
8
9
10
11
12
13
var i ;
i;            //  undefined，变量声明了，但是未赋值

function fun(x){
  return x;
}
fun();          //undefined，调用参数时，该提供的参数未提供，该参数等于undefined

var obj = new Object();
obj.p;          //undefined，对应属性未赋值

function funct(){}
funct();        //  undefined，函数没有返回值

3、数值的进制

使用字面量（literal）直接表示一个数值时，JavaScript 对整数提供四种进制的表示方法：十进制、十六进制、八进制、二进制。

1
2
3
4
十进制  ：没有前导0的数值。
八进制  ：有前缀0o或0O的数值，或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
十六进制：有前缀0x或0X的数值。
二进制  ：有前缀0b或0B的数值。

本文相关用例可参考我制作的网址导航。

推荐使用网址：

参考连接

[1] Web Storage：浏览器端数据储存机制 阮一峰 http://javascript.ruanyifeng.com/bom/webstorage.html#
[2] 数据类型 阮一峰 http://javascript.ruanyifeng.com/grammar/types.html