JavaScript简介

是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，也是一门脚本语言

JavaScript的标准是ECMAScript

JavaScript基础

1、引入JavaScript

1、内部标签

<script>
    alert('Hello,World!');
</script>

2、外部标签

abc.js

alert('Hello,World!');

test.html

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

2、基本语法

<!--JavaScript严格区分大小写-->
<script type="text/javascript">
    //1. 定义变量   标量类型 变量名 = 变量值;
    var num = 65;
    var name = '夜十七';
    //2. 条件控制
    if (num > 60 && num < 70) {
        alert("60~70");
    } else if (num > 70 && num < 80) {
        alert("70~80");
    } else {
        alert("other");
    }

    //浏览器调试 Console
    //console.log(num) 在浏览器的控制台打印变量
</script>

3、数据类型

数值、文本、图形、音频、视频。。。

number

js不区分小数和整数

123 //整数
123.4  //浮点数
1.23e4  //科学计数法
NaN  //not a number
Infinity  //表示无限大

字符串

'abc' "abc"

布尔值

true，false

逻辑运算

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

比较运算符

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

注意：

• NaN===NaN 结果为false。NaN与所有的数值都不相等
• 只能通过isNaN(NaN)来判断是否是NaN

浮点数问题

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

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

null和undefined

• null 空
• undefined 未定义

数组

Java的数值必须是相同类型的对象，而JS不需要这样越界

//尽量使用
var arr = [1,2,3,"hello",null,true];

new Array(1,2,3,"hello",null,true);

对象

• 对象是大括号，数组是中括号
• 每个属性之间用逗号隔开，最后一个不需要

var person = {
    name: "夜十七",
    age: 18,
    tags: ["JS","java","web","..."]
}

取对象的值

person.name
person.age

4、严格检查模式

<!--
'use strict'：严格检查模式
必须写在JS的第一行
预防JS的随意性产生的一些问题
-->
<script>
    'use strict'
    //局部变量建议使用let
     let i = 1;
</script>

数据类型

1、字符串

1、正常字符串使用 单引号 或 双引号包裹

**2、注意转移字符 \ **

3、多行字符串编写

//tab 键上 ``
var msg = `
hello
world
你好
世界
`

4、模板字符串

let name = "夜十七";
let msg = `你好呀，${name}`;

5、字符串长度

str.length

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

7、常用函数

//大小写转换
str.toUpperCase()
str.toLowerCase()
//获取下标
str.indexOf('abc')
//从第二个截取到最后一个
str.substring(1)
//[1,3)
str.substring(1,3)

2、数组

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

---

arr.length

数组长度

注：可以给arr.length赋值，数组大小就会变化，如果赋值过小，元素就会丢失

indexOf

//indexOf,通过元素获得下标索引
arr.indexOf(2)

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

slice()

//slice() 截取Array的一部分，返回一个新数组
arr = [1,2,3,4,5,6,7]
(7) [1, 2, 3, 4, 5, 6, 7]
arr.slice(2,4)
(2) [3, 4]

push() 和 pop()

push：压入尾部

pop：弹出尾部的一个元素

unshift() 和 shift()

unshift：压入头部

shift：弹出头部的一个元素

sort() 排序

reverse() 元素反转

concat()

连接数组

arr.concat("a","b")
(9) [1, 2, 3, 4, 5, 6, 7, "a", "b"]
arr
(7) [1, 2, 3, 4, 5, 6, 7]

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

join()

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

arr.join("-")
"1-2-3-4-5-6-7"

多维数组

arr = [[1,2],[3,4],["a","b"]]
arr[1][1]
4

3、对象

JS中所有的键值都是字符串，值可以是任意对象

1、对象赋值

person.name = "岁少"
"岁少"

2、动态的删减属性

delete person.name
true

3、动态的添加

直接给新的属性添加值即可

person.sex = "男"
"男"

4、判断属性值是否在这个对象

"age" in person
true
//继承的方法
"toString" in person
true

5、判断属性是否是对象本身拥有的

person.hasOwnProperty("age")
true
person.hasOwnProperty("toString")
false

4、流程控制

if判断

while循环

for循环

数组循环

• forEach循环

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

• forof循环

  for (var index of arr) {
      console.log(index);
  }
  

• forin循环

  //index是数组的索引
  for (var index in arr) {
      console.log(arr[index]);
  }
  //不推荐使用，增加数组长度后，index会获得值，而不是下标
  

5、Map 和 Set

ES6的新特性

Map

var map = new Map([["tom",100],["jack",90],["haha",80]]);
var name = map.get("jack");
map.set("admin",70);
map.delete("tom");

Set

无序不重复的集合

var set = new Set([1,2,2,3]);//Set可以去重
Set(3) {1, 2, 3}
set.add(1);   //添加
set.delete(2); //删除

可以使用forof循环遍历Map和Set

//遍历Map
for (var index of map) {
    console.log(index);
}
//遍历Set
for (var index of map) {
    console.log(index);
}

函数

1、定义函数

方式一

绝对值函数

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

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

如果没有执行return，函数执行完也会返回结果，结果就是undefined。 ---异于Java

方式二

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

方式一等价于方式二

调用函数

abs(-10)

参数问题：JS可以传人一个函数，也可以不传递参数

存在的问题

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

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

• arguments

  是一个免费赠送的关键字

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

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

• rest

  ES6引入的新特性

  获取除了已经定义的参数之外的所有参数

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

2、变量的作用域

在JS中，var定义的变量是有作用域的

在函数体中声明，则在函数体外不可以使用

function test() {
    var x = 1;
    x = x + 1;
}
x = 10;//Uncaught ReferenceError: x is not defined

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

function test1() {
    var x = 1;
    x = x + 1;
}
function test2() {
    var x = 1;
    x = x + 1;
}

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

function test1() {
    var x = 1;
    function test2() {
        var y = x + 1;
    }
    var z = y + 1;//Uncaught ReferenceError: y is not defined
}

内部函数和外部函数的变量重名

函数查找变量从自身函数开始，由内向外查找

function test1() {
    var x = 1;
    function test2() {
        var x = 'A';
        console.log(x);
    }
    console.log(x);
    test2();
}

1
A

提升变量的作用域

自动提升y的声明，但不会提升y的赋值

规范：所有变量的声明都放在函数的头部

function test1() {
    var x = "x" + y;
    console.log(x);
    var y = "y";
}

xundefined

全局函数

var x = 100;

function test() {
    console.log(x);
}

全局对象 window

默认所有的全局变量（包括函数），都会自动绑定在window下

var x = 100;
console.log(x);
console.log(window.x);

规范：由于所有全局变量都会绑定到我们的window下，如果不同的JS文件使用了相同的

全局变量，就会发生冲突。所以将自己的代码全部放入自己定义的唯一的空间名字中

var MyWindow = {};
MyWindow.name = "夜十七";
MyWindow.add = function (a, b) {
    return a + b;
}

局部函数 let

function test() {
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i)//i 出了作用域还可以使用
}

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

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

常量 const

ES6引入

const PI = 3.1415926;

3、方法

定义方法

方法就是把函数放在对象里，对象只有两个东西：属性 和 方法

var person = {
    //属性
    name: "夜十七",
    birth: 2000,
    //方法
    age: function () {
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}

this默认指向调用它的对象

apply

apply可以控制this指向

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}

var person = {
    //属性
    name: "夜十七",
    birth: 2000,
    //方法
    age: getAge
};

getAge.apply(person,[]);

内部对象

1、Date

var now = new Date();
now.getFullYear();  //年
now.getMonth(); //月 0~11
now.getDate();  //日
now.getDay();   //星期几
now.getHours(); //时
now.getMinutes();   //分
now.getSeconds();   //秒
now.getTime();  //时间戳

2、JSON

简介

• JSON 是一种轻量级的数据交换格式

• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

格式

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

JSON字符串 和 JS对象的转化

var user = {
    name: "yeshiqi",
    age: 17,
    sex: "男"
}
//对象转换为JSON字符串 "{"name":"yeshiqi","age":17,"sex":"男"}"
var jsonUser = JSON.stringify(user);
//JSON字符串转换为对象
var obj = JSON.parse('{"name":"yeshiqi","age":17,"sex":"男"}');

面向对象编程

1、JS的面向对象

原型：

var student = {
    name: "student",
    age: 18,
    run: function () {
        console.log(this.name + " run...");
    }
}

var xiaoming = {
    name: "xiaoming"
}
//小明的原型是student
xiaoming.__proto__ = student;

class 继承

ES6引入

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

class Student{
    constructor(name) {
        this.name = name;
    }

    hello(){
        alert("hello");
    }
}

var xiaoming = new Student(xiaoming);

2、继承

class Student{
    constructor(name) {
        this.name = name;
    }

    hello(){
        alert("hello");
    }
}

class XiaoStudent extends Student{
    constructor(name,grade) {
        super(name);
        this.grade=grade;
    }

    myGrade(){
        alert("我是一名小学生");
    }
}
var xiaohong = new XiaoStudent(xiaohong,1);

本质：仍是对象原型

原型链

操作BOM对象

BOM：浏览器对象模型

• IE6~11
• Chrome
• Safari
• FireFox

window

浏览器窗口

window。alert(1)
//浏览器高度宽度
window.innerHeight
358
window.innerWidth
1536
window.outerHeight
824
window.outerWidth
1536

navigator

封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.114 Safari/537.36"
navigator.platform
"Win32"

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

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

screen

代表电脑屏幕尺寸

screen.width
1536
screen.height
864

location

代表当前页面的URL信息

1. host: "www.baidu.com"
2. href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('https://www.bilibili.com/')

document

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

document.title
"百度一下，你就知道"
document.title="夜十七"
"夜十七"

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dt>JavaSE</dt>
    <dt>JavaEE</dt>
</dl>

<script>
    var d1 = document.getElementById("app");
</script>

获取cookie

document.cookie
"BIDUPSID=D4B94A3DC8217F92EFCAB6F698F37EA8; PSTM=1616208831;

history

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

操作DOM对象

DOM：文档对象模型

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

• 更新：更新DOM节点
• 遍历DOM节点：得到DOM节点
• 删除：删除一个DOM节点
• 添加：添加一个新的节点

要操作一个DOM节点，就必须先获得这个DOM节点

获得DOM节点

//对应css选择器
var h1 = document.getElementsByTagName("h1");
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName("p2");
var father = document.getElementById("father");
var children = father.children; //获取父节点下的所有的子节点
//father.firstChild;
//father.lastChild;

更新节点

<div id="id1">

</div>

<script>
    var id1 = document.getElementById("id1");
</script>

操作文本

id1.innerText="123" //修改文本的值
id1.innerHTML="<strong>123</strong>"//可以解析HTML文本标签

操作css

id1.style.color="red"
id1.style.fontSize="200px"

删除节点

步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标题一</h1>
    <p1 id="p1">p1</p1>
    <p1 class="p2">p2</p1>
</div>
<script>
    var self = document.getElementById("p1");
    var father = self.parentElement;
    father.removeChild(self);
</script>

注：删除多个节点的时候，children是在时刻变化的！

插入节点

我们获得了某个DOM节点，假设这个DOM节点是空的，可以通innerHTML就可以增加一个元素。如果已经存在元素，则会覆盖

操作表单

设置表单

<form action="#" method="post">
    <p>
        <span>用户名: </span>
        <input type="text" id="username">
    </p>
    <p>
        <span>性别: </span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="woman" id="girl"> 女
    </p>
</form>

<script>
    //得到输入框的值
    var input_text = document.getElementById("username");
    //修改输入框的值
    input_text.value = "123";

    //对于单选框、多选框等固定的值，.value只能获得当前的值
    var boy_radio = document.getElementById("boy");
    var girl_radio = document.getElementById("girl");
    //查看选中的值，若返回true，则被选中
    boy_radio.check;
    //修改选择框
    girl_radio.check = true;
</script>

提交表单

<!--表单绑定提交时间
onclick=绑定一个提交检测的函数
将这个结果返回给表单，使用onclick接收
-->
<form action="#" method="post" onclick="return check()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input-pwd">
    </p>
    <input type="hidden" id="md5-pwd" name="pwd">
    <!--绑定事件 onclick被点击-->
    <button type="submit" onclick="check()">提交</button>
</form>

<script>
    function check(){
        let username = document.getElementById("username");
        let input_pwd = document.getElementById("input-pwd");
        let md5pwd = document.getElementById("md5-pwd");
        //MD5加密
        md5pwd.value = md5(input_pwd.value);
        //可以判断表单内容，true就是通过提交
        return true;
    }
</script>

jQuery

1、基础

jQuery库，里面存在大量的JS函数

载入jQuery的方法

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

并在写入后，将鼠标光标放于该URL中，按Alt+enter，选择载入该模块。

公式：$(selector).action()

<a href="" id="test-jQuery">点我</a>

<script>
    //selector就是CSS选择器
    $("#test-jQuery").click(function (){
        alert("hello")
    })
</script>

2、事件

鼠标事件

style>
    #divMove {
        width: 500px;
        height: 500px;
        border: 1px solid red;
    }
</style>

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

<script>
    "use strict"
    //网页加载完毕之后，响应事件
    $(document).ready(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text("x:" + e.pageX + "y:" + e.pageY);
        });
    });
</script>

键盘事件，其他事件

3、操作DOM

节点文本操作

$('#test-ul li[name=python]').text();//获得值
$('#test-ul li[name=python]').text('设置值');
$('#test-ul li[name=python]').html();//获得值
$('#test-ul li[name=python]').html('<strong>123</strong>');//设置值

CSS操作

$('#test-ul li[name=python]').css('color','red')

元素的显示与隐藏

本质display: none

$('#test-ul li[name=python]').show()
$('#test-ul li[name=python]').hide()