JavaScript笔记
JavaScript笔记
1、Javascript简介
Javascript是一门世界上最流行的脚本语言，其源代码在发往客户端之前不需要经过编译，而是将文本格式交由浏览器解释运行。
起源：由网景公司的Brendan Eich用10天就开发出来了。
一个合格的后端开发者，必须精通 JavaScript
ECMAScript是 JavaScript 的一个标准，已经到es6版本
但是大部分浏览器还只停留在支持es5代码上
导致开发环境和线上环境，版本不一致。
1、JavaScript框架
- JQuery：简化了DOM操作
- Angular：
- React：
- Vue：一款渐进式JavaScript框架
- Axios：
UI框架
- Ant Design：
- Bootstrap：
- AmazeUI：
主流前端框架：Vue.js
前端开发主要使用框架
2、快速入门
2.1、引入JavaScript
2.1.1、内部标签
<!-- script标签内，写JavaScript代码 -->
<script>
alert("Hello world");
</script>
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- script标签内，写JavaScript代码 -->
<script>
alert("Hello world");
</script>
</head>
<body>
</body>
</html>
2.1.2、外部引入
<!-- script标签必须成对出现
不能使用闭合标签
-->
<script src="MyFirstJavascript.js"></script>
例子：
MyFirstJavascript.js
alert("Hello world");
Myfirst.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- script标签必须成对出现
不能使用闭合标签
-->
<script src="MyFirstJavascript.js"></script>
</head>
<body>
</body>
</html>
2.2、基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 单行注释
/* 多行注释 */
/*
* 多行注释
* */
// 1. 定义变量 变量类型 变量名 = 变量值
var num = 1;
var name = "qinjiang";
// alert(num); // 弹窗显示 num的值
// 2.条件控制
var score = 65;
if (score > 60 && score < 70){
alert("及格");
}
// console.log(score) 在浏览器控制台打印变量
</script>
</head>
<body>
</body>
</html>
2.3、数据类型
数值，文本，图形，音频，视频…
变量
声明变量时，变量名可以是字母，数字，下划线，$符号，也可以是中文，与java类似，首个字符不能是数字开头
var
let // ES6 新特性，用于声明局部作用域的变量
2.3.1 number
js不区分小数和整数，Number
123 // 整数123
122.2 // 浮点数122.2
1.123e3 //科学计数法
-99 //
NaN. // not a number
Infinity //表示无限大
2.3.2 字符串
‘abc’ “abc”
2.3.3 布尔值
true, false
2.3.4 逻辑运算
&& // 两个都为真，结果为真
|| // 一个为真，结果为真
! // 真即假，假即真
2.3.5 比较运算法
= //
== // 等于（类型不一样，值一样，也会判断为true
=== // 绝对等于（类型一样，值一样，结果true
123
- 这是JS的缺陷，坚持不要使用 == 比较
- 只能通过 isNaN(NaN)来判断
浮点数问题：
console.log((1/3) == (1-2/3)); // 结果不相等
1
尽量避免使用浮点数进行运算，存在精度问题！
console.log(Math.abs((1/3) - (1-2/3) < 0.00000001));
2.3.6 null 和 undefined
- null 空
- undefined 未定义
2.3.7 数组
java 的数组必须是相同类型的对象，JS中不需要这样！
// 保证代码可读性，尽量使用[]
var arr = [1,2,3, 'hello', null, true];
console.log(arr);
new Array(1,2, 3, 'hello', null, true);
取数组下标越界时，返回 undefined
2.3.8 对象
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个不需要添加
var person = {
name: "张三",
age: 3,
tags: ['js', 'java', 'web', '...']
}
取对象的值
person.name
> "张三"
person.age
> 3
2.3.9 严格检查模式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
'use strict'; // 严格检查模式
// 全局变量
// i = 1;
// 局部变量 ES6 let
let i = 1;
script>
head>
<body>
body>
html>
3、数据类型
3.1 字符串
3.1.1 正常的字符串我们使用单引号，或者双引号包裹
3.1.2 注意转移字符 \
\'
\n
\t
\u4e2d
\x41 Asc11字符
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
console.log('\'a\'');
console.log('\n');
console.log("\u4e2d");
console.log("\x41");
</script>
</head>
<body>
</body>
</html>
3.1.3 多行字符串编写
// tab键上面的 piao 键，esc键下面
var msg = `hello
world
你好呀
你好 `
3.1.4、模版字符串
let name = "张三";
let age = 1;
let msg2 = `你好呀，${name}`;
console.log(msg2);
3.1.5、字符串长度
str.length
1
3.1.6、字符串的可变性，不可变
3.1.7、大小写转换
12345
3.1.8、student.indexOf(‘t’)
3.1.9、substring
student.substring(1); // 下标从1开始，所以是从第二个字符串截取到最后一个
student.substring(1, 3); // 下标从1开始，到3结束
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
// console.log('\'a\'');
// console.log('\n');
// console.log("\u4e2d");
// console.log("\x41");
// tab键上面的 piao键，esc键下面
// var msg = `hello
// world
// 你好呀
// 你好
//
// `
//
// let name = "张三";
// let age = 1;
// let msg2 = `你好呀，${name}`;
// console.log(msg2);
let student = "我是一个学生";
console.log(student.substring(1)); // 下标从1开始，所以是从第二个字符串截取到最后一个
console.log(student.substring(1,3)) // 下标从1开始，到3结束
</script>
</head>
<body>
</body>
</html>
3.2 数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6]; // 通过下标取值和赋值
arr[0];
arr[2] = 3;
123
1、长度
arr.length
1、长度
arr.length
1
注意：加入给arr.length赋值，数组大小就会发生变化～，如果赋值过小，元素就会丢失
2、indexOf，通过元素值获得下标索引
arr.indexOf(2);
1
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict'; // 严格检查模式
let student = "我是一个学生";
console.log(student.indexOf("我"));
console.log(student.indexOf("个"));
</script>
</head>
<body>
</body>
</html>
输出：
0
3
12
3、slice() 截取Array 的一部分，返回一个新的数组，类似于java 中的 String 中的 substring
例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
'use strict';
let student = "我是一个学生";
console.log(student.slice(1)); // 从下标1开始向后截取
console.log(student.slice(0,2)); // 从下标0开始截取到下标2
script>
head>
<body>
body>
html>
输出：
是一个学生
我是
12
4、push()，pop()
push() // 将元素压入到尾部
pop() // 将尾部的元素弹出
5、unshift(), shift()头部
unshift() // 压入到头部
shift() // 弹出头部的一个元素
12
例子：
arr
(5) [1, 2, 3, 4, 5]
arr.shift();
1
arr
(4) [2, 3, 4, 5]
arr.unshift(7);
5
arr
(5) [7, 2, 3, 4, 5]
arr.reverse(); //元素反转
(5) [5, 4, 3, 2, 7]
arr
(5) [5, 4, 3, 2, 7]
6、排序 sort()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
var arr = ["C", "B", "A"];
console.log("原来的数组" + arr)
console.log("排序后的数组" + arr.sort());
</script>
</head>
<body>
</body>
</html>
输出：
原来的数组C,B,A
排序后的数组A,B,C
7、元素反转 reverse()
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
var arr = ["C", "B", "A"];
console.log("原来的数组" + arr)
console.log("反转后的数组" + arr.reverse());
</script>
</head>
<body>
</body>
</html>
输出：
原来的数组C,B,A
反转后的数组A,B,C
8、concat()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
var arr = ["C", "B", "A"];
console.log("原来的数组" + arr)
console.log("concat后的数组" + arr.concat([1,2,3]));
console.log("再次查看数组arr ：" + arr);
</script>
</head>
<body>
</body>
</html>
输出：
原来的数组C,B,A
concat后的数组C,B,A,1,2,3
再次查看数组arr ：C,B,A
123
注意：concat()并没有修改数组，只是返回新数组
9、连接符 join
打印拼接数组，使用特定的字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
var arr = ["C", "B", "A"];
console.log("原来的数组" + arr)
console.log("拼接后的数组" + arr.join('-'));
</script>
</head>
<body>
</body>
</html>
输出：
原来的数组C,B,A
拼接后的数组C-B-A
10、多维数组
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
var arr = [[1,2],[3,4],["5","6"]];
console.log("arr[1][1] = " + arr[1][1]);
</script>
</head>
<body>
</body>
</html>
输出：
arr[1][1] = 4
数组：存储数据，要知道如何存，如何取，方法可以自己实现
3.3、对象
若干个键值对
var 对象名 = {
属性名:属性值,
属性名2:属性值,
.....
}
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var person = {
name: "张三",
age: 4,
hobby: "编程"
}
console.log(person);
</script>
</head>
<body>
</body>
</html>
输出：
{name: "张三", age: 4, hobby: "编程"}
JS对象，{…}表示一个对象，键值对描述属性xxx:xxx,
各个属性之间使用英文逗号隔开，最后一个属性不加逗号！
JavaScript中的所有的键都是字符串，值是任意对象！
1、对象赋值
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var person = {
name: "张三",
age: 4,
hobby: "编程"
}
console.log("原来的名字：" +person.name);
person.name = "李四";
console.log("修改后的名字：" + person.name);
script>
head>
<body>
body>
html>
输出：
原来的名字：张三
修改后的名字：李四
2、使用一个不存在的对象属性，不会报错！undefined
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var person = {
name: "张三",
age: 4,
hobby: "编程"
}
console.log("不存在的属性person.adress " +person.adress);
script>
head>
<body>
body>
html>
输出：
不存在的属性person.adress undefined
3、动态删减属性，通过delete 删除对象的属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var person = {
name: "张三",
age: 4,
hobby: "编程"
}
console.log("原来的person ==> ");
console.log(person);
delete person.name;
console.log("修改后的person ==> ");
console.log(person);
script>
head>
<body>
body>
html>
输出：
原来的person ==>
{name: "张三", age: 4, hobby: "编程"}
修改后的person ==>
{age: 4, hobby: "编程"}
4、动态的添加，直接给新的属性添加值即可
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var person = {
name: "张三",
age: 4,
hobby: "编程"
}
console.log("原来的person ==> ");
console.log(person);
person.adress = "北京"; // 添加地址为北京
console.log("修改后的person ==> ");
console.log(person);
script>
head>
<body>
body>
html>
输出：
原来的person ==>
{name: "张三", age: 4, hobby: "编程"}
修改后的person ==>
{name: "张三", age: 4, hobby: "编程", adress: "北京"}
5、判断属性值是否在这个对象中！ xxx in xxx !
例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var person = {
name: "张三",
age: 4,
hobby: "编程"
}
//console.log("判断person中是否存在age属性 ==> ");
console.log("age" in person);
script>
head>
<body>
body>
html>
输出：
true
判断是否存在toString()
例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var person = {
name: "张三",
age: 4,
hobby: "编程"
}
// 判断Person中是否存在 toString()
console.log("toString" in person);
script>
head>
<body>
body>
html>
输出：
true
说明 person类继承的父类中存在 toString()
6、判断一个属性是否是这个对象自身拥有的。用hasOwnProperty()
person.hasOwnProperty('toString');
false
person.hasOwnProperty('age');
true
3.3、流程控制
if判断
var age = 3;
if(age > 3){
alert("大于3岁！");
}else if(age > 5){
alert("大于3岁，而且大于5岁！")
}else{
alert("不大于3岁");
}
循环（while）
do while
while(age < 100){
age = age + 1;
console.log(age);
}
do{
age = age + 1;
console.log(age);
}while(age < 10)
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制</title>
<script>
'use strict';
var age = 3;
while (age < 6){
age = age + 1;
console.log(age);
}
</script>
</head>
<body>
</body>
</html>
输出：
4
5
6
for循环
for(let i = 0; i < 100; i++){
console.log(i);
}
例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制title>
<script>
'use strict';
for (let i = 0; i < 3; i++){
console.log(i);
}
script>
head>
<body>
body>
html>
输出：
0
1
2
forEach循环
var age = [12, 3, 12, 3, 5]
// 函数
age.forEach(function (value){
console.log(value);
})
for…in
for(var num in age){
console.log(age[num]);
}
当不知道遍历的对象有多少个元素时，可以使用 for…in
3.5、Map 和 Set
ES6才有的新特性～
例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制title>
<script>
'use strict';
// ES6
// 学生的成绩，学生的名字
// var names = ["tom", "jack", "jane"];
// var scores = [100, 90, 80];
var map = new Map([['tom', 100], ['jack', 90],['jerry', 80]]);
var name = map.get('tom');
console.log(name);
map.set('admin', 456);
console.log(map);
script>
head>
<body>
body>
html>
输出：
100
Map(4) {"tom" => 100, "jack" => 90, "jerry" => 80, "admin" => 456}
map.set() 添加或者修改一个元素
map.delete()删除一个元素
Set :无序不重复的集合
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制title>
<script>
'use strict';
var set = new Set([3, 1, 1, 1, 1, 1]); // set可以自动去重复
console.log(set);
script>
head>
<body>
body>
html>
输出：
Set(2) {3, 1}
set的add()
set的delete()
set的has()
set.add(2); // 添加
set.delete(1); // 删除
console.log(set.has(3)); // 是否包含某个元素
例子：
1
3.6、iterator
ES6的新特性
for…in
/*
* for...of 遍历出来的 number是arr数组的元素值
* */
var arr = [3, 4, 5];
for (let number of arr) {
console.log(number);
}
遍历map可以使用 for…of
遍历set也可以使用 for…of
如果数组新增了元素，那么 for…in遍历的下标就可能出现异常。
4、函数
方法：对象（属性，方法）
函数：
4.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;
}
}
function(x){…} 这是一个匿名函数，但是可以吧结果赋值给abs，通过abs就可以调用函数！
方式一和方式二是等价的！
调用函数
abs(10)
abs(-10)
12
参数问题：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);
for (var i = 0; i < arguments.length; i++){
console.log(arguments[i]);
}
if (x >= 0){
return x;
}else {
return -x;
}
}
问题：arguments会包含所有的参数，我们有时候想要使用多余的参数
rest
以前：
if (arguments.length > 2){
for (var i = 2; i < arguments.length; i++){
// ......
}
}
ES6 引入的新特性，获取除了已经定义的参数之外的所有参数
function aaa(a, b, ...rest){
console.log("a ==> " + a);
console.log("b ==> " + b);
console.log(rest);
}
输出：
aaa(1)
a ==> 1
b ==> undefined
[]
undefined
aaa(1,2,3)
a ==> 1
b ==> 2
[3]
undefined
rest 参数只能写在最后面，必须用…标示
4.2、变量的作用域
在JavaScript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用～（非要想实现的话，后面可以研究一下闭包)
function test(){
var x = 1;
x = x + 1;
}
x = x + 2; // uncaught Reference error: x is not defined
如果两个函数使用了相同的变量名，只要都在函数体内声明，就不会冲突。
function test(){
var x = 1;
x = x + 1;
}
function test2(){
var x = 'A';
x = x + 1;
}
function test(){
var x = 1;
// 内部函数可以访问外部函数的成员，反之则不行
function test2(){
var y = 'A' + x;
}
var z = y + 1;
}
外部的函数定义了一个变量名与内部的函数定义的变量名重名的话，内部函数会变成未定义。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量的作用域</title>
<script>
function test(){
var x = 1;
function test2(){
var x = 'A';
console.log('内部的x = ' + x);
}
console.log('外部的x = ' + x);
}
</script>
</head>
<body>
</body>
</html>
浏览器控制台访问函数 test() test2()
输出：
test()
外部的x = 1
undefined
test2()
VM171:1 Uncaught ReferenceError: test2 is not defined
at <anonymous>:1:1
提升变量的作用域
function test(){
var x = "x" + y;
console.log(x);
var y = "y";
}
test();
结果：xunderined
说明：JS执行引擎，自动提升了y的声明
这个是JavaScript在建立之初就存在的特性，所以所有定义的变量必须将声明写在函数的头部，不要乱放，便于代码维护；
全局函数
var 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 = 'xxx';
window.alert(x);
var old_alert = window.alert;
window.alert = function(){
};
// 发现 alert()失效了
window.alert(123);
// 恢复
window.alert = old_alert;
window.alert(456);
javaScript 实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错 ReferenceError
规范
由于我们所有的全局变量都会绑定到window 上，如果不同的JS 文件，使用了相同的全局变量，如何减少冲突？
// 唯一全局变量
var KuangApp = {};
// 定义全局变量
KuangApp.name = "kuangshen";
KuangApp.add = function (a, b){
return a + b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。
JQuery
局部作用域 let
ES6 let关键字，解决局部作用域冲突的问题
原本使用var 声明变量：
function aaa(){
for (var i = 0; i < 5; i++){
console.log(i);
}
console.log(i + 1); // 出了for循环后 i 依旧可以使用
}
ES6 开始使用let 声明变量：
function aaa(){
for (let i = 0; i < 5; i++){
console.log(i);
}
console.log(i + 1); // 出了for循环后 i 不可以使用
}
var声明的例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量的作用域title>
<script>
function aaa(){
for (var i = 0; i < 5; i++){
console.log(i);
}
console.log(i + 1); // 出了for循环后 i 依旧可以使用
}
console.log(aaa());
script>
head>
<body>
body>
html>
输出：
0
1
2
3
4
6
let声明的例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量的作用域title>
<script>
function aaa(){
for (let i = 0; i < 5; i++){
console.log(i);
}
console.log(i + 1); // 出了for循环后 i 不可以使用
}
console.log(aaa());
script>
head>
<body>
body>
html>
输出：
0
1
2
3
4
Uncaught ReferenceError: i is not defined
建议使用let声明局部作用域的变量。
常量 const
在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值！
如：
var PI = '2.14';
console.log(PI);
PI = '123'; // 可以改变这个值
console.log(PI);
在ES6 引入了常量关键字 const
const PI = '2.14'; // 只读变量
console.log(PI);
PI = '123'; // 这里会报错
4.3、方法
定义方法
方法就是把函数放在对象里面，对象只有两个东西：属性和方法
var zhangsan = {
name: '张三',
birth: 2020,
// 方法
age: function (){ // age()是一个方法
// 今年 - 出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
}
另一种写法：
function getAge(){
// 今年 - 出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
var zhangsan = {
name: '张三',
birth: 2020,
// 方法
age: getAge
}
this是无法指向的，默认指向调用它的那个对象
例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方法title>
<script>
var zhangsan = {
name: '张三',
birth: 2020,
// 方法
age: function (){
// 今年 - 出生的年
var now = new Date().getFullYear();// 获取当前时间的年份
return now - this.birth; // 当前时间年份减去出生的年份
}
}
console.log(zhangsan.age());
script>
head>
<body>
body>
html>
输出：由于今年是2021年，所以输出结果是1
1
Apply
在JS 中可以控制 this 的指向
function getAge(){
// 今年 - 出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
var zhangsan = {
name: '张三',
birth: 2020,
// 方法
age: getAge
}
getAge.apply(zhangsan, []); //this， 指向了zhangsan这个对象
例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方法title>
<script>
function getAge(){
// 今年 - 出生的年
var now = new Date().getFullYear();
return now - this.birth;
}
var zhangsan = {
name: '张三',
birth: 2020,
// 方法
age: getAge
}
getAge.apply(zhangsan, []); //this， 指向了zhangsan这个对象
script>
head>
<body>
body>
html>
5、内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准对象title>
<script>
console.log(typeof 123);
console.log(typeof '123');
console.log(typeof true);
console.log(typeof NaN);
console.log(typeof []);
console.log(typeof {});
console.log(typeof Math.abs);
script>
head>
<body>
body>
html>
输出：
number
string
boolean
number
object
object
function
5.1、Date
基本使用
var now = new Date();
now.getFullYear(); // 年
now.getMonth(); // 月 0-11 代表 1-12月份
now.getDate(); // 日
now.getDay(); // 星期几
now.getHours(); // 时
now.getMinutes(); // 分
now.getSeconds(); // 秒
now.getTime(); // 时间戳，全世界同一 1970年1月1日 00:00:00 毫秒数
console.log(new Date(1618537830145)); // 时间戳转对应的时间
转换
now.toLocaleString(); //调用方法
now.toGMTString(); // +8时区的时间
5.2、JSON
json 是什么
早期，所有数据传输习惯使用XML文件！
- JSON (JavaScript Object Notation, JS对象简谱) 是一种轻量级的数据交换格式。
- 简介和信息的层次结构使得JSON成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在 JavaScrept 中一切皆为对象、任何 JS 支持的类型都可以 用 JSON 来表示； number， string…
格式：
- 对象都用{}
- 数组都用 []
- 所有的键值对都用 key:value
JSON 字符串 和 JS 对象的转化
var user = {
name: "张三",
age: 3,
sex: '男'
}
// 对象转化为json 字符串 {"name":"张三","age":3, "sex":"男"}
var jsonUser = JSON.stringify(user);
// json 字符串转化为对象 参数为 json 字符串
var obj = JSON.parse('{"name":"张三","age":3, "sex":"男"}');
JSON 和 JS 对象的区别
var obj = {a:'hello', b:'hellob'};
var json = '{"a":"hello", "b":"hellob"}'
BSON仿照JSON
5.3、Ajax
- 原生的 JS 写法 ：xhr 异步请求
- JQuery封装好的方法 ${"#name"}.ajax("")
- axios 请求
6、面向对象编程
JavaScript、Java、C#…面向对象；
JavaScript有些区别！
- 类：模板
- 对象：具体的实例
类是实体的抽象
在JavaScript 这个需要大家转换一下思考方式
原型：
var zhangsan = {
name: "张三",
age: 3,
run: function (){
console.log(this.name + " run....");
}
};
var lisi = {
name: "李四"
};
var bird = {
fly: function (){
console.log(this.name + " fly....");
}
};
// 李四的原型指向张三
lisi.__proto__ = zhangsan;
// 张三的原型指向鸟
zhangsan.__proto__ = bird;
function Student(name){
this.name = name;
}
// 给student 新增一个方法
Student.prototype.hello = function (){
alert('helle');
}
class 继承
class关键字，是在ES6 引入的
- 定义一个类，属性，方法
// ES6 之后 =>
// 定义一个学生的类
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
var zhangsan = new Student("张三");
var lisi = new Student("李四");
例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class继承title>
<script>
// ES6 之后 =>
// 定义一个学生的类
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
var zhangsan = new Student("张三");
var lisi = new Student("李四");
console.log(zhangsan.hello());
console.log(lisi.hello());
script>
head>
<body>
body>
html>
输出：浏览器弹两次弹窗都显示：
hello
<script>
// ES6 之后 =>
// 定义一个学生的类
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 zhangsan = new Student("张三");
var lisi = new XiaoStudent("李四", 1);
console.log(lisi.myGrade());
</script>
本质还是原型
例子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class继承title>
<script>
// ES6 之后 =>
// 定义一个学生的类
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 zhangsan = new Student("张三");
var lisi = new XiaoStudent("李四", 1);
console.log(lisi.myGrade());
script>
head>
<body>
body>
html>
输出：
我是一名小学生
原型链
__proto__
我们自己的对象最终指向Object对象，Object对象指向Object对象的原型
7、操作BOM元素（重点）
浏览器介绍
JavaScript 和浏览器的关系：
JavaScript诞生就是为了能够让它在浏览器中运行！
BOM: 浏览器对象模型
- IE 6 ~ 11
- Chrome
- safari
- Firefox
window
windwo代表浏览器窗口
window.alert(1)
window.innerHeight
window.innerwidth
window.outerHeight
window.outerwidth
Navigator
Navigator, 封装了浏览器的信息
navigator.userAgent
navigator.appName
navigator.platform
大多数时候，我们不会使用navigator对象，因为会被人为修改。
不建议使用这些属性来判断和编写代码
screen
screen.width
screen.height
location（重要）
location 代表当前页面的URL信息
host:"www.baidu.com"
href:"https://www.baidu.com"
protocol:"https:"
reload:f reload() // 刷新网页
// 设置新地址
location.assign('https://xxx.com')
document
document代表当前的页面，HTML DOM文档树
document.title
document.title = 'xxx'
获取具体的文档树节点
<dl id="app">
<dd>狂神说</dd>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var getDL = document.getElementById('app');
</script>
获取 Cookie
documet.cookie
劫持 cookie 原理
恶意人员通过获取你的 cookie 上传到他的服务器
服务器端可以设置 cookie: httpOnly
history 代表浏览器的历史记录，不建议使用
history.back() // 后退
history.forward() //前进
8、操作DOM对象（重点）
DOM：文档对象模型
8.1、核心
浏览器网页就是一个DOM树形结构
- 更新：更新DOM节点
- 遍历DOM节点：得到DOM节点
- 删除：删除一个DOM节点
- 添加：添加一个新的节点
要操作一个DOM节点，就必须要先获得这个DOM节点
var getH1 = document.getElementsByTagName('h1');
var getP1 = document.getElementById('p1');
var getP2 = document.getElementsByClassName('p2');
var father = document.getElementById('father'); //获得 父节点下的所有子节点
这是原生代码
8.2、更新节点
<div id="id1">
</div>
<script>
var id1 = document.getElementById('id1');
</script>
操作文本
id1.innerText = '123' // 修改文本的值
id1.innerHTML = '123' //可以解析HTML文本标签
操作CSS
id1.style.color = 'yellow'; // 属性使用 字符串包裹
id1.style.fontSize = '100px';
id1.style.padding = '2em';
8.3、删除节点
步骤：先获取父节点，再通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1标签</p>
<p class="p2">p2标签</p>
</div>
<script>
var self = document.getElementById('p1'); // 通过id找到自己
var father = p1.parentElement; // 通过自己找到父节点
father.removeChild(self); // 通过父节点移除自己
// 删除是一个动态的过程
// father.removeChild(father.children[0])
// father.removeChild(father.children[1])
注意：删除多个节点时，children是在时刻变化的。
8.4、插入节点
我们获得了某个DOM节点，假设这个DOM节点是空的，我们通过innerHTML 就可以增加一个元素，但是这个DOM
追加
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入节点title>
head>
<body>
<p id="js">JavaScriptp>
<div id="list">
<p id="se">JavaSEp>
<p id="ee">JavaEEp>
<p id="me">JavaMEp>
div>
<script>
var js = document.getElementById('js');
var list = document.getElementById('list');
list.appendChild(js); // 追加到后面
var newP = document.createElement('p'); // 创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello, Kuangshen';
// 创建一个标签节点（通过这个可以设置属性）
var myScript = document.createElement('script');
myScript.setAttribute('type', 'text/javascript');
// 创建一个 style 标签
var myStyle = document.createElement('style'); // 创建了一个空的 style标签
myStyle.setAttribute('type', 'text/css');
myStyle.innerHTML = 'body{background-color: chartreuse;}'; // 设置标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
script>
body>
html>
insertBefore
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>插入节点title>
head>
<body>
<p id="js">JavaScriptp>
<div id="list">
<p id="se">JavaSEp>
<p id="ee">JavaEEp>
<p id="me">JavaMEp>
div>
<script>
var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点 insertBefore (newNode, targetNode)
list.insertBefore(js, ee); // 插入到id 为ee的标签的前面
script>
body>
html>
9、操作表单（验证）
9.1、什么是表单？
form DOM树
- 文本框 text
- 下拉框.
- 单选框. radio
- 多选框. checkbox
- 隐藏域. hidden
- 密码框. password
- …
表单的目的：提交信息
9.2、获得表单要提交的信息
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单title>
head>
<body>
<form action="">
<p><span>用户名：span> <input type="text" id="username">p>
<p>
<span>性别：span>
<input type="radio" name="sex" value="man" id="bot">男
<input type="radio" name="sex" value="women" id="girl">女
p>
form>
<script>
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('bot');
var girl_radio = document.getElementById('girl');
// 得到输入框的值
input_text.value
// 修改输入框的值
input_text.value = '123'
// 对于单选框，多选框等等固定的值，boy_radio.value 只能取到当前的值
boy_radio.checked; // 查看返回的结果，是否为true ， 如果为true， 则被选中
girl_radio.checked = true; // 赋值
script>
body>
html>
9.3、提交表单
<form action="" method="post" onsubmit="return aaa()">
<p><span>用户名：span> <input type="text" id="username">p>
<p>
<span>密码：span>
<input type="password" id="input-password">
<input type="hidden" id="md5-password" name="password">
p>
<button type="submit" onclick="aaa()">提交button>
form>
<script>
function aaa(){
var uname = document.getElementById('username');
var pwd = document.getElementById('password');
console.log(uname.value);
console.log(pwd.value);
var md5pwd = document.getElementById("md5-password");
md5pwd.value = md5(pwd.value);
// 可以校验判断表单内容，true就是通过提交， false阻止提交
return true;
}
script>
10、jQuery
JavaScript
jQuery 库，里面存在大量的 JavaScript 函数
10.1、获取 jQuery
通过百度搜索 jQuery
找到 https://jquery.com
在官方网站下载即可
或者通过搜索 cdn jquery，使用别人提供的cdn链接加速下载
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="lib/jquery-3.6.0.js">script>
head>
<body>
<a href="" id="test-jquery">点我a>
<script>
document.getElementById('id');
// 选择器就是CSS的选择器
$('#test-jquery').click(function (){
alert('hello, jQuery');
})
script>
body>
html>
10.2、选择器
<script>
// 原生态 JS ：选择器少，麻烦不好记
// 标签
document.getElementsByTagName();
// id
document.getElementById();
// 类
document.getElementsByClassName()
// jQuery
$('p').click(); // 标签选择器
$('#id1').click(); // id选择器
$('.class').click(); // 类选择器
script>
文档工具站：https://jquery.cuishifeng.cn/
10.3、事件
鼠标事件，键盘事件，其他事件
$('.class').mousedown(); // 鼠标按下
$('.class').mousemove(); // 鼠标移动
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件title>
<script src="lib/jquery-3.6.0.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 (){
// $('#divMove').mousemove(function (e){
// $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY)
// })
// })
// 上面的简写方式
$(function (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY)
})
})
script>
body>
html>
10.4、操作DOM
$('#test-ul li[name=python]').text(); // 获得值
$('#test-ul li[name=python]').text('abc'); // 设置字符串值
$('#test-ul li[name=python]').text(123); // 设置数值
$('#test-ul').html(); //获得值
$('#test-ul').html('<strong>123strong>');//设置值
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="lib/jquery-3.6.0.js">script>
head>
<body>
<ul id="test-ul">
<li class="js">JavaScriptli>
<li name="python">Pythonli>
ul>
<script>
// document.getElementById('')
$('#test-ul li[name=python]').text(); // 根据 id为 test-ul查询到
// 特定的ul标签，再根据li[name=python]找到
// 特定的li标签，然后调用text()获取li标签的内容
$('#test-ul').html();
script>
body>
html>
10.5、CSS操作
$('#test-ul li[name=python]').css("color", "red");
10.6、元素的显示和隐藏
$('#test-ul li[name=python]').show(); // 显示
$('#test-ul li[name=python]').hide(); // 隐藏
本质： display: none
未来 ajax（）；
$('#from').ajax()