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)
2022-07-11 第一小组 张明旭 前端JS学习记录的更多相关文章
- 2022 07 13 第一小组 田龙跃 Java再学习笔记
1.类名命名规则: 只能由数字字母,下划线,美元符号组成(不能以数字开头,尽量不要用下划线开头) 2.注释(养成多写注释的好习惯) 单行注释 // ctrl+/ 多行注释 // ctrl+shirt+ ...
- 4.VUE前端框架学习记录四：Vue组件化编码2
VUE前端框架学习记录四:Vue组件化编码2文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 3.VUE前端框架学习记录三：Vue组件化编码1
VUE前端框架学习记录三:Vue组件化编码1文字信息没办法描述清楚,主要看编码Demo里面,有附带完整的代码下载地址,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/ ...
- 2.VUE前端框架学习记录二
VUE前端框架学习记录二:Vue核心基础2(完结)文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baid ...
- 1.VUE前端框架学习记录一
VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0 ...
- 开博第一篇：DHT 爬虫的学习记录
经过一段时间的研究和学习,大致了解了DHT网络的一些信息,大部分还是参会别人的相关代码,一方面主要对DHT爬虫原理感兴趣,最主要的是为了学习python,大部分是别人的东西原理还是引用别人的吧 DHT ...
- [前端JS学习笔记]JavaScript function
一.函数的声明 1.1 function 命令 function methodName(params) { // code } 如下声明: function test_function(params) ...
- 生命不息学习不止，前端js学习笔记（一）
引言 从毕业到年已经整整7年,期间一直从事.net开发做c/s从 c# 转到 wpf 而后又开始做b/s 用silverlight,从最开始的arcgis engine 到后来的silverlight ...
- [前端JS学习笔记]JavaScript prototype 对象
一.概念介绍 prototype 对象 : 原型对象.在JavaScript中, 每一个对象都继承了另一个对象,后者称为"原型对象". 只有 null 除外,它没有自己的原型对象. ...
- [前端JS学习笔记]JavaScript CallBack
一.概念介绍 CallBack : "回调" . 在spring优秀框架回调无处不在, 回调的运用场景很多, 如 swt事件监听.netty等.它的主要作用是提高程序执行效率, 一 ...
随机推荐
- Fiddler抓包原理与操作
https://www.cnblogs.com/TankXiao/archive/2012/02/06/2337728.html#2306864
- es实现规格分组分析
es里面的规格是重复的,页面显示则是不重复
- nginx(二) の 配置静态资源网站
首先在开始配置前,要想明白,nginx 配置 静态资源 服务时基本逻辑,其实就是要 将路由地址与服务器中文件真实的存储地址进行映射. 配置静态资源样例 配置前,首先要将当前配置文件的路径,写入到 ng ...
- git学习资料汇总
学习持续开发和持续继承CI/CD https://zhuanlan.zhihu.com/p/609519307 git工作流主题 https://github.com/oldratlee/trans ...
- brew mongodb 安装 使用 brew update
参考: 菜鸟教程 https://www.runoob.com/mongodb/mongodb-osx-install.html https://juejin.cn/post/697403663320 ...
- OSPF配置知识总结2（单区域）
OSPF配置知识总结2 静态路由有静态路由的好处,但也有弊端,牵一发动全身,在一个路由路径上,只要变一个,其他所有的路由器上的静态路由都要跟着改变. 用动态路由OSPF很简单就能解决这个问题.如下: ...
- eNSP报错41解决方法
1.点击右上角的菜单 2.工具>>注册设备,全部勾选,然后注册,就行了.
- Python基于粒子群优化的投资组合优化研究|附代码数据
全文链接:http://tecdat.cn/?p=6811 最近我们被客户要求撰写关于粒子群优化的研究报告,包括一些图形和统计输出. 我今年的研究课题是使用粒子群优化(PSO)的货币进位交易组合优化. ...
- k8s_使用k8s部署博客系统deployment(四)
mysql deployment 前面的nfs pv pvc secret configmap service等k8s对象已经创建好了,准备工作已经完成:现在可以开始准备deployment配置文件 ...
- MYSQL5.7索引异常引发的锁超时处理记录
原始sql: update a set a.x=x where a.xid in (select b.xid from b inner join c on b.xxx = c.xxx) and a.x ...