JavaScript

JavaScript

1、简述

1.1、JavaScript是什么

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的脚本语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言。

• 严格区分大小写，和Java一样

1.2、前端框架

• JQuery:JavaScript的库，相当于API，直接使用
• Angular:模块化开发
• React:虚拟Dom
• Vue:集成模块化开发和虚拟Dom，不具备通信功能，需集成Axios或者JQuery的Ajax
• Axios:前端通信

1.3、beautiful UI 框架

• Ant-Design:阿里巴巴出品，基于React
• Element-UI、iview、ice:饿了么出品，基于VUE

1.4、ECMAScript

• javascript的一种语言规范，最新开发环境是es6，但浏览器只支持es5，需要用WebPack打包，将es6的打包成es5的语法

2、引入js

<script src="js/1.js"></script>
<!---->

必须写结束标签，不然容易出问题

3、数据类型

3.1、数字

• number:所有的数字：报错整数、浮点数等等
  • NaN也是一个number对象
  • NaN:not a number = 0/0
  • Infinity:无限大 正数/0为正的infinity,负数/0为负的infinity
  • isNaN是一个函数：判断某个变量是否是NaN
• 浮点数运算问题，尽量避免使用浮点数进行运算，存在精度问题,使用下面判断，Java中的DigDecimal也是这个原理

console.log(Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000000000000001);

• null和undifined

var a;
console.log(a);//undifined

• 支持ES6语法：'use strict';严格检查模式，必须写在script的第一行
  • 局部变量建议使用let定义

3.2、比较运算符

• =：赋值
• ==：判断，类型不一样，值一样也为true ：1 == ‘1’
• ===: 绝对等于：类型一样、值一样
• NaN==NaN为false,绝对等于也一样，NaN与所有数值都不相等，包括自己
• isNaN(NaN)=true

3.3、字符串

• 模板字符串(es6)：

let name="lvbo";
let msg=`你好啊：${name}`

• 方法：length(属性),indexof(得到索引),substring(切割字符串)

3.4、数组

• 数组：数组的内容可以不是一类var arr=[1,2,'1',true],取下标越界会undifined

  • 给arr.length复制，数组长度变化
  • slice()类似于String中的substring

• concat():合并数组，并没有改变原来的数组，只是返回一个新的数组

• for in

for(var n in arr){//n是索引
    console.log(arr[n]);
}

• for of可以直接遍历内容

3.5、对象

• 动态删除对象的属性：delete person.name
• 添加对象的属性：persion.hh='hh'
• 判断属性是否在对象中:'age' in person,
  js中所有键值对：键为字符串，值为object

3.5、集合

可通过for of打印集合元素

4、函数

4.1、定义函数

定义方式一

function abs(x){
  if(x>= 0){
    return x;
  }else{
    return -x;
  }
}

执行return 代表函数结束，返回结果
未执行return 也会返回，一般返回undefined,abs()上面这个返回NaN

定义方式二

var abs = function(x){
  if(x>= 0){
    return x;
  }else{
    return -x;
  }
}

js可以判断x是否是数字，然后抛出异常

if(typeof x != 'number'){
    throw 'not a number';
}

js的免费赠送的参数arguments可以获得传递进来的所有的参数

rest
获取除了形参的所有参数

function abs(x,y,...rest){
  console.log('x=>'+x);
  console.log('y=>'+y);
  console.log('rest=>'+rest);
}

4.2、作用域

和Java的差不多

提升变量的作用域，js刚出来就有的特性

function test(){
  var x='x'+y;
  console.log(x);//xundefined
  var y='y';
}

如果后面不定义还是会报错的，定义了就不会，会提升y的作用域，等同于以下代码

function test(){
  var y;
  var x='x'+y;
  console.log(x);
  y='y';
}

但还是注意规范，定义变量都放在头部

• 全局对象window

var x='aaa';
alert(x);
window.alert(window.x);//默认所有的全局变量都绑定在window上
//alert()这个函数也是window的一个变量

var a='a';
var old_alert = window.alert;
window.alert = function(){

};
window.alert(a);//失效，可重新赋值生效

js实际上只有一个全局作用域，任何变量和函数，没在函数范围内找到，就会向外查找，如果在全局都没找到，就报错ReferenceError

规范

由于所有全局变量都会定义在window上，不同的js文件，使用相同的全局变量就有冲突，减少冲突

var LB={};
LB.name='lvboaa';
LB.add=function (a,b){
  return a+b;
}

把自己代码放入自己定义的唯一命名空间中，降低命名冲突
jQuery就是这样的

局部作用域let

for(var i=0;i<100;i++){
    console.log(i);
}
console.log(i+1);//生效，let不会

建议let定义局部变量，常量const

4.3、方法

getAge.apply(lb)

如果方法里有this，使用apply指定对象，有参就直接lb,x

5、内部对象

typeof 123
"number"
typeof 'a'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1、Date

时间戳，new Date().getTime()

全世界统一，从1970.1.1 00:00:00到现在的毫秒数(本地时间可改变)

时间戳转成时间

new Date(1608448400284)

得到本地时间

new Date().toLocaleString()
"2020/12/20 下午3:17:11"

5.2、Json

json是什么

• 轻量级数据交换格式
• 简洁清晰的层次结构

任何对象都可用JSON表示

• 对象和map用{}
• 数组和list用[]
• 键值对用k:v

JSON字符串和对象的转化

• JSON.stringify(user):对象转成JSON字符串
• JSON.parse(’…’):字符串转成JSON对象，解析

6、面向对象

__proto__关键字

js可使用这个指定原型，相当于java的父类

var person={
  name:'person',
  age:3,
  run:function(){
    console.log(this.name+'run');
  }
};
var lb={
  name:'lb'
};
lb.__proto__=person;
console.log(lb.run());//lbrun

class,也可以extends继承

class person{
  constructor(name){
    this.name=name;
  }
  getName(){
    console.log('name=>'+this.name);
  }
}
var p=new person('lb');
p.getName();

7、操作BOM(浏览器)对象

window(浏览器窗口)

location(重要)：当前页面的URL信息

• location.reload():刷新网页，重载
• location.assign(‘https://…’):设置新的地址

document:当前页面，DOM树

• document.getElementById(‘id’):根据Id获取文档树节点，可动态删除，增加
• 也能根据class和tag获取class和标签节点
• document.cookie:获取cookie
  可能会被别人获取到，可在服务器设置：cookie:httpOnly

history

代表浏览器的历史

• history.back()//后退
• history.forward()//前进 相当于网页的上一页和下一页

8、操作DOM(文本)对象

核心

网页就是一个DOM树形结构

• 更新：DOM节点
• 遍历：…
• 删除：…
• 添加：…

获取DOM节点

var h1=document.getElementsByTagName('h1');//获取标签
var h2=document.getElementById('h2');//获取Id
var h3=document.getElementsByClassName('h3');//获取class

删除节点

先获取父节点，通过父节点删除自己

var d1 = document.getElementById('d1'); 
var father = document.getElementById('father');
father.removeChild(d1);

father.removeChild(father.children[0]);//也行

注意： 删除多个节点的时候，children下标时刻在变化

插入结点

var js=document.getElementById('js');
var father = document.getElementById('father');
father.appendChild(js);

9、表单验证

9.1、密码加密

MD5

• 第一种，用户体验不好

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<button type="submit" onclick="check()">提交</button>

var pwd=document.getElementById('pwd');
pwd.value=md5(pwd.value);//但是这样会将加密后的回显到密码输入框中，用户体验不好

• 主要用这种

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<body>
<div>
  <form action="" onsubmit="return check()">
    <div><span>用户名：</span>
      <input type="text" name="name" id="name">
    </div>
    <div>
      <span>密码：</span>
      <!-- 不设置密码框的name，提交表单拿到hidden中加密的数据 -->
      <input type="password" id="pwd">
      <input type="hidden" name="pwd" id="md5-pwd">
    </div>
    <div>
      <input type="submit"></input>
    </div>
  </form>
</div>

<script>
  function check(){
    var pwd=document.getElementById('pwd');
    var mpwd=document.getElementById('md5-pwd');
    mpwd.value=md5(pwd.value);
    //pwd.value=md5(pwd.value);
    //onsubmit里面校验，true为通过提交，false就是阻止提交
    return true;
  }
</script>
</body>

注意：提高网站安全性

10、jQuery

就是一个js库，存在大量的函数

公式：$(‘选择器’).action()

<body>
  <a href="" id='test-jq'>点我</a>
</body>
<script>
  $('#test-jq').click(function(){
    alert('test');
  });//id选择器
  
  //$('.class').click :class选择器
  //$('p').click :标签选择器  css的选择器这里都能用
</script>

jQuery API中文文档： https://jquery.cuishifeng.cn/

就绪函数

//就绪函数，当网页加载完时启动
$(document).ready(function(){
    alert('1');
});
//等价于
$(function(){
    alert(1);
});

操作DOM

$('#ul-li li[class=py]').text();//得到值
$('#ul-li li[class=py]').text('javascript');//设置值

元素的显示和隐藏

$('#ul-li li[class=py]').show();//显示
$('#ul-li li[class=py]').hide();//隐藏 本质是 display:none
//toggle() 就是轮换

小技巧

• 巩固JS:查看JQuery源码
• 巩固html、css:扒网站