JS
JavaScript是一门解释型的脚本语言，其是弱类型的，对变量的数据类型不做严格的要求，变量的类型可以在运行过程中变化
JavaScript能改变HTML内容，属性，样式
大纲
- 使用方式
- 变量
- 运算符
- 数组
- JS函数
- 自定义对象
- 事件
- 补充
具体案例
使用方式
在script标签中写js代码
script标签即可以写在head里面，也可以写在body里面
推荐写在head部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
<!-- 这里是在<head>部分写的script-->
<script>
var place ="head";
console.log(place)
</script>
</head>
<body>
<!--这里是在<body>部分写的script-->
<script>
var secondPlace ="body"
console.log(secondPlace);
</script>
</body>
</html>
执行的顺序是从代码开始自上而下的
使用script标签引入
主HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签引入</title>
<!-- 使用script标签引入js文件-->
<script type="text/javascript" src="myscript.js"></script>
</head>
<body>
</body>
</html>
引入的js文件，这里名字叫myscript
alert("我是引入的")
两种使用方式不能混用，混用只显示一个的效果(显示先执行的那个的效果)
变量
下面是常见的数据类型
无论是整数还是小数都是number
无论字符还是字符串都是string类型，这可以使用单引号，也可以使用双引号
下面是特殊值
null:空值
undefined:未赋值
NAN:不能识别的数据类型，不是一个数
运算符
算术运算符
与Java比较类似
赋值运算符
也是与Java类似
关系运算符
这里注意 == 与 === 的区别
== 是比较值
=== 不仅比较值，还比较数据类型
比如 number = 520，number1 = “520”，这两个进行比较时，在 == 会得到true，而在 === 则会得到false
逻辑运算符
这里有区别
注意：当表示布尔的值是我们的数据类型，则会输出该值，否则输出其代表的布尔值
比如(5 + 20)代表true，其值25，则输出25，而对于(5 < 100)，其代表true，但是其运算结果不为我们的数据类型，所以输出true
条件运算符
和Java的三元运算符类似
数组
数组的定义
首先，在JavaScript里面的数组的元素可以不是同一个类型
<script>
// 方式一：直接创建
var array1 = [100,"第二个",'第三个'];
// 方式二：先声明，再赋值
var array2 = [];
array2[0] = 100;
array2[1] = "第二个";
array2[2] = '第三个';
// 方式三：
var array3 = new Array(100,"第二个",'第三个');
// 方式四：
var array4 = new Array();
array4[0] = 100;
array4[1] = "第二个";
array4[2] = '第三个';
</script>
这里同样采用的是下标访问的方式，在进行赋值时，如果刚刚赋值下标3，接着直接赋值下标6，那么下标4,5的元素会默认是undefined
数组遍历的方式
使用for循环进行遍历
JS函数
函数是由事件驱动，或者当他被调用时，执行的可重复代码块
函数的定义
方式一：使用function关键字来定义函数
方式二：将函数赋给变量
使用这种方式，就可以进行变量之间的赋值等处理
调用函数
方式一：直接调用
和Java一样的调用方法
方式二：通过事件进行调用
使用细节
对于JS中的函数重载会覆盖上一次定义，即不能通过更改形参列表来实现重载，对于有形参的函数在调用时，没有传入对于位置的实参，那么就会把其默认为undefined
小结：
如果形参的个数大于实参的个数，那么会按顺序匹配，而后面多出来的形参会默认为undefined
如果形参的个数小于实参的个数，那么也会按顺序匹配，多出来的实参不管，但是，会把所有的实参全部存入隐形参数arguments
自定义对象
不需要类，直接创建对象
方式一：
如果访问的一个没有定义过的属性，就会出现变量提升，显示undefined.但是访问一个没有定义的方法，就会报错
方式二：
注意这里要使用,隔开
事件
常见的事件
事件的分类
加载完成事件
onload 加载完成事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
<script>
function say(){
alert("使用静态注册");
}
</script>
</head>
<!--静态注册-->
<body onload="say()">
</body>
</html>
使用动态注册，实现加载完成事件
点击事件
onclick 鼠标点击某个对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
<script>
function say(){
alert("你好使用静态注册");
}
// 因为程序按照顺序执行，这里还没有创建btn1这个按钮
// 不能直接得到，所以要使用window的onload，等到加载完成后再进行动态注册
// 使用document 的 getElementById方法，通过id得到对象
window.onload = function (){
var btn1 = document.getElementById("btn1");
btn1.onclick = function (){
alert("动态注册成功");
}
}
</script>
</head>
<!--静态注册-->
<body >
<button onclick="say()">静态注册按钮</button>
<button id="btn1" >动态注册按钮</button>
</body>
</html>
失去焦点事件
onblur 当鼠标离开时，触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
<script type="text/javascript">
function upperCase(){
var name1 = document.getElementById("name1");
name1.value = name1.value.toUpperCase();
}
window.onload = function (){
var name2 = document.getElementById("name2");
name2.onblur = function () {
name2.value = name2.value.toUpperCase();
}
}
</script>
</head>
<!--静态注册-->
<body >
输入英文单词:
<input type="text" id="name1" onblur="upperCase()"/><br>
输入英文单词:
<input type="text" id="name2">
</body>
</html>
内容发生改变事件
onchanged：如果内容发生改变，就执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
<script type="text/javascript">
function mySal() {
alert("工资发生变化了~");
}
// 动态注册
window.onload = function (){
var sel1 = document.getElementById("sel1");
sel1.onchange = function (){
alert("女友更替")
}
}
</script>
</head>
<!--静态注册-->
<body >
你当前的工资水平:
<!--静态注册 onchange 事件-->
<select onchange="mySal()">
<option>--工资范围--</option>
<option>10k以下</option>
<option>10k-30k</option>
<option>30k以上</option>
</select><br>
你当前女友是谁:
<!--动态注册-->
<select id="sel1">
<option>--女友--</option>
<option>一号</option>
<option>二号</option>
<option>三号</option>
</select>
</body>
</html>
表单提交事件
onsubmit：注册按钮被点击，提交表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签</title>
<script type="text/javascript">
function register(){
// 先得到输入的账号，密码
var username = document.getElementById("username");
var pwd = document.getElementById("pwd");
if (username.value == ""||pwd.value == ""){
alert("账号和密码不能为空")
return false;// 代表不提交
}
return true;// 代表提交
}
// 动态注册
// 这里onsubmit绑定的函数，会直接把结果返回给onsubmit
window.onload = function (){
var form2 = document.getElementById("form2");
form2.onsubmit = function (){
if (form2.username.value == "" || form2.pwd.value == ""){
alert("账号和密码不能为空，不能提交")
return false;
}
return true;
}
}
</script>
</head>
<body >
<div>
<!--静态注册-->
<h1>注册用户</h1>
<!-- 这里register()这个方法，返回了真或假，还要再return到onsubmit才行-->
<form action="test1.html" onsubmit="return register()">
u:<input type="text" id="username" name="username"><br>
p:<input type="password" id="pwd" name="pwd"><br>
<input type="submit" value="注册用户">
</form>
</div>
<div>
<h1>注册用户2</h1>
<form action="test1.html" id="form2">
u:<input type="text" name="username"><br>
p:<input type="password" name="pwd"><br>
<input type="submit" value="注册用户">
</form>
</div>
</body>
</html>
补充
使用A.test(B)方法，来匹配B是否满足A的正则表达式格式
![[算法] 优先算法(三):滑动窗口(上)](https://img-blog.csdnimg.cn/direct/e0d3ec96d2184852a603e610ac17d3ca.jpeg#pic_center)
