2022-07-11 第四组 周鹏 学习笔记
一，认识JS
JS 全名 JavaScript
编程语言，脚本语言，依赖于某种“容器”来运行
JS的容器就是浏览器
浏览器来解释执行。
小知识1 编程语言的分类
1，解释型语言
JS Python
2，编译型语言
C++ C#
3，半解释半编译
JAVA
JS是运行在浏览器上的，可以帮助我们去控制页面，增加网页的功能
js的分类
vue.js react.js jquery.js angular.js
node js前端语言
js的解释器
不同浏览器的解释器不同
火狐：spidermonkey
Chrom ，node：v8
Safari：JavaScriptcore
edge：
JS的使用
由于JS是浏览器的解释器去解释，所以无论JS在哪儿写出来，都可以执行
但由于JS的使用过于混乱，所以有个不成文的规定，如果在html里写JS，则需写到body里面。外联的JS则不需要
JS的页内使用
如果在html里写JS需要用下面的代码，在代码中间写，
<script></script>
和CSS的
<style></style>
有些类似，但CSS只能在 <head></head> 里面使用（内嵌不算），JS则不需要，只是一般规定在 <bady></bady> 里使用
JS的外部使用
（一般推荐使用这个，单某些JS只能使用页内方式）
JS的数据类型
1，数字（number）
整数，正数，小数，负数，只要是数字都可以
2，字符串（string）
英文，中文，特殊字符，似乎除了数字都是字符串
3，布尔型（boolean）
true（真 ） false（假）
4，空（null）
声明了值为空
5，undefined：未定义
未定义，没有值
二，JS使用代码
字面量
字面写出的量
（开发中尽量减少使用 字面量 ，因为后期维护麻烦）
用
<script>
alert(数据);
</script>
这种直接输出的数据 叫 字面量
变量
变量定义方式1 var
<script>
var 变量名 = 数据类型;
alert(变量名);
</script>
字符串类型的数据，得用 '' 或者 "" 。
注：在alert里面的数据加 "" 或者 '' 会把变量变成字面量
布尔类型和空 都自己去尝试一下。
注undefined类型的的写法为下
<script>
var 变量名;
alert(变量名);
</script>
var后面是没有等号的。
若var定义的一个变量先后被赋予两个数据，以后面那个为准如下：
<script>
var v1=1;
var v1=2;
alert(v1);
</script>
输出的是 2
变量定义方法2 let
在ES6(JS的新版本)中，新推出了两个词代替Var，其中一个就是let
let不会出现var中最后一种情况，也就是一个变量被定义两个值的情况，若出现，会报错！
变量定义方法3 const
新版本的另一个代替var的词
有let的特点，但const定义的变量会变成一个常量，是不能改的！所以用的较少
例：
<script>
let v1=1;
v1=2;
alert(v1);
</script>
输出的是 2
但如果把let改成const，会报错。
复杂数组
数组
一个变量对应多个值
几种数组方式
1，使用数组函数
例：
<script>
let v1 = Array();
// 加括号的一般都是函数
alert(v1);
</script>
2，使用new方式(一般不用)
例：
<script>
let v1=new Array();
alert(v1);
</script>
3.使用字面量方式
例：
<script>
let v1=[1,2,3,4];
alert(v1);
</script>
赋值方式
几种方式的赋值方式都一样，
<script>
let v1=Array();
v1[0] = 100 ;//给v1赋值为100
v1[1] = 90;//给V1赋值为90
alert(v1[0]);//输出第一个v1的值
</script>
//[]里面的 0 1 代表顺序
定义
定义一个函数，用来执行一系列代码。
函数定义以后，不会自动执行，需要手动调用。
定义函数和定义变量的方式大概相同。
变量用 let var
函数用 function
例：
<script>
function 函数名(){
alert("我是hello函数");
}
hello();//调用函数
</script>
注：上面变量中的代码都可以写在函数里。
变量范围问题
函数中的变量只能在函数中使用，
其他函数内部不可以再声明同一个函数，但可以无视上面的那个范围方式调用函数，调用方式和正常调用的方式相同
例：
<script>
function hello(){
let v1 = 10;
alert(v1)
}
hello();
console.log(v1);//这个v1没有被定义，被定义的v1在函数里，属于局部变量，是没办法在函数用的。
</script>
带有返回值的函数
return 返回函数值
例：
<script>
function hello(){
let v1 = 10;
let v2 = 20;
return v1 + v2;
}
//这个时候hello的值已经被返回了，也就是v1+v2的值，这时候我们可以做操作了。
输出方式 (hello());
</script>
return 同时还有一个结束函数的作用
<script>
function hello(){
let v1 = 10;
let v2 = 20;
return v1 + v2;
输出方式（"我是函数最后一句话"）
}
输出方式(hello());
</script>
因为return在上面 所以就不会再出现 "我是函数最后一句话" 这个了
带有参数的函数
函数的括号里加入几个参数。
然后给参数调用的时候，给参数赋值
1，有参有返回值
例：
<script>
function hello(a1,a2){
return a1 + a2;
}
let a12 = hello(200,100);//若不写hello括号里的那两个参数值，则会输出nan。
//赋值的顺序和最上面的参数顺序是一样的，
输出方式(a12());
</script>
2，有参无返回值
3，无参有返回值
4，无参无返回值
三，JS的一些使用方法
输出方式
console.log(变量名)//控制台输出
弹窗
alert//警告弹窗
confirm//带有确认和取消的弹窗，有返回值，点击确定是true，点击取消返回false
prompt//带有文本框的弹窗，点击确认后有返回值，返回值就是文本框输入的内容
运算符和逻辑运算
算术运算符
+ - * / %（百分号的意思是，取余，取模）
例：
<script>
输出方式（5*2）；
</script>
赋值运算符
= += -= *= /= %=
例：
<script>
lat a = 1;
a = a + 1;
a += 1;与上面那个是一个效果
a++;与最上面那个是一个效果，仅限于加1
++a;与最上面那个是一个效果，仅限于加1。与上面那个效果一样。
</script>
比较运算符
> < >= <= !=(不等于) ==
摆烂摆烂，不写了，看完上面这么简单还不会就去死吧！
注意，不能写连大，或者连小，连等也不行！ 就a>b>c这种
逻辑运算符
&&: 与 并且 且
let c=50
let a=10
let b=5
输出方式(a>b && a<=c)//a大于b并且a<=c，，，必须两边都成立才ok
||： 或，或者
let c=50
let a=10
let b=5
输出方式(a>b || a<=c)//a大于b或者a<=c，，，必须两边只有一个成立就ok
！：非 取反
let c=50
let a=10
let b=5
输出方式(!(a>b))// b>=a 成立才ok
三元运算符（三目运算符）
语法格式：
条件表达式 ? 表达式1 : 表达式2
（条件表达式必须要得到一个boolean的结果）
意思是：若条件表达式为真，则取表达式1
若条件表达式为假，则取表达式2
求a 和 b 中的最大值
let a = 10;
let b = 20;
let c = a > b ? a : b//若a > b为真，则c = a，若a > b为假，则c = b
输出方式（c）
+号的特殊性
加号除了作为算术运算符外，也有连接的作用
当输出为两个数字时，加号为正常运算符，若两个数据不相同，则 + 作连接符
其他不会。但若字符中的数字也就是""里面的数字，浏览器会自动转换成数字。然后进行算术运算。若是其他字符则会报错。
let a = 10;
let b = ?;
输出方式（a+b） //会得到 "10?"
小工具
typeof 判断数据类型。
let a = 10;
输出方式（typeof a）;//会出现a的数据类型，也就是number
isNaN 判断是否为数字
let a = inNaN(10)
输出方式(!a);//一定要加！，不然会是反的
逻辑判断
1，if……else:
语法：
if(条件表达式){
要执行的代码；
}else if（条件表达式）{
要执行的代码；
}else{
要执行的代码；
}
else也是有条件的，虽然不需要写，但else的条件自动为if条件的相反。
比如if(A>B),则else的条件为（A<=B）
if……else 是可以嵌套的，可以无限嵌套，但一般不要超过3层。
练习：用if……else判断四个数中最大的数
答案（不绝对）：
if(((a>b)?a:b)>((c>d)?c:d)){
alert(((a>b)?a:b));
}else if{
alert(((c>d)?c:d));
}
if(a>b&&a>c&&a>d){
alert(a);
}else if(b>a&&b>c&&b>d){
alert(b);
}else if(c>a&&c>b&&c>d){
alert(c);
}else if{
alert(d);
}
这里小提一下，一般情况下，不要用else结尾，因为else会把上面相反条件再次考虑一遍，很废时间，效率低！
2，Switch..case结构
格式：
Switch（表达式）{
case 选项1：
要执行的代码
case 选项2：
要执行的代码
…………
default：//和if……else中的else效果差不多
要执行的代码
}
Switch..case结构中，当表达式的值在case中匹配成功，会执行对应的代码。但停不下来，后面的代码会继续执行。
break可以帮助case停下，所以在case结束时加上。
3，if……else 和 Switch..case的区别与联系，怎么选？
1，当需求为区间范围时，Switch..case根本用不了。
2，if……else 基本上啥也能干……………………无语ing，，不过基础编程学习确实 if……else 好用
3，Switch...case 的效率很高
4，当需求为固定值，且值不多，Switch...case 比较好用
5，能用 Switch...case 解决的不要用 if……else
2，相似之处
1.几乎所有的 Switch...case 都可以转换成 if……else ；
2，default 相当于 else；
3，case 相当于 if
3，区别
浙公网安备 33010602011771号