20220711 第二组 刘世琦 学习记录
作者：互联网
JavaScript
今日内容
*JS的引入，应该写在什么位置
*JS的数据类型（数组）
*变量的定义和声明 var let const
*3种弹窗
*函数（重点！）
*return的作用
*变量的作用域
*运算符
*typeof和isNaN
*三元运算符
*流程控制语句：两个流程控制质检的互相配合嵌套关系（重点！）
JavaScript是什么？JS
通用的编程语言。脚本语言。依赖于某种容器来运行。
浏览器来解释执行。
编程语言的分类：
1.解释型：JS，Python
2.编译型：C++，C#
3.半解释半编译：Java
JS是运行在浏览器上的，可以帮助我们去控制页面。
vue.js react.js jquery.js angular.js
nodejs前端的服务器语言
这里可以尝试实现一个计算器！不知道我自己能不能钻研出来
J##S解释器：是由浏览器解释执行的，不是直接解释，浏览器中有直接解释器
火狐：spidermonkey
Chrom、node：v8
Safari：JavaScriptcore
edge：chakra
JS可以在哪里执行？写在网页的什么位置？
在head里引入js使用标签
出现弹窗内容为1
因为每个网页的解释器都不一样，显示也不一样，所以我们要用css自己做弹窗
这个弹窗不局限于位置单独出现都会显示，规定：JS放在结束body标签的上方！
js是给网页添加功能的，所以应该先有一个网页，所以写在body结束上面可以确保网页信息全部加载完毕。
外部引入JS！新建一个.js不需要再写
直接写alert（“。。。”）；
位置依旧是body结束上方
弹窗：（实质上就是函数）
1.alert：警告弹窗，没有返回值
2.confirm：带有确认和取消的弹窗，有返回值。点确定，返回true；点取消，返回false。
3.prompt：带有文本框的弹窗，有返回值，返回文本框输入的内容
·\n可以在弹窗里换行，换行符
src引入页面其他链接地址或者img
CSS引入背景图片使用url,a标签使用href
JS的简单数据类型：
1、数字（number）：整数，正数，小数，负数
2、字符串（string）：a，中文，@
3、布尔型（boolean）：用来进行判断true（1）false （0）
4、空（null）：相当于声明了值为空
5、undefined：未定义，没有值
定义变量：
变量：开发中尽量减少使用字面量，后期维护困难
字面量：alert（1）这是1就属于字面量
定义一个变量：使用var 变量明=一个值
例：
number类型
<script>
var v1=10；
alert(v1);
</script>
这样会显示10
字符串类型
var v2 = '你好'; //加引号会把变量变成自变量
布尔类型
var v3 = true;
空
var v4 = null;
undefined
var v5;
修改变量的值：
<script>
var v1=10；
v1=11； 显示11
alert(v1);
</script>
在ES6（JS的新版本）中，新推出了两个词代替var
1、let：变量用let声明，无法重复定义的
2、const：有let的特点，const声明的变量就是一个常量，不能再变
三元运算符（三目运算符）
语法是固定的，只能有一个条件、两个选项
+号的特殊性：
除了可以进行加法计算之外，还可以做连接符；
如果先入为主的认定+号为连接符，那它就一直是连接符
- * / % ：
可以进行类型转换，如果转不了，结果为NaN（not a number）
例：10 - * / % “10”会自动对“10进行类型转换”
两个工具：
1.typeof：获取数据类型（不是函数，是运算符）
2.nan：判断是否为数字
·字符串的拼接
JS的复杂数据类型：
数组：一个变量对应多个值
（1）使用数组函数（所有的函数一定都有“( )”）
（2）使用new关键字
（3）使用字面量的方式
·先定义数组，再赋值
函数：可以定义一个函数，用来执行一系列代码。关键字：function
函数定义后不会自己执行，需要我们手动调用函数
作用域找大括号，只在作用域里有用
带有返回值的函数：return
1.无参无返回值
2.无参有返回值
3.有参有返回值
4.有参无返回值
函数内部不可以再声明函数，但是可以调用函数，调用的方式和正常的调用方式相同
return除了可以返回结果，还可以终止函数的继续执行。
在开发中，尽量不要在return后写语句。
逻辑判断：流程控制
JS的原理解析：
所有的非空的变量都会被解析成1（1代表true）
判断：
1.if...else：
语法：
·多重if
·if...else结构和多重if结构有什么区别？
·if...else是可以嵌套的，可以无限嵌套（但是原则上不要超过三层）
如果在一个函数中需要使用if。。。else。。。可以使用if。。。return。。。来实现
2.switch...case结构：
语法：
·当表达式的值在case中匹配成果，汇之星对应的代码以及后面的代码
，但是停不下来，后面的代码会继续执行，所以要添加break。
怎么选？
1.当需求为区间范围时，switch根本无法使用
2.If ... else ...基本上啥都能干
3.switch ... case效率高
4.当需求为固定值，且值不多，用switch...case
5.能用switch...case解决的尽量不要用if...else
相似点
1.几乎所有的switch...case都可以转化为if...else
2.default几乎相当于else
3.case几乎相当于if
4.都可以无限嵌套
不同点
1.switch...case需要break
2.Switch...case里面的选项可以杂乱无章
上机题
<!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>新用户注册1</title>
</head>
<body>
<table border="1" width="400" align="center">
<caption><h4>新用户注册</h4></caption>
<tr>
<td>姓名：</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex">男
<input type="radio" name="sex" checked>女
</td>
</tr>
<tr>
<td>出生日期：</td>
<td>
<input type="date" name="begin" placeholder="yyyy-mm-dd" value=""min="1997-01-01" max="2030-12-31">       按格式yyyy-mm-dd
</td>
</tr>
<tr>
<td>学校：</td>
<td>
<input type="text" name="school">
</td>
</tr>
<tr>
<td>专业：</td>
<td>
<select>
<option check>计算机科学与技术</option>
<option>软件工程</option>
<option>通信工程</option>
</select>
</td>
</tr>
<tr>
<td>体育特长：</td>
<td>
<input type="checkbox" nam="hobby">篮球
<input type="checkbox" nam="hobby">足球
<input type="checkbox" nam="hobby">排球
<input type="checkbox" nam="hobby">游泳
</td>
</tr>
<tr>
<td>上传照片：</td>
<td>
<input type="file" name="upload_image" accept="image/gif,image/jpeg,image/png,image/jpg">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>个人介绍：</td>
<td>
<textarea name="textarea" cols="25" rows="3"></textarea>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<button type="submit">提交</button>
<input type="reset" value="重置">
</td>
</tr>
</table>
</body>
</html>
<!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>
<style>
.div1 {
height: 500px;
width: 500px;
background-color: white;
padding: 50px;
margin-left: 375px;
border: 10px gray solid;
box-sizing: border-box;
float:left;
}
.div2{
height: 560px;
width: 1250px;
background-color:lightblue;
}
</style>
</head>
<body>
<div class="div1">
<table width="400" align="center">
<caption><h4 style="color:orange;">新用户注册</h4></caption>
<tr>
<td>姓名：</td>
<td>
<input type="text" name="name">
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="sex" checked>男
<input type="radio" name="sex" >女
</td>
</tr>
<tr>
<td>出生日期：</td>
<td>
<input type="date" name="begin" placeholder="yyyy-mm-dd" value=""min="1997-01-01" max="2030-12-31">       按格式yyyy-mm-dd
</td>
</tr>
<tr>
<td>学校：</td>
<td>
<input type="text" name="school">
</td>
</tr>
<tr>
<td>专业：</td>
<td>
<select>
<option check>计算机科学与技术</option>
<option>软件工程</option>
<option>通信工程</option>
</select>
</td>
</tr>
<tr>
<td>体育特长：</td>
<td>
<input type="checkbox" nam="hobby">篮球
<input type="checkbox" nam="hobby">足球
<input type="checkbox" nam="hobby">排球
<input type="checkbox" nam="hobby">游泳
</td>
</tr>
<tr>
<td>上传照片：</td>
<td>
<input type="file" name="upload_image" accept="image/gif,image/jpeg,image/png,image/jpg">
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>个人介绍：</td>
<td>
<textarea name="textarea" cols="15" rows="2">请输入内容...</textarea>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<button type="submit" style="background-color: yellow;">提交</button>
<button type="reset" style="background-color: yellow;">重置</button>
</td>
</tr>
<tr>
<table width="100">
<a href="../index.html" target="_blank" align="right"><h4>立即登录</h4></a>
</table>
</tr>
</table>
</div>
<div class="div2"></div>
</body>
</html>
总结
掌握情况：
掌握了弹窗，JS的引入，数组，变量的定义和声明，return的作用，运算符，函数
在逻辑判断中，对ifelse和Switchcase存在具体情况不会使用的问题，在老师讲解课上作业时，更进一步理解。
在今天的测试中，感觉客观题答案存在错误，上机题中90%对题目进行了编写，但是链接的使用以及按键的设置存在问题，希望在明天的询问以及视频回看中得以解决终止，今天的心情可能因为听懂并且成功运用到实际中而开心！
标签：case,...,20220711,JS,nbsp,var,刘世琦,弹窗,第二组 来源： https://www.cnblogs.com/Liusq11/p/16472453.html