JavaScript学习笔记
JavaScript
1、JavaScript
1.1、概述
JavaScript是一门世界上最流行的脚本语言
Java 、JavaScript
一个合格的后端人员，必须要精通JavaScript
1.2、历史
https://www.cnblogs.com/ghost-xyx/p/4035615.html
ECMAScript可以理解为JavaScript的一个标准
最新版本已经到es6版本
但是大部分浏览器还只停留在支持es5的代码上！
开发环境----线上环境，版本不一致。
2、快速入门
2.1、引入JavaScript
1、内部标签
<script>
alert('Hello,2021');
script>
2、外部引入
abc.js
<script src="js/abc.js">script>
alert('Hello,2021');
2.2、基本语法入门
<script>
// 1. 定义变量 变量类型 变量名=变量值;
var num = 1;
//alert(num)
var name="liyujie";
var score=75;
// 2.条件控制
if (score>60 && score<70) {
alert("60~70");
} else if (score>70 && score<80) {
alert("70~80");
} else {
alert("other");
}
// console.log(score) 在浏览器的控制台打印变量
</script>
2.3、数据类型
数值，文本，图形，音频，视频…
变量
var $1=1;
number
js不区分小数和整数 number
NaN //not a number
字符串
‘abc’ “abc”
布尔值
同java
逻辑运算
&&
||
!
比较运算符
=
== 等于 （类型不一样 值一样 也为true）
=== 绝对等于（类型一样 值一样）
这是JavaScript的一个缺陷，坚持不要使用 == 比较
须知：
- NaN===NaN，这个与所有的数值都不相等，包括自己
- 只能通过isNaN（NaN）
浮点数问题：
console.log((1/3)===(1-2/3));
尽量避免使用浮点数进行运算
console.log(Math.abs(1/3-(1-2/3))<0.00000001);
null和undefined
- null 空
- undefined 未定义
数组
java的数组必须是一系列相同类型的对象，js中不需要这样
var arr = [1, "sadas", null, true];
new Array(1, 1, 3, null, true);
取数组下标如果越界了，就会undefined
对象
对象 大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要
2.4、严格检查模式
'use strict' 严格检查模式 必须写在javascript的第一行
3、数据类型
3.1、字符串
1、 正常字符串我们使用单引号或者双引号包裹。
2、 注意转义字符 \
3、 多行字符串编写
4、 模板字符串
let name="liyujie";
let age=3;
let msg=`你好呀，${
name}`;
alert(msg);
5、字符串长度
console.log(student.length);
6、 字符串可变性
不可变的
7、大小写转化
8、 substring
3.2、数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,5,6];
1、长度
arr.length
注意：加入给arr.length赋值，数组大小就会发生变化，过小元素丢失
2、 indexof通过元素获得下标索引
字符串的“1”和数字1是不同的
3、slice() 截取数组的Array的一部分，返回一个新数组类似于String中的substring包头不包尾
4、 push ,pop 尾部
push 压入到尾部
pop 弹出尾部了一个元素
5、unshift，shift 头部
unshift 压入到头部
shift 弹出头部的一个元素
6、排序 sort（）
7、 元素反转
8、concat()
没有吧原来的干掉
注意：并没有修改数组，知识会返回一个新的数组。
9、连接符join
打印拼接数组，使用特定的字符串连接
10、多维数组
数组：存储数据（如何存，如何取，方法都可以自己实现！）
3.3、对象
若干个键值对
var 对象名 = {
属性名：属性值,
属性名：属性值,
属性名：属性值
}
var person={
name: "Richard",
age: 5,
email: "[email protected]",
score: 99
}
js中，{…}表示一个对象，键值对描述属性XXX:XXX,多个属性之间使用逗号隔开，最后一个属性不加逗号
JavaScript中的所有键都是字符串，值是任意对象！
1、对象赋值
2、使用一个不存在的对象属性，不会报错！undefined
3、 动态的删减属性
4、 动态的添加，直接给新的属性添加值即可
5、判断属性值是否在这个对象中！ xxx in xxx !
6、判断一个属性是否是这个对象自身拥有的hasOwnProperty（）
3.4、流程控制
同Java
3.5、Map和Set
ES6的新特性
Map:
'use strict'
var map = new Map([['tom',100],['jack',91],['haha',8]]);
var name = map.get('tom'); // 通过key获得value
map.set('admin',123456);
console.log(name);
Set:无序不重复的集合，可以去重
3.6、iterator
4、函数及面向对象
4.1、函数定义
定义方式一
绝对值函数
function abs(x) {
if(x>=0) {
return x;
} else {
return -x;
}
}
定义方式二
var abs=function(x){
if(x>=0) {
return x;
} else {
return -x;
}
}
方式一和方式二等价！
调用函数
abs(10)
abs(-10)
参数问题：JavaScript可以传任意个参数，也可以不传递参数
参数进来是否存在的问题？
假设不存在参数，如何规避？
var abs=function(x){
// 手动抛出异常
if (typeof x!== 'number') {
throw 'not a number';
}
if(x>=0) {
return x;
} else {
return -x;
}
}
arguments
arguments是一个js免费赠送的关键字
代表传递进来的所有参数，是一个数组！
var abs=function(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 包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除以有的参数
rest
以前：
if (arguments.length>2) {
for (var i=2;i<arguments.length;i++) {
}
}
ES6引入的新特性，获取除了已经定义的参数之外的所有参数~，…
function aaa(a,b,...rest) {
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest 参数只能写在最后面，必须用…标识。
4.2、变量作用域
在JavaScript中，var定义变量实际是由作用域的。
假设在函数体中声明，则在函数体外不可使用~（非要想实现的话，后面可以研究一下闭包）
'use strict'
function lyj() {
var x = 1;
x = x + 1;
}
x = x+2;//Unresolved variable or type x
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突、
内部函数可以 使用外部函数的成员，反之则不行
'use strict'
function lyj() {
var x = 1;
//内部函数可以 使用外部函数的成员，反之则不行
function lyj2() {
var y = x+1;
}
var z = y+1;//Unresolved variable or type y
}
假设，内部函数变量和外部函数的变量，重名！
'use strict'
function lyj() {
var x = 1;
//内部函数可以 使用外部函数的成员，反之则不行
function lyj2() {
var x = '132';
console.log('in' + x);
}
console.log('out' + x);
lyj2();
}
lyj();
假设JavaScript中，函数查找变量从自身函数开始~，由 内 向 外 查 找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提升变量作用域
'use strict'
function lyj() {
var x = 'x' + y;
console.log(x);
var y = 'y';
}
结果：xundefined
说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护。
全局函数
// 全局变量
x=1;
function f(){
console.log(x);
}
f();
console.log(x);
全局对象 window
var x = 'XXX';
alert(x);
alert(window.x); // 默认所有的全局变量都会绑定在window对象下。
alert这个函数本身也是一个window变量
var x = 'XXX';
window.alert(x);
var old_alert = window.alert;
window.alert = function () {
}
window.alert(123);
window.alert = old_alert;
window.alert(456);
JavaScript 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内内找到，机会向外查找，如果在全局作用域都没有找到，报错regreenceError（引用异常）。
规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的去哪聚变量，冲突->如何能够减少冲突？
// 唯一全局变量
var richardApp={
};
// 定义全局变量
richardApp.name = 'liyujie';
richardApp.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之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值
在ES6 引入了常量关键字 const
4.3、方法
定义方法
方法就是把函数放在对象的内部，对象只有两个东西：属性和方法。
var liyujie={
name:'richard',
birth:2000,
age:function () {
var y = new Date().getFullYear();
return y - this.birth;
}
};
// 属性
liyujie.name
// 方法一定要带（）
liyujie.age()
function getAge() {
var y = new Date().getFullYear();
return y - this.birth;
}
var liyujie={
name:'richard',
birth:2000,
age:getAge
};
this是无法指向的，是默认指向调用它的那个对象；
apply
在js中可以控制this的指向
function getAge() {
var y = new Date().getFullYear();
return y - this.birth;
}
var liyujie={
name:'richard',
birth:2000,
age:getAge
};
var xiaoli={
name:'richard',
birth:2000,
age:getAge
};
getAge.apply(liyujie,[]); // this，指向了liyujie，参数为空
getAge.apply(xiaoli,[]);
5、常用对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {
}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.1、Date
基本使用
var now = new Date(); // VM71:1 Mon Feb 15 2021 21:07:58 GMT+0800 (中国标准时间)
now.getFullYear(); // 年
now.getMonth(); // 月
now.getDate(); // 日
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒
now.getTime(); // 时间戳 全世界统一 1970年1.1 00：00
console.log(new Date(1613394736542)); // 时间戳转为时间
转化
now = new Date(1613394736542)
Mon Feb 15 2021 21:12:16 GMT+0800 (中国标准时间)
now.getTime()
1613394736542
now.toLocaleDateString()
"2021/2/15"
now.toGMTString()
"Mon, 15 Feb 2021 13:12:16 GMT"
now.toDateString()
"Mon Feb 15 2021"
now.toLocaleString() // 注意，调用是一个方式，不是一个属性
"2021/2/15下午9:12:16"
5.2、JSON对象
json是什么
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript 一切皆为对象，任何js支持的类型都可以使用json来表示； number,string
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对都是用 key：value
JSON字符串 和 JS对象的转化
var user={
name:"liyujie",
age:3,
sex:'man'
};
// 对象转化为json字符串
var json = JSON.stringify(user);
// json字符串 转化为 对象
var obj = JSON.parse('{"name":"liyujie","age":3,"sex":"man"}');
var obj={
a:'hello',b:'liyujie'};
var json='{"a":"hello","b":"liyujie"}';
6、面向对象编程
原型对象
javaScript,java,c#… 面向对象，javaScript有些区别！
-
类：模板
-
对象：具体的实例
类是对象的一个抽象，对象是类的具体表现。
var student={
name:"liyujie",
age:3,
run:function (){
console.log(this.name + "run...");
}
};
var richard={
name:"lichade"
};
// richard 的原型是student
richard._proto_=student;
var Bird = {
fly:function () {
console.log(this.name + "fly...");
}
};
richard._proto_ = Bird;
class继承
class关键字，是在ES6引入的
1、定义一个类，属性，方法
//ES6之后==========
// 定义一个学生类
class student{
constructor(name) {
this.name = name;
}
hello() {
alert('hello');
}
}
var liyujie = new student("liyujie");
var xiaohong = new student("xiaohong");
xiaohong.hello()
2、 继承
//ES6之后==========
// 定义一个学生类
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 liyujie = new student("liyujie");
var xiaohong = new xiaostudent("xiaohong",1);
本质：查看对象原型
原型链
proto
7、操作Dom元素
DOM：文档对象模型
核心
整个浏览器网页就是银行Dom树形结构 ！
- 更新：更新Dom节点
- 遍历dom节点：得到dom节点
- 删除节点：删除一个dom节点
- 添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
获取Dom节点
<div id="father">
<h1>标题1h1>
<p id="p1">p1p>
<p class="p2">p2p>
div>
<script>
var h1=document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
var father=document.getElementById('father');
var childrens = father.children; // 获取父节点下的所有子节点
father.firstChild
father.lastChild
script>
这个原生代码，之后我们尽量都是用JQuery
更新节点
<div id="id1">
div>
<script>
var id1 = document.getElementById('id1');
script>
操作文本：
- id1.innerText=‘123’ 修改文本的值
- id1.innerHTML=‘666’ 可以解析html文本标签
操作CSS
id1.style.color = 'red';
"red"
id1.style.color = 'skyblue'; // 属性使用 字符串 包裹
"skyblue"
id1.style.fontSize = '2200px' // 驼峰命名
"2200px"
id1.style.fontSize = '200px'
"200px"
删除节点
删除节点的步骤：先获取父节点，在通过父节点删除自己
<div id="father">
<h1>标题1h1>
<p id="p1">p1p>
<p class="p2">p2p>
div>
<script>
var self=document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2');
var father=document.getElementById('father');
father.removeChild(p1)
var father1 = self.parentElemrnt;
father1.removeChild(slef);
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
script>
注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意！
插入节点
我们获得了某个Dom节点，假设这个节点是空的，我们通过innerHTML 就可以增加一个元素了，但是这个dom节点以及存在元素了，我们就不能这么干了！，会产生覆盖
追加
<body>
<p id="js">JavaScriptp>
<div id="list">
<p id="se">JavaSEp>
<p id="ee">JavaEEp>
<p id="me">JavaMEp>
div>
<script>
var
js = document.getElementById('js');
list = document.getElementById('list');
list.appendChild(js) // 追加到后面
script>
body>
创建一个新的标签，实现插入
<div id="list">
<p id="se">JavaSEp>
<p id="ee">JavaEEp>
<p id="me">JavaMEp>
div>
<script>
var
js = document.getElementById('js'); // 已存在的结点
list = document.getElementById('list');
// 通过s创建一个新结点
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'Hello,liyuijie';
list.appendChild(newP);
script>
<script>
var
js = document.getElementById('js'); // 已存在的结点
list = document.getElementById('list');
// 通过s创建一个新结点
var newP = document.createElement('p');
newP.id = 'newP';
newP.innerText = 'Hello,liyuijie';
list.appendChild(newP);
// 创建一个标签节点 (通过这个属性，可以设置任意的值)
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript');
script>
var myStyle = document.createElement('style'); // 创建一个空style标签
myStyle.getAttribute('type','text/css');
myStyle.innerHTML='body{background-color:green}'; // 设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
8、操作Bom对象（重点）
浏览器介绍
Javascript 和 浏览器的关系？
Javascript 诞生就是为了能够让他在浏览器中运行！
BOM:浏览器对象模型
- IE 6~11
- Chrome
- Safari
- FireFox
三方
- QQ浏览器
- 360浏览器
window
window代表浏览器窗口
Navigator
Navigator，封装了浏览器的信息
window.navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.150 Safari/537.36"
navigator.platform
"Win32"
大多数时候我们不会使用navigator对象，因为会被认为修改！
不建议使用这些属性来判断和编写代码
screen
代表屏幕尺寸
screen.width
1920
screen.height
1080
location（重要）
location 代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload()
// 设置新地址
location.assign('https://www.csdn.net/')
Document（内容）
document 代表当前页面，HTML DOM 文档树
document.title
"百度一下，你就知道"
document.title='xiaojiejie'
"xiaojiejie"
document.title
"xiaojiejie"
获取具体的文档树结点
<dl id="app">
<dt>Javadt>
<dd>JavaSEdd>
<dd>JavaMEdd>
dl>
<script>
var ld = document.getElementById('app');
script>
获取 cookie
document.cookie
"BIDUPSID=71B45CE039F9D940AB9F09046595F65D; PSTM=1591922631; BD_UPN=12314753; BAIDUID=7808B68347936DC5107EEE87D7FF96BF:FG=1; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=33425_33442_33344_31254_26350_33544; H_PS_645EC=cb6b0pDsiUpE9C6Bbo0PRO0XjtIAfM8Iaho2paBqOTkjJovjHgYXFV6LGl%2BICs17iCIT; BDRCVFR[feWj1Vr5u3D]=I67x6TjHwwYf0; delPer=0; BD_CK_SAM=1; PSINO=5; COOKIE_SESSION=479791_10_4_3_18_1_0_0_3_1_2_0_0_0_63_5_1612966269_1612966211_1613445997%7C9%231085060_58_1612966206%7C9; BD_HOME=1; BA_HECTOR=0400840501002101sp1g2mfvo0r"
劫持 cookie 原理
<script src="aa.js">script>
// 恶意人员：获取你的cookie上传到他的服务器
服务器端可以设置 cookie：httpOnly
history（不建议使用）
代表浏览器的历史记录
history.back() // 后退
history.forward() // 前进
9、表单操作（验证）
表单是什么 form DOM树
- 文本框 text
- 下拉框
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- …
表单的目的：提交信息
获得提交的信息
<form action="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');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
// 修改输入框的值
input_text.value = '123';
// 对于单选框，多选框，.value只能取到当前值
boy_radio.checked; // 查看返回结果，是否为true，如果为true，则被选中
script>
提交表单 md5 加密密码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">script>
head>
<body>
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
<p>
<span>用户名：span><input type="text" id="username" name="username" >
p>
<p>
<span>密码：span><input type="password" id="input-password">
p>
<input type="hidden" id="md5-password" name="password">
<button type="submit">提交button>
form>
<script>
function aaa() {
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
md5pwd.value = md5(pwd.value);
// 可以校验判断表单内容，true就是通过提交，false就是阻止提交
return true;
}
script>
body>
html>
10、JQuery
Javascript
JQuery 库 里面存在大量的javascript函数
获取JQuery
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">script>
head>
<body>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js">script>
<script src="lib/jquery-3.5.1.js">script>
head>
<body>
<a href="" id="test-jquery">dainwoa>
<script>
// 选择器就是css的选择器
$('#test-jquery').click(function () {
alert('hello,jquery');
})
script>
body>
html>
选择器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
// 原生js，选择器少，麻烦不好记
// 便签
document.getElementsByTagName()
// id
document.getElementById()
// 类
document.getElementsByClassName()
// JQuery css中的选择器他全部都能用
$('p').click();// 标签选择器
$('#id1').click();// id选择器
$('.class1').click();// 类选择器
$(selector).action()；
script>
body>
html>
文档工具查询：https://jquery.cuishifeng.cn/ （超级推荐，可以当做工具使用奥）
事件
鼠标事件，键盘事件，其他事件
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="lib/jquery-3.5.1.js">script>
<style>
#divMove {
width: 500px;
height: 600px;
border: 1px solid red;
}
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>
操作DOM
节点文本操作：
$('#test-ul li[name=py]').text(); // 获得值
$('#test-ul li[name=py]').text('66'); // 设置值
$('#test-ul').html(); // 获得值
$('#test-ul').html('123'); // 设置值
CSS操作
$("#test-ul li[name=py]").css("color","red");
元素的显示和隐藏：本质display=none;
$("#test-ul li[name=py]").hide()
$("#test-ul li[name=py]").show()
娱乐测试：
$(window).width()
$(window),height()
$(document).width()
$(document),height()
$("#test-ul li[name=py]").toggle() // 隐藏和展示轮换