JavaScript

JavaScript

1.什么是JavaScript

1.1概述

JavaScript是一门世界上最流行的脚本语言

Java、JavaScript

从构想到出来只用了10天！！！

一个合格的后端人员，必须要精通JavaScript

ECMAScript它可以理解为是JavaScript的一个标准

1.2历史

最新版本已经到ES6版本~

但是大部分浏览器还只停留在支持es5代码上！

开发环境与线上环境，版本不一致

核心：关键字、变量、流程控制、对象、数组、结构…

2.快速入门

2.1引入JavaScript

1. 内部标签

   <script>
   //..
   </script>
   

2. 外部引入

   sjy.js

   //...
   

   index.html

   <script src="js/sjy.js"></script>
   

2.2基本语法入门

// 1.定义变量
var num = 1;
var name = "sjy";
alert(num);
// 2.条件控制
if(2>1){
    alert(true)
}
//3.注释
//
/**/

//console.log()在浏览器的控制台打印

2.3数据类型

数值，文本，图ing，音频，视频…

变量

var la;
//不能以数字开头
//可以使用$开头
//可以使用_开头

number

js不区分小数和整数，Number

123//整数123
123.1浮点数123.1
1.123e3//科学计数法
-99//符数
NAN//not a number
Infinity//表示无限大

字符串

'abc'
"abc"
'\n'

布尔值

true
false

逻辑运算

&&//两个都为真，结果为真
||//一个为真，结果为真
！//真即假，假即真

比较运算符重要！！！

= //赋值
==//等于（类型不一样，值一样，也会判断为true）
===//绝对等于（）类型一样，值一样，结果为true

这是一个JS的缺陷，坚持不要使用==比较

须知：

• NaN===NaN,这个数值与所有的数值都不相等，包括自己
• 之呢个通过isNaN（NaN）来判断是不是NaN

浮点数问题：

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

尽量避免使用浮点数进行运算，存在精度问题！

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

null和undefined

• null空
• undefined未定义

数组

java中数组必须是一系列相同类型的对象

javascript

//保证代码的可读性,尽量使用[]
var arr =[1,2,3,4,5,'hello',null,true];

new Array(1,2,3,4,5,'hello');

取数组下标：如果越界了，就会undefined

对象

对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个不需要添加

取对象的值 对象名.属性名

2.4严查检查模式strict

严格检查模式（‘use strict’;）：

预防JavaScript的随意性导致产生的一些问题

前提:IDEA 需要设置支持ES6

要求：必须写在第一行

ES6：
局部变量用let定义
全局变量用var定义

3.数据类型

3.1字符串

1. 正常字符串我们使用单引号或者双引号包裹

2. 注意转移字符\

   \'//'
   \n//换行
   \t//制表
   \u4e2d//中 \u#### Unicode字符
   \x41 //A Ascll字符
   

3. 多行字符串编写（单反引号）

   `table
   上面的
   那个键
   引起来`
   

4. 模板字符串

   let name = "sjy";
   let age = 18;
   let msg =`你好吖,${name}`;
   

5. 字符串长度

   str.length

6. 字符串的可变性，不可变

7. 大小写转换,注意是方法，不是属性

   • toUpperCase()
   • toLowerCase()

8. 获取指令的下标str.indexOf(‘t’)

9. 截取字符串substring(1,3) 左闭右开

3.2数组

Array可以包含任意的数据类型

var aar = [1,2,3,4,5,6]

1.长度

arr.length

注意：加入给arr.length赋值，数组大小就会发生变化。如果赋值国小，元素就会丢失；如果赋值过大，那么添加的就是undefined。

2.indexOf

通多元素获得下标索引

字符串的’1’和数字1是不同的

3.slice()

截取Array的一部分，返回一个新数组，类似于String中的substring

4.push()，pop()尾部

push：压入到尾部

pop：弹出尾部的一个元素

5.unshift()，shift()头部

unshift：压入头部

shift：弹出头部的一个元素

6.sort()排序

7.reverse元素反转

8.contat()添加

注意：concat并没有修改数组，只是会返回一个新的数组

9.链接符join()

打印拼接数组，使用特定的字符串连接

10.多维数组

数组：存储数据（如何存，如何取，方法都可以自己实现！）

3.3对象

若干个键值对

var 对象名 = {
	属性名：属性值,
    属性名：属性值,
    属性名：属性值
}

var person = {
    name: "sjy",
    age: 3,
    email: "438217638@qq.com",
    sccore: 0
}

js中对象，{,}表示一个对象，键值对描述属性xxxx:xxxx,多个属性之间使用逗号隔开，最后一个属性不加逗号！

js中所有键都是字符串，值是任意对象

1.对象赋值

name: "sjy",
age: 3,
email: "438217638@qq.com",
sccore: 0

2.使用一个不存在的对象属性，不会报错！undefined

person.haha
undefined

3.动态的删减属性，通过delete删除对象的属性

delete persom.name
true

4.动态的添加属性,直接给新的属性添加值即可

person.haha = "haha"
"haha"

5.判断属性值是否在这个对象中！ xxx in xxx!

'age' in person
true

6.判断一个属性是否是这个自身拥有的hasOwnProperty()

person.hasOwnProperty('toString')
flase
person.hasOwnProperty('age')
true

3.4流程控制

if判断

while循环，避免程序死循环

do while循环

for循环

forEach循环 ES5.1新特性

var age = [1,2,3,4,5,6,7,8,9];
age.forEach(function (value) {
 console.log(value)；
})

for in循环

3.5Map和Set

ES6新特性

Map：

var names = ['tom','jack','haha'];
var scores = [100.90,80];
//学生的成绩,学生的名字
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var tom = map.get('tom');//通过key获得value
console.log(tom)
map.set('admin',123456);//新增或修改
map.delete('admin');//删除

Set：无需不重复集合

var set = new Set([3,1,1,1,1]);//set可以去重
set.add(1);//添加
set.delete(1);//删除
set.has(3);//是否包含某个元素

3.6iterator

ES6新特性

使用iterator来遍历迭代Map，Set

遍历数组

//通过for of/for in 下标实现
var arr = [3,4,5];
for (var x in arr){
  console.log(x);
}
for (let x of arr){
  console.log(x);
}

遍历map

var map = new Map([["tom",100],["jack",90],["haha",80]]);
for (let x of map){
   console.log(x);
}

遍历set

var set = new Set([1,2,3,4,5,6]);
for (let x of set){
  console.log(x);
}

4.函数及面向对象

方法：对象（属性，方法）

函数也一样

4.1函数定义及变量作用域

定义方式一

绝对值函数

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

一旦执行return代表函数结束，返回结果！

如果没有只能怪return，函数窒息感完也会返回结果，结果就是undefined

定义方式二

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

function(x){…}这是一个你们函数，但是可以把结果赋值给abs，通过abs就可以调用函数！

方式一等价于方式二！

调用函数

abs(10); //10
abs(-10); //10

参数问题：javaScript可以穿任意个参数，也可以不传递参数~

参数进来是否存在的问题？

假设不存在参数，如何规避？

function abs(x){
  //手动抛出异常来判断
  if(typeof x !== 'number'){
     throw 'Not a Number';
  }
  if(x>=0){
     return x;
  }else{
      return -x;
  }
}

arguments

arguments是JS免费赠送的关键字；

代表，传递进来的所有参数，是一个数组！

function abs(x){
    console.log("x=>" + x);
    for (var i = 0;i < arguments.length;i++){
        console.log(arguments[i]);
    }

    //手动抛出异常来判断
    if(typeof x !== 'number'){
        throw 'Not a Number';
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

问题：arguments包含所有的参数，我们有时候想使用多余的参数来惊醒附加操作，需要排除已有参数~

reset

以前：

function aaa(a,b){
   console.log("a=>" + a);
   console.log("b=>" + b);
   if (arguments.length>2){
      for (var i = 2;i<arguments.length;i++){       
      }
   }
}

ES6新特性，获取除了已经定义的参数之外的所有参数

function bbb(a,b,...rest){
   console.log("a=>" + a);
   console.log("b=>" + b);
   console.log(rest)
}

rest参数只能卸载最后面，必须用…标识

变量的作用域

在javascript中，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~（非要实现的化，可以研究一下闭包）

function sjy() {
   var x = 1;
   x = x + 1;
}
x = x +2;

如果两个函数是用来相同的变量名，只要在函数内部，就不冲突

function sjy() {
   var x = 1;
   x = x + 1;
}

function sjy2() {
   var x = 1;
   x = x + 1;
}

内部函数可以使用外部函数的成员，反之则不行

function sjy() {
   var x = 1;
  
   function sjy2() {
   var y = x + 1;//2
   }
   var z = y + 1;//not defined
}

假设内部函数变量和外部函数的变量的重名,函数查找变量从自身函数开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

function sjy() {
   var x = 1;
   function sjy2() {
    var x = 'a';
    console.log(x);
   }
   console.log(x);//1
   sjy2();//a
}

提升变量的作用域

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

结果：xundefined

说明：JS执行引擎，自动提升了y的声明，但是不会提升变量的赋值。

这个是在JS建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护。

全局变量

默认所有的全局变量，都会自动绑定在window对象下

alert()这个函数本身也一个是window变量

JS实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，是用了相同的全局变量，冲突->如何能够减少冲突？

//唯一全局变量
var app = {};
//定义全局变量
app.name = 'sjy';
app.add = function(a,b){
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~

JQuery

局部作用域 let

function aaa(){
    for ( var i = 0;i < 100;i++){
        console.log(i);
    }
    console.log(i+1);//问题：i处理这个作用域还可以使用
}

ES6 let关键字，解决局部作用域冲突问题！

function aaa(){
    for ( let i = 0;i < 100;i++){
        console.log(i);
    }
    console.log(i+1);//Uncaught ReferenceError：i is not defined
}

建议大家都使用let取定义局部作用域的变量。

常量const

在ES6之前，指明定义常量:只要用全部大写字母命名的变量就是常量；建议不要修改这样的值。

var PI = '3.14';
console.log(PI);
PI = '123';//可以改变这个值
console.log(PI);

在ES6引入了常量关键字const

let PI = '3.14';//只读变量
console.log(PI);

4.2方法

let sjy = {
  name: 'sjy',
  birth: 1998,
  //方法
  age: function(){
     //今年-出生的年
     let now = new Date().getFullYear();
     return now-this.birth;
     }
}

属性：对象.属性名

方法：对象.方法名;注意：一定要带（）；sjy.age()

this代表什么？拆开上面的代码看看~

let sjy = {
  name: 'sjy',
  birth: 1998,
  //方法
  age: getAge
}
function getAge(){
  //今年-出生的年
  let now = new Date().getFullYear();
  return now-this.birth;
}

sjy.age();//ok
getAge();//NaN window

this是无法指向的，是默认指向调用这个方法的那个对象

apply

在js中可以控制this指向

getAge.apply(sjy,[]);//this，之习性拿过来sjy，参数名为空

4.3闭包（难点）

4.4箭头函数（新特性）

4.5创建对象

什么是面向现象

javascript、java、C#…面向对象；javascript有些区别！

类：模板

对象：具体的实例

在JavaScript这个需要大家换一下思维方式！

原型！！！

let Student = {
   name: 'sjy',
   age: 23,
   run: function () {
   console.log(this.name + "run ......");
   }
};

let lia = {
   name: 'lia'
};

//lia的原型指向学生
lia._proto_ = Student;

4.6class继承（新特性）

class继承

class关键字，是在ES6引入的

1.定义一个类，属性，方法

function Student(name) {
   this.name = name;
}

//给Student新增一个方法
Student.prototype.hello = function () {
   alert("Hello");
}

//ES6之后
class Student{
  constructor(name) {
    this.name= name;
  }
  hello(){
    alert('hello');
  }
}

2.继承

class SmallStudent extends Student{
   constructor(name,grade) {
      super();
      this.grade = grade;
   }
   myGrade(){
      alert("我是一名小学生");
   }
}
new SmallStudent('李华',100).myGrade();

4.7原型链继承（难点)

_ proto _:

5.内部对象

标准对象

number、string、boolean、object、function、undefined

5.1Date

基本使用

let now = new Date();
console.log(now);//Thu Jan 28 2021 14:12:33 GMT+0800
now.getFullYear();//年
now.getMonth();//月 0~11
now.getDate();//日
now.getDay();//星期几
now.getHours();//小时
now.getMinutes();//分
now.getSeconds();//秒
ow.getTime();//时间戳 全世界统一1970.1.1 00:00:00 到现在的 毫秒数

转换

let s = now.toLocaleString();//注意,调用的是一个方法,不是一个属性!
console.log(s);

5.2JSON

JSON是什么

• (JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

早期，所有数据传输习惯使用XML文件

在JS中，一切皆为对象，任何js支持的类型都可以使用JSON来表示；

格式:

• 对象都用{}
• 数组都用[]
• 所有的键值对都是用key:value

JSON字符串和JS对象的转化

let user = {
  name: 'sjy',
  age: 23,
  sex: '男'
}

//对象转化为json字符串
let s = JSON.stringify(user);
console.log(s);

//json字符串转换为对象 参数为json字符串
let parse = JSON.parse('{"name":"sjy","age":23,"sex":"男"}');
console.log(parse);

很多人搞不清除，JSON和JS对象的区别

var obj = {a:'helloa',b:'hellob'};
var json = '{"a":"helloa","b":"hellob"}';

5.3Ajax

• 原生的js写法 xhr异步请求
• JQuery封装好的方法 $("#name").ajax("")
• axios请求

6.操作Dom元素

核心

DOM:文档对现象模型

浏览器网页就是一个DOM树形结构!

• 更新:更新Dom节点
• 遍历Dom节点:的搭配Dom节点
• 删除:删除一个Dom节点
• 添加:添加一个新的节点

要操作一个Dom节点,就必须要先获得这个Dom节点

6.1获得Dom

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应css选择器
    let h1 = document.getElementsByTagName('h1');
    let p1 = document.getElementById('p1');
    let p2 = document.getElementsByClassName('p2');
    let father = document.getElementById('father');

    let childrens = father.children;//获取父节点下的所有子节点
</script>

这是原生代码,之后我们尽量都使用jQuery();

6.2更新Dom

<div id="id1">

</div>
<script>
    let id1 = document.getElementById('id1');
    id1.innerText = '456';
    id1.innerHTML = '<strong>123</strong>';
</script>

操作文本

操作JS

操作CSS

6.3删除Dom

删除节点的步骤:先获取父节点,再通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    let father = document.getElementById('father');
    let p1 = document.getElementById('p1');
    father.removeChild(p1);
</script>

注意:删除多个节点的时候,children是时刻变化的,删除节点的时候一定要注意

6.3创建和插入Dom

我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
<script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    let ee = document.getElementById('ee');

    //已经存在的节点
    list.append(js);
    //通过JS创建一个新的节点
    let newP = document.createElement('p');//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'Hello';
    list.append(newP);

    //insert
    list.insertBefore(js,ee);

7.操作BOM元素

BOM:浏览器对象模型

浏览器介绍

JavaScript和浏览器关系？

JavaScript诞生就是伪类能够让它在浏览器中运行！

• IE6~11
• Chrome
• Safari
• FireFox Linux默认
• Opera

三方

• QQ浏览器
• 360浏览器

7.1window

window代表浏览器窗口

7.2navigator

Navigator，封装了浏览器的信息

大多数时候，我们不会使用navigator对象，因为会被人为修改

不建议使用这些属性来判断和编写代码

7.3screen

代表屏幕尺寸

7.4location

代表当前页面的URL信息

host:主机

href:跳转网页

protocol:协议

reload:重新加载

assign:设置新的地址

7.5document

代表当前的页面,HTML DOM文档树

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>
<script>
    let dl = document.getElementById('app');
</script>

可以获取cookie

劫持cookie原理

<script src="sjy.js"></script>
<--恶意人员获取你的cookie,上传到他的服务器-->

服务器端可以设置cookie:httpOnly

7.6history

代表浏览器的历史记录,不建议使用

history.back()后退

history.forword()前进

7.7操作表单(验证)

表单是什么 form DOM树

• 文本框 text
• 下拉框 select
• 单选框 radio
• 多选框 checkbox
• 隐藏域 hidden
• 密码框 password
• …

获取和设置表单的值

<form action="post">
    <p>
        <span>用户名:</span><input type="text" id="username">
    </p>
    <!--多选框的值,就是定义好的value-->
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
</form>

<script>
    let input_text = document.getElementById('username');
    let input_boy = document.getElementById('boy');
    let input_girl = document.getElementById('girl');
    //得到输入框的值
    input_text.value;
    //需修改输入框的值
    input_text.value = '123456';
</script>

对于单选框,多选框等固定的值,.value只能获取当前的值,用.checked查看返回的结果,是否为true,如果为true,则被选中

提交表单

<form action="#" method="post">
    <p>
        <span>用户名:</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码:</span><input type="text" id="password" name="password">
    </p>
    <!--绑定事件 onclick被点击-->
    <button type="submit" onclick="sjy()">提交</button>
</form>
<script>
    function sjy() {
        let username = document.getElementById('username');
        let password = document.getElementById('password');
        console.log(username.value);
        //MD5 算法
        password.value = md5(password.value);
        console.log(password.value);
    }
</script>

表单绑定提交事件

onsubmit 绑定一个提交检测的函数,true和false

将这个结果返回给表单,使用obsubmit接收

7.8操作文件

8.jQuery

JavaScript

JQuery库,里面存在大量的JavaScript库\

使用:公式: $(selector).action()

获取jQuery

1.在线引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

2.导入js包

<script src="lib/jquery-3.4.1.js"></script>

初体验

<script>
    //选择器就是css选择器
    $('#test-jquery').click(function () {
        alert('hello,jQuery');
    })
</script>

选择器

<script>
    //原生js,选择器少,麻烦不好记
    //标签
    document.getElementsByTagName();
    //id
    document.getElementById();
    //类
    document.getElementsByClassName();

    //jQuery
    $('p').click();//标签选择器
    $('#id1').click();//id选择器
    $('.class1').click();//类选择器
</script>

文档工具站:https://jquery.cuishifeng.cn/

事件

鼠标事件,键盘事件,其他事件

<!--要求:获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>

<script>
    //当网页元素加载完毕之后,响应事件
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:'+e.pageX+ ' y:'+e.pageY);
        });
    });
</script>

操作Dom

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="py">Python</li>
</ul>
</div>
<script>
    // document.getElementById('')
    $('#test-ul li[name=py]').text();//获得值
    $('#test-ul li[name=py]').text('Java');//设置值
    $('#test-ul li[name=py]').html();//获得值
    $('#test-ul li[name=py]').html('<strong>Java</strong>');//设置值
</script>

节点文本操作

css操作

元素的显示和隐藏，本质display:none