初识JavaScript
JavaScript：世界上最流行的脚本语言
JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符发送给浏览器，由浏览器解释运行
Native原生JS开发
原生JS开发，也就是让我们按照【ECMAScript】标准的开发方式，简称ES，特点是所有浏览器都支持，其中：
- ES5（全浏览器支持）
- ES6（常用，当前主流版本：webpack打包成为ES5支持）
引入JavaScript
内部标签
代码位置：一般写在<head>或者<body>的尾端
lesson1/1.我的第一个javaScript程序.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.我的第一个javaScript程序.html</title>
<!--script标签内，写JavaScript代码-->
<script>
//这里的注释跟java是一样的
alert('hello,world');
</script>
</head>
<body>
</body>
</html>
外部引入
- JS代码
lesson1/js/ali.js
alert('hello,ali');
- HTML内部分代码
<!--外部引入 -->
<!--注意：script，必须成对出现 -->
<script src="js/ali.js"></script>
不用显式定义type，也默认为javascript
<script type="text/javascript"></script>
JavaScript基本语法
首先将IDEA的JavaScript版本设置为ES6
File --> Settings --> Languages & Frameworks -->JavaScript
基本语法
变量类型 变量名 = 变量值
lesson1/2.基本语法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.基本语法</title>
<!-- JavaScript严格区分大小写-->
<script>
// 1、定义变量 变量类型 变量名 = 变量值 变量类型只有一个var
var score =71;
// 2、条件控制
if (score>60 && score<70){
alert("60~70");
}else if(score>70 && score<80){
alert("70~80");
}else{
alert("other");
}
//在浏览器的控制台打印变量：console.log(变量名)
</script>
</head>
<body>
</body>
</html>
Google浏览器打开控制台
鼠标右键网页 --> 检查 / 快捷键Ctrl+Shift+I
控制台输出查看变量
-
Elements：获取网页元素 -
Console：控制台 -
Sources：源码 -
Network：抓包 -
Application：查看cookie
浏览器控制台能够比较直观地学习JavaScript
JavaScript调试
1、选择Sources
2、双击打开文件
3、点击行号打断点
4、刷新页面进入调试
JavaScript数据类型
Number
123 // 整数
123.1·// 浮点数
1.123e3 //科学计数法
-99 // 负数
NaN // Not a Number
Infinity // 无限大
- JS不区分小数和整数，全部数字都为Number，不分int，float
- 浮点数问题
(1/3) === (1-2/3)返回false：尽量避免使用浮点数进行运算，存在精度问题
字符串
’abc' "abc"布尔值
true false逻辑运算
&& // 两个都为真，结果为真
|| // 一个为真，结果为真
！ // 真即假，假即真
比较运算符
!= // 不等于
== // 等于（类型不一样，值一样，也会判断为true)
=== // 绝对等于（类型一样，值一样，结果为true)
NaN与所有的值都不想等，包括自己，只能通过isNaN(NaN)来判断这个数是否是NaN
-
null和undefined- null：空
- undefined：未定义
数组
var arr = [1,2,3,4,5,'hello',true,null];
- Java的数组必须是相同类型的对象，JS不需要这样
- 取数组下标越界了，只会undefined，不会报错
对象
var person = {
name: "ali",
age : 3,
tags: ['js','java','web','...']
}
- 对象使用大括号，数组使用中括号
- 每个属性之间使用逗号隔开，最后一个属性不需要逗号
lesson1/3.数据类型.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.数据类型</title>
<script>
console.log((1/3) === (1-2/3)); // false：尽量避免使用浮点数进行运算，存在精度问题
console.log(Math.abs(1/3-(1-2/3))<0.00000000001) // true
// 保证代码的可读性，数组尽量使用[]
var arr = [1,2,3,4,5,'hello',true,null];
new Array(1,2,3,4,5,'hello',true,null);
// Person person = new Person(1,2,3,4,5); Java写法
var person = {
name: "ali",
age : 3,
tags: ['js','java','web','...']
}
</script>
</head>
<body>
</body>
</html>
严格检查模式
作用：预防JavaScript的随意性
要求：
- 保证JavaScript版本为ES6
-
use strict要放在首行，否则控制台不会输出错误 -
局部变量建议都使用let去定义
lesson1/4.严格检查模式.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.严格检查模式</title>
<!--
'use strict'：严格检查模式，预防JavaScript的随意性，
保证JavaScript版本为ES6
要放在首行，否则控制台不会输出错误
局部变量建议都使用let去定义
-->
<script>
'use strict'
let i = 1;
</script>
</head>
<body>
</body>
</html>
字符串
1、正常字符串我们使用单引号或者双引号包裹
2、注意转移字符
\'
\n
\t
\u4e2d \u#### Unicode字符
\x41 ASCII字符
3、多行字符串编写
使用反单引号（Tab键上面，Esc键下面那个）
var msg =
`hello
world
你好呀
你好`
4、模板字符串
let name = 'ali';
let msg = `你好呀,${name}` // 你好呀，ali
5、字符串的长度
str.length
6、字符串的不可变性
7、大小写转换
var student = "student";
student.toUpperCase() //转大写： "STUDENT"
student.toLowerCase()
这里是方法，不是属性，要带括号
8、indexOf
student.indexOf('t') // 1
student.indexOf('u') // 2
9、substring
student.substring(1,5) // "tude"
lesson2/1.字符串.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.字符串</title>
<script>
'use strict';
console.log('a\'');
console.log("a");
let name = 'ali';
let age = 3;
let msg = `你好呀,${name}`
console.log(msg);
</script>
</head>
<body>
</body>
</html>
数组
Array可以包含任意的数据类型
// 通过下标取值和修改值
var arr = [1,2,3,4,5,6]
arr[0] // 1
arr[0] = 1 //arr[0,2,3,4,5,6]
1、length
arr.length
给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会消失
2、indexOf：通过元素获得下标属引
arr.indexOf('xxx')
字符串的"1"和数字1是不同的
3、slice()：截取Array的一部分，返回一个新数组，类似于String中的substring
arr.slice(a,b) // [a,b)
4、push()、pop()
arr.push(('a','b') // 将元素压入到尾部
arr.pop() // 弹出尾部的一个元素
5、unshift()、shift()
arr.unshift('a','b') // 将元素压入到头部
arr.shift() // 弹出头部的一个元素
6、排序sort()
arr.sort()
7、倒排序reverse()
arr.reverse()
8、concat()：连接两个数组
arr.concat([])
concat()并没有修改数组，只是返回一个新的数组
9、join()：打印拼接数组，使用特定的字符串连接
arr.join('x')
10、多维数组
对象
JS对象中，{........}表示一个对象，键值对描述属性 XXX : XXX，多个属性之间使用逗号隔开，最后一个属性不加逗号
// 若干个键值对
var 对象名 = {
属性名 : 属性值，
属性名 : 属性值，
属性名 : 属性值
}
lesson2/2.对象.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.对象</title>
<script>
'use strict';
//定义了一个带有4个属性的person对象
var person = {
name : 'ali',
age : 3,
email : "1314315@qq.com",
score : 100
}
</script>
</head>
<body>
</body>
</html>
1、对象赋值
对象名.属性名 = "xxx"
2、使用一个不存在的对象属性，不会报错，只会undefined
3、动态的删减属性，通过delete删除对象的属性
delete 对象名.属性名
4、动态的添加，直接给新的属性添加值即可
对象名.属性名 = "xxx" // 有则改，无则加
5、判断属性是否在这个对象中
属性名 in 对象名
JS中的所有键都是字符串，值是任意对象
6、hasOwnProperty()：判断一个属性是否是这个对象自身拥有的
toString是person继承Object的，所以它有这个属性，但不是自身拥有
流程控制
1、if判断
<script>
var age = 3;
if(age>3){
alert("haha");
}else if(age = 3){
alert("kuwa~");
}else{
alert("xixi");
}
</script>
2、while循环（避免死循环）
<script>
var age = 3;
while( age < 100 ) {
age = age + 1;
console.log(age);
}
</script>
3、do-while循环
<script>
// 这个至少执行一次，while先判断有可能不执行
do{
age = age + 1;
console.log(age);
}while(age<100)
</script>
4、for循环
<script>
for (let i = 0; i < 100; i++) {
console.log(i);
}
</script>
5、forEach
<script>
var list = [12,3,12,3,12,3,2134,3435]
list.forEach(function (value){
console.log(value);
})
</script>
6、for(var index in object)
<script>
var list = [12,3,12,3,12,3,2134,3435]
//for(var index in object)
for(var num in list){
console.log(list[num])
}
</script>
lesson2/3.流程控制.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.流程控制</title>
<script>
'use strict';
// if判断
/*var age = 3;
if(age>3){
alert("haha");
}else if(age = 3){
alert("kuwa~");
}else{
alert("xixi");
}*/
// while循环,避免程序死循环
/*while(age<100){
age = age + 1;
console.log(age);
}*/
/*// 这个至少执行一次，while先判断有可能不执行
do{
age = age + 1;
console.log(age);
}while(age<100)*/
// for循环
/*for (let i = 0; i < 100; i++) {
console.log(i);
}*/
// forEach循环 5.1就有了
var list = [12,3,12,3,12,3,2134,3435]
/*list.forEach(function (value){
console.log(value);
})*/
// Java方式 for(Type str : el){}
//for(var index in object)
for(var num in list){
console.log(list[num])
}
</script>
</head>
<body>
</body>
</html>
Map和Set
- Map
<script>
var map = new Map([['tom',100],['jack',90],['haha',80]]);
console.log(map.get('tom')) // 通过key获得value
map.delete('tom'); // 删除
map.set('admin',60); // 新增或修改
</script>
- Set
<script>
var set = new Set([3,1,1,6,1]); //
set.add(2); // 添加
set.delete(1); // 删除
console.log(set.has(3)); // 是否包含某个元素
</script>
- for of XXX
<script>
// 通过for of循环 es6新特性
// for of 遍历map
for(let x of map){
console.log(x);
}
// for of 遍历set
for(let x of set){
console.log(x);
}
</script>
lesson/4.Map和Set.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.Map和Set</title>
<script>
'use strict';
// ES6新特性：map和set
// 对应下标遍历人名和成绩比较麻烦
/*var names = ["tom","jack","haha"];
var score = [100,30,80]*/
var map = new Map([['tom',100],['jack',90],['haha',80]]);
/*console.log(map.get('tom')) // 通过key获得value
map.delete('tom'); // 删除
map.set('admin',60); // 新增或修改*/
// 无序不重复
var set = new Set([3,1,1,6,1]);
/*set.add(2); // 添加
set.delete(1); // 删除
console.log(set.has(3)); // 是否包含某个元素*/
var arr = [3,4,5];
arr.name = "213";
//早期的漏洞 name也会被for in 遍历到
for(let x in arr){
console.log(x);
}
// 通过for of循环 es6新特性
for(var x of arr){
console.log(x);
}
// for of 遍历map
for(let x of map){
console.log(x);
}
// for of 遍历set
for(let x of set){
console.log(x);
}
</script>
</head>
<body>
</body>
</html>
函数
方法和函数的区别
方法：对象里面含有方法和属性
函数：扔到对象里面就变成了方法
定义函数
- 方法一
<script>
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
</script>
一旦执行到return代表函数结束，返回结果
如果没有执行return，函数执行完也会返回undefined
- 方法二
<script>
// 定义方式二：这是一个匿名函数，可以把结果赋值给abs，通过abs可以调用函数，与方式一等价
var abs = function (x){
if(x>=0){
return x;
}else{
return -x;
}
</script>
x只代表第一个参数
问题：
-
没有参数或者非数字参数返回NaN
手动定义异常，设置只能传入Number类型参数
if(typeof (x)!=='number'){
throw 'Not a number'
}
-
获取所有的参数
arguments：包含所有的参数
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
-
获取除x外的所有参数
rest：获取除了已经定义参数外的参数的一个数组
function aaa(a,b,...rest){
console.log("a==>"+a);
console.log("b==>"+b);
// rest参数只能放到最后面，必须用...标识
console.log(rest);
lesson2/5.定义函数.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.定义函数</title>
<script>
'use strict';
// 定义方式一
// 一旦执行到return代表函数结束，返回结果
// JavaScript转浏览器的时候会自动在每一句后面加分号，所以不建议return x分两行
// 如果没有执行return，函数执行完也会返回结果，结果就是undefined
/*function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}*/
// 定义方式二：这是一个匿名函数，可以把结果赋值给abs，通过abs可以调用函数，与方式一等价
var abs = function (x){
if(typeof (x)!=='number'){
throw 'Not a number'
}
// console.log("x==>"+x);
// 使用arguments可以拿到所有参数
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
// 参数问题：JavaScript可以传任意个参数，也可以不传递参数
// 多个参数问题
function aaa(a,b,...rest){
console.log("a==>"+a);
console.log("b==>"+b);
// rest参数只能放到最后面，必须用...标识
console.log(rest);
}
</script>
</head>
<body>
</body>
</html>
变量的作用域
在JavaScript中，var定义变量实际是有作用域的
- 在函数中声明，则在函数体外不可以使用(非要实现的话，可以研究一下闭包）
<script>
function ali(){
var x =1;
x = x + 1;
}
x = x + 2; // Uncaught ReferenceError: x is not defined
</script>
- 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
<script>
function ali(){
var x =1;
x = x + 1;
}
function ali2(){
var x ='1';
x = x + 1;
}
</script>
- 内部函数可以访问外部函数的成员，反之则不行
<script>
function ali(){
var x = 1;
// 内部函数可以访问外部函数的成员，反之则不行
function ali2(){
var y = x + 1;
}
var z = y + 1; //Uncaught ReferenceError: y is not defined
}
</script>
- 内外函数变量重名不影响
<script>
function ali(){
var x = 1;
function ali2(){
var x = 'A';
console.log('inner'+x); // 内外函数变量重名不影响
}
console.log('outer'+x);
ali2()
}
</script>
如果ali2()中没有变量x，则输出如下
- 在JavaScript中，函数查找变量是由内向外查找的，如果内部函数存在与外部函数同名的变量，则内部函数会屏蔽外部函数的变量
- JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错
RefrenceError
- 提升变量的作用域
<script>
// 没有yundefined：说明js执行引擎，自动提升y的声明，但是不会提升y的赋值,等价于ali2()
function ali(){
var x = "x" + y;
console.log(x) //xundefined
var y = 'y';
}
function ali2(){
var y;
var x = "x" + y;
console.log(x)
y = 'y';
}
ali()
</script>
JS建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，便于代码维护
- 全局变量
<script>
var x = 1;
function f(){
console.log(x);
}
f()
console.log(x);
</script>
- 全局对象window
<script>
var x = 'xxx'
window.alert(x); // alert()这个函数本身也是window的变量
alert(window.x); // 默认所有的全局变量，都绑定在window对象下
var old_alert = window.alert;
old_alert(x); //有弹窗
</script>
弹窗*3
<script>
window.alert = function (){} //alert被覆盖了
alert(123); //alert失效了，无弹窗
</script>
<script>
// 恢复
window.alert = old_alert;
alert(123); //alert又恢复了
</script>
- 唯一全部作用域
由于所有的全局变量都绑定在window对象下，如果不同的js文件使用了相同的全局变量名，容易出现命名冲突，因此把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题
<script>
var AliApp = {}
// 定义全局变量绑定到AliApp
AliApp.name = 'ali';
ali.add = function (a,b){
return a + b;
}
</script>
- 局部作用域let
<script>
function aaa(){
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1); // for循环结束i=100,最终输出101，i出了循环还能使用
}
</script>
ES6 let关键字，解决局部作用域冲突
<script>
function aaa(){
for (let i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1); // Uncaught ReferenceError: i is not defined
}
</script>
建议大家都是用
let去定义局部作用域的变量
- 常量关键字 const
在ES6之前，只有用全部大写字幕命名的变量就是常量，需要人为遵守不去修改这个变量
<script>
// 在ES6引入了常量关键字 const
const PI = '3.14' // PI是个只读变量
console.log(PI);
//PI = '123'; // 不能修改：Attempt to assign to const or readonly variable
</script>
lesson2/6.变量的作用域.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6.变量的作用域</title>
<script>
'use strict';
/*function ali(){
var x =1;
x = x + 1;
}
//x = x + 2; // Uncaught ReferenceError: x is not defined
// 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function ali2(){
var x ='1';
x = x + 1;
}*/
/* function ali(){
var x = 1;
// 内部函数可以访问外部函数的成员，反之则不行
function ali2(){
var y = x + 1;
}
var z = y + 1; //Uncaught ReferenceError: y is not defined
}*/
/*function ali(){
var x = 1;
function ali2(){
var x = 'A';
console.log('inner'+x); // 内外函数变量重名不影响
}
console.log('outer'+x);
ali2()
}
*/
// 提升变量的作用域
// 没有yundefined：说明js执行引擎，自动提升y的声明，但是不会提升y的赋值,等价于ali2()
// js建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，便于代码维护
/* function ali(){
var x = "x" + y;
console.log(x) //xundefined
var y = 'y';
}
function ali2(){
var y;
var x = "x" + y;
console.log(x) //xundefined
y = 'y';
}
ali()*/
/* // 全局变量
var x = 1;
function f(){
console.log(x);
}
f()
console.log(x);*/
/*// 全局对象window
var x = 'xxx'
window.alert(x); // alert()这个函数本身也是window的变量
alert(window.x); //默认所有的全局变量，都绑定在window对象下
var old_alert = window.alert;
old_alert(x); //有弹窗*/
window.alert = function (){} //alert被覆盖了
alert(123); //alert失效了，无弹窗
/* // 恢复
window.alert = old_alert;
alert(123); //alert又恢复了*/
/* // 唯一全局变量:把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题
var AliApp = {}
// 定义全局变量绑定到AliApp
AliApp.name = 'ali';
ali.add = function (a,b){
return a + b;
}*/
// 局部作用域
/*function aaa(){
for (var i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1); // for循环结束i=100,最终输出101，i出了循环还能使用
}*/
/* //ES6 let关键字，解决局部作用域冲突
function aaa(){
for (let i = 0; i < 100; i++) {
console.log(i)
}
console.log(i+1); // Uncaught ReferenceError: i is not defined
}*/
// 在ES6引入了常量关键字 const
const PI = '3.14' // PI是个只读变量
console.log(PI);
//PI = '123'; // 不能修改：Attempt to assign to const or readonly variable
</script>
</head>
<body>
</body>
</html>
方法
方法就是把函数放在对象里面，对象只有两个东西：方法和属性
- 方法定义在对象内
<script>
var ali = {
name : 'ali',
birth : 2000,
// 方法1写在对象里面
age : function(){
return new Date().getFullYear()-this.birth;
}
};
</script>
- 方法定义在对象外
<script>
var ali = {
name : 'ali',
birth : 2000,
age : getAge
};
function getAge(){
return new Date().getFullYear()-this.birth;
}
</script>
getAge.apply(ali,[]) // this指向了ali这个对象，参数为空
单独调用getAge()，就是window调用，window是没有birth这个属性的
在Java中this是无法指向的，是默认指向调用它的那个对象， 在js中可以使用apply()控制this指向
lesson2/7.方法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>7.方法</title>
<script>
var ali = {
name : 'ali',
birth : 2000,
// 方法1写在对象里面
/*age : function(){
return new Date().getFullYear()-this.birth;
}*/
// 方法2写在对象外面
age : getAge
};
function getAge(){
return new Date().getFullYear()-this.birth;
}
// ali.age():21
// gatAge(): NaN
// 单独调用getAge()，就是windows调用，windows是没有birth的
// Java中this是无法指向的，是默认指向调用它的那个对象
// 在js中可以控制this指向
getAge.apply(ali,[]) // this指向了ali这个对象，参数为空
</script>
</head>
<body>
</body>
</html>
内部对象
标准对象
> typeof 123
< "number"
> typeof '123'
< "string"
> typeof true
< "boolean"
> typeof []
< "object"
> typeof {}
< "object"
> typeof NaN
< "number"
> typeof Math.abs
< "function"
> typeof undefined
< "undefined"
Date日期对象
lesson2/8.Date.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8.Date</title>
<script>
var now = new Date(); // Sun Aug 15 2021 10:55:50 GMT+0800 (中国标准时间)
now.getFullYear(); // 年：2021
now.getMonth(); // 月：7(0-11代表月，因此此时为8月）
now.getDate(); // 日：15
now.getDay(); // 星期几：0（0-6代表星期，0为星期天）
now.getHours(); // 时：10
now.getMinutes(); //分：50
now.getSeconds(); // 秒：55
now.getTime(); // 时间戳：1628996150415(全世界统一：1970.1.1 0点到现在的时间）
new Date(1628996150415); // 用时间戳获得当前时间：Sun Aug 15 2021 10:55:50 GMT+0800 (中国标准时间)
now.toLocaleString(); // 本地时间："2021/8/15上午10:55:50"
now.toUTCString(); // "Sun, 15 Aug 2021 02:55:50 GMT"
</script>
</head>
<body>
</body>
</html>
JSON对象
（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式，简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
在JavaScript中一切皆为对象，任何js支持的类型都可以用JSON来表示，格式如下：
- 对象都用{}
- 数组都用[]
- 所有的键值对都用key:value
lesson2/9.JSON.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9.JSON</title>
<script>
var user = {
name : 'ali',
age : 3,
sex : '女'
}
// 对象转化成json字符串
var jsonuser = JSON.stringify(user); // {"name":"ali","age":3,"sex":"女"}
// json字符串转化为对象
var object = JSON.parse(jsonuser); // 方法一
var object = JSON.parse('{"name":"ali","age":3,"sex":"女"}'); // 方法二
</script>
</head>
<body>
</body>
</html>
JSON和JS对象的区别:JS是对象，JSON是字符串
面向对象编程
原型继承
JavaScript、Java、c#都是面向对象，JavaScript与其他却有些区别
类：模板（是对象的抽象）
对象：具体的实例（是类的具体表现）
原型：
lesson2/10.原型.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.原型</title>
<script>
var Student = {
name : 'ali',
age : 3,
run : function (){ // Student.run():ali run
console.log(this.name+' run');
}
};
var Bird = {
fly : function (){
console.log(this.name+' fly'); // Bird.fly():undefined fly
}
}
var ali = {
name : '阿狸'
}
// ali的原型为Student
ali.__proto__ = Student; // ali.run():阿狸 run
// ali的原型是Bird
ali.__proto__ = Bird; //ali.fly():阿狸 fly
</script>
</head>
<body>
</body>
</html>
当ali的原型为Student时，ali具有Student的属性，如果有同名属性（比如name)，则使用自己的
class继承
lesson2/11.class继承.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11.class继承</title>
<script>
/*// 原始方法
function Student(name){
this.name = name;
}
// 给student新增一个方法：获取student的原型再增加hello属性
Student.prototype.hello = function (){
alert('Hello')
}*/
// ES6后=================
// 引入class关键字
class Student{
// 构造器
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
// 继承
class Junior extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myhello(){
alert('我是一名'+this.grade+'年级小学生');
}
}
var ali = new Student("阿狸");
var peach = new Junior("桃子",6);
</script>
</head>
<body>
</body>
</html>
class继承也还是原型
原型链：对象的最终原型都是指向Object
操作BOM对象
JavaScript和浏览器的关系：JS诞生就是为了能够让它在浏览器中运行
BOM：浏览器对象模型
浏览器内核：
- IE6~11(Windows)
- Chrome(Windows)
- Safari(IOS)
- FireFox（Linux)
window对象
window代表当前浏览器窗口
> window.innerHeight
< 928
> window.innerWidth
< 200
> window.outerHeight
< 1048
> window.outerWidth
< 856
Navigator：封装了浏览器的信息
> navigator.appName // 应用名
< "Netscape"
> navigator.appVersion // 应用版本号
> "5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36"
> navigator.userAgent // 用户前缀
< "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.77 Safari/537.36"
> navigator.platform
< "Win32"
大多数时候，我们不会使用navigator对象，因为会被人为修改，不建议使用这些属性来判断和编写代码
screen：屏幕尺寸
> screen.width // 屏幕大小
< 1920
> screen.height
< 1080
location：当前页面的URL信息
-
百度首页的location
从百度页面跳转到Typing practice页面
location.assign('https://www.keybr.com/')
document：当前的页面，DOM文档树
lesson2/12.Document.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12.Document</title>
</head>
<body>
<dl id = "app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
// 获取具体的文档树结点：就可以动态的删除增加结点
var d = document.getElementById('app')
</script>
</body>
</html>
-
获取结点
-
获取cookie
劫持cookie
淘宝和天猫为例：
1、分别打开淘宝和天猫网页
2、登录淘宝账号，再刷新天猫网页，发现天猫也自动登录了
3、清除cookie，刷新一下，发现又需要重新登录
恶意人员获取你的cookie上传到他的服务器，服务器端可以设置cookie:httpOnly来保证安全
history：浏览器的历史记录
history.back() // 返回
history.forward(）// 前进
history相当于浏览器的这两个键
DOM对象
核心：整个HTML页面就是DOM树形结构
获得节点
lesson3/1.获得Dom节点.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题一</title>
</head>
<body>
<div id="father">
<h1>1.获得DOM节点</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var h1 = document.getElementsByTagName('h1'); // 标签名
var p1 = document.getElementById('p1'); // ID
var p2 = document.getElementsByClassName('p2'); // class
var father = document.getElementById('father');
var childrens = father.children; //获取父节点下的所有子节点
// father.firstChild;
// father.lastChild;
</script>
</body>
</html>
这是原生代码，之后尽量都使用jQuery
更新节点
lesson3/2.更新节点.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.更新节点</title>
</head>
<body>
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
id1.innerText = '123';
id1.innerText = '456'; // 修改文本的值
id1.innerHTML = '<strong>123</strong>'; // 可以解析HTML文本标签
// 操作js
id1.style.color = 'red'; // 属性使用字符串包裹
id1.style.fontSize='20px' // - 转驼峰命名
id1.style.padding = '2em'
</script>
</body>
</html>
- 更改百度页面的节点
1、打开百度首页，知道百度一下按钮的id为su
2、获得该节点后修改节点
删除节点
1、先获取父节点
2、再通过父节点删除自己
lesson3/1.获取DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.获得DOM节点</title>
</head>
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
// 删除节点：方式一
var self = document.getElementById('p1');
var father = self.parentElement; // 获得父节点
father.removeChild(self); // 父节点移除子节点
//方式二:删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意
father.removeChild(father.firstChild);
father.removeChild(father.children[0]);
</script>
</body>
</html>
插入节点
我们获得了某个DOM节点，假设这个DOM节点的内容是空的，我们可以通过innerHTML来添加元素，但是如果这个节点已经存在元素了，这样会覆盖原来的元素
lesson3/3.插入节点.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.插入节点</title>
</head>
<body>
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
</body>
</html>
- 插入已有的节点
<script>
var js = document.getElementById('js'), // 已存在结点
list = document.getElementById('list'); // 将js插入到list中
list.appendChild(js);
</script>
- 插入新的节点
<script>
var newP = document.createElement('p'); // 创建一个新标签
// 添加属性方法一：newP.setAttribute('id','newP');
newP.id = 'newP'; // 添加属性方法二
newP.innerText = 'hello,ali';
//添加到list里面
list.appendChild(newP);
</script>
- 设置标签属性
<script>
var myScript = document.createElement('script');
myScript.setAttribute('type','text/javascript'); // 设置属性：setAttribute(key,value)
</script>
-
获得body节点，改背景色
- 方法一
<script> var body = document.getElementsByTagName('body'); body[0].style.backgroundColor = 'red'; </script>- 方法二
<script> var body = document.getElementsByTagName('body'); body[0].setAttribute('style','background-color:wheat;'); </script>- 方法三
<script> var myStyle = document.createElement('style'); myStyle.setAttribute('type','text/css'); myStyle.innerHTML = 'body{background-color:blue}' document.getElementsByTagName('head')[0].appendChild(myStyle); </script> 把js元素插在ee前面
<script>
// 把js插入到ee前面
var ee = document.getElementById('ee');
list.insertBefore(js,ee); // 祖先节点.insertBefore（newNode,TargetNode):把新节点插入到目标节点前
</script>
操作表单
- 文本框 text
- 下拉框 <select>
- 单选框 <radio>
- 多选框 checkbox
- 隐藏框 hidden
- 密码框 password
- .....
表单的目的：提交信息
lesson3/4.操作表单.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.操作表单</title>
</head>
<body>
<form action="#" method="post">
<p>
<span>用户名：</span><input type="text" id="username" required>
</p>
<!--多选框的值，就是定义好的value -->
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
<input type="submit">
</form>
<script>
// 得到输入框的值
var input_text = document.getElementById('username');
//修改输入框的值
input_text = '123'
/*//对于单选框，多选框等固定的值
用boy.value只能得到man,girl.value得到woman，并不能获取选中了哪个
用boy.checked为true则表示选中了这个
var boy = document.getElementById('boy');
var girl = document.getElementById('girl');
boy.checked = true; // 让男的被选中
*/
</script>
</body>
</html>
提交表单
MD5工具类：<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
lesson3/5.提交表单.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.提交表单</title>
<!-- MD5工具类-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!-- 表单绑定提交事件
onsubmit = 绑定一个提交检测的函数，true false
将这个结果返回给表单，使用onsubmit接收
onsubmit="return check()
-->
<form action="#" method="post" onsubmit="return check()">
<p>
<span>用户名：</span><input type="text" id="username" name="username" >
</p>
<!-- 表单优化
网页抓包到的是带有name属性的，
我们把password放到隐藏域中的md5，
真正的密码却没有被抓包
-->
<p>
<span>密码：</span><input type="password" id="input-password" >
</p>
<input type="hidden" id="md5-password" name="password">
<button type="submit" >提交</button>
</form>
<script>
function check(){
var username = document.getElementById('username');
var password = document.getElementById('input-password');
var md5_password = document.getElementById('md5-password');
/*console.log(username.value);
password.value = '******'; // 1、将password.value设置为*号，别人就看不到了
console.log(password.value);
// 2、将密码经过MD5算法加密
password.value = md5(password.value); // 用户体验不好，提交瞬间密码会自动填充为md5-->设置隐藏域md5_password
*/
md5_password.value = md5(md5_password.value);
// 可以校验判断表单内容，true通过提交，false阻止提交
return false;
}
</script>
</body>
</html>
未加密前
1、password.value = ' ******';
2、password.value = md5(password.value)
jQuery
jQuery库：存在大量的js函数
jQuery中文API：https://jquery.cuishifeng.cn/
获取jQuery：
- 到官网下载：https://jquery.com/download/
1、鼠标右键-->链接另存为
2、粘贴到lib包下
3、导入到HTML文件
<script src="lib/jquery-3.6.0.js"></script>
- CDNjQuery：https://cdn.baomitu.com/jquery
1、复制标签
2、导入到HTML文件
<script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
lesson4/1.初识jQuery.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.初始jQuery</title>
<!--
<script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
-->
<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--
公式：$(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
//原本写法
document.getElementById('test-jquery');
// 选择器就是css的选择器
$('#test-jquery').click(function (){
alert('hello jquery');
})
</script>
</body>
</html>
jQuery选择器
lesson4/2.选择器.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
</head>
<body>
<script>
// 原生js,选择器少，麻烦不好记
// 标签
document.getElementsByTagName()
// id
document.getElementById()
// 类
document.getElementsByClassName()
// jQuery css中的选择器
$('p').click() // 标签
$('#id1').click() // id
$('.class1').click() //类
</script>
</body>
</html>
其他选择器：https://jquery.cuishifeng.cn/
jQuery事件
- 鼠标事件
- 键盘事件
- 其他事件
鼠标事件
lesson4/3.事件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.事件</title>
<script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.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>
// 当网页元素加载完毕之后，响应事件
/*$(document).ready(function (){ // 这个页面已经加载完毕
})*/
// 简写为
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:('+e.pageX+','+e.pageY+')')
})
});
</script>
</body>
</html>
jQuery操作DOM
lesson3/6.操作DOM元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>6.操作DOM元素</title>
<script crossorigin="anonymous" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<ul id="test-u1">
<li class="js">JavaScript</li>
<li name="py">Python</li>
</ul>
<script>
// 节点文本操作
$('#test-u1 li[name=py]').text(); //无参取值
$('#test-u1 li[name=py]').text('py'); //有参设置值
$('#test-u1').html();
$('#test-u1 li[name=py]' ).html('<strong>Python</strong>');
// css操作
$('#test-u1 li[name=py]' ).css({"color":"red","background":"blue"});
// 元素的显示和隐藏：本质 display:none;
$('#test-u1 li[name=py]' ).hide(); //隐藏
$('#test-u1 li[name=py]' ).show(); //显示
$('#test-u1 li[name=py]' ).toggle(); //显示变隐藏，隐藏就变显示
//娱乐测试
$(window).width()
$(window).height()
</script>
</body>
</html>
巩固技巧
1、JS：看jQuery源码，看游戏源码
2、HTML、CSS：扒网站，download下来，修改
