三天速成前端——JavaScript
JavaScript
JS是一门世界上最流行的类型脚本语言，源代码在发往客户端运行之前不需经过编译。最新版本es6，但大部分浏览器还停留在支持es5上！
JQuery：一个JS的方法库，可以直接调用
三大框架：Angular、React、Vue（模块化+Dom）
一个合格的后端人员，一定要精通JavaScript
快速入门
<!--script标签内，写JS代码-->
<script>
alert("hello world")
</script>
<!--外部引用，script标签必须成对出现-->
<script src="js/test.js"></script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZkIAHiw8-1613226261993)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210210113631649.png)]
基本语法
// 定义变量 变量类型 变量名=变量值
var score=88;
//在浏览器中打印变量，相当于sout
console.log(score)
// 条件控制
if(score>60 && score<80)
alert("合格");
else if(score>80 && score<100)
alert("优秀")
数据类型
数值，文本，图形，音频，视频…都是数据类型
number ：js不区分整数和小数，都用number
123//整数123
123.1//浮点数123.1
NaN //not a number
Infinity//表示无限大
字符串：单引号双引号都可以 eg：‘abc’ “abc”
比较运算符
=
== 等于（类型不一样，值一样，也会判断true）
=== 绝对等于（类型也一样，用这个！！！）
须知：NaN===NaN，与所有的数值都不相等，包括自己，只能通过isNaN(NaN)来判断
浮点数问题：会有精度缺失，要避免使用浮点数计算，用Math.abs()代替（Java中用BigDecimal）
console.log( (1/3) === (1-2/3)) //false
console.log( Math.abs((1/3) - (1-2/3))<0.0000001 ) //true
null和undefined
- null 空
- undefined 未定义
数组
var arr=[1,2,3,'hello',null,true]; //不需要相同对象
取数组下标：如果越界了，就会undefined
对象
//大括号，用逗号隔开 person.name 获取
var person={
name:"carmine",
age:21,
tags:['js','html','css','...']
}
严格检查模式
//严格检查模式，必须写在script的第一行
'use strict';
//用let，避免全局变量
let i=1;
字符串
//转义字符
console.log('a\'');
console.log('a\nb');
//多行字符串，用tab上面的·
var msg=
` 你好
Java
`
//模板字符串,ES6新特性
var name="carmine";
var msg1="你好，${name}"
//字符串长度
console.log(msg1.length)
//字符串不可变，大小写
console.log(name.toUpperCase())
//substring,[)
console.log(name.substring(1)) //armine 从第一个字符串截取到最后一个
console.log(name.substring(1,3)) //ar [1,3)
数组
//中括号
var arr=[1,2,3,4,5,"1","2"];
arr[0]=0;//通过下标可以修改值
//给length赋值，数组长度会发生变化（与java不同）
arr.length=10;
arr.indexOf(2); //1
arr.indexOf("2"); //6，是不同的
arr.slice(2); //与substring类似
arr.push("a","b");//压入到尾部
arr.pop();//尾部弹出
arr.unshift("1");//压入到头部
arr.shift();//头部弹出
arr.sort();
arr.reverse();//元素反转
arr.concat([1,2,3]);//拼接，该方法并没有修改原来的数组，只是 返回一个新的
对象
//所有的健都是字符串，值是任意对象
var person={
name:"carmine",
age:21,
score:91,
tags:['js','html','css','...']
}
//给属性复制（Dev中）
person.name="zhouyi"
//不存在的属性不会报错！undefined，也可动态添加属性
person.haha="haha"
//动态删除属性
delete person.name
//判断属性值是否在对象中
'age' in person // true
'toString' in person//true 继承
//判断是否自身拥有
person.hasOwnProperty("toString") //false
person.hasOwnProperty("age") //true
流程控制
与Java基本一致
for(var index in object){
...}
Map和Set
ES6的新特性
Map：k-v键值对的集合
var map=new Map([['tom',100],['jack',90]],['haha',80]);
var name=map.get('tom');
map.set('admin',123); //添加Map元素
Set：无序不重复的集合
var set=new Set([3,1,1,2,4]);//去重
set.delete(2); //删除
console.log(set.has(3)); //是否包含某个元素,true
iterator
使用iterator来遍历迭代Map、Set、Arr
//遍历Map、Set、Arr
for(var x of map){
console.log(x);
}
函数及面向对象
定义函数（两种方法）
function abs(x){
if(x>=0)
return x; //返回结果
else
return -x;
}
如果没有执行return，函数也会返回结果：undefined
var abs=function(x){
//方法2：匿名函数
if(x>=0)
return x;
else
return -x;
}
输入格式问题：传递进的不是数字
if(typeof x!=='number'){
//不是数字
throw 'Not a Number'; //手动抛出异常
}
参数问题：JS可以传递任意个参数，也可以不传递参数（都不报错）
if(arguments.length==2) //JS自带arguments
{
//函数重载
}
arguments问题：arguments包含所有的参数，有时候需要用剩余的参数
var abs=function(x,y,...rest){
if(typeof x!=='number'){
//不是数字
throw 'Not a Number'; //手动抛出异常
}
if(arguments.length>2) //JS自带arguments
{
//函数重载
console.log(rest);
}
if(x>=0)
return x; //返回结果
else
return -x;
}
rest参数：只能写在最后面，必须用 … 标识
变量作用域
在JS中，var定义变量实际是有作用域的。
function a(){
var x=1;
x=x+1;
}
x=x+2; //Uncaught ReferenceError: x is not define
内部函数可以访问外部函数成员，反之不行；内外函数的变量名相同，不冲突
function a(){
var x=1;
function b(){
var y=x+1;
var x='a'; //替代外部变量
console.log(x); //a
}
var z=y+1; //Uncaught ReferenceError: z is not defined
console.log(x);//1
b();
}
变量规范：便于代码维护
function c(){
var x,y,z...; //js执行引擎会自动提升变量声明
//养成规范，在一开始定义所有变量，之后随意用。
}
全局对象
//全局变量
var x=1;
window.alert(window.x); //默认所有的全局变量，都会绑定在window对象下
alert本身也绑定在window下的变量（方法也可以作为变量）
var old_alert=alert;
window.alert=function(){
};
window.alert(123); //失效
//恢复
alert=old_alert;
window.alert(456);
JS实际上只有一个全局作用域，如果在局部没有找到变量，就往外找，如果window也找不到，报错 RefrenceError
规范：降低window全局匿名冲突的问题，jQuery. 等价于 $
//定义唯一全局变量，减少window冲突
var Carmine={
};
//定义全局变量，绑定到Carmine
Carmine.name='zhouyi';
//定义全局方法
Carmine.add =function(a,b){
return a+b;
}
局部作用域 let
定义常量
//ES6之前，大写字母标识
var PI='3.14' //依然可以修改
//ES6，const
const PI='3.14' //只读变量
方法
方法就是把函数放在对象的内部。
var carmine={
name:'zhouyi',
birth:1999,
age: function(){
//今年-出生年
var now=new Date().getFullYear();
return now-this.birth; //当前调用的对象（carmine）
}
}
//调用方法
carmine.age();
apply改变this的指向
var carmine={
name:'zhouyi',
birth:1999,
age: getAge //只写函数名
}
//方法定义在对象外
function getAge(){
var now=new Date().getFullYear();
return now-this.birth;
}
getAge.apply(carmine,[]) //this指向了carmine
特殊对象
Date
var now=new Date(); //Thu Feb 11 2021 10:43:24 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();
now.getDay();//星期几
now.getDate();//日
now.getTime();//时间戳，全球统一
var time=new Date(1613011404140);// 时间戳转Date
now.toLocaleDateString(); //本地时区"2021/2/11"
now.toLocaleString(); //"2021/2/11上午11:05:03"
JSON
(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
在JS中一切皆为对象、任何JS类型都可以用JSON来表示；
格式：
- 对象都用{}
- 数组都用[]
- 键值对 都是用 key:value
JS对象与JSON字符串的相互转换
var person={
name:"carmine",
age:21,
tags:['js','html','css','...']
}
//对象转JSON字符串
//"{"name":"carmine","age":21,"tags":["js","html","css","..."]}"
var str=JSON.stringify(person);
//字符串转JSON，里头双引号，外头只能用单引号
var obj=JSON.parse('{"name":"carmine","age":21,"tags":["js","html","css","..."]}');
JSON和JS对象的区别：
var obj={
a:'hello',b:'hellob'};
var json='{"a":"hello","b":"hellob"}' //k-v都有双引号，整体是一个字符串
Ajax
- 原生的js写法 xhr 异步请求
- jQuery封装好的方法 $("#name").ajax("")
- axios 请求
面向对象编程
原型
var person={
name:"carmine",
age:21,
run: function(){
console.log(this.name+" running...");
}
}
var xiaoming={
name:"xiaoming"
}
xiaoming.__proto__=person; //xiaoming的原型是person
class 继承
//定义一个学生的类 ES6
class Student{
constructor(name){
this.name=name;
}
hello(){
alert('hello');
}
}
//继承
class XiaoStudent extends Student {
constructor(name.grade){
super(name);
this.grade=grade;
}
grade(){
alert(this.grade);
}
}
var xiaohong=new XiaoStudent('xiaohong',1);
本质上还是指向原型（原型链：一直查找到Object.prototype）
操作BOM对象（重点）
BOM：浏览器对象模型（内核）
- IE 6~11
- Chrome
- Safari
- FireFox
三方（不是原生的）：
- QQ浏览器
- 360浏览器
window代表 浏览器窗口，有很多的方法获取窗口属性
Navigator封装了浏览器的信息~~（大多数时候不用，因为会被人为修改）~~
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"
location 代表当前页面的URL信息
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
document 代表当前页面，HTML DOM树
用户名：<input type="text" id="username"/>
<script>
//获取文档树的节点
var username=document.getElementById('username');
</script>
document.title可以获取title
document.cookie可以获取cookie，但不安全，cookie可以被劫持
eg：淘宝登陆后，天猫获取cookie同样可以登录天猫，如果被劫持，账号安全会有影响。
解决方法：服务器端可以设置cookie：httpOnly
history 浏览器的历史记录
history.back()/history.forward()
操作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.getElementsByClassName('father');
var children=father.children;//获取父节点下的所有子节点
更新节点
//修改文本的值（会覆盖）
p1.innerText=123
//可以解析HTML文本，自动转义，而Text不会
p1.innerHTML='123'
//修改Style
p1.style.color='red'
p1.style.fontSize='20px'
p1.style.padding='10px'
删除节点
删除节点的步骤：先获取父节点，再通过父节点删除自己
<div class="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var p1=document.getElementById('p1');
var father=p1.parentElement;//获取父节点
father.removeChild(p1);//删除p1
//删除多个结点
father.removeChild(father.children[0]);
father.removeChild(father.children[0]);//删除第二个，动态变化
</script>
插入节点（也可自己创建）
<p id="js">js</p>
<div id='list'>
<p id="se">JAVASE</p>
<p id="ee">JAVAEE</p>
<p id='qe'>qe</p>
</div>
<script>
var list=document.getElementById('list');
var js=document.getElementById('js');
list.appendChild(js);//追加，不会覆盖
//insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vxoSuYqv-1613226261996)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210212115115569.png)]
创建标签
var newP=document.createElement('p');//手动创建p标签
newP.id='newP';
newP.innerText='Hello,carmine';//文本
list.appendChild(newP);
用DOM对象创建style样式
//创建一个标签节点
var myStyle=document.createElement('style');//创建了一个空的style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background-color: red;}';//设置标签内存
//放置Style
document.getElementsByTagName('head')[0].appendChild(myStyle);
操作表单（验证）
表单的目的：提交信息
方法一：按钮点击，获得要提交的信息
<body>
<form action="post">
<span>用户名：</span> <input type="text" id="username"/>
<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';
var boy_radio=document.getElementById('boy');
var girl_radio=document.getElementById('girl');
//选中girl单选框
girl_radio.checked=true;
</script>
</body>
方法二：提交表单，MD5加密 优化表单
<body>
<!--表单绑定提交事件
onsubmit=绑定一个提交检测的函数，true false
将这个结果返回给表单，使用onsubmit接收！
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return test()">
<span>用户名：</span> <input type="text" id="username" required/> <br />
<span>密码：</span> <input type="password" id="password" required/>
<input type="hidden" id="md5-password" name="password"/>
<!--submit提交-->
<button type="submit">提交</button>
</form>
<script>
//绑定事件,触发test（）中的代码
function test(){
var username=document.getElementById('username');
var password=document.getElementById('password');
var md5_password=document.getElementById('md5-password');
//MD5算法处理
//password.value=md5(password.value) 避免直接处理，会突然边长
//解决方案：引入hidden标签
md5_password.value=md5(password.value);
//校验判断表单内容，true就是同意提交，false拒绝提交
if(...密码错误) return false;
return true;
}
</script>
</body>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9kBlV7bq-1613226261998)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210212171736135.png)]
JQuery
封装了大量JS方法的的库，公式：$(selector).action()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--百度cdn引入-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<!--公式：$(selector).action()-->
<script>
$('#test-jquery').click(function(){
alert('hello,jQuery');
})
</script>
</body>
</html>
选择器
//选择器（支持CSS各种）
$('p').click(); //标签
$('#id').click(); //id
$('.class').click(); //类
开发工具站：https://jquery.cuishifeng.cn/
事件
鼠标事件，键盘事件，其他事件
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6KbTN6Eu-1613226262000)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210212191357719.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divMouse{
width: 500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--获取鼠标当前坐标-->
mouse: <span id="mouseMove"></span>
<div id='divMouse'>
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后，响应事件
$(document).ready(function(){
//可以简写成 $(function(){})
$('#divMouse').mousemove(function (e){
//获取鼠标坐标e
$('#mouseMove').text('x:'+e.pageX+' y:'+e.pageY) //显示在span
})
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h7lS75UO-1613226262001)(C:\Users\13611\AppData\Roaming\Typora\typora-user-images\image-20210212192433986.png)]
操作Dom
//节点文本操作
//document.getElementById()
$('#test-ul li[name=python]').text();//获得
$('#test-ul').html();
$('#test-ul li[name=python]').text('设置值'); //设置
$('#test-ul').html('123');
//css操作
$('#test-ul li[name=python]').css("color","red");
//元素隐藏，本质display：none
$('#test-ul li[name=python]').hide();
//其他测试
$(window).width()
$(document).text()
//ajax
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
总结
练习小技巧：小游戏源码（JS）、扒别人的前端（HTML、CSS修改看效果）
组件：Lay UI、Elememt UI、Bootstrap、Ant Design