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等.它的主要作用是提高程序执行效率, 一 ...
随机推荐
- 亲测：一个完整Vue开发环境搭建。
参考博客飞机: https://www.cnblogs.com/zhaomeizi/p/8483597.html
- vuecli创建项目-vue项目目录介绍-es6导入导出语法-小练习登录功能-scoped
目录 vuecli创建项目-vue项目目录介绍-es6导入导出语法-小练习登录功能-scoped 今日内容概要 今日内容详细 1 vue-ci创建项目 2 vue项目目录介绍 3 es6导入导出语法 ...
- Winform窗体中打开PDF文件的三种方式
来源:https://www.jb51.net/article/251451.htm
- MyBatis_02_(搭建Mybatis)
搭建MyBatis 1-开发环境 2-创建Maven工程 2.1- 打包方式 2.2 导入依赖 <!-- 打包方式jar--> <packaging>jar</packa ...
- 阿里云centos7安装图形界面gnome
这应该是很无聊很蛇精的操作吧. 首先命令行远程登陆阿里云,然后root身份更新系统,安装gnome这些操作(菜如我以前都没有操作过),参照网上虚拟机的教程. # yum update -y # yum ...
- jenkins 2.282+Publish over ssh 1.22版本发布日志不能实时显示
问题解决了.作个记录,最新的 [Publish Over SSH]插件1.22版本,jenkins 282版本.1. ssh server 的Verbose output in console要开启2 ...
- MacOS系统下selenium之火狐浏览器驱动firefoxdriver安装
https://blog.csdn.net/weixin_44107321/article/details/106452468
- 不安全的权限 0644，建议使用 0600 虚拟机无法分配内存 virtual memory exhausted: Cannot allocate memory
我都不知道我写了啥,自己都很混乱 aoteman@aoteman-virtual-machine:/tmp$ sudo -s #进入root用户模式 [sudo] aoteman 的密码: 12对不起 ...
- bilibili经典面试题
1. 如何向面试官解释什么是Redis,看看普通人和高手是如何回答的?_哔哩哔哩_bilibili 2.Java面试热点问题,synchronized原理剖析与优化_哔哩哔哩_bilibili 3.黑 ...
- docker 启动 重启命令
启动 systemctl start docker 守护进程重启 sudo systemctl daemon-reload 重启docker服务 systemctl restar ...