JavaScript快速入门

1.快速入门

1.1引入JavaScript

1.内部标签

<script>//...
</script>

2.外部引入

qj.js

alert('hello,world');

引入

<script src="js/qj.js">
</script>

测试

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--script标签内写js代码-->
<!--    <script>alert('hello,world');</script>--><!--外部引入--><!--script必须成对标签--><!--javascript不用显示定义type，默认就是javascript--><script src="js/qj.js"></script>
</head>
<body></body>
</html>

2.基本语法入门

<!--JavaScript严格区分大小写-->
<script>//1.定义变量 var 变量名 =变量值var score=88;var name='张三';console.log(name);//控制台输出//2.条件控制if(score>60 && score<70){alert("60~70");}else if(score>70 && score<80){alert("70~80");}else {alert("other");}/*** 多行注释*/
</script>

3.数据类型

数值，文本，图形，音频，视频。。。

变量

var _$ =值

number

js不区分小数和整数,Number

123//整数
123.1//浮点数
1.123e3//科学计数法
-99//负数
NaN//not a number
Infinity//无限大

字符串

‘abc’ “abc”

‘\n’

布尔值

true , false

逻辑运算

&& 两个都为真结果为真

|| 一个为真结果为真

！取反

比较运算符

=赋值

==等于（类型不一样，值一样，，会判断为true）

===绝对等于（类型一样值一样，结果为true）

注意：NaN===NaN，这个与所有的数值都不相等，包括自己，只能通过isNaN判断

浮点数问题

<script>console.log((1/3)===(1-2/3));
</script>

尽量避免使用浮点数进行运算，存在精度问题

console.log(Math.abs(1/3-(1-2/3))<0.000000000001);

null和undefined

null空
undefined未定义

数组

Java的数组必须是相同类型的对象，js不需要

//保证代码的可读性，尽量使用[]
var arr=[1,,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello',null,true);

取数组下标越界，就会报undefine

对象

数组是中括号，对象是大括号

每个属性需要逗号隔开，最后一个不需要

var person={name: "qinjiang",age: 3,tags: ['js','java','web','...']
}

取对象的值

person.name

4.严格检查模式

'use strict';//严格检查模式，预防JavaScript的随意性导致产生的一些问题
//局部变量建议使用let定义
//全局变量
var i=1;
//ES6 let
let a=2;

'use strict’必须写在JavaScript的第一行

5.数据类型

5.1字符串

1.正常字符串使用单引号，或者双引号包裹

2.注意转义字符\

\'
\n
\r
\u4e2d Unicode字符
"\x41" Ascll

3.多行字符串

var msg=`
hello
world
`

4.模板字符串

let name="zhangsan";
let age=3;
let msg=`你好啊，${name}`;

5.字符串长度

console.log(str.length)

6.字符串的可变性，不可变

7.大小写转换

msg.toLocaleUpperCase();
msg.toLocaleLowerCase();

8.msg.indexOf();获取指定下标

9.msg.substring(1);从到一个截取到最后

msg.substring(1,2);//[1,2)

5.2数组

Array可以包含任意的数据类型

var arr=[1,2,3,4,5,6];

1.长度

arr.length;

注意：假如给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

2.indexof

arr.indexOf();

字符串的“1”和数字1是不同的

3.slice（）截取Array的一部分，返回一个新数组

arr.slice(1,3);[1,3)

4.push(),pop()

push压入到尾部pop弹出尾部的一个元素

5.unshift(),shift()头部

unshift：压入头部
shift：弹出头部的一个元素

6.排序

arr.sort()

7.元素反转

arr.reverse()

8.concat()数组拼接

arr.concat(1,2,3)//并没有修改数组，只是返回一个新数组

9.连接符join()

打印拼接数组，使用特定字符串连接

arr.join('-');

10.多维数组

arr[[12],[3]];
arr[1,1];

数组：存储数据（如何存，如何取，方法可以自己实现）

5.3对象

若干个键值对

let 对象名={属性名: 属性值,属性名: 属性值,属性名: 属性值
};let person={name: "wushuang",age: 3,sex: 1,score: 99
};

Js中对象，{…}表示一个对象。键值对描述属性xxx: xxx,多个属性之间使用逗号隔开，最后一个属性不加逗号

JavaScript中所有的键都是字符串，值是任意对象

1.对象赋值

person.name="wushaung"
'wushaung'

2.使用一个不存在的对象属性，不会报错

undefined

3.动态的删减属性，通过delete删除对象的属性

delete person.name
true
person
{age: 3, sex: 1, score: 99}

4.动态的添加，直接给新的属性添加值即可

person.a="aa"

5.判断属性值是否在这个对象中 xxx in xxx

'age' in person
true
'toString' in person
true

继承的父类的方法也可以找到

6.判断一个属性是否是这个对象自身的

person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false

5.4流程控制

if判断

var age=3;
if(age>3){alert("hh");
}else {alert("ww");
}

while循环，避免死循环

var age=3;while (age<100){age +=1;console.log(age);
}do{age +=1;console.log(age);
}while(age<100)

for循环

var age=3;for (let i = 0; i < 100; i++) {console.log(i);
}

forEach循环 5.1

var age=[1,2,3,4,5,6,7,8];
//函数
age.forEach(function (value) {console.log(value)
})

for in

 var age=[1,2,3,4,5,6,7,8];
for(var num in age){console.log(age[num])
}

出的是索引

5.5Map和Set

Map:

//学生的成绩，学生的名字
var map=new Map([['tom',100],['jack',90],['haha',80]]);
var name=map.get('tom'); //通过key获取value
map.set('admin',123456);//新增或者修改
console.log(name);
map.delete //删除一个元素

Set:无序不重复

var set=new Set([3,1,1,1,1,1]);//set可以去重
set.add(2); //添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素

5.6iterator es6

通过for…of获取值

for…in获取下标

var arr=[3,4,5];
for (var x of arr){console.log(x);
}

遍历map

var map=new Map([['tom',100],['jack',90],['haha',80]]);
for(let x of map){console.log(x)
}

遍历set

var set=new Set([1,2,3,4,5,6,7]);
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(10)
abs(-10)

参数问题：JavaScript可以传任意个参数，也可以不传递参数

参数进来是否存在的问题：假设不存在参数，先判断

function abs(x){if(typeof x!='number'){throw 'not a number';//手动抛出异常来判断}if(x>=0){return x;}else{return -x;}
}

arguments

arguments是一个JS免费赠送的关键字

多个参数时，可以通过arguments遍历出来

代表传递进来的所有参数，是一个数组，可以拿到隐藏的参数

function abs(x){if(arguments.length>1){console.log(arguments[1]);}if(typeof x!='number'){throw 'not a number';}if(x>=0){return x;}else{return -x;}
}

问题：arguments会包含所有的参数，有时候只想使用除当前参数来进行操作，需要排除当前已有的参数。

rest

获取除了已经定义的参数之外的所有参数…

以前：

function aaa(a, b) {console.log("a=>"+a);console.log("b=>"+b);if(arguments.length>2){for (let i=2;i<arguments.length;i++){console.log(arguments[i]);}}
}

现在：

function aaa(a, b,...rest) {console.log("a=>"+a);console.log("b=>"+b);console.log(rest);
}

rest参数只能写在最后，必须用…标识

6.2，变量的作用域

JavaScript中，var定义变量实际是有作用域的

假设在函数体中声明，则在函数体外不可使用~（闭包）

function qj() {var x=1;x=x+1;
}
x=x+1;//Uncaught ReferenceError: x is not defined

如果两个函数使用相同的变量名，只要在函数内部，就不影响

 function qj() {var x=1;x=x+1;}
function qj2() {var x=1;x=x+1;
}

内部函数可以访问外部函数的成员，外部不能访问内部

function qj() {var x=1;x=x+1;function qj2() {var y=x+1; //2}var z=y+1; //Uncaught ReferenceError: y is not defined
}

内外函数变量同名，由内向外查找，假设外部存在，同名的函数变量，内部函数会屏蔽外部函数的变量

 function qj() {var x=1;x=x+1;function qj2() {var x='a'; //2console.log('inner'+x);}qj2();console.log('outer'+x);
}

提升变量的作用域

// 'use strict'function qj() {var x='x'+y;console.log(x);var y='y';
}

结果：xundefined

说明：Js执行引擎，自动提升y的声明，但是不会提升变量y的赋值

定义变量先声明再赋值,所有的变量都放在头部，不用乱放，便于维护

var x,y,z,h;

全局函数

'user strict'
//全局变量
var x=4;
function f() {console.log(x);
}
f();
console.log(x);

全局对象windows

var x='xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象中

alter()这个函数，本身也是window的一个变量

// 'user strict'
var x='xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象中
var old_alter= window.alert;
//old_alter(x);
window.alert=function () {};
//发现alter（）失效
window.alert(123);//恢复
window.alert=old_alter;
window.alert(456);

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数范围内找到，就会向外查找，如果没有在全局作用域中找到，就会报错ReferenceError

规范：

由于所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，减少冲突

//唯一全局变量
var WuShuang={};
//定义全局变量
WuShuang.name='无双';
WuShuang.add=function (a,b) {return a+b;
}

把自己的代码全部放到自己定义的唯一空间命名中，降低全局命名冲突的问题

局部作用域

function aaa() {for (var i = 0; i < 100; i++) {console.log(i);}console.log(i+1);//i 出了作用域还能用
}

使用let关键字，解决局部作用域冲突

function aaa() {for (let i = 0; i < 100; i++) {console.log(i);}console.log(i+1);//i 出了作用域还能用
}

建议使用let

常量const

在ES6，只有用全部大写命名的就是常量，建议不要修改

var  PI='3.14';
console.log(PI);
PI='222';
console.log(PI);

发现可以改变这个值

const PI='3.14';//只读变量
console.log(PI);
PI='222';//直接报错

6.3，方法

定义方法：方法就是把函数放到对象的里边，对象只有两个东西，属性和方法

var wushuang={name: '无双',birth: 2001,age: function () {//今年-出生var now=new Date().getFullYear();return now-this.birth;}
}
//属性
wushuang.name
//方法，一定带()
wushuang.age()

this.始终指向调用它的人

拆开上代码

function getAge() {//今年-出生var now=new Date().getFullYear();return now-this.birth;
}
var wushuang={name: '无双',birth: 2001,age: getAge()
}

this是无法指向的，默认指向调用它的对象

apply

在js中控制this指向的对象

function getAge() {//今年-出生var now=new Date().getFullYear();return now-this.birth;
}
var wushuang={name: '无双',birth: 2001,age: getAge
};
getAge.apply(wushuang,[]);//this指向了wushuang，参数为空

7.内部对象

标准对象

typeof 123
'number'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof aa
'undefined'

7.1,Date

基本使用

var now =new Date(); //Wed Jun 22 2022 14:18:38 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getMinutes();//秒now.getTime();//时间戳 1970 1.1 0：00：：

转换

new Date(1655878718669);//时间戳转换为时间now.toLocaleString()//获取本地时间，注意调用的是方法，不是属性
'2022/6/22 14:18:38'

7.2，Json

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示：

格式：

对象都用{}
数字都用[]
所有的键值对都是用key：value

JSON字符串和JS对象的转化

var user={name: "无双",age: 3,sex: '男'
}
//对象转换为JSON字符串
var jso_user=JSON.stringify(user);
//json字符串转换为对象
var obj=JSON.parse('{"name":"无双","age":3,"sex":"男"}');

JSON和JS对象区别

var obj={a : 'b',b : 'hellob'};
var json='{"a":"hello","b":"hellob"}'

7.3,Ajax

原生的js xhr异步请求
JQuery $(#nname).ajax(“”)
axios请求

8.面向对象编程

原型：父类

var user={name: "无双",age: 3,run: function () {console.log(this.name+"run....");}
}
var xiaoming={name: "小明"
}
//原型对象
var Bird={fly: function () {console.log(this.name+"fly....");}
}
// 小明的原型是user
xiaoming.__proto__= Bird;

class继承

function Student(name) {this.name=name;
}
//给 student 新增方法
Student.prototype.hello=function () {alert('hello');
}
//ES6之后
// 定义一个学生的类
class Student{constructor(name){this.name=name;}hello(){alert('hello');}
}
xiaoming.name
'小明'
xiaoming.hello()

继承

// 定义一个学生的类
class Student{constructor(name){this.name=name;}hello(){alert('hello');}
}
class pupil extends Student{constructor(name,grade){super(name);this.grade=grade;}myGrade(){alert('我是一名小学生');}
}
var xiaoming=new Student("小明");
var xiaohong=new pupil("张三",2);

本质还是原型

原型链

__ proto __

9.操作BOM对象

JavaScript和浏览器的关系

JavaScript诞生就是未来让他在浏览器中运行

BOM：浏览器对象模型

window

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
406
window.innerWidth
1396
window.outerWidth
1536
window.outerHeight
816

navigator

navigator封装了浏览器信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36'
navigator.platform
'Win32'

大多时候，不使用navigator对象，因为会被人为修改

不建议使用这些属性来判断和编写代码

screen

代表屏幕的尺寸

screen.width
1536px
screen.height
864px

location

location代表当前的URL信息

host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/JavaScript/lesson02/class%E7%BB%A7%E6%89%BF.html?_ijt=4hdtbo9kftmj9u5hg2l3t8lrki"
port: "63342"
protocol: "http:"location.reload()//刷新网页
location.assign('https://www.bilibili.com/')//设置新地址

document

document代表当前页面,HTML DOM文档树

获取具体的文档树节点

<dl id="app"><dt>Java</dt><dd>JavaSE</dd><dd>JavaEE</dd>
</dl><script>var dl=document.getElementById('app');
</script>

可以获取客服端的cookie

document.cookie

劫持cookie

服务端可以设置cookie为httpOnly

history

代表浏览器的历史记录

history.back()//后退
history.forward()//前进

10.操作DOM对象

DOM：文档对象模型

核心

浏览器网页就是一个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.getElementById('father');
var children=father.children//获取父节点下的所有节点
// father.firstChild;
// father.lastChild;

原生代码，之后尽量使用jquery

更新节点

id1.innerText=‘123’ 修改文本值
id1.innerHTML=‘123’ 可以解析html标签

操作css

id1.style.color=‘red’ 操作css样式使用驼峰命名

删除节点

删除节点步骤，先获取父节点，再删除自己

father.removeChild(p1)
//删除是一个动态的过程
father.removeChild(father.children[0])

可以直接通过父节点删除子节点，也可以通过子节点得到父节点，删除多个节点的时候，children是在时刻变化的

插入节点

我们获得某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了就不能使用了，因为会发生覆盖

追加

<p id="js">JavaScrpt</p>
<div id="list"><p id="JavaEE">JavaEE</p><p id="JavaSE">JavaSE</p><p id="JavaME">JavaME</p>
</div>
<script>let js = document.getElementById('js');let list = document.getElementById('list');list.append(js);//追加到最后
</script>

创建新节点

<script>let js = document.getElementById('js');let list = document.getElementById('list');let newp = document.createElement('p');newp.id='newp';newp.innerText='hello,world';list.append('newp');//创建一个标签节点，通过这个标签可以设任意值let myScript = document.createElement('script');myScript.setAttribute('type','text/javascript');</script>

插入一个节点

<script>let js = document.getElementById('js');let list = document.getElementById('list');let newp = document.createElement('p');newp.id='newp';newp.innerText='hello,world';list.append('newp');//创建一个标签节点let myScript = document.createElement('script');myScript.setAttribute('type','text/javascript');// var body=document.getElementsByTagName('body');// body[0].setAttribute('style','background-color:red');let mystyle = document.createElement('style');mystyle.setAttribute('type','text/css');mystyle.innerText='body{ background-color: green;}';let head = document.getElementsByTagName('head');head[0].appendChild(mystyle);</script>

insert

<script>let se = document.getElementById('JavaSE');let js = document.getElementById('js');let list = document.getElementById('list');list.insertBefore(js,se);//新节点，插入位置节点
</script>

11.操作表单

获取表单信息

<script>var text_input=document.getElementById('username');var boy_redio=document.getElementById('boy');var girl_redio=document.getElementById('girl');//得到输入框的值text_input.value;//修改输入框的值text_input.value='222';//对于单选框，多选框等，固定的值，xxx.value只能获得当前的值boy_redio.checked;//查看结束是否是true 如果为true则被选中</script>

MD5加密

<!--表单绑定 使用return 进行校验判断-->
<form action="#" method="post" onsubmit="return aaa()"><table><tr><td>用户名:</td><td><input type="text" id="username" name="username"></td></tr><tr><td>密码:</td><td><input type="password" id="password" ></td></tr><tr><td><input type="hidden" id="md5_password" name="password"></td></tr><tr><td><button type="submit" >登录</button></td></tr></table><script>function aaa() {let uname = document.getElementById('username');let pwd = document.getElementById('password');let md5pwd = document.getElementById('md5_password');md5pwd.value=md5(pwd.value);return true;}</script>
</form>

使用隐藏域，不会出现显示密码变长

12.jQuery

jQuer库，里面有大量的javascript

获取jQuery

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body></body>
</html>

使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>--><script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--公式：$(选择器).action()--><a href="" id="test-jquery">点我</a><script>//css选择器$('#test-jquery').click(function () {alert('hello,jQuery');})
</script>
</body>
</html>

选择器

//原生js，选择器少
//标签选择器
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();//jQuery css 中的选择器 它全部能用
$('p').click()//标签
$('#id1').click()//id
$('.class2').click()//class

文档工具站：https://jquery.cuishifeng.cn/

事件

鼠标事件，键盘事件，其他事件

鼠标事件：

mousedown事件：鼠标按下触发
mouseup事件：松开鼠标时触发
mouseover事件：点击结束触发
mousemove事件：鼠标移动触发
mouseenter事件：光标进入元素上时触发。
mouseleaver事件：用户的光标离开元素时触发。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/jquery-3.6.0.js"></script><style>#divMove{width: 450px;height: 450px;border: 2px solid aquamarine;}</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>

键盘事件

1.keydown()事件
当按钮被按下时，发生 keydown 事件。

2.keypress()事件
keypress 当按钮被按下时，会发生该事件，我们可以理解为按下并抬起同一个按键。

3.keyup事件
keyup 事件会在按键释放时触发，也就是你按下键盘起来后的事件

操作DOM

$('#test-ul li[name="python"]').text();//获取值
$('#test-ul li[name="python"]').text('sss');//设置值$('#test-ul').html();//获得值$('#test-ul').html('<strong>123</strong>');//操作值

css的操作

3.6版本是：

如果低版本是,隔开

$('#test-ul li[name="python"]').css({"color":"red"});

元素显示和隐藏

$('#test-ul li[name="python"]').hide();//show()显示 hide()隐藏
$('#test-ul li[name="python"]').toggle();//显示与隐藏 交换