回顾js

JS

复习一下js，以备后用

数据类型

• number：js不区分小数和整数，说一些特殊的

  1.23e3//科学计数法
  NaN//不是一个数字
  Infinity//表示无限大
  

• 字符串、布尔值

  字符串

  \u4e2d  \u#### unicode字符（前者是汉字中，后者表示格式）
  \x41  AscII字符(前面表示A)
  

  多行字符串用``包裹

  模板字符串

  let name = "yyh";
  let msg = `Hi,${name}`;
  

  js的字符串不可变(通过下标的方式改变不了)

  大小写转换:toUpperCase(),toLowerCase()

  substring与Java一样

  布尔值

  下面6种值转化为布尔值时为false，其他转化都为true

  1、undefined（未定义，找不到值时出现）

  2、null（代表空值）

  3、false（布尔值的false，字符串"false"布尔值为true）

  4、0（数字0，字符串"0"布尔值为true）

  5、NaN（无法计算结果时出现，表示"非数值"；但是typeof NaN===“number”）

  6、""（双引号）或’’（单引号） （空字符串，中间有空格也是true）

  数据类型	转为true的值	转为false的值
  Boolean	true	false
  String	任何非空字符串	‘’（空字符串）
  Number	任何非零数字值（包括无穷大）	0和NaN
  Object	任何对象	null
  Undefined	n/a	undefined

• 比较运算符

  == 等于(类型不一样，值一样，也会判断true)

  === 绝对等于(类型一样，值一样，结果才true)

  建议使用后者

  ps：NaN===NaN结果为false，NaN不等于任何数，包括自己，只能用isNaN(NaN)判断为true。

• 浮点数问题

  console.log((1/3) === (1-2/3));
  

  上面的返回false。尽量避免使用浮点数进行运算，存在精度问题。

  Math.abs((1/3) - (1-2/3)) < 0.0000001
  

• null和undefined

  空和未定义。

• 数组

  去数组下标时，如果越界，就会undefined

  可以给arr.length赋值，如果比原来小，元素会丢失

  slice()截取数组的一部分，与substring一样

  push在最后添加值，pop从最后弹出值

  unshift在开始添加值，shift从开始弹出值

  sort排序

  reverse元素反转

  concat拼接，返回一个新的数组

  join使用特定的连接符打印数组

• 对象

  大括号里键值对(描述属性)，键可加引号也可以不加

  访问对象的属性：person.name或者person['name']。(我是服了这语言)

  使用对象不存在的属性，会是undefine

  可以使用delete动态的删除属性；直接给不存在的属性赋值就是添加

  判断属性是否在对象中'age' in person(属性得加上引号)；hasOwnPropperty()更好

• map

  es6新出的，语法跟Java很像

  set同上

严格检查模式

i = 1//这样还是全局变量，加上var就是局部变量了 es6使用let定义局部变量(建议let)

不会报错

<script>
  'use strict'
  i = 1;
</script>

上面就会报错了，'use strict'必须写在第一行。

函数

• 函数体如果没有执行return，也有返回，会返回undefined

• typeof获取变量类型：typeof x == 'number'

• arguments是js的关键字，代表传入的所有参数，是一个数组(因为虽然我的函数只有一个形参但是，用的时候可以传入多个参数)

• rest:es6新特性，获取已经定义的参数之外的所有参数，也是一个数组:

  function fun_a(a,b,...rest){
    ......
    console.log(rest);
  }
  

• this的定义与Java一样

• apply:是一个函数，所有函数都有(没错，函数会有函数)，在js中可以控制this的指向。

  function getAge(){
    var now = new Date().getFullYear();
    return now - this.birth; //为啥此处可以有this，因为此时this指向window（window没有birth属性），直接使用只会输出NaN，所以需要apply
  }
  var yyh = {
    name: "yyh",
    birth:20,
    age: getAge
  }
  
  getAge.apply(yyh,[]); //等价于yyh.age(); 
                        //this指向了yyh对象参数为空
  

以前的js没有class，叫原型(proto)

var user = {
  name:"yyh",
  age:3,
  run:function(){
    console.log(this.name+" run....");
  }
};

var xiaoming = {
  name = "xiaoming";
};
xiaoming.__proto_ = user;


//控制台
xiaoming.run();
xiaoming.age;

现在的js有class继承(es6引入的)

class User{

  constructor(name){
    this.name = name;
  }
  hello(){
    alert("hello");
  }
}

var xiaoming = new User("xiaoming");

class XiaoUser extends User{
    
    constructor(name,grade){
      super(name);
      this.grade = grade;
    }
    myGrage(){
        alter("我是一名小学生")
    }
}

var xiaohong = new XiaoUser("xiaohong",1);

原型链

每一个对象的原型最终都会指向Object，查找属性的时候查到Object就行了。

BOM(重要)

浏览器对象模型

• window代表浏览器窗口(应该是一个对象)

  window.alert("lalala")

  window.innerHeight

  其他属性和方法可以查

• navigator封装了浏览器信息(是一个对象)

  navigator.userAgent:爬虫那次还记得吗

  navigator.platform:系统版本，win64

  …

  这个对象的属性可以被人为修改，不建议使用

• screen

  screen.width:获取屏幕宽度

  …

• location代表当前页面的url信息(重要)

  //属性
  host:"www.baidu.com"
  href:"https://www.baidu.com/"
  protocol:"https:"
  reload:f reload() // 刷新网页
  
  //设置新的地址
  location.assign('https://ip')
  

• document代表当前页面

  好像就是DOM树

  document.title //网页标题
  document.getElementById("lalala") //获取节点
  document.cookie //获取网页cookie
  

• history(就是在当前页面中可以前进后退)

  history.forward() //前进
  history.back() //后退
  

DOM(重要)

文档对象模型

网页就是一个DOM树型结构：body、div…

var lalala = document.getElementById("lalala") //获取节点

操作文本

innerText修改文本值

innerHTML解析html标签

操作css

lalala.style.fontsize=‘20px’

…

删除节点

var lalalaFather = lalala.parentElement;
lalalaFather.removeChild(lalala);
var children = lalalaFather.children; //获取父节点下所有子节点

用父节点删除自己

创建

省略，呵呵，以前用烂了的

表单密码md5加密

function fun_b(){//表单提交的事件onsubmit()
  var username = document.getElementById("username");
  var pwd = document.getElementById("pwd");
  var md5pwd = document.getElementById("md5-pwd");//隐藏域
  console.log(username.value);
  //md5加密密码
  //pwd.value = md5(pwd.value);//md5(pwd.value)这样应该也行
  md5pwd.value = md5(pwd.value);
  console.log(pwd.value);
  return true;//true通过提交，false阻止提交
}