JavaScript是一门世界上最流行的脚本语言
一个合格的后端人员，必须精通JavaScript1.2历史
ECMAScript可以理解为是JavaScript的一个标准
但是发部分浏览器还只停留在支持es5代码上！
2、快速入门 2.1引入JavaScript
1、内部标签
<script>
//.....
<script>
2、外部引入
abc.js
//.....
test.html
<script src="abc.js"></script>
3、测试代码
2.2基本语法入门
<!--JavaScript严格区分大小写-->
<script>
//1.定义变量 变量类型 变量名 = 变量值;
var score = 71;
// alert(num)
//2.条件控制
if(score>60 && score<70){
alert("60~70");
}else if(score>70 && score<80){
alert("70~80")
}else{
alert("other")
}
//console.log(score) 在浏览器控制台打印变量！ System.out.println();
</script>
2.3数据类型
数值，文本，图形，音频，视频.....
number
js不区分小数和整数，Number
123 //整数123
123.4 //浮点数123.4
1.234e3 //科学计数法
NaN //not a number
Infinity //表示无限大
字符串
‘abc’ ”abc“
布尔值
true，false
逻辑运算
&& || ！
比较运算符！！！！！important
=
== 等于（类型不一样，值一样，也为true）
=== 绝对等于（类型一样，值一样，结果为true）
这是一个JS的缺陷，坚持不要使用==比较
-
NaN==NaN,这个与所有的数值都不相等，包括自己
-
只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题
console.log((1/3)===(1-2/3))
尽量避免使用浮点数进行运算，存在精度问题！
console.log(Math.abs(1/3-(1-2/3))<0.0000000001)
null和undefined
-
null 空
-
undefined 未定义
数组
Java的数值必须是相同类型的对象~，JS不需要！
var arr = [1,2,3,4,"hello",true,null]
取数组下标：如果越界了，就会
undefined
对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
//Person person = new Person();
var person = {
name: "yangting",
age: 5,
tags:['js','java','web','...']
}
取对象的值：
person.name > 'yangting' person.age > 5
2.4严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行！
局部变量建议都使用let去定义
-->
<script>
'use strict'
let i = 1;
</script>
</head>
<body>
</body>
</html>
3、数据类型 3.1字符串
1、正常字符串我们使用 单引号，或者双引号包裹
2、注意转义字符\
\' \n \t \u4e2d \u### Unicode字符 \x41 Ascll字符
3、多行字符串编写
var msg = `hello world 你好啊 啊啊啊`
4、模板字符串
let name = "yangting";
let age = 4;
let msg = `你好呀,${name}`
5、字符串长度
console.log(str.length)
6、字符串的可变性，不可变
7、大小写转换
//注意，这里是方法，不是属性了 student.toUpperCase() student.toLowerCase()
8、获取指定字符的下标
student.indexOf('t')
9、substring
[)左闭右开 student.substring(1)//从第一个字符串截取到最后一个字符串 student.substring(1,3)//[1,3)
3.2数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6] //通过下标取值和赋值 arr[0] arr[0] = 1
1、长度
arr.length
注意：加入给arr.length赋值数组大小就会发生变化，如果赋值过小，元素就会丢失
2、indexOf，通过元素获得下标索引
arr.indexof(2) 1
字符串的 “1” 和数字 1 是不同的
3、slice（）截取Array的一部分，返回一个新数组，类似string中的substring
4、push(),pop() 尾部
push: 压入到尾部 pop： 弹出尾部的一个元素
5、unshift(),shift() 头部
unshift: 压入到头部 shift： 弹出头部的一个元素
6、排序 sort()
arr = ["b","c","a"] (3) ['b', 'c', 'a'] arr.sort() (3) ['a', 'b', 'c']
7、元素反转 reverse()
(3) ['a', 'b', 'c'] arr.reverse() (3) ['c', 'b', 'a']
8、concat（）
arr (3) ['c', 'b', 'a'] arr.concat(1,2,3) (6) ['c', 'b', 'a', 1, 2, 3] arr (3) ['c', 'b', 'a']
注：concat（）并未修改数组，只是会返回一个新数组
9、连接符join
打印拼接数组，使用特定的字符串连接
(3) ['c', 'b', 'a']
arr.join("-")
'c-b-a'
10、多维数组
arr = [[1,2],[3,4],["hello","你好"]] arr[1][1] 4
数组：存储数据（如何存，如何取，方法都可以自己实现）
3.3对象
若干个键值对
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}
//定义了一个person对象，它有四个属性！
var person = {
name: "yangshen",
age: 3,
email : "2428610923@qq.com",
score:100
}
JS中对象，{......}表示一个对象，键值对描述属性xxxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！
javaScript中的所有的键都是字符串，值都是任意对象。
1、对象赋值
person.name 'yangshen' person.name="happy" 'happy' person.name 'happy'
2、使用一个不存在的对象属性，不会报错！
person.haha undefined
3、动态的删减属性，通过delete删除对象的属性
delete person.name true person
4、动态的添加,直接给新的属性添加值即可
person.haha = "haha" 'haha' person.haha 'haha'
5、判断属性值是否在这个对象中
'age' in person true //继承 'toString' in person true
6、判断一个属性是否是这个对象自己拥有的 hasOwnProperty
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
3.4流程控制
if判断
var age = 3;
if(age>3){
alert("haha");
}else{
alert("kule");
}
while循环，避免程序死循环
var age = 3;
while(age<100){
age=age+1;
console.log(age);
}
for循环
var age = 3;
for (let i = 0; i < 100; i++) {
console.log(i);
}
forEach循环
var age = [12,13,453,756,1,123,2552];
age.forEach(function (value){
console.log(value)
})
3.5Map和Set
ES6的新特性
Map：
// var names = ["tom","jack","haha"];
// var score = [100,90,80];
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var name = map.get('tom');//通过key获得value
map.set('admin',123456);//新增或修改
map.delete("tom");//删除
Set：无序不重复的集合
set.add(7);//添加 set.delete(2);//删除 console.log(set.has(3))//是否包含某个元素
3.6iterator
遍历数组
//通过for of 遍历数据 | 通过for in 遍历数据的下标
var a = [1,2,3];
for(var x of a){
console.log(x);
}
遍历map
var map = new Map([["tom",100],["jack",99],["mark",88]]);
for(var x of map){
console.log(x);
}
遍历set
var set = new Set([6,7,8]);
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可以传任意个参数，也可以不传递参数
参数进来是否存在的问题？
假设参数不存在，如何规避？
var abs = function (x){
//手动抛出异常来判断
if(typeof x !== 'number'){
throw 'ni shi bu shi sha ';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
是JS免费赠送的关键字
代表，所有传递进来的参数是一个数组。
var abs = function (x){
//手动抛出异常来判断
console.log("x=>"+x);
for(var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
rest
以前：
if(arguments.length>2){
for(var i = 2;i<arguments.length;i++){
//.....
}
}
ES6引入的新特性，获取除了已经定义的参数之外的所有参数
function abs(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后面，必须用...标识
4.2变量的作用域
在javascript中，var定义变量实际是有作用域的
假设在函数体中声明，则在函数体外不可以使用（非要想实现的话，可以研究闭包）
function qj(){
var x = 1;
x = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function qj(){
var x = 1;
x = x + 1;
}
function qj2(){
var x = 1;
x = x + 1;
}
内部函数可以访问外部函数的成员，反之则不行
function qj(){
var x = 1;
function qj2(){
var y = x + 1;
}
var z = y + 1;
}
假设，内部函数变量和外部函数的变量重名！
function qj(){
var x = 1;
function qj2(){
var x = 'A';
console.log('inner'+x);
}
console.log('outer'+x);
qj2()
}
假设在JavaScript中函数查找变量从自身函数开始，由内向外查找。
假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
function qj(){
var x = "x" + y;
console.log(x);
var y = 'y';
}
这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护。
function qj2(){
var x = 1,
y = x + 1,
z,i,a;//undefined
//之后随意使用
}
全局对象 window
var x = 'xxx'; alert(x); alert(window.x);
alert()这个函数本身也是一个 window 变量；
JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没找到，报错referenceErron
规范
由于我们所有的全局变量 都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突-》如何减少冲突？
//唯一的全局变量
var yangApp ={};
//定义全局变量
yangApp.name = 'yangting';
yangApp.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 = '214'; //调皮的人可以改变这个值 console.log(PI);
ES6引入了常量关键字const
const PI = '3.14'; //只读变量 console.log(PI); PI = '123';
4.3方法
定义方法
方法就是把函数放在对象里面，对象只有两个东西： 属性和方法
var yangshen = {
name:'杨汀',
birth:2012,
//方法
age:function (){
var now = new Date().getFullYear();
return now - this.birth;
}
}
//调用属性：yangshen.name
//调用方法：yangshen.age()[一定要带括号]
this
function getAge(){
//今年 - 出生年
var now = new Date().getFullYear();
return now - this.birth;
}
var yangshen = {
name:'杨汀',
birth:2012,
age:getAge()
}
var xiaoming = {
name:'小明',
birth:2012,
age:getAge()
}
//this始终指向调用它的人
this是无法指向的，是默认指向调用它的那个对象；
5.内部对象
标准对象
typeof 123
'number'
typeof "123"
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
5.1Date
基本使用
var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getDay();//星期几
now.getTime();//时间戳 全世界统一 1970 1.1 0:00:00
console.log(new Date(1648039775257))//时间戳转为时间
转换
now.toLocaleString()//注意调用的是一个方法，不是属性！ '2022/3/23 20:51:26' now.toGMTString() 'Wed, 23 Mar 2022 12:51:26 GMT'
5.2JSON
json是什么
早期，所有数据传输习惯使用XML文件！
-
JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式。
-
简洁和清晰的层次结构是的JSON成为理想的数据交换语言。
-
易于人阅读和编写，同时也易于及其解析和生成，并有效的提升网络传输速率。
jdbc
在javascript一切皆为对象，任何js支持的类型都可以用JSON来表示：
格式：
-
对象都用{}
-
数组都用[]
-
所有的键值对都用 key：value
JSON字符串和JS对象的转化
var user = {
name: "yangting",
age: 5,
sex: '男'
}
//对象转化为json字符串（{"name":"yangting","age":5,"sex":"男"}）
var jsonUser = JSON.stringify(user);
//json字符串转化为对象，参数为json字符串
var obj = JSON.parse('{"name":"yangting","age":5,"sex":"男"}')
JSON和JS对象的区别
var obj = {a: 'hello',b: 'hellob'};
var json = '{"a": "hello","b": "hellob"}'
5.3 Ajax
-
原生的js写法，xhr异步请求
-
jQuey封装好的方法$("#name".ajax)
-
axios 请求
##
6.面向对象编程 6.1 history（不建议使用）
JavaScript、Java、c#.... 面向对象：JavaScript有些区别！
-
类：模板
-
对象：具体的实例
JavaScript需要大家换一下思维方式！
原型：
var Student ={
name: "yangting",
age:4,
run: function (){
console.log(this.name+ "run....");
}
};
var xiaoming = {
name: "xiaoming"
};
//原型对象
xiaoming.__proto__=Student;
var Bird = {
fly: function (){
console.log(this.name+"fly。。。");
}
};
//小明的原型是Student
xiaoming.__proto__=Bird;
6.2 class继承
class关键字，是在ES6引入的
1、定义一个类，属性，方法
//ES6之后，定义一个学生类
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello')
}
}
xiaoming.hello()
2、继承
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello')
}
}
class Pupil extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小学生？');
}
}
var xiaoming = new Student("xiangming");
var xiaoyang = new Pupil("xiaoyang",1);
本质：查看对象原型
7、操作BOM对象（重点） 7.1 浏览器介绍
JavaScript和浏览器关系？
JavaScript诞生就是为了能够让它在浏览器中运行！
BOM：浏览器对象模型
-
IE 6~11
-
Chrome
-
Safari
-
FireFox
三方：
-
QQ浏览器
-
360浏览器
7.2 window（重要）
window代表浏览器窗口
window.alert(7) undefined window.innerHeight 262 window.innerWidth 846 window.outerHeight 814 window.outerWidth 860
7.3 Navigator（不建议使用）
Navigator封装了浏览器的信息
navigator.appName 'Netscape' navigator.appVersion '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36 Edg/99.0.1150.46' navigator.userAgent 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36 Edg/99.0.1150.46' navigator.platform 'Win32'
大多数时候，我们不会使用navigator对象，因为会被人为修改。
不建议使用这些属性来判断和编写代码
7.4 screen
代表屏幕尺寸
screen.width 1536 px screen.height 864 px
7.5 location（重要）
location代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:" //协议
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('https://blog.kuangstudy.com/')
7.6 document（内容：DOM）
document代表当前的页面，HTML DOM文档树
document.title '百度一下，你就知道' document.title="你是真的皮" '你是真的皮'
获取具体的文档树节点
<dl id="app">
<dt>JAVA</dt>
<dd>JAVASE</dd>
<dd>JAVAEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
获取cookie
document.cookie
劫持 cookie 原理
www.taobao.com
<script src="aa.js"></script> //恶意人员：获取你的cookie上传到他的服务器
服务器端可以设置cookie：httpOnly
7.7 history（不建议使用）
history代表浏览器的历史记录
history.back()//后退 history.forward()//前进
8、操作DOM对象（重点） 8.1 核心
浏览器网页就是一个Dom树形结构
-
更新：更新Dom节点
-
遍历：得到Dom节点
-
删除：删除一个Dom节点
-
添加：添加一个新的节点
要操作一个Dom节点，就必须先获得这个Dom节点
8.2 获得dom节点
//对应css选择器
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var p2 = document.getElementById('father');
var children = father.children;//获取父节点下的所有子节点
//father.firstChild
//father.LastChild
这是原生代码，之后我们尽量都使用jQuery（）；
8.3 更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
操作文本：
-
id1.innerText="123" 【修改文本的值】
-
id1.innerHTML=’< strong>12345</strong>‘ 【可以解析HTML文本标签】
操作CSS:
-
id1.style.color="blueviolet" 【属性使用字符串包裹】
-
id1.style.fontSize='30px' 【- 变成驼峰命名法】
8.4 删除节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
var self = document.getElementById('p1');
var father = p1.parentElement;
father.removeChild(self)
//删除是一个动态的过程
father.removeChild(father.children[0])
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注：删除多个节点的时候，children是在时刻变化的，删除节点时一定要注意。
8.5 插入节点
我们获得了某个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>
var js = document.getElementById('js');
var list = document.getElementById('list');
</script>
list.appendChild(js)//取出‘js’，并追加到list的后面
9、操作表单（验证） 9.1 表单是什么 form DOM 树
-
文本框 text
-
下拉框 <select>
-
单选框 radio
-
多选框 checkbox
-
隐藏域 hidden
-
密码框 password
表单的目的：提交信息
9.2 获得要提交的信息
<form method="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="women" id="girl">女
</p>
</form>
<script>
var input_txt = document.getElementById('username');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
//得到输入框的值
input_txt.value;
//修改输入框的值
input_txt.value = 'you are so beautiful';
//对于单选框，多选框等固定的值，boy_radio.value只能取到当前的值
boy_radio.checked;//查看返回的结果，是否为true，选中的话，即为true
girl_radio.checked = true;//赋值
</script>
10、jQuery
jQuery是一个库，里面存在大量的JavaScript函数
10.1 获取jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
//CDN引入
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
</body>
</html>
<!--公式：$(selector).action()-->
<a href="" id="test-jquery">点我</a>
<script>
document.getElementById('id');
$('#test-jquery').click(function (){
alert('hello jQuery');
})
</script>
10.2 选择器
<script>
//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器全部都能用
$('p').click(); //标签选择器
$('#id1').click(); //id选择器
$('.class1').click(); //class选择器
</script>
10.3 事件
鼠标事件、键盘事件、其他事件
mousedown→按下
mousemove→移动
10.4 获取鼠标当前坐标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-3.6.0.js"></script>
<style>
#divMove{
width:500px;
height: 500px;
border: 1px solid orange;
}
</style>
</head>
<body>
<!--要求：获取鼠标当前的坐标-->
mouse：<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完成之后，响应事件
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
});
});
</script>
</body>
</html>
10.5 操作DOM
节点文本操作
$('#test-ul li[name="python"]').text();//获得值
$('#test-ul li[name="python"]').text('hello');//设置值
$('#test-ul').html();//获得值
$('#test-ul').html('<strong>123</strong>');//设置值
css操作
$('#test-ul li[name="python"]').css("color","orange");
元素的显示和隐藏：本质是 display ： none ；
$('#test-ul li[name="python"]').show() //显示
$('#test-ul li[name="python"]').hide() //隐藏
10.6 小技巧
1、如何巩固JS →看jQuery源码，看游戏源码！
2、巩固HTML、CSS →扒网站，全部down下来，然后对应修改看效果
layer弹窗组件