2022-07-11 第一小组 张明旭 前端JS学习记录
今天是正式学习的第三天,每天一大部分前端的新知识,吐瘦两斤,听课晕乎乎的.不过小事,靠笔记和视频苟活
知识点:
JavaScript是什么?
编程语言、脚本语言。依赖于某种容器(浏览器)运行
有浏览器解释执行
编程语言的分类:
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:chakra
JS在哪里执行?写在网页什么位置
不成文规定:JS放在body的最后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 用script写JS,一般放在body的结尾 -->
</head>
<body>
...
...
<scrip>
</script>
</body>
</html>
*《JS所有的引用都用script》
JS的简单数据类型:
1、数字(number):整数,正数,小数,负数
2、字符串(string) :a,中文,@
3、布尔型(boolean):ture false/1 0
4、空(null):相当于声明了值为空
5、undefind:未定义,没有值
定义变量:
变量
《开发中尽量减少使用字面量,后期维护更改困难》
在ES6(JS新版本)中,有两个新词定义变量
1、let :用let声明,无法重新定义
2、const :有let 的特点,const声明的变量是常量
JS的复杂数据类型
1、数组:一个变量对应多个值
(1)使用数组函数
函数:可以定义一个函数用来执行一系列代码
函数定义之后不会自己执行。需要手动调用函数
四大类:
1.无参无返回值
2.无参有返回值
3.有参有返回值
4.有参无返回值
《函数内不可以在声明函数,但是可以调用函数,调用方式正常调用即可》
return出来可以返回结果,还可以中指函数进行
开发中,尽量不要在return后面继续写语句
弹窗:实质上就是函数。 \n、\r换行符,弹窗里的回车
1、alert:警告弹窗,没有返回值
2、control:带有确认和取消的弹窗,有返回值,点击确定,返回ture,点击取消返回false
3、prompt:带有文本框的弹窗,有返回值,就是文本本框内容
<script>
// 使用数组函数,函数都有小括号
// let arr =Array();
// // 警告弹窗
alert(arr);
console.log(11111);
console.log(arr);
</script>
逻辑判断,流程控制
夹杂着讲运算符:
三元运算符(三目运算符)(必须得到一个布尔类型的结果)
语法是固定的,只能有一个条件。两个选项
+号的特殊性:
除了可以进行加法运算之外,还可以当做连接符。
如果先入为主的认定为+号为连接符,那他就一直是连接符
-
- / %:可以进行类型转换成数字,如果转不了,结果为NAN
JS的一个原理解析:
所有非空的变量都会被解析成1->false
逻辑判断:
if...else结构
语法:
if(条件表达式){
要执行的代码:
}else{
要执行的代码:
}
if...else结构与多重结构有什么区别?
if...else是可以嵌套的,可以无限嵌套(原则上不超过三层)
if....return:
if(条件表达式){
要执行的代码:
}return ;
return;
switch.case结构:
语法:
switch(能得值表达式){
case 选项一:
要执行的代码
break;
case 选项二:
要执行的代码
break;
.......
default :
要执行的代码
}
特点:当表达式的值在case中匹配成功,会执行相应代码,但是会继续运行后面代码,需要用break使其停止
switch...case和if...else怎么选?
1、当需求为区间范围时,switch...case根本无法使用。
2、if...else...基本上啥都能干
3.switch...case比if...else效率高(指效率不同代码执行时间)
4、当需求为固定值,且值不多时用switch...case
5、能用switch...case解决的不用if...else
switch...case和if...else相似之处:
1、几乎所有的switch...case都可以转化为if...else
2、default几乎相当于else
3、case几乎相当于if
4、都可以无限嵌套
switch...case和if...else不同之处:
1、switch需要break
总结:
1、JS的引入,应该写在什么位置
2、JS的数据类型(数组)
3、变量的定义和声明 var let const
4、三种弹窗(三个的意思,有无返回值)
5、函数*****
6、return作用
7、变量的作用域
8、运算符
9、typeof isNaN
10、三元运算符
11、流程控制语句:
两个流程控制语句的相互嵌套*****
if。。。else
switch。。。case
if。。。return
问题: 判断一个年份是否为闰年?(能被4和400整除,不能被100整除)
结果在网页的开发者工具的控制台
<script>
// 判断一个年份是否为闰年
// 能被4和400整除,不能被100整除
let year = 2000;
switch(year){
case year % 4 ===0 && year % 100 != 0 || year % 400 ===0:
console.log(year+"是闰年");
break;
default:
console.log(year+"不是闰年");
}
</script>
<script>
// if else 语句
let year1 = 2000;
if(year1 % 400 ===0){
console.log(year1+"是闰年");
}else{
if (year1 % 4 ===0 && year1 % 100 != 0){
console.log(year1+"是闰年");
}else{
console.log(year1+"不是闰年");
}
}
// 函数+if return
function isRun(year){
if(year1 % 400 ===0){
console.log(year+"是闰年");
return ;
if(year % 4 ===0 && year % 100 != 0){
console.log(year+"是闰年");
}
return ;
console.log(year+"不是闰年");
}
}
isRun(2100)
</script>
<script>
// 函数+switch。。。case + if
function isRun2(year){
switch(year % 4){
case 0:
console.log(year+"是闰年");
return ;
default:
if(year % 4 ===0 && year % 100 != 0){
console.log(year+"是闰年");
}
return ;
console.log(year+"不是闰年");
}
}
isRun2(2000)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步