JavaScript小结
1、什么是JavaScript
JavaScript是一门世界上最流行的语言
一个合格的程序员必须精通JavaScript
2、快速入门
-
内部标签
<script> 这里面写代码 </script>
-
外部标签
js里面代码 alert('李永辉');
<script src="js/lyh.js"></script>
-
测试代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- <script> alert('Hello Word'); </script> --> <!-- 外部引入 --> <script src="js/lyh.js"> </script> <!-- 不用显示定义type,也默认就是Javascript --> <script type="text/javascript"> </script> </head> <body> </body> </html>
-
基础语法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> //1.定义变量 变量类型 变量名 var score=71; //2.条件控制 if (score>60 && score<70) { alert("李永辉"); } else if(score>70&&score<80){ alert("李永辉"); } //在浏览器的控制台打印变量System.out.print(); //console.log(score); </script> </head> <body> </body> </html>
3、数据类型(简单介绍)
数值,文本,图形,音频,视频......
-
变量
//不能以数字开头命名var:列 var 1a=1;不规范 var a=1;
-
number
js不区分小数和整数
123 //整数123 123.1 //浮点数123.1 1.123e3 //科学计算法 -99 //复数 NaN //not a number Infinity //表现无限大
-
字符串
‘abv’ "avc"
-
布尔值
true false
-
逻辑运算符
&& //两个都为真,结果为真 || //一个为真,结果为真 ! //真即假,假即真
-
比较运算符(重要)
= //赋值 == //等于(类型不一样,值一样,也会判断为true === //绝对等于(类型一样,值一样)
这就是一个js的缺陷,坚持不要使用 ==比较
-
NaN===NaN,这个与所有的数值都不相等,包括自己
-
只能通过isNaN(NaN)来判断这个数是否NaN
-
-
浮点数问题:
尽量不要使用浮点数运算,存在精度问题
-
null和undefined
-
null 空
-
undefined 未定义
-
-
数组
Java的数值必须是相同类型的对象,JS中不需要这样
var arr=[1,2,3,'ss',"456",true,null]; console.log(arr[2]); new Array(1,12,4);
取数组小标:如果越界了,就会
underfined
-
对象
对象是大括号,数组是中括号
//Person person=new Person(1,2,3); var person={ name: "李永辉", age:12, tags:['js','java'] }
-
取对象的值
person.name
4、严格检查格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--'use strict';
严格检查模式,预防Javascript的随意性导致产生的一些问题必须写在JavaScript的第一行
局部变量建议都使用let去定义-->
<script>
'use strict';
i=1;
</script>
</head>
<body>
</body>
</html>
5、数据类型
5.1、字符串
-
正常字符串我们使用 单引号, 或者双引号包裹
-
注意转义字符 \
console.log("\n"); console.log("\t"); console.log("\u4e2d"); //打印一个中字
-
多行字符串编写
var msg=`hello word 您好呀 `;
-
模板字符串
let name="李永辉"; let age=3; let msg1=`您好呀,${name}`; console.log(msg1); //打印=您好呀,李永辉
-
字符串长度
var student="student"; undefined console.log(student.length);
-
字符串可变性,不可变
-
大小写转换
//注意,这里的方法,不是属性;了 console.log(student.toUpperCase()); VM977:1 STUDENT undefined console.log(student.toLowerCase()); VM1091:1 student
-
查找索引值
console.log(student.indexOf("n")); VM1295:1 5
-
查询字符串中的第几个字符
console.log(student.substring(2));//注意重第三个字符串截取到最后一个字符串 VM1402:1 udent undefined console.log(student.substring(2,5)); VM1420:1 ude
5.2、数组
Array可以包含任意的数据类型
var arr=[1,2,3,'ss',"456",true,null];
arr[0]
-
长度
arr.length=10
注意:加入arr.length赋值,数组大小就会发生变化,如果元素赋值过小就会数据丢失
-
indexOf(),通过元素获得下标索引
indexOf(2);
-
slice() 截取Array的一部分,返回一个新数组,类似与String中的substring
-
push() 和pop() 尾部
push://把你添加的元素压缩到末尾这个数组中 pop://从后向前弹出一个个元素
-
unshift()和shift() 头部
unshift://把你添加的元素压缩头部到这个数组中 shift://从前向前弹出一个个元素
-
排序sort()
arr.sort();
-
元素反转reverse()
arr.reverse();
-
连接符join
var arr=["a","b","c"]; arr.join('-') 'a-b-c'
-
多维数组
var arr=[[1,2],[3,4],[5,6]]; arr[1][1] //输出为4
5.3、对象
若干个键值对
var 对象名 ={
属性名:属性值,
属性名:属性值,
属性名:属性值
}
//定义了一个person对象,它有三个属性
var person={
name:"李永辉",
age:2,
score:0
}
js中对象,{....}表示一个对象,键值对描述属性xxxxx:xxxxxx,多属性之间使用逗号隔开,最后一个不加逗号。
JavaScript中所有的键都是字符串,值是任意对象
-
对象赋值
person.name="代雅鑫" "代雅鑫" person.name "代雅鑫"
-
使用一个不存在的对象属性,不会报错
person.haha undefined
-
动态的删减属性
delete person.name
-
动态的添加,直接给新的属性添加值即可
person.haha="haha" "haha" person
5.4、流程控制
-
if判断
var age=3; if(age>2){ alert("lyh"); console.log("lyh"); }
-
while循环,避免死循环
while(age<100){ age=age+1; alert("lyh"); console.log("lyh"); }
-
forEach循环
var age=[1,56,12,1,4,5]; //打印数组中值 age.forEach(function (value){ console.log(value); });
-
Map和Set
-
Map:
var map=new Map([["tom",50],["lyh",80],["haha",90]]); var name=map.get("tom");//可以通过key来获得value map.set("李永辉","admin"); console.log(name);
-
Set:(set集合可以去重)
var set =new Set([1,11,1,2,3,4]); set.add(8); set.delete(8); console.log(set.has(3));
-
-
iterator遍历
-
遍历数组
var arr=[2,3,4]; for(let x of arr){ console.log(x); }
-
遍历map
var map=new Map([["tom",50],["lyh",80],["haha",90]]); for(let x of map){ console.log(x); }
-
遍历set
var set =new Set([1,11,1,2,3,4]); for(let x of set){ console.log(x); }
-
6、函数
6.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; } }
这是一个匿名函数,但是可以把结果赋值给abs,通过abs就可以调用函数方式一等价于方式二。
-
调用函数
abs(10) //10 abs(-10) //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(x>=0){ return x; }else{ return -x; } }
问题:arguments包含所有的参数,我们有时候想使用多余的参数来进行附加操作,需要排除已有参数
-
rest
function aaa(a,b,...rest) { console.log(a); console.log(b); console.log(rest); }
注意:参数只能写在最后面,必须用...rest
6.2、变量的作用域
在JavaScript中,var定义变量实际是有作用的
-
假设在函数体中声明,则在函数体外可以用
function ly(){
var x=1;
x=x+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined
-
如果两个函数使用了相同的变量名,只要在函数内部,就不冲突
function ly(){
var x=1;
x=x+1;
}
function ly2(){
var x="a";
x=x+1;
}
-
内部函数可以访问外部函数的成员,反之则不行
function ly(){
var x=1;
//内部函数可以访问外部函数的成员,反之这不行
function ly2(){
var y=x+1;//2
}
var z=y+1;
}
假设在JavaScript中函数查找变量从自身函数开始,由内向外查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。
-
提升变量的作用域
function ly(){ var x="x"+y; console.log(x); var y='y'; }
结果:xundefined
说明:JavaScript执行引擎,自动提升了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="xx"; window.alert(x); var old_alert=window.alert; window.alert=function(){ }; //发现alert()失效了 window。alert(123); //回复 window。alert=old_alert; window.alert(456);
JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量);
-
规范
由于我们所有的全局变量都会绑定到我们的window上,如果不同的js文件,使用了相同的全局变量,冲突->如果能够减少冲突?
//唯一全局变量 var ly={}; //定义全局变量 ly.name="lyh"; ly.add=function(a,b){ return a + b; }
把自己的代码放入自己定义的唯一空间名字中,降低全局命名冲突问题
-
局部作用域let
function aaa(){ for(let i=0;i<100;i++){ console.log(i); } console.log(i+1); }
ES6关键字,解决局部作用域的冲突
6.3、方法
-
定义方法
方法就是把函数放在对象里面,对象只有两个东西
var liyonghui={ name:'李永辉', bitrh:2000, //方法 age:function () { //今年-出生的年 var now=new Date().getFullYear(); return now-this.bitrh; } } //属性 liyonghui.name //方法,一点过要带() liyonghui.age()
7、内部对象
-
标准对象
liyonghui.age() 22 typeof 123 'number' typeof "123" 'string' typeof true 'boolean' typeof Math.abs 'function'
7.1、Date
-
基本使用
date.getFullYear();//年 2022 date.getMonth();//月 10 date.getDate();//日 6 date.getDay();//星期几 0 date.getHours();//时 20 date.getMinutes();//分 6 date.getSeconds();//秒 36 date.getTime();//时间戳 1667736396611
-
时间转换(注意调用是一个方法)
new Date(1667736396611); Sun Nov 06 2022 20:06:36 GMT+0800 (中国标准时间) date.toLocaleString(); '2022/11/6 20:06:36' date.toLocaleTimeString(); '20:06:36'
7.2、JSON
-
JSON是什么
早期,所有数据传输习惯使用XML.文件
-
JSON(
-
简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
-
易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
-
-
在JavaScript一切皆对象,任何js支持的类型都可以使用JSON来表示:
格式:
-
对象都用{}
-
数组都用[]
-
所有的键值对都是用key:values
JSON字符串和JS对象的转换
var user={ name:"李永辉", age:3, sex : '男' } //JSON把对象转换成字符串 var jsonUser=JSON.stringify(user); //JSON把字符串转换成对象 var parse = JSON.parse('{"name":“永辉”,"age": 3,"sex": "男"}'); // user // {name: '李永辉', age: 3, sex: '男'} // console.log(jsonUser); // VM72:1 {"name":"李永辉","age":3,"sex":"男"}
很多人搞不清楚,JSON和JS对象的区别
var obj={a:'hello',b:'hellob'}; var json='{"a":"hello","b":"hellob"}';
-
7.3、Ajax
-
原生的js写法 xhr异步请求
-
jQuey封装好的方法$("#name").ajax("")
-
axious 请求
8、面向对象编程
8.1、什么是面向对象
JavaScript、Java、C#...面向对象;JavaScript有区别
-
类:模板 原型对象
-
对象:具体的实例
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 xiaoming=new Student("xiaoming");
9、操作BOM对象(重点)
-
浏览器介绍
JavaScript和浏览器关系?
JavaScript诞生就是为了能够在浏览器中运行
BOM:浏览器对象模型
-
IE6-11
-
Chrome
-
Safari
-
FireFox
-
-
三方
-
QQ浏览器
-
360浏览器
-
-
window代表 浏览器窗口
window.alert(1); undefined window.innerHeight 720 window.innerWidth 436 Window.outerHeight //可以试一试调整浏览器窗口大小...
-
Navigator
Navigator,封装了浏览器的信息
navigator.appName 'Netscape' navigator.userAgent 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36' //版本信息 navigator.appVersion '5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36' navigator.platform 'Win32'
大多数时候,我们不会使用navigator对象,因为会被人修改
不建议使用这个属性来判断和编写
-
screen(屏幕)
screen.height 864 screen.width 1536
-
location(重点)
location代表当前页面的URL信息
host: "www.baidu.com" href: "https://www.baidu.com/" location.reload() // 刷新网页 location.assign('https://www.cnblogs.com/')
-
document代表当前的页面,HTML DOM文档树
document.title "百度一下,你就知道" document.title='李彦宏和'; "李彦宏和"
获得具体的文档树节点
<dl id="app"> <dt>java</dt> <dd>javaSE</dd> <dd>javaEE</dd> </dl> <script> var id = document.getElementById("app"); </script>
获得cookle
document.cookie
劫持cookle原理
-
服务器端可以设置cookle:httpOnly
-
-
history:代表浏览器的历史记录
history.forward() //后退 history.back() //前进
10、操作DOM对象(重点)
10.1、核心
浏览器网页就是一个Dom树形结构
-
更新:更新Dom节点
-
遍历dom节点:得到Dom节点
-
删除:删除一个Dom节点
-
添加:添加一个新节点
要操作一个Dom节点,就必须要先获得这个Dom节点
10.2、获得dom节点
//对应css选择器
var h1=document.getElementsByTagName("h1");
var p1=document.getElementById("p1");
var p2=document.getElementsByClassName("p2");
var father = document.getElementById("father");
//获得父节点下的所有子节点
var childrens=father.children;
这些原生代码,之后我们尽量都在jQuery();
10.3、更新节点
<div id="id1">
</div>
<script>
var id1=document.getElementById("id1");
</script>
操作文本
-
id1.innerText='abc';修改文本的值
-
id1.getInnerHTML='123';可以解析HTML文件
操作js
id1.innerText='456';
'456'
id1.innerText='abc';
'abc'
id1.style.color='red';
'red'
id1.style.fontSize='200px';
'200px'
操作百度一下样式
document.getElementById('su');
<input type=•"submit" id=•"su" value=•"百度一下" class=•"bg s_btn">•
var ss=document.getElementById('su');
undefined
ss.style.color='red';
'red'
10.4、删除Dom节点
删除节点的步骤:先获取父节点,在通过父节点删除子节点
<div id="father">
<h1>11</h1>
<p id="p1">222</p>
<p class="p2">33</p>
</div>
<script>
var self=document.getElementById("p1");
var father=p1.parentElement;
father.removeChild(father.children[0]);
father.removeChild(father.children[1])
father.removeChild(father.children[2])
</script>
注意:删除多个节点的时候,children是在时刻变化,删除节点的时候一定要注意。
10.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> //获取id标签 var js = document.getElementById("js"); var list = document.getElementById("list"); // 给div这个标签追加一个儿子 list.appendChild(js); </script>
效果:
-
创建一个新的标签
<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> //获取id选择器 var js = document.getElementById("js"); var list = document.getElementById("list"); // 给div这个标签追加一个儿子 // list.appendChild(js); //通过js创建一个新的节点 //创建一个新的标签,返回一个对象 var newp = document.createElement('p'); //给新标签赋值一个id选择器 newp.id='newp'; //给新的标签里面赋值内容 newp.innerText='helloword'; //给list-id选择器添加一个新的标签 list.appendChild(newp); </script>
效果:
-
创建一个新标签,插入标签(用js完成样式)
<script> //获取id选择器 var js = document.getElementById("js"); var list = document.getElementById("list"); // 给div这个标签追加一个儿子 // list.appendChild(js); //通过js创建一个新的节点 //创建一个新的标签,返回一个对象 var newp = document.createElement('p'); //给新标签赋值一个id选择器 newp.id='newp'; //给新的标签里面赋值内容 newp.innerText='helloword'; //给list-id选择器添加一个新的标签 list.appendChild(newp); //创建一个标签节点 var myStyle = document.createElement('style'); //setAttribute一个key-values myStyle.setAttribute('type','text/css'); //给boby添加一个样式 myStyle.innerHTML="body{}"; //获得head这个标签的位置,给他追加一个style标签 document.getElementsByTagName('head')[0].appendChild(myStyle); </script>
-
insert插入
<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 ee = document.getElementById('ee'); var js = document.getElementById('js'); var list = document.getElementById('list'); list.insertBefore(js,ee); </script>
11操作表单(验证)
-
表单是什么 form DOM树
-
文本框 text
-
下拉框 <select>
-
单选框 redio
-
多选框 checkbox
-
隐藏框 hidden
-
密码框 password
-
.......
表单的目的:提交
-
-
获得要提交的信息
<form action="post"> <p> <span>用户名:</span><input type="text" id="username"> </p> <p> <span>性别:</span> <input type="radio" value="men" id="boy">男 <input type="radio" value="women" id="girl">女 </p> </form> <script> var userName = document.getElementById('username'); var boy_radio = document.getElementById('boy'); var girl_radio = document.getElementById('girl'); //获取你在文本框输入的值 userName.value; //修改文本框里的值 userName.value='123'; //对于单选框,多选框等等固定的值,boy_radio.value只能取得当前的值 boy_radio.checked;//查看返回结果,是否为true,如果为true,则被选中 boy_radio.checked=true;//赋值为true </script>
-
md5加密
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script> <form action="https://www.baidu.com/" method="post" onsubmit="aaa()"> <p> <span>用户名:</span><input type="text" id="username" name="username"> </p> <p> <span>密码:</span><input type="password" id="password" name="password"> </p> <button type="submit">提交</button> </form> <script> function aaa() { alert("1"); var uname = document.getElementById('username'); var pwd = document.getElementById('password'); console.log(uname.value); //md5算法 pwd.value=md5(pwd.value); console.log(pwd.value); } </script>