JavaScript
1.1、概述
javascript是一门世界上最流行的脚本语言
java、javascript
10天
一个合格的后端程序员，必须要精通javascript
1.2、历史
https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript他可以理解为是javascript的一个标准
最新版本已经是es6版本
但是大部分浏览器还只是停留在支持es5代码上
开发环境···线上环境，版本不一致
2、快速入门
2.1、引入javascript
1、内部标签
<!--script标签内，写JavaScript代码-->
<!--<script>
alert("你好，我是JavaScript");
</script>-->
2、外部引入
jb.js
alert("hello javascript");
xx.html
<!--外部引用-->
<!--注意：script标签必须是成对出现-->
<script src="2%E3%80%81jb.js"></script>
2.2、基本语法入门
<script>
/*
1、定义变量 变量类型 变量名 = 变量值；
*/
var num = 5+3;
/*alert(num);*/
/*
2、条件控制
*/
var score = 1;
if(3>1){
alert("true");
}
/**/console.log();
</script>
浏览器必备调试须知:
2.2、数据类型
数值，文本，图形，音频，视频···
变量
var 王者荣耀 = "倔强青铜";
number
js不区分小数和整数，Number
123 //整数
123.3 //浮点数
1.234e3 //科学计数法
-45 //负数
0.5 //浮点数
NaN //not a number
Infinity //表示无限大
字符串类型
"abd" 'abd'
布尔值
true , false
逻辑运算
&& 两个都为真，结果为真
|| 一个为真，结果为真
! 真即假，假即真
比较运算符 ！！！重要
= 赋值
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）
这是一个js的缺陷，坚持不要使用 == 比较
须知：
-
NaN===NaN，这个与所有的数值都不相等，包括自己
-
只能通过isNaN(NaN)来判断这个数是否为 NaN
浮点数问题
console.log((1/3) ===(1-2/3))
尽量避免使用浮点数进行运算，存在精度问题
Math.abs((1/3) ===(1-2/3)) <0.00000001
null 和 undefined
-
null 空
-
undefined 未定义
数组
java的数值必须是想同类型的对象，js中不需要这样
//保证代码的可读性，尽量使用[]
var arr = [1,25,3,4,5,'hello',null,true];
new Array(1,25,3,4,5,'hello');
取数组下标：如果越界了，就会提示：undefined
对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
//Person person = new Person(1,2,3,4,5);
var person = {
name: "panyazhou",
age:45,
tags: ['js','java','web','...']
}
取对象的值
person.name
>'panyazhou'
person.age
>45
2.4、严格检查格式
3、数据类型
3.1、字符串
1、正常字符串我们使用单引号或者双引号包裹
2、注意转移字符 \
\'
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符
3、多行字符串编写
//tab 上面esc键下面
var i = `hello
nihao
sss`;
4、模板字符串
let name = "panuazh";
let age = 54;
let mag = `不好呀,$(name)`
5、字符串长度
str.length
6、字符串的可变性
console.log(student[0])
s
undefined
student[0]=1
1
console.log(student)
student
undefined
7、大小写转换
//注意，这里是方法，不是属性了
student.toUpperCase()
student.toLowerCase()
8、获取指定的下标:student.indexOf(u)
9、截取字符串：substring
从第一个字符串截取到最后的一个字符
3.2、数组类型
Array可以包含任意的数据类型
var arr = [1,5,8,4] //通过下标取值和赋值
arr[0]
arr[0] = 1
1、长度
arr.length
注意：假如给arr.length赋值，数组大小就会发生变化。如果赋值过小，元素就会丢失
2、indexOf,通过元素获得下标索引
arr.indexOf(2)
字符串的"1"和数字的1是不同的
3、slice（）截取Array的一部分，返回一份新数组，类似于String中的substring
4、push()，pop()
push: 压入到尾部
pop:弹出尾部的一个元素
5、unshift(),shift()头部
unshift:压入到头部
shift：弹出头部的一个元素
6、排序sort()
var arr = ['A','C','B']
arr.sort()
(3) ['A', 'B', 'C']
7、元素反装
(3) ['A', 'B', 'C']
arr.reverse()
(3) ['C', 'B', 'A']
8、concat()
(3) ['C', 'B', 'A']
arr.concat([4,5,6])
(6) ['C', 'B', 'A', 4, 5, 6]
arr
(3) ['C', 'B', 'A']
注意：concat()并没有修改数组，只是会返回一个新的数组
9、连接符join
打印拼接字符，使用特定的字符串连接
(3) ['C', 'B', 'A']
arr.join('+')
'C+B+A'
10、多维数组
arr = [[1,2],[3,4],["5","6"]]
arr[1][1]
4
数组：存储数据（如何存，如何取，方法都可以自己实现）
3.3、对象
若干个键值对
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值,
属性名:属性值
}
/*定义了一个person对象，他有四个属性！*/
'use strict';
var person = {
name: "zhangsna",
aeg:45,
email:"5154124@qq.com",
score:0;
}
js中的对象，(....)表示一个对象，键值对描述属性xxx:xxx，多个属性之间用逗号隔开，最后一个属性不加逗号！
JavaScript中所有的键都是字符串，值是任意对象！
1、对象赋值
person.name
'zhangsna'
person.name = "潘亚洲"
'潘亚洲'
2、使用一个不存在的对象属性，不会报错！undefined
person.hdix
undefined
3、动态的删除属性，通过delete删除对象的属性
delete person.age
true
person.aeg
4、动态的添加，直接给新的属性添加值即可
person.fhg = 124564
124564
person
{name: '潘亚洲', aeg: 45, email: '5154124@qq.com', score: 0, fhg: 124564}
5、判断属性值是否在这个对象中，xxx in xxx
'name' in person
true
//继承
'toString' in person
true
6、判断一个属性是否是这个对象自身拥有的
{name: '潘亚洲', aeg: 45, email: '5154124@qq.com', score: 0, fhg: 124564}
person.hasOwnProperty('toString')
false
person.hasOwnProperty('aeg')
true
3.4、流程控制
if判断
var age = 3;
if(age>3){
alert("大");
}else if(age<5){
alert("中");
}else{
alert("小");
}
while循环,避免程序死循环
while(age<100){
age +=1;
console.log(age);
}
do{
age +=1;
console.log(age);
}while(age<100)
for循环
for(let i= 0;i<100;i++){
console.log(i);
}
forEach循环>5.1引入的
var age = [12,5,4,8,4,5,4];
//函数
age.forEach(function(value)){
console.log(value);
}
3.5、Map和Set
ES6的新特性
Map:
/*ES6:Map集合
学生的成绩，学生的名字
*/
var map = new Map(['javl',90],['tom',40],['Tom',60]);
var name = map.get('javl');//通key获得value
map.set('admin',12456); //新增或修改
map.delete("tom"); //删除
console.log(name);
Set:无序不重复的集合
set.add(2); //添加
set.delete(1); //删除
console.log(set.has(3)); //是否包含某个元素
3.6、iterator
es6新特性
使用iterator来遍历迭代我们的Map
遍历数组
//通过for of /for in 下标
var arr = [3,4,5];
for(var x of arr){
console.log(x);
}
遍历Map
var map = new map([["tom",85],["javk",48],["hah",92]);
for(let x of map){
console.log(x);
}
遍历Set
var set = new Set([5,6,7]);
for(let x of set){
console.log(x);
}
4、函数及面向对象
4.1、函数定义及作用域
绝对值函数
function abs(x){
}
一旦执行到return代表函数结束，返回结果！
全局对象window
javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError
规范：由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突->如果能够减少冲突？
//唯一全局变量
var KuangApp = {};
//定义全局变量
KuangApp.name = 'kuangsheng';
KuangApp.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(var i = 0;i<100 ;i++){
console.log(i);
}
console.log(i+1); //i is not defined
}
建议大家都是使用let 去定义局部作用域的问题
常量const
4.2、方法
定义方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
'use strict';
var qianqian ={
name: "wangqian",
bitrh: 2002,
age: function(){
var now = new Date().getFullYear();
return now - this.bitrh;
}
}
//属性
qianqian.name
//方法，一定要带()
qianqian.age()
this.代表什么？拆开后面的看看
'use strict';
function getage(){
//今年，出生的年
var now = new Date().getFullYear();
return now - this.bitrh;
}
var qianqian ={
name: "wangqian",
bitrh: 2000,
age: getage
}
//qianqian.age() ok
//getage() NaN window
this是无法指向的，是默认指向调用她的那个对象
//apply
//在js中可以控制this指向！
function getage(){
//今年，出生的年
var now = new Date().getFullYear();
return now - this.bitrh;
}
var qianqian ={
name: "wangqian",
bitrh: 2000,
age: getage
}
getage.apply(qianqian,[]); //this,指向了qianqina，参数为空，所有的函数共有的
4.3、闭包
4.4、箭头函数
4.5、创建对象
4.6、class继承
4.7、原型链继承
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 date = new Date(); //Thu Dec 02 2021 20:47:04 GMT+0800 (中国标准时间)
date.getFullYear(); //年
date.getMonth(); //月
date.getDate(); //日
date.getDay(); //星期几
date.getHours(); //时
date.getMinutes(); //分
date.getSeconds(); //秒
date.getTime(); //时间戳 全世界统一 1970 1.1 0:00:00 毫秒数
console.log(new Date(1638449469745)) //时间戳转为时间
转换
dd = new Date(1638449469745)
Thu Dec 02 2021 20:51:09 GMT+0800 (中国标准时间)
dd.toLocaleString //注意，调用的是一个方法，不是一个属性！
ƒ toLocaleString() { [native code] }
dd.toLocaleString()
'2021/12/2 下午8:51:09'
dd.toGMTString()
'Thu, 02 Dec 2021 12:51:09 GMT'
5.2、JSON
1、json是什么
早期，所有的数据传输习惯都是用xml文件
-
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
-
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在javascript一切皆为对象，任何js支持的类型都可以使用JSON来表示：number,String...
格式：
-
对象都用{}
-
数组都用[]
-
所有的键值对都是用key:value
JSON字符串和js对象的转化
<script>
var user = {
name :"qianqian",
age : 3,
sex:"男"
}
//对象转化为JSON字符串
var jsonUser = JSON.stringify(user);
//json 字符串转化为对象，参数为json字符串
var obj = JSON.parse({"name":"qianqian","age":3,"sex":"男"}); </script>
很多人搞不清楚，JSON和JS对象的区别
var obj = {a:'hello',b:'hellob'}
var json = '{a:"hello",b:"hellob"}'
5.3、Ajax
-
原生的js写法，xhr异步请求
-
jQuey封装好的方法$(#name).ajax("")
-
axios请求
6、操作Dom对象（重点）
DOM:文档对象模型
浏览器网页就是一个DOM树形结构！
-
更新：更新DOM节点
-
遍历DOM节点：得到DOM节点
-
删除：删除一个DOM节点
-
添加：添加一个新的节点
要操作一个DOM节点，就必须要先获得这个DOM节点
获得DOM节点
<div id="father">
<h1>我是标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');
var div = document.getElementById('father');
var childrens = father.children; //获取父节点下面的所有子节点
//father.firstChild;
//father.lastChild;
这是原生代码，之后我们尽量都是使用jQuery();
更新节点
<div id="di"></div>
<script>
var dd = document.getElementById('di');
</script>
操作文本
dd.innerText = 'ahjgkgij' //修改文本的值
dd.innerHTML = '<strong>456</strong>' //可以解析HTML文本标签
操作js
dd.style.color = 'red' //属性使用，字符串加引号包裹
'red'
dd.style.fontSize = '50px' //_ 转驼峰命名问题
'50px'
dd.style.padding = '30px'
'30px'
6.1、删除Dom
删除节点
删除节点的步骤，先获取父节点，再通过父节点删除自己
<div id="father">
<h1>我是标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
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是时刻变化的，删除节点的时候一定要注意
6.2、插入Dom
插入节点
我们获得了某个DOM 节点，假设这个DOM 节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了！会产生覆盖
<p id="p1">p1</p>
<div id="father">
<p id="se">javase</p>
<p id="me">javame</p>
<p id="ee">javaee</p>
</div>
<script>
var p1 = document.getElementById('p1'),
father = document.getElementById('father');
father.appendChild(p1); //追加到后面
追加效果：
6.3、更新Dom
创建一个新的标签，实现插入
insertBefore
var ee = document.getElementById('ee');
var p1 = document.getElementById('p1');
var father = document.getElementById('father');
//要包含的节点，insertBefore(newnode,targetnode)
father.insertBefore(p1,ee);
####
####
7、操作Bom元素
BOM:浏览器对象模型
JavaScript和浏览器的关系？
JavaScript诞生就是为了能够让他在浏览器中运行！
IE 6-11
Chrome
Safari
Firefox Linux（默认就是火狐）
第三方浏览器
QQ浏览器
360浏览器
7.1、window
window(重要)：代表浏览器窗口
window.alert('nihao')
undefined
window.innerHeight
205
window.innerWidth
508
window.outerHeight
1020
window.outerWidth
1032
window.innerHeight
205
//大家可以调整浏览器窗口试试
7.2、navigator
Navigator：封装了浏览器的信息（不建议使用）
Navigator
navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.54 Safari/537.36'
navigator.platform
'Win32'
大多数时候，我们不会使用navigator对象，因为会被人为修改
不建议使用这些属性来判断和编写代码
7.3、screen
screen：代表屏幕尺寸
screen.height
1080 px
screen.width
1920 px
7.4、location
location（重要）：location代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign("https://blog.kuangstudy.com/")
7.5、Document
document（重要）：代表当前的页面,HTML DOM文档树
document.title
"百度一下，你就知道"
document.title = "你好，我是百度文档"
"你好，我是百度文档"
获取具体的文档树节点
<dl id="app">
<dt>java</dt>
<dd>javase</dd>
<dd>javaee</dd>
</dl>
<script>
var d1 = document.getElementById("app");
</script>
获取cookie
document.cookie
"BIDUPSID=A6C2C3DCD1E24DF1254C00AF92E41216; PSTM=1630494913; BAIDUID=274A178EFDED318F77A5B1AD552B7E8F:FG=1; BAIDUID_BFESS=274A178EFDED318F77A5B1AD552B7E8F:FG=1; BAIDU_WISE_UID=wapp_1635675452249_269; Hm_lvt_aec699bb6442ba076c8981c6dc490771=1636814290; BD_UPN=12314753; sugstore=1; ZD_ENTRY=other; BD_HOME=1; delPer=0; BD_CK_SAM=1; PSINO=7; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; baikeVisitId=d0744f9f-9978-46bd-88e4-96d06e957263; COOKIE_SESSION=1635566_0_9_9_17_23_1_0_9_8_29_7_1635384_0_2_0_1638450170_0_1638450168%7C9%230_0_1638450168%7C1; H_PS_PSSID=34443_35104_31254_34584_34517_35345_35245_34872_35329_35319_26350_35313_35301; BA_HECTOR=0g8g0g80al2100842o1gqk3bq0r"
劫持cookie原理
<script src = "aa.js"></script>
//恶意人员：获取你的cookie上传到她的服务器
服务器端可以设置cookie：httpOnly
7.6、History
history(历史)：history代表浏览器的历史记录
history.back() //后退
history.forward() //前进
7.7、操作表单(验证)
表单是什么： form DOM树
-
文本框 text
-
下拉框 <select>
-
单选框 radio
-
多选框 checkbox
-
密码框 hidden
-
隐藏框 possword
-
...
表单的目的，提交信息
获得要提交的信息
<div>
<form>
<div>
<table >用户名：
<input type="text" id="username" name="user"></table>
</div>
<div>
<table>密码：<input type="password" id="passw" name="password"></table>
</div>
<!--多选框的值，就是定义好的value-->
<p>
<spa>性别:</spa>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
</div>
<script>
var username = document.getElementById('username');
var passw = document.getElementById('passw');
var boy = document.getElementById('boy');
var girl = document.getElementById('girl');
//得到输入框的值
username.value
//修改输入框的值
username.value = '123456';
//对于单选框，多选框等等固定的值，girl.value只能取到当前的值
girl.checked //查看返回的结果是否为true,如果为true,则被选中
girl.checked = 'true' //直接赋值
</script>
提交表单：MD5加密密码，表带优化
7.8、操作文件
8、面向对象编程
8.1、什么事面向对象
JavaScript，java，c#...面向对象：JavaScript有些区别
类：模板
对象：具体的实例
在javascript这个需要大家换一下思路方式！
原型：
class继承
class关键字，实在ES6引入的
1、定义一个类，属性，方法
<script>
//定义一个学生的类
class Student{
constructor(name){
this.name = name;
}
hellp(){
alert('hello');
}
}
var xiaoming = new Student('xiaming');
var xiaohong = new Student('xiaohong');
xiaoming.hello;
</script>
9、jQuery
JavaScript和jQuery库的关系：工具类
jQuery库，里面存在大量的JavaScript函数
获取jQuery:
语法公式：$(selector).action()
浙公网安备 33010602011771号