JavaScript
什么是JavaScript
概述
- JavaScript是一门世界上最流行的脚本语言
历史
ECMASctipt他可以理解为JavaScript的一个标准
基本使用
- 内部使用
<script>
alert('hello,world')
</script>
- 外部引入
<script src="../JavaScript/js/qj.js"></script>
- 默认显示定义
<script type="text/javascript"></script>
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- <script> alert('hello,world') </script> --> <script src="../JavaScript/js/qj.js"></script> </head> <body> <!-- 这里也可以存放 --> </body> </html>
基本语法
- 变量类型 var
var split=a
- 定义变量
var score=85;
- 条件控制
if(score>60 &&score<70){
alert('还行');
}else if(score>70&&score<90){
alert('可以')
}else{
alert("很棒")
}
- 审查元素
1.console.log(score) 在浏览器控制台打印变量
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1uSR7yCg-1636547809145)(D:\我的文档\我的图片\Screenshots\JavaScript1.png)]
- 网页源代码
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ePppnjrt-1636547809149)(D:\我的文档\我的图片\Screenshots\屏幕截图(8)].png)
数据类型
- number
ks不区分小数和整数
123 //整数
1213.22 //浮点数
1.23e2 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大
- 字符串
'abc'
"abc"
- 布尔值
ture,false
- 逻辑运算
&& 两个都为真,结果为真
|| 一个为真,结果为真
! 真即真,假即假
- 比较运算符
= 赋值符号
== 等于(类型不一样,值一样,也会为true)
=== 绝对等于(类型一样,值一样,结果为true)
- 须知
- NaN===NaN,这个与多有的数值都不相等,包括自己
- 只能通过自己isNaN(NaN)来判断这个数是否是NaN
- 浮点数问题
<script>
console.log((1/3)===(1-2/3))
</script> //false
尽量避免使用浮点数进行计算,存在精度问题
Math.abs((1/3)-(1-2/3))<0.00000001
- null和undefined
- null 空
- undefined 未定义
- 数组
用中括号
Java中必须相同类型的对象,JavaScript中不需要这样
var arr=[1,2,3,4.5,"hello",null,true]
1.取数组下标,如果越界了就会
undefined
- 对象
对象用大括号
每个属性之间用逗号隔开,最后一个不需要添加
<script>
//Person person =new Person(1,2,3,4,5);
var person={
name:"split",
age:3,
tags:['js','java','web','...']
}
</script>
person.age
>3
person.name
>'split'
person.tags
(4) ['js', 'java', 'web', '...']
严格检查模式strict
- ‘use strict’; 严格检查变量,预防JavaScript的随意性产生的一些问题
<script>
//全局变量 函数内部没有声明的变量自动转化为全局变量
'use strict';
i=1;
</script>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-svfzfyRg-1636547809151)(D:\我的文档\我的图片\Screenshots\屏幕截图(9)].png)
- 局部变量都建议用let来定义
let i=1;
字符串
- 正常字符串我们使用单引号或者双引号来包裹
<script>
'use strict';
console.log('a')
console.log("a")
</script>
- 需要注意转义字符 \
<script>
'use strict';
console.log('a\'')
console.log("a")
</script>
\' 表示是一个字符串
\n 换行
\t 空格
\u4e2d 中 \u#### unicode 字符
\x41 Ascll字符
- 多行字符串的编写(table上面的piao键=》``)
<script>
var sh=`hello
你好
你是猪`
</script>
- 模板字符串
<script>
let name="split";
let age=3;
let mag=`你是猪,${name},${age}`
</script>
- 字符串长度
str.length
-
字符串的可变性,不可变
-
大小写转换(注意这里是方法,不是属性)
//大写
console.log(name.toUpperCase())
SPLIT
console.log(name.toLowerCase())
split
- 获取指定的下标索引
console.log(name.indexOf("t"))
VM312:1 4
- 截取字符串
console.log(name.substring(0,3))
VM406:1 spl
数组(如何存和如何取)
Array可以包涵任意的数据类型
var arr=[1,2,3,4,5]
- 长度
arr.length
arr.length=10
10
console.log(arr)
VM176:1 (10) [1, 2, 3, 4, 5, empty × 5]
注意:加入arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失
- slice()截取array中的一部分,返回一个新数组
arr.slice(2)
(8) [3, 4, 5, empty × 5]
- push:压入到尾部
arr.push(1,2)
12
4.pop弹出一个尾部元素
arr.pop()
2
- unshift() 压入到头部一个元素
arr.unshift(1)
11
arr
(11) [1, 2, 3, 4, 5, empty × 5, 1]
- shift 弹出头部的一个元素
arr.shift(1)
1
arr
(10) [2, 3, 4, 5, empty × 5, 1]
- sort() 排序
arr.sort()
(11) [1, 1, 2, 3, 4, 5, empty × 5]
- reverse 元素反转
arr.reverse()
(11) [empty × 5, 5, 4, 3, 2, 1, 1]
- concat () 拼接
arr.concat(1,1)
(13) [empty × 5, 5, 4, 3, 2, 1, 1, 1, 1]
arr
(11) [empty × 5, 5, 4, 3, 2, 1, 1]
并没有修改数组,只是返回一个新的数组
- join 连接符
打印拼接数组,使用特定的字符串来连接
arr.join("-")
"-----5-4-3-2-1-1"
- 多维数组
arr=[[1,2],[3,4],[5,6]]
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [3, 4]
2: (2) [5, 6]
length: 3
__proto__: Array(0)
- fill 填充
对象
JavaScript中的所有的键都是字符串,值都是任意对象
- 对象赋值
<script>
var 对象名{
属性名:属性值,
属性名:属性值,
属性名:属性值
}
</script>
//定义了一个person对象,他有四个属性
<script>
var person={
name : "split",
age:3,
score:1
}
</script>
- 使用一个不存在的对象赋值,不会报错
person.ggg
undefined
- 动态的删减属性
delete person.age
true
person
{name: "split", score: 1}
- 动态的添加
person.pig="cyx"
"cyx"
person
{name: "split", score: 1, pig: "cyx"}
- 判断这个值是否在这个对象中 xx in xx
'pig' in person
true
'toString' in person
true
'tostring' in person
false
- 判断一个属性是否是这个对象自身拥有的hasOwnProperty
person.hasOwnProperty('toString')
false
person.hasOwnProperty('name')
true
流程控制
- if判断
<script>
var age=1;
if (age>3){
alert("haha")
}else{
alert("wuwa")
</script>
- while循坏 避免程序死循坏
var age=1;
while (age<100){
age=age+1;
console.log(age)
}
do{
age=age+1;
console.log(age)
}while(age<100)
- for循坏
for (let i = 0; i <100 ; i++) {
console.log(i)
}
- forEach循坏
var age=[1,2,54,4,3,2];
age.forEach(function (value)){
console.log(age)
}
- for…in
var age=[1,3,34,5,32]
//for (var num in object){}
for (var num in age){
console.log(age[num])
}
Map 和Set
- Map
var map=new Map([["tom",100],["jack",80]])
var name=map.get("tom");
map.set("haha",1000)
console.log(name)
map.delete("tom")
- Set 无序不重复的集合
var set=new Set([1,1,1,2,3,3,3,4]);
Set(4) {1, 2, 3, 4}
set.add() //添加
set.delete() //删除元素
set.has() //是否含有某个元素
- iterator
使用来遍历迭代我们Map和Set
- 遍历数组
var arr =[3,4,5];
for (var x of arr){
console.log(x)
}
- 遍历map
var map=new Map([["a",2],["b",3],["c",4]]);
for (let x of map){
console.log(x)
}
- 遍历set
var set=new Set([1,2,3]);
for (let x of set) {
console.log(x)
}
函数
定义函数
定义方式一
- 绝对值函数
function abs(x){
if (x>=0){
return x;
}else {
return -x;
}
}
一旦执行到return代表函数结束,返回结束
如果没有执行return,函数执行完也会返回结果,结果就是undefined
定义方式二
var abs = function(x){
}
function(x){}这是一个匿名函数,但是可以把结果赋值给abs,通过abs可以调用函数
调用函数
abs(10) //10
abs(-10) //10
-
参数问题:JavaScript可以传任意参数,可以不传参数
-
假设不存在参数,该如何规避
function abs(x){
if (typeof x!=="number"){
throw"this is no a number"
}
if (x>=0){
return x;
}else {
return -x;
}
}
- arguments : 传递进来的所有参数,是一个数组
var abs=function (x){
console.log(x)
for (var i = 0; i <arguments.length; i++) {
console.log(arguments[i])
}}
- rest 获取除了他之外的所有参数,作为一个新数组
var aaa=function (a,b,...rest){
console.log(a);
console.log(b);
console.log(rest)
}
rest参数只能写在最后面,必须用…标识
变量的作用域
JavaScript,var定义的变量是由作用域的
function abs(){
var x=1;
}
x=x+1;
假设在函数体内声明,则在函数体外不可以使用(要实现》闭包)
如果两个函数使用了相同的变量名,只要在函数内部,就不冲突
function abs(){
var x=1;
}
function abb(){
var x=2;
}
内部函数可以访问函数,反之则不行
function abs() {
var x=1;
function sp(){
var y=x+1;
} var z=y+x;
}
假设,内部函数变量和外部函数的变量,重名
在JavaScript中,函数查找变量从自身函数开始,由内向外查找.假设外部存在这个同名的函数变量,则内部函数会屏蔽外部的变量
function abs() {
var x=1;
function sp(){
var x='A';
console.log("inner"+x) //outer1
}
console.log("outer"+x) //innerA
}
提升变量的作用域
function abs() {
let x="x"+y;
var y="y";
}
结果xundefined
说明:自动提升了y的声明,但是不会提升变量y的赋值
这是JavaScript建立之初就存在的特性,所有的变量都定义在函数的头部,不要乱放,便于代码的防护
function abs() {
var x=1,
y=2,
z,k;
}
- 全局函数
var x=1;
function abs() {
console.log(x);
}
abs();
console.log(x)
全局对象 Window :默认的所有的全局变量,都会绑定在Window对象下
var x="xxx";
alert(x)
alert(window.x)
alert这个函数本身也是一个Window函数
- JavaScript实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错(
RefrenceError
)
var x="xxx";
alert(x)
var old_alert=window.alert;
window.alert=function (){
}
window.alert=old_alert;
window.alert(123)
- 规范
由于我们所有的全部变量都会绑定到我们的Window上,如果不同的js文件,使用了相同的全局变量,冲突
//唯一全局变量
var split={};
//定义全局变量
split.name="split";
split.add=function (a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局变量名字冲突的问题
jQuery
- 局部作用域
function aaa() {
for (var i = 0; i <100 ; i++) {
console.log(i)
}
console.log(i+1); //除了这个作用域外还可以使用
let关键字,解决局部作用域冲突问题
function aaa() {
for (let i = 0; i <100 ; i++) {
console.log(i)
}
console.log(i+1);
- 常量 const
在ES6之前,只有全部用大写命名的变量就是常量,建议不要修改
var PI="3.14";
PI="333";
在ES6引用常量关键字 const 只读常量
方法
- 定义方法:方法就是把函数放在对象的里面,对象只有两个东西:属性和方法
var split={
name:"split",
brith:2000,
//方法
age:function (){
var now =new Date().getFullYear();
return now-this.brith;
}
//属性
split.name
//方法
split.age()
this是无法指向的,是默认指向调用他的那个对象
- apply
function getage(){
var now =new Date().getFullYear();
return now-this.brith;
}
var split={
name:"split",
brith:2000,
//方法
age:getage
};
getage.apply(split,[]);
在js中控制this的指向
内部对象
- 标准对象
typeof 123
"number"
typeof "1"
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof {}
"object"
typeof []
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
Date
- 基本时间
var now=new Date();
now.getFullYear(); //年
now.getMonth(); //月
now.getDate(); //日
now.getDay(); //星期几
now.getHours(); //时
now.getMinutes(); //分
now.getSeconds(); //秒
now.getTime(); //时间戳 全世界统一
console.log(new Date(43543513)) //时间戳转为时间
- 转换
now.toLocaleString()
"2021/11/10 下午2:53:01"
now.toGMTString()
"Wed, 10 Nov 2021 06:53:01 GMT"
JSON
- 什么是JSON
JSON (JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。——百度百科
数据传输是我们在敲代码时,经常遇到的一个场景,前后端交互。给数据一个统一的格式有利于我们编写和解析数据。
早期,所有数据传输习惯使用XML文件
在JavaScript一切皆为对象,任何js支持的类型都可以用SON来表示
- 格式
- 对象都用{}
- 数组都用[]
- 所有的键值对都用key"value
var user ={
name:"split",
age:12,
sex:"man"
}
//对象转化为JSON字符串
var jsonuser=JSON.stringify(user);
//JSON字符串转化为对象 参数为字符串
var obj=JSON.parse('{"name":"split","age":12,"sex":"man"}');
Ajax
- 原声的js写法,xhr 异步请求
- jQuery封装好的方法$("#name").ajax("")
- axios请求
面向对象编程
什么是对象对象
JavaScript有些区别
类:模板
对象:具体的实例
在JavaScript这个换思维方式
proto
var user ={
name:"split",
age:12,
sex:"man",
run:function (){
console.log(this.name+"run....")
}
}
var xiaoshuai={
name: "小帅"
}
xiaoshuai._proto_=user;
Class继承
- 定义一个类,属性,方法
function Student(name){
this.name=name;
}
//给student新增一个方法
Student.prototype.hello=function (){
alert("hello")
}
//ES6
// 定义一个学生的类
class Student{
constructor() {
this.name.name;
}
hello(){
alert("hello")
}
}
var split =new Student("split");
var xiaoshuai =new Student("xiaoshuai");
split.hello()
class oldStudent extends Student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
myGrage(){
alert("小帅是一个小学生")
}
}
let split=new Student("split");
let shuai=new oldStudent("shuai",23);
原型链
java中是继承
操作BOM对象
BOM:浏览器对象模型
- JavaScript和浏览器关系
JavaScript为了能让他在浏览器中运行
- IE
- Chrome
- Safari
- FireFox
- Opera
- 三方浏览器
QQ浏览器
360浏览器
- Window
Window代表浏览器窗口
window.innerHeight
722
window.innerWidth
982
window.outerHeight
824
window.outerHeight
824
- Navigator
navigator.appCodeName
"Mozilla"
navigator.appName
"Netscape"
navigator.userActivation
UserActivation {hasBeenActive: true, isActive: true}
大多数时候我们不建议使用navigator
对象,因为会被人为修改
- Screen
代表屏幕尺寸
screen.width
1536
screen.height
864
- location
代表当前页面的URL信息
host: "localhost:63342"
href: "http://localhost:63342/JavaScript/JavaScript/1.html?_ijt=m8fmbhgsh
protocol: "http:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('')
- document
代表当前页面信息
获取具体的文档树节点
<dl id="app">
<dt>aaa</dt>
<dt>bbb</dt>
<dt>ccc</dt>
</dl>
<script>
var dl=document.getElementById('app');
</script>
获取cookie
document.cookie
""
劫持cookie原理
<script src="aa.js"></script>
//恶意人员,获取你的cookie上传到他的服务器
服务器可以设置 cookie:httpOnly
- history
history.back() //前进
history.forward() //后退
操作DOM对象
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>
//对应css的选择器
var h1=document.getElementsByTagName('h1')
var p1=document.getElementById('p1')
var p2=document.getElementsByClassName('p2')
var father=document.getElementById('father')
var children=father.children; //获取父节点下的所有子节点
father.firstChild;
father.lastChild
</script>
这是原生代码,之后我们尽量都是用jQuery()
更新节点
<div id="id1">
</div>
<script>
var id1=document.getElementById('id1');
id1.innerText=’1234‘; //可以修改文本的值
id1.innerHTML=‘<strong>123</strong>’; //可以解析HTML文本标签
</script>
操作js
id1.style.color='red'
id1.style.fontSize='20px'
id1.style.padding.length='22'
id1.style.paddingBottom='50px'
删除节点
删除节点的步骤:
先获取父节点,在通过父节点删除自己
var father=p1.parentElementById("pi");
father.removeChild(p1)
father.removeChild(father.children[0])
注意:删除多个节点的时候,children时候在时刻变化,删除节点的时候一定要注意
插入节点
我们获得了某个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');
list.appendChild(js);
</script>
- 创建一个新的标签
var newP=document.createElement('p');
newP.id='newp';
newP.innerText='hello';
list.appendChild(newP)
- 创建一个标签节点
var myScript=document.createElement('script');
myScript.setAttribute('type','text/javascript')
list.appendChild(myScript)
- insertBefore
var se=document.getElementById('se');
var ee=document.getElementById('ee');
var list=document.getElementById('list');
list.insertBefore(se,ee)
操作表单(验证)
表单是什么
-
文本框 :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="women" id="girl">女
</p>
</form>
<script>
var inputname=document.getElementById('username')
var boy_radio=document.getElementById('boy')
var girl_radio=document.getElementById('girl')
inputname.value //获取输入框的值
inputname.value='123'; //修改输入框的值
//对于单选框,多选框等等固定的值
boy_radio.checked; //查看返回值的结果是否为true,如果为true,则被选中
boy_radio.checked=true;
</script>
- 提交表单
<form action="https://www.baidu.com/" method="post" onsubmit="aaa()">
<p>
<span>用户名</span><input type="text" id="username" name="username"></p>
<p>
<p>
<span>密码</span><input type="password" id="input-password" name="password"></p>
<!-- 绑定时间 onclick 被点击-->
<button type="submit" id="md5-password">提交</button>
</form>
<script>
function aaa(){
alert(1)
var uname=document.getElementById('username')
var pwd=document.getElementById('input-password')
var md5pwd=document.getElementById('md5-password')
md5pwd.value=md5(pwd.value);
return true;
}
</script>
jQuery
JavaScript
jQuery库,里面存在大量的JavaScript函数
- 获取jQuery
- 引入cdn
<script src="<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>">
//公式
$(selector).action()
<a href="" id="eee">点我</a>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js">
$('#eee').click(function (){
alert("你是猪");
})
</script>
- 选择器
css中里面的选择器都能用
- 事件 action
- 鼠标事件
- 键盘事件
- 其他事件
- 获取鼠标位置
<!DOCTYPE html>
<html lang="en">
<!--表单绑定提交事件
onsubmit 绑定一个提交监测的函数 true false
将这个结果返回给表单,是哦用onsubmit 接受
-->
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style>
#divMove{
width: 500px;
height: 500px;
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
- 节点文本操作
$('#text-ul li[id=aaa]').text(); //获得值
$('#text-ul li[id=aaa]').text(‘123’); //设置值
$('#text-ul').html(); //获得值
$('#text-ul').html(‘<strong>123</strong>’); //设置值
- css的操作
$('#text-ul').css
$('#text-ul').css("color","red");
- 元素的显示和影藏 本质display
$('#text-ul').show();
$('#text-ul').hide();
$('#text-ul').toggle();