JavaScript
简称JS,bianchen该语言,脚本语言,依赖于某种容器来运行。运行在浏览器上,浏览器来解释执行,帮助我们控制页面。
编程语言的分类:
1.解释型:JS、Python等...
2.编译型:C++、C#等...
3.半解释、半编译:JAVA。
JS一般放在body结束标签上方,用来确保再执行JS的时候要加载的元素已经加载完成。
外部引入JS:
<script src="js的地址"></script>
JS的简单数据类型:
1.数字(number):整数,正数,小数….
2.字符串(String):a,中文,特殊符号
3.布尔型(boolean):用来进行判断的,true(1),false(0)。
4.空(null).
5.underfined:未定义,(没有值)。
定义变量:
变量:开发中尽量减少使用字面量,后期维护困难的问题。
在ES6(JS新版本)中,新推出了两个词代替var
1.let,变量用let声明。无法重复定义。—–推荐
2.const:有let的特点,const声明的变量就是一个常量。如果接下来定义的常量又重新附值,会报错。
JS的复杂数据类型
警告弹窗:alert();
控制台打印输出:console.log();
数组:一个变量对应多个值
使用数组:let arr=Array();
使用new关键字:let arr=new Array();
使用字面量(直接附值):let arr=[1,2,3,4]
函数:定义一个函数,:function a(){}
函数不会自己执行,如要使用,需要手动调用函数。:a();
无参无返回值
无参有返回值
有参无返回值
有参有返回值
函数内部不可以再声明函数,但是可以调用函数,调用的方式和正常调用得方式相同。
return除了有返回值得作用,还有结束函数执行得作用。
弹窗:
alert:警告弹窗,无返回值。
confirm:带有确定和取消的有返回值的弹窗,返回true false.
prompt:带有输入框的弹窗,返回值为文本框输入的内容,可以传两个值。后面的是默认值
运算符:
算术运算符 + - * / %
赋值运算符 = += -= /= %= *=
a=a+1 a+=1 a++ ++a
比较运算符 > < >= <= != == ===会带着数据类型判断。
逻辑运算符:与或非,并且:&&,或者:|| 非:!
三目(元)运算符:条件表达式?表达式1:表达式2
+号的特殊性,除了可以进行加法计算外,连接符。如果先入为主认定+为连接符,后面就都按照连接符算。
*/-%可以进行类型转换,如果转不了。结果为non(no one number);
逻辑判断,流程控制。
当需求为区间范围时,switch根本没法使用,if…else…啥都能用,switch case快。需求为固定值且值不多,switch,
if…else…
switch(表达式){
case 值1: break;case 值2: break;default;
}
获取数据类型:typeof a
判断是否为数字:isNaN(a),如果是数字就是false,如果不是就是true。
思考:
JS的引入,应该写在什么位置。
数据类型
变量的定义和声明。
3种弹窗
函数
return作用
变量的作用域
运算符
typeof isNaN
三元运算符
流程控制语句
补充
JavaScript:编程语言。脚本语言(依赖于某种送死来运行)浏览器来解释执行。作用:给网页加功能。写在body之间
js的数据类型
1.数字 2.字符串 3.布尔型:true/false
2.空(null) 5.未定义(undefined)
js复杂数据类型
1.数组:使用数组函数 2.函数样式:单词()
开发中尽量减少使用字面量,后期维护困难
逻辑运算符:
与:&&
或:||
非:!
练习题
自己制作表格
表格代码:
<!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>
<link rel="stylesheet" href="CSS/rng.css">
</head>
<body>
<div class="rg_layout">
<div align="center">
<table id="hanhan">
<tr>
<td>新用户注册</td>
</tr>
</table>
</div>
<div>
<div class="rg_form">
<!--定义表单 form-->
<form action="#" method="post">
<table align="center">
<tr>
<td class="td_left"><label for="username">姓名</label></td>
<td class="td_right"><input type="text" name="username" id="username" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="text" name="birthday" id="birthday" placeholder="请输入出生日期">   按格式yyyy-mm-dd</td>
</tr>
<tr>
<td class="td_left"><label for="name">专业</label></td>
<td class="td_right"><select name="name" id="name"><option value="">计算机科学与技术</option></select></td>
</tr>
<tr>
<td class="td_left"><label for="tel">体育特长</label></td>
<td class="td_right"><input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">排球
<input type="checkbox">游泳
</td>
</tr>
<tr>
<td class="td_left"><label>上传照片</label></td>
<td class="td_right">
<input type="button" name="gender" value="请选择图片"> 未选择任何文件
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">密码</label></td>
<td class="td_right"><input type="text" name="birthday" id="birthday" placeholder="请输入密码"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >个人介绍</label></td>
<td class="td_right"><textarea rows="2" cols="21"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" id="btn_sub" value="注册"></td>
<td colspan="2" align="center"><input type="submit" id="btn_sua" value="重置"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</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>
</head>
<body>
<script>
// 数字型
var v1 = 11;
// 字符型
var v2 = "帅比";
// 布尔型
var v3 =true;
// 空
var v4 =null;
// 未定义
var v5 =undefined;
// 字面量
alert(v2);
</script>
<!-- <script src="js/7111.js"></script> -->
</body>
</html>
总结
JS就像是HTML的画布上,加上了CSS的色彩装饰,最后经过JS的加工变成美丽的动画,当附加功能在<script>中得到应用,整个页面变得灵活