目录
JavaScript是什么?
编程语言。脚本语言。依赖于某种容器来运行
浏览器来解释执行
编程语言的分类:
1.解释型:JS Python
2.编译型:C++ C#
3.半解释半编译:JAVA
js是运行在浏览器上的,可以帮助我们去控制页面
js的数据类型:
1.数字:number
2.字符串:string
3.布尔型:boolean
4.空:null(相当于声明了值为空)
5.undefined:未定义(没有值)
typeof 获取数据类型
isNaN() 判断是否是数字
函数:
定义一个函数,用来执行一系列代码。
函数定义以后,不会自己执行的。需要我们手动调用函数
1.无参无返回值
2.无参有返回值
3.有参有返回值
4.有参无返回值
《函数内部不可以再声明函数,但是可以调用函数,调用的方式和正常调用的方式相同》
return除了可以返回结果,还可以终止函数的继续执行。
开发中,尽量不要在return后面继续写语句
弹窗:
实质上就是函数 \n,换行符,弹窗里的回车
1、alert:警告弹窗,没有返回值
2、confirm:带有确认和取消的弹窗,有返回值,点击确定,返回true,点击取消,返回false
3、prompt:带有文本框的弹窗,有返回值,就是文本框输入的内容
逻辑判断,流程控制
夹杂着去讲运算符
JS的一个原理解析:
所有的非空的变量都会被解析成1->true
三元运算符(三目运算符):
语法是固定的,只能有一个条件,两个选项
+号的特殊性:
除了可以进行加法计算之外,连接符。
如果先入为主的认定+号为连接符,那它就一直是连接符
- * / %:可以进行类型转换,如果转不了,结果为NaN(not a number)
逻辑判断:
1.if...else:
语法:
if(条件表达式){
要执行的代码;
}else{
要执行的代码;
}
if...else结构和多重if结构有什么区别?
if...else是可以嵌套的,可以无限嵌套,原则上要求不超过3层。
switch..case结构:
语法:
switch(表达式){
case 选项1:
要执行的代码;
break;
case 选项2:
要执行的代码;
break;
....
default:
要执行的代码;
}
当表达式的值在case中匹配成功,会执行对应的代码,但是停不下来,后面的代码会继续执行。
怎么选?
1、当需求为区间范围时,switch...case根本无法使用。
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需要break
2、switch里面的选项可以杂乱无章
以下是今日作业:
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
}
.fl {
float: left;
}
.fr {
float: right;
}
button {
outline: none;
border: 0;
padding: 6px 15px;
margin: 5px;
margin-right: 1px;
background: #6215f0;
}
td {
padding: 5px;
}
table{
padding: 50px ;
}
</style>
</head>
<body>
<form action="">
<table bgcolor="#f04c15">
<tr>
<td colspan="3" style="color: rgb(33, 12, 18); font-size: 18px; margin-bottom: 8px; text-align: center;">新用户注册</td>
</tr>
<tr>
<td>姓名:</td>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="grender" checked>男<input type="radio" name="grender">女</td>
<td></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input type="text" placeholder="按格式yyyy-mm-dd"></td>
<td>按格式yyyy-mm-dd</td>
</tr>
<tr>
<td>学校:</td>
<td><input type="text"></td>
<td></td>
</tr>
<tr>
<td>专业:</td>
<td>
<select name="zhuanye" id="">
<option value="jk">计算机科学与技术</option>
<option value="wl">网络工程</option>
<option value="sm">数字媒体</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>体育特长:</td>
<td>
<input type="checkbox" name="hobby" checked>篮球
<input type="checkbox" name="hobby" checked>排球
<input type="checkbox" name="hobby">足球
<input type="checkbox" name="hobby">游泳
</td>
<td></td>
</tr>
<tr>
<td>上传文件:</td>
<td><input type="file"></td>
<td></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password"></td>
<td></td>
</tr>
<tr>
<td>个人介绍:</td>
<td><textarea name="" id="" cols="30" rows="5" placeholder="请输入内容"></textarea></td>
<td></td>
</tr>
<tr>
<td colspan="3" >
<div class="container" style="position: relative; left: 100px;">
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
<!-- <input type="submit" name="提交">
<input type="reset" name="重置"> -->
</td>
</tr>
<tr>
<td colspan="3" >
<div class="fr">已有账号?<a href="">立即登录</a></div>
</td>
</tr>
</table>
</form>
</body>
</html>