JavaScript
文章目录
前言
接着之前的前端复习02的css继续复习了JavaScript的相关知识。
提示:以下是本篇文章正文内容,下面案例可供参考
一、JavaScript 是什么?
Javascrip即JS。Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解析执行 JavaScript 代码。
JS 是 Netscape 网景公司的产品,最早取名为 LiveScript,为了吸引更多 java 程序员,更名为 JavaScript,可以说和Java是毫无关系。
JS 是弱类型,类型可变;Java 是强类型,定义变量后类型不可变。
特点:
- 交互性(信息的动态交互)
- 安全性(不允许直接访问本地硬盘)
- 跨平台性(只要是可以解释 JS 的浏览器都可以执行,和平台无关)
二、JavaScript 和 html 的两种结合方式
2.1 直接在 head 或者 body 标签中使用 script 标签
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
alert("hello JavaScript!");
</script>
</head>
<body>
</body>
</html>
效果:
2.2使用 script 标签引入单独的 JavaScript 代码文件
在 JavaScript 文件里写代码,通过 script 标签里的 scr 属性引入 JavaScript 文件路径。
同一个 script 标签里只能使用一种方式,不可以混合,可以另加 script 标签。
JavaScript 代码如下(示例):
alert("hello JavaScript!");
HTML代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="01.js"></script>
</head>
<body>
</body>
</html>
效果同上
三、JavaScript 的变量
3.1 变量是什么
变量是可以存放某些值的内存的命名。
3.2 JavaScript 的变量类型
数值类型: number
字符串类型: string
对象类型: object
布尔类型: boolean
函数类型: function
3.3 JavaScript 里特殊的值
undefined :
未定义,所有 js 变量未赋于初始值的时候,默认值都是 undefined
null :空
NaN :Not a Number,非数值
3.4 JavaScript 中定义变量格式
var 变量名;
var 变量名 = 值;
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var i,j;
alert(i);//弹窗显示undefined
i = 33;
alert(typeof(i));//弹窗显示number
j = "aaa";
alert(typeof(j));//弹窗显示string
alert(i*j);//弹窗显示NaN
</script>
</head>
<body>
</body>
</html>
四、JavaScript 的运算
4.1 关系运算
等于: == 等于是简单的做字面值的比较
全等于: === 除了做字面值的比较之外,还会比较两个变量的数据类型
如:
1==“1” : true
1===“1” : false
4.2 逻辑运算
且: &&
或: ||
取反(非): !
在 JavaScript 语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用。
0 、null、 undefined、””(空串) 都认为是 false;
&& 且运算两种情况:
第一种:当表达式全为真的时候。返回最后一个表达式的值。
第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值
|| 或运算两种情况:
第一种情况:当表达式全为假时,返回最后一个表达式的值
第二种情况:只要有一个表达式为真。就会把回第一个为真的表达式的值
&& 与运算 和 ||或运算 有短路。当这个&&或||运算有结果了之后,后面的表达式不再执行
五、JavaScript 的数组
格式:
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
通过给数组下标赋值,自动给数组扩容
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var arr = [];
arr[0] = 22;
arr[3] = "aaa";
alert(arr[3]);
alert(arr.length)
//数组的遍历,未赋值的元素弹窗显示undefined
for (var i=0;i<arr.length;i++){
alert(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
六、JavaScript 的函数
6.1 函数的定义
在 Java 中函数允许重载,但是在 JS 中不允许,函数的重载会直接覆盖掉上一次的定义,只展现最后的一次效果。
6.2 使用 function 关键字来定义函数
格式:
function 函数名(形参列表){
函数体
}
6.2.1 无参函数
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//构造无参函数fun01
function fun01(){
alert("调用了无参函数fun01");
}
fun01();
</script>
</head>
<body>
</body>
</html>
效果:
6.2.2 有参函数
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//构造有参函数fun02
function fun02(a,b){
alert("调用了有参函数fun02,a = "+a+",b = "+b);
}
fun02(32,77);
</script>
</head>
<body>
</body>
</html>
效果:
6.2.3 带返回值的函数
在 JavaScript 语言中,在函数体内直接使用 return 语句定义带有返回值的函数
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//构造带返回值的函数
function sum(a,b){
var sum = a+b;
return sum;
}
alert("调用了带返回值的函数sum,结果为:"+sum(32,77));
</script>
</head>
<body>
</body>
</html>
效果:
6.3 使用 var 函数名 = function( ) { } 来定义函数
格式:
var 函数名 = function(形参列表) { 函数体 }
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//构造带返回值的函数
var sum = function (a,b){
var sum = a+b;
return sum;
}
alert("调用了带返回值的函数sum,结果为:"+sum(32,77));
</script>
</head>
<body>
</body>
</html>
6.4 函数的 arguments 隐形参数(只在 function 函数内)
就是在 function 函数中不需要定义,但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像 java 基础的可变长参数一样。
public void fun( Object … args );
可变长参数其他是一个数组。
那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function sum(a,b){
var sum = 0;
for (var i = 0;i<arguments.length;i++){
if(typeof (arguments[i]) == "number"){
sum +=arguments[i];
}
}
return sum;
}
alert("调用了带返回值的函数sum,结果为:"+sum(1,2,3,4,5,6));
</script>
</head>
<body>
</body>
</html>
效果:
七、JS 中的自定义对象
7.1 Object 形式的自定义对象
对象的定义: var 变量名 = new Object(); // 对象实例(空对象) 变量名.属性名 = 值; // 定义一个属性 变量名.函数名 = function(){} // 定义一个函数 对象的访问: 变量名.属性 / 函数名(); 代码如下(示例):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var obj = new Object();
obj.name = "kk"
obj.sex = '男';
obj.age = 22;
obj.fun = function (){
alert("姓名:"+this.name+",性别:"+this.sex+",年龄:"+this.age)
}
obj.fun();
</script>
</head>
<body>
</body>
</html>
效果:
7.2 {}花括号形式的自定义对象
对象的定义:
var 变量名 = { // 空对象
属性名:值, // 定义一个属性
属性名:值, // 定义一个属性
函数名:function(){} // 定义一个函数
};
对象的访问:
变量名.属性 / 函数名();
代码如下(示例):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
var obj = {
name:"kk",
sex:'男',
age:22,
fun : function (){
alert("姓名:"+this.name+",性别:"+this.sex+",年龄:"+this.age)
}
}
obj.fun();
alert(obj.age);
</script>
</head>
<body>
</body>
</html>
效果:
八、js 中的事件
8.1 事件介绍
8.1.1 什么是事件
事件是电脑输入设备与页面进行交互的响应
8.1.2 常用的事件
onload 加载完成事件: 页面加载完成之后,常用于做页面 js 代码初始化操作
onclick 单击事件: 常用于按钮的点击响应操作。
onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作
onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。
8.2 事件的注册
8.2.1 什么是事件的注册(绑定)
告诉浏览器当事件响应后要执行哪些操作代码
8.2.2 静态注册事件和动态注册事件
静态注册事件:通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。
动态注册事件:是指先通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件响应后的代码,叫动态注册。
动态注册基本步骤:
1、获取标签对象
2、标签对象.事件名 = fucntion(){}
8.3 onload 加载完成事件
8.3.1 静态注册 onload 事件
8.3.1.1 直接写在 body 标签内
代码如下(示例):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onload="alert('静态注册 onload 事件');">
</body>
</html>
效果:
8.3.1.2 多个 onload 事件写在 script 标签的函数里
代码如下(示例):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onloadFun(){
alert('静态注册 onload 事件1');
alert('静态注册 onload 事件2');
alert('静态注册 onload 事件3');
}
</script>
</head>
<body onload="onloadFun();">
</body>
</html>
8.3.2 动态注册 onload 事件
代码如下(示例):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function (){
alert("动态注册的 onload 事件");
}
</script>
</head>
<body>
</body>
</html>
效果:
8.4 onclick 单击事件
8.4.1 静态注册的 onclick 事件
代码如下(示例):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onclickFun(){
alert("静态注册的 onclick 事件");
}
</script>
</head>
<body>
<button onclick="onclickFun()">按钮1</button>
</body>
</html>
效果:
8.4.2 动态注册的 onclick 事件
代码如下(示例):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
window.onload = function (){
// 1 获取标签对象
/*
* document 是 JavaScript 语言提供的一个对象(整个文档)
* Element 元素(就是标签)
* getElementById 通过 id 属性获取标签对象
**/
var btnObj = document.getElementById("btn01");
//alert(btnObj);
// 2 通过标签对象.事件名 = function(){}
btnObj.onclick = function () {
alert("动态注册的 onclick 事件");
}
}
</script>
</head>
<body>
<button id="btn01">按钮1</button>
</body>
</html>
效果:
8.5 onblur 失去焦点事件
代码如下(示例):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
// 静态注册失去焦点事件
function onblurFun() {
// console 是控制台对象,是由 JavaScript 语言提供,专门用来向浏览器的控制器打印输出, 用于测试使用
// log() 是打印的方法
console.log("静态注册失去焦点事件");
}
// 动态注册 onblur 事件
window.onload = function () {
//1 获取标签对象
var passwordObj = document.getElementById("password");
// alert(passwordObj);
//2 通过标签对象.事件名 = function(){};
passwordObj.onblur = function () {
console.log("动态注册失去焦点事件");
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"><br/>
密码:<input id="password" type="text" ><br/>
</body>
</html>
效果:
8.6 onchange 内容发生改变事件
代码如下(示例):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
function onchangeFun() {
alert("爱好选择成功");
}
window.onload = function () {
//1 获取标签对象
var selObj = document.getElementById("sel01");
// alert( selObj );
//2 通过标签对象.事件名 = function(){}
selObj.onchange = function () {
alert("国籍选择成功");
}
}
</script>
</head>
<body>
爱好:
<!--静态注册 onchange 事件-->
<select onchange="onchangeFun();">
<option>--爱好--</option>
<option>篮球</option>
<option>足球</option>
<option>乒乓球</option>
</select>
国籍:
<select id="sel01">
<option>--国籍--</option>
<option>中国</option>
<option>日本</option>
<option>美国</option>
</select>
</body>
</html>
效果:
8.7 onsubmit 表单提交事件
代码如下(示例):<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//静态注册
function onsubmitFun01() {
alert("静态注册表单提交事件");
}
function onsubmitFun02() {
alert("return false 阻止静态注册表单提交事件");
return false;
}
//动态注册
window.onload = function (){
var formObj = document.getElementById("form01");
formObj.onsubmit = function (){
alert("动态注册表单提交事件");
return true;
}
}
window.onload = function (){
var formObj = document.getElementById("form02");
formObj.onsubmit = function (){
alert("return false 阻止动态注册表单提交事件");
return false;
}
}
</script>
</head>
<body>
<!--静态注册表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="onsubmitFun01();">
<input type="submit" value="静态注册表单提交"/>
</form>
<!--return false 阻止表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun02();">
<input type="submit" value="静态注册阻止表单提交"/>
</form>
<!--动态注册表单提交 -->
<form action="http://localhost:8080" id="form01">
<input type="submit" value="动态注册表单提交"/>
</form>
<!--return false 阻止表单提交 -->
<form action="http://localhost:8080" id="form02">
<input type="submit" value="动态注册阻止表单提交"/>
</form>
</body>
</html>
效果: