尚硅谷JavaWeb笔记——JavaScript（后端学习JavaScript，了解这些就够了）
文章目录
- JavaScript
-
- JavaScript中的变量
-
- 变量的声明
- 数组
- JavaScript中的运算
-
- 逻辑运算
- 关系运算
- JavaScript中的函数
-
- 函数的声明
- 有关注意事项
- JavaScript中的对象
-
- 方法一： 使用new的方式定义对象
- 方法二：使用大括号建立对象
- JavaScript中的事件
-
- 注册onload事件
- 注册onclick事件
- 注册onblur事件
- 注册oncharge事件
- 注册onsubmit事件
JavaScript
JavaScript中的变量
JavaScript是一种动态语言——即其是一种解释性语言，并非编译性语言，不能编译成二进制文件。
JavaScript中存在几种常用的变量类型，用于逻辑判断以及数据存储
- 数值类型：number
- 字符串类型：string
- 对象类型：object
- 布尔类型：boolean
- 函数类型：function
几种特殊数值类型
- 未定义类型：
undefined，所有未赋值的的变量默认值都是undefined - 空值：
null - 非数值：
NAN
变量的声明
在JavaScript中一般通过var关键字来声明对象
var carName; //默认为undefine
数组
JavaScript中数组不需要提前声明，可以用的时候直接声明在获取。对于已经声明的元素，获得对应元素，对于没有声明的元素，返回为为定义，JavaScript中的数组会动态扩容。
JavaScript中有两种声明数组的方法
-
方法一：直接填写对象
var cars = [ "Saab", "Volvo", "BMW" ]; -
方法二：new一个对象
var cars = new Array("Saab", "Volvo", "BMW");
对于数组原色的访问，可以通过for循环进行便利获取
JavaScript中的运算
逻辑运算
在JavaScript中，所有变量都可以作为一个boolean类型的变量去使用，0 、null、 undefined、””(空串) 都认为是 false
另外，&&且运算有两种情况
- 当表达式全为真时，返回最后一个表达式的值
- 当表达式有一个为➕，返回第一个为假的表达式的值
其次，||或运算
- 当表达式全为假时，返回最后一个表达式的值
- 只要有一个表达式为真，把第一个为真的表达式的值返回
关系运算
两种关系运算
==：比较两者数值是否相同===：比较两者数值以及类型是否同时相同
JavaScript中的函数
JavaScript函数是被设计为执行特定任务的代码块，其会在某代码调用它时被执行。
函数的声明
第一种定义方式
-
无参函数
function fun(){ alert("无参函数fun()被调用了"); } -
有参函数构造
function name(参数 1, 参数 2, 参数 3) { 要执行的代码 }⚠️ 注意：这里参数数量不一定要与调用它的时候相同；由于JavaScript中不允许函数重载，因此无论输入多少参数，都会找到对应的参数。
第二种定义方式
-
无参函数
var fun = function () { alert("无参函数"); } fun();//调用函数 -
有参函数
var fun2 = function (a,b) { alert("有参函数a=" + a + ",b=" + b); } fun2(1,2);//调用函数
有关注意事项
⭐️ JavaScript中不允许函数重载
为什么？
答：首先，定义JavaScript函数bai时，函数名是函du数对象的标识，参数数量只是这个zhi函数的属性。靠定义参数数量不同的函数实现重载是不行的；其次，调用函数时，js通过函数名找到对应的函数对象，然后根据函数按照定义时的参数，和表达式参数列表按顺序匹配，多余的参数舍去，不够的参数按undefined处理，然后执行函数代码。所以，js重载函数需要通过函数代码判断参数值和类型实现。
对于多余的参数，其并没有真正地舍去，而是被隐藏在function参数内部，可以通过arguments[]数组在内部调用；见如下代码：
// 需求：要求 编写 一个函数。用于计算所有参数相加的和并返回
function sum(num1,num2) {
var result = 0;
for (var i = 0; i < arguments.length; i++) {
if (typeof(arguments[i]) == "number") {
result += arguments[i];
}
}
return result;
}
alert( sum(1,2,3,4,"abc",5,6,7,8,9) ); //45 = 1+2+3...+9
JavaScript中的对象
JavaScript中有两种定义对象的方法
方法一： 使用new的方式定义对象
// 对象的定义：
// var 变量名 = new Object(); // 对象实例（空对象）
// 变量名.属性名 = 值; // 定义一个属性
// 变量名.函数名 = function(){} // 定义一个函数
代码：
<script type="text/javascript">
var obj = new Object();
// 这里关于对象的属性键值可以自定义
obj.name = "华仔";
obj.age = 18;
// 成员方法的定义也是自定义
obj.fun = function () {
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
// 对象的访问：
// 变量名.属性 / 函数名();
// alert( obj.age );
obj.fun();
</script>
方法二：使用大括号建立对象
// 对象的定义：
// var 变量名 = { // 空对象
// 属性名：值, // 定义一个属性
// 属性名：值, // 定义一个属性
// 函数名：function(){} // 定义一个函数
// };
代码
var obj = {
name:"ggs",
age:18,
fun : function () {
alert("姓名：" + this.name + " , 年龄：" + this.age);
}
};
JavaScript中的事件
什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。
或者称HTML事件时发生在HTML元素上的事情，当在HTML页面中使用JavaScript时，JavaScript能够“应付”这些事件
常见的事件：
onload加载完成事件：页面加载完成之后，常用语做页面js代码初始化操作onclick单击事件：常用语按钮的点击响应操作onblur失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法onmouseover：移入事件：用户把鼠标移动到HTML元素上onmouseout：移出事件：用户把鼠标从HTML元素上移出onchange内容发生改变事件：常用语下拉列表和输入框内容发生改变后操作onsubmit提交表单事件：常用语表单提交前，验证所有表单项是否合法
两种事件注册
什么是事件注册（绑定）？其实就是告诉浏览器，当事件响应后要执行那些操作代码，叫事件注册或绑定。
静态注册：通过html标签属性直接赋予响应后的代码，这种方式叫做静态注册
动态注册：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码，叫动态注册
- 基本步骤：
- 获取标签对象
- 标签对象.对象名=function(){}
注册onload事件
onload事件时浏览器解析完页面之后就会触发的事件，可以将注册内容写在html以及JavaScript中，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。
在html中的代码：书写在标签中（静态注册）
<script type="text/javascript">
// onload事件的方法
function onloadFun() {
alert('静态注册onload事件，所有代码');
}
script>
<body onload="onloadFun();">
body>
因此，如果希望在页面加载完成之后执行某些操作时，可以在body中增加一个onload属性，引入某个功能函数。
在JavaScript中写代码：写在中
<script type="text/javascript">
// onload事件动态注册。是固定写法，不需要在body中写其他内容
window.onload = function () {
alert("动态注册的onload事件");
}
</script>
注册onclick事件
**静态注册：**在中定义函数，直接告诉浏览器，当调用onclickFun()后要执行的代码。
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun() {
alert("静态注册onclick事件");
}
</script>
</head>
<body>
<!--静态注册onClick事件-->
<button onclick="onclickFun();">按钮1</button>
<button id="btn01">按钮2</button>
</body>
动态注册：先通过getElementById，通过id获取对应的DOM对象（标签对象），然后设置该标签的click事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function () {
// 1 获取标签对象
var btnObj = document.getElementById("btn01");
// 2 通过标签对象.事件名 = function(){}
btnObj.onclick = function () {
alert("动态注册的onclick事件");
}
}
</script>
</head>
<body>
<!--静态注册onClick事件-->
<button onclick="onclickFun();">按钮1</button>
<button id="btn01">按钮2</button>
</body>
注册onblur事件
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
body>
静态注册
<script type="text/javascript">
// 静态注册失去焦点事件
function onblurFun() {
// console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
// log() 是打印的方法
console.log("静态注册失去焦点事件");
}
</sript>
动态注册
<script>
window.onload = function () {
//1 获取标签对象
var passwordObj = document.getElementById("password");
//2 通过标签对象.事件名 = function(){};
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
注册oncharge事件
oncharge事件是当某个选项完成了改变执行的操作
head>
<body>
请选择你心中的女神：
<select onchange="onchangeFun();">
<option>--女神--option>
<option>高佳好option>
<option>方圆option>
<option>娘娘option>
select>
body>
静态注册
需要在选择中定义onchange属性，并注册对应的函数，并在中完成对应的注册信息
<script type="text/javascript">
function onchangeFun() {
alert("女神已经改变了");
}
</script>
动态注册
<script>
window.onload = function () {
//1 获取标签对象
var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通过标签对象.事件名 = function(){}
selObj.onchange = function () {
alert("男神已经改变了");
}
}
</script>
<select id="sel01">
<option>--男神--</option>
<option>国哥</option>
<option>华仔</option>
<option>富城</option>
</select>
不需要在中完成对应的注册
注册onsubmit事件
onsubmit事件是针对于表单的属性，可以在form表单中静态注册；其中如上文提到的action标签写了目标地址，onsubmit会自动跳转。
一般而言，需要在onsubmit中增加对表单中填写的数据是否合法的判断，如果不合法应当在最后增加一个return fasle，组织页面发生跳转
<body>
<!--return false 可以阻止 表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
<input type="submit" value="静态注册"/>
</form>
</body>
静态注册
注意这里关于阻止提交时的方法，如果是return false就会阻止，如果是return true就会继续提交
// 静态注册表单提交事务
function onsubmitFun(){
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return flase;
}
动态注册
<script type="text/javascript" >
// 静态注册表单提交事务
function onsubmitFun(){
// 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
alert("静态注册表单提交事件----发现不合法");
return flase;
}
</script>
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册"/>
</form>