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等.它的主要作用是提高程序执行效率, 一 ...
随机推荐
- Linux 第六节( 磁盘系统，挂载，分区，格式化)
/dev/st0 磁带机 /dev/lp 打印机 /dev/cdrom 光驱 /dev/sd scsi接口硬盘 sata接口硬盘 U盘(sda,sdb,sdc 分别对应 ...
- AcWing 791. 高精度加法C++数组实现
高精度加法 a, b均为正整数 #include <iostream> using namespace std; const int N = 100010; int A[N], B[N], ...
- 软件工程日报一——Andriod的安装与配置
建民老师给我们布置了一个编写记事本app的任务,因此需要我们下载andriod studio,下面是我的下载过程 在下载andriod studio之前,需要我们配置Java环境 进入控制面板,输入 ...
- 剑指 Offer II 树
我为什么要把代码粘在这里 断更很久了,基于一个错误的观念:我想看题,我到leetcode官网看不就行了吗? 但是若干年后我可能还会到我的博客园看看呀,我有可能上刷题网站吗?而且心得不好写到注释上. 记 ...
- 4口高速USB 2.0 HUB控制器 DPU1.1S，兼容替代FE1.1S
DPU1.1S是一款高性能.低功耗 4 口高速 USB2.0HUB 控制器,上行端口兼容高速 480MHz和全速 12MHz 两种模式,4个下行端口兼容高速480MHz.全速12MHz.低速 1.5M ...
- MyBatisPlus 报MP_OPTLOCK_VERSION_ORIGINAL not found. Available parameters are错误
配置mybatisplus乐观锁的过程 1.在数据库表中添加version字段类型int 2.在实体类中增加version属性,属性上增加@Version注解 3.配置乐观锁插件 @Configura ...
- 统信系统部署es
rpm -ivh jdk-17.0.4.1_linux-x64_bin.rpm groupadd es && useradd -d /home/es -g es estar -xzvf ...
- MAC 不带XIB新建ViewController
- (void)loadView{ NSView *view = [[NSView alloc]init]; self.view = view; } MAC 开发的小伙伴
- 【vscode】linux下vscode的使用
注1:vscode在查看project时,非常好用,可以导入整个project并查看其中文件,通过插件的安装还可以实现跳转到当前函数定义处的功能; 注2:可以了解下source insight; 补充 ...
- ubuntu22.04LTS下编译glfw
环境准备 # 预装cmake sudo apt install cmake # 下载源码 git clone https://github.com/glfw/glfw.git 编译 # cmake初始 ...