目录
1、JS与HTML、CSS之间的关系
- HTML：网页的结构（骨）
- CSS：网页的表现（皮）
- JS：网页的行为（魂）
通俗解释为：HTML就是一只刚出生的小鸟，毛都没有长出来着，而CSS则是小鸟已经长出羽毛了，甚是好看，而JS则是小鸟已经学会翱翔，会飞了，可以动了
JavaScript 的能做的事情:
- 网页开发(更复杂的特效和用户交互)
- 网页游戏开发
- 服务器开发(node.js)
- 桌面程序开发(Electron, VSCode 就是这么来的)
- 手机 app 开发
JS运行过程
- 编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
- 双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)
- 浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)
- 得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)
注：
- 浏览器分成渲染引擎 + JS 引擎.
- 渲染引擎: 解析 html + CSS, 俗称 "内核"
- JS 引擎: 也就是 JS 解释器. 典型的就是 Chrome 中内置的 V8
- JS 引擎逐行读取 JS 代码内容, 然后解析成二进制指令, 再执行.
2、JS前置知识
2.1、JS的书写形式
2.1.1、行内式
直接嵌入到HTML元素内部
例如：
<input type="button" value="按钮" onclick="alert('hello js')">效果：
注：
- JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示.
- HTML 中推荐使用双引号, JS 中推荐使用单引号
2.1.2、内嵌式
写到script标签中
<script>
alert('hello js');
</script>2.1.3、外部式
写在单独的.js文件中
注：
使用alert显示弹窗提示是一种很常见的交互方式，但是使用js来进行输出，使用console.log更为常见。毕竟使用弹窗了打印，毕竟比较烦，用户看了体验也很不好。
在浏览器开发者工具中，有一个控制台，在这个控制台上就能使用js的输出语句，看到输出的内容，如果出现了语法错误控制台上也会有提示。
如下：
<script>
console.log('haha');
</script>
2.2、输入输出
输入：prompt——弹出一个输入框
prompt("输入姓名：");输出：alert——弹出一个警示对话框，输出结果
alert("hello");在控制台打印日志（供程序员看）
3、JS语法
3.1、变量的使用
基本用法
创建变量（定义变量、变量声明、变量初始化）
var name = "小龙";
let age = 19;var和let都是JS中创建变量的关键字，更建议使用let(var的坑比较多，这里咱们后端的程序员就不必深究了）
注：
- =的两侧建议有一个空格
- 每个语句结尾建议使用一个英文的分号（可以省略）
- 初始化的值如果是字符串，需要用单引号或者双引号引起来
- 初始化的值如果是数字，可直接赋值
使用变量
console.log(age);//读取内容
age = 30;//修改变量内容3.2、理解动态类型
1、JS的变量类型是程序员在运行过程中才确定的（运行到的语句才可以确定类型）
let a = 10;//数字
let b = "haha";//字符串2、随着程序运行，变量的类型也会发生改变
let a = 10;//数字
a = "haha";//字符串3.3、基本数据类型
- number: 数字. 不区分整数和小数.
- boolean: true 真, false 假.
- string: 字符串类型.
- undefined: 只有唯一的值 undefined. 表示未定义的值.
- null: 只有唯一的值 null. 表示空值.
3.3.1、number数字类型
JS中不区分整数和浮点数，统一用“数字类型”来表示
数字进制表示
let a = 07;//八进制整数，0开头
let b = 0xa;//十六进制整数，0x开头
let c = 0b10;//二进制整数，以0b开头特殊的数字值
- NaN，表示非数字值，一般字符串与数字进行非加法运算会出现，为什么加法不会出现，因为+也能表示字符串拼接，可以使用isNaN函数来判断计算结果是否是NaN。
- Infinity，无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围。
- -Infinity，负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围。
var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' - 10);3.3.2、string字符串类型
基本规则
字符串字面值需要使用引号引起来，单、双引号均可
如何解决字符串中已经包含了字符串？
let msg = "My name is "zhangsan""; // 出错
let msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引
号.
let msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
let msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号转义字符
有些字符不方便直接输入：
- \n
- \\
- \'
- \"
- \t
求长度
使用String的length属性即可（单位：字符）
let a = 'hehe';
console.log(a.length);字符串拼接
使用+进行拼接
let a = "my name is ";
let b = "小龙";
console.log(a + b);数字与字符串拼接
let c = "my score is ";
let d = 120;
console.log(c + d);3.3.3、Boolean布尔类型
console.log(true + 1);
console.log(false + 1)3.3.4、undefined未定义数据类型
一个变量没有被初始化过，结果就是undefined，是undefined类型
let a;
console.log(a);undefined和字符串进行相加，结果进行字符串拼接
console.log(a + "10"); // undefined10endefined和数字进行相加，结果为NaN (not a number)
console.log(a + 10);3.3.5、null空值类型
null表示当前的变量是一个“空值”
var b = null;
console.log(b + 10); // 10
console.log(b + "10"); // null103.4、运算符
js的运算符与其他语言的运算符基本上一模一样，就不多说了。
但是还是有不同的部分的，主要就是比较相等的运算符。==与!=：表示比较两个变量的值是否相等。===与!==：表示比较变量的值与类型是否相等。
let a = 10;
let b = "10";
console.log(a == b);//true
console.log(a === b);//false
逻辑运算符也和其他语言有区别，区别主要在运算返回的值并不是true和false，这个值到底是什么，其实与短路效应是有关的。
- &&：表示且，比如a&&b，如果表达式a为假，则结果为a的值，如果表达式a为真，则结果为b的值。
- ||：表示或，比如c||d，如果表达式c为真，则结果为c的值，如果表达式c为假，则结果为d的值。
let x = null;
if (x == null) {
x = 0;
}
//相当于
x = x || 0;
3.5、条件语句、循环语句
条件语句、循环语句没什么好说的，和Java一样
3.6、数组
3.6.1、数组的基本操作
创建数组
//1
let arr1 = new Array();
//2
let arr2 = [];
//3
let arr3 = [1,2,3,4,5,6,7,8,9,0];
//4
let arr4 = [1,"sss","777",2.33,null,undefined];
//5
let arr5 = [12,[],[1,3,5,null,"sss"],false,true];
由于js里面的类型为弱类型，基本上什么类型的值都能赋值，所以js的数组什么都可以放，可以理解为java的Object数组，但不完全相同。
输出数组：
//基本语法：
console.log(数组名);
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
console.log(arr5);
let arr = [1,2,3,4,5,6,7,8,9,0];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
3.6.2、越界访问数组
js的数组是可以越界访问的，得到的结果是undefined。
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr[100]);
console.log(arr[-1]);
结果：
越界修改数组的值，那么此时数组的长度就会发生改变
let arr = [1,2,3,4,5,6,7,8,9,0];
arr[100] = 22;
console.log(arr);
结果：
我们发现当越界将下标为100的值修改为22时，数组长度变成了101。中间填充的值均为undefined。
但是你的下标为负整数时，数组的长度并不会发生改变，毕竟你的下标格式都不合法，但是会生成一个键值对添加到数组中，那么此时对于js中的数组，更像是对象，而数组和多出来的键值对可以理解为该对象里面的属性，同理当下标如果是字符串，浮点数等，也是相同的情况，既然是属性你也可以使用.去访问。说是数组，更像是map
let arr = [1,2,3,4,5,6,7,8,9,0];
arr[-1] = -1;
arr["hello"] = 123;
console.log(arr);
结果：
长度改小，会优先保留前面的数据，你再改回来，数据也不会回来的。
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);
arr.length = 5;
console.log(arr);
arr.length = 10;
console.log(arr);
结果：
3.6.3、插入删除替换元素
可以使用push方法进行数组元素的追加，即在数组的最后面插入元素。
let arr = [];
for (let i = 0; i < 10; i++) {
arr.push(i+1);
}
console.log(arr);
我们可以使用splice方法来对数组进行，基本语法：
array.splice(index, howmany, item1, ....., itemX);
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//删除前
arr.splice(2, 3);//表示从下标2进行删除，删除3个元素
console.log(arr);
结果：
它也可以实现元素的替换。
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//替换前
arr.splice(2, 3, 666, 777, 888);//表示从下标2进行替换，替换3个元素
console.log(arr);
结果：
运用巧妙一点，也能在某一位置插入元素。
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//插入前
arr.splice(2, 0, 666);//表示在2下标后插入一个66
console.log(arr);
结果：
当然由于js数组是可以越界的，所以也可以使用下标的方式在数组尾插元素。
let arr = [1,2,3,4,5,6,7,8,9,0];
console.log(arr);//插入前
arr[arr.length] = 66;
console.log(arr);
结果：
3.7、函数
JavaScript的函数还是挺有特点的相比于java的方法，它不用指定返回值类型，有就返回，没有就不返回，它需要使用function关键字来表示它的身份，即函数，它的形参列表不需要返回值，它是JavaScript家族的一等公民，与变量平起平坐。
函数的定义、函数声明、函数调用：
//函数的定义、函数声明
function func(形参列表,不需要声明类型,毕竟js是弱类型的语言) {
//函数语句块
return 返回值;
}
//函数调用
函数名(实参列表);//无返回值
let varname = 函数名(实参列表);//有返回值
调用可以出现在定义之前：
hello();
hello();
function hello() {
console.log("hello");
}
hello();
hello();
结果：
由于JavaScript是弱类型语言，函数的变量类型可以随便放，所以也不需要重载，泛型。
function add(a, b) {
return a + b;
}
console.log(add(10,20));
console.log(add("10","20"));
console.log(add(1024,"hello"));
console.log(add(true,false));
console.log(add(undefined,20));
console.log(add(undefined,"20"));
结果：
其实吧，形参有那么多，你少传一点也可以，只不过没有收到传入参数值的变量默认值为undefined，此时进行数学运算值为NaN。
function add(a,b,c,d,e,f,g) {
return a + b + c + d + e + f + d + g;
}
console.log(add(10, 20));
console.log(add(10, 20, 30));
console.log(add(10, 20, 30, 40));
console.log(add(10, 20, 30, 40, 50));
console.log(add(10, 20, 30, 40, 50, 60));
console.log(add(10, 20, 30, 40, 50, 60, 70));
结果：
加个判断，将未初始化的值，赋值为0，就能进行计算了。
function add(a,b,c,d,e,f,g) {
// if(a === undefined) {
// a = 0;
// }
// //相当于
// a = a || 0;
a = a || 0;
b = b || 0;
c = c || 0;
d = d || 0;
e = e || 0;
f = f || 0;
g = g || 0;
return a + b + c + d + e + f + d + g;
}
console.log(add(10, 20));
console.log(add(10, 20, 30));
console.log(add(10, 20, 30, 40));
console.log(add(10, 20, 30, 40, 50));
console.log(add(10, 20, 30, 40, 50, 60));
console.log(add(10, 20, 30, 40, 50, 60, 70));
结果：
参数多了，也没什么事，前面已经成功传入的参数，会正常进行运算。
function add(a,b,c,d,e,f,g) {
// if(a === undefined) {
// a = 0;
// }
// //相当于
// a = a || 0;
a = a || 0;
b = b || 0;
c = c || 0;
d = d || 0;
e = e || 0;
f = f || 0;
g = g || 0;
return a + b + c + d + e + f + d + g;
}
console.log(add(10, 20, 30, 40, 50, 60, 70));
console.log(add(10, 20, 30, 40, 50, 60, 70, 80, 90));//参数传多了，多传的参数接收不到
结果;
函数就像普通变量一样，可以赋值给变量，然后该变量可以调用该函数，相当于C语言中的函数指针，所以js中的函数也被叫做“一等公民”。
function print(s) {
console.log(s);
}
let p = print;
p("hello");
//typeof获取类型
console.log(typeof p);
结果：
//合二为一的写法
let p = function print(s) {
console.log(s);
}
p("hello");
结果：
可以省略函数名，然后使用变量接收匿名函数。
//匿名函数赋值调用，常用
let p = function (s) {
console.log(s);
}
p("hello");
结果：
在js中，函数里面是可以定义函数的，而且可以无限的嵌套，这与java不同。
在JavaScriptES6之前，作用域只有全局作用域和函数作用域，并没有块级作用域，而在ES6之后引入了let，也有了块级作用域，定义的在大括号内部的变量在大括号外面是无法访问的。因为js中的函数可以嵌套定义，对于里层函数的变量，如果在函数本体找不到就会一级一级向上查找。
let num = 10;
function func1() {
function func2 () {
function func3 (){
console.log(num);
}
func3();
}
func2();
}
func1();
结果：
let num = 10;
function func1() {
let num = 20;
function func2 () {
let num = 30;
function func3 (){
console.log(num);
}
func3();
}
func2();
}
func1();
结果：
3.8、对象
js的对象里面的是属性是通过键值对的方式来创建的。
方式一：直接为对象添加属性来进行创建。
let 变量名 = {
//属性
键:值,
...,
//函数
键:function (){
//函数语句块
},
...,
//最后一个属性逗号可以省略
}
举例：
let animal = {
name: "小鸭子",
age: 18,
running: function (){
console.log(this.name + "会奔跑");
},
swimming:function () {
console.log(this.name + "会游泳")
}
}
console.log(animal.name);
console.log(animal.age);
animal.swimming();
animal.running();
结果：
方式二：new Object()，然后添加属性，不推荐！
let animal = new Object();
animal.name = "小鸭子";
animal.age = 18;
animal.running = function (){
console.log(animal.name + "会奔跑");
}
animal.swimming = function (){
console.log(animal.name + "会游泳");
}
console.log(animal.name);
console.log(animal.age);
animal.swimming();
animal.running();
结果：
方式三：使用this，并使用类似与java构造方法的方式创建对象。
function 构造函数名(形参列表) {
this.属性 = 值;
this.函数 = function...;
}
//创建
let obj = new 构造方法名(实参);
举例：
function animal() {
this.animal;
this.age;
this.swimming = function () {
console.log(this.name + "会游泳");
}
this.running = function() {
console.log(this.name + "会奔跑");
}
}
let ani = new animal();
ani.name = "小鸭子";
ani.age = 18;
console.log(ani.name);
console.log(ani.age);
ani.swimming();
ani.running();
结果:
下期见！！！
作为一个致力于后端开发的程序员来说，这些只是作为一个简单的了解，所以不是很全~
513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
