文章目录
4.1 官方文档
4.1.1 地址: https://www.w3school.com.cn/js/index.asp.
4.1.2 离线文档: W3School 离线手册(2017.03.11 版).chm
4.2 基本说明
-
JavaScript 能改变 HTML 内容，能改变 HTML 属性，能改变 HTML 样式 (CSS)，能完成页面的数据验证
-
小案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>入门小案例</title>
</head>
<body>
<h2>JavaScript 能做什么？</h2>
<p>JavaScript 能够改变 HTML 属性值。</p>
<p>在本例中，JavaScript 改变了图像的 src 属性值。</p>
<button onclick="document.getElementById('myImage').src='./img/eg_bulbon.gif'">开灯</button>
<img id="myImage" border="0" src="./img/eg_bulboff.gif" style="text-align:center;">
<button onclick="document.getElementById('myImage').src='./img/eg_bulboff.gif'">关灯</button>
</body>
</html>
-
JS 需要运行浏览器来解析执行 JavaScript 代码
-
JS 是 Netscape 网景公司的产品，最早取名为LiveScript，后更名为 JavaScript。和 Java 没有关系
-
JavaScript 简写 JS
4.3 JavaScript 特点!
- JavaScript 是一种解释型的脚本语言，C、C++等语言先编译后执行，而 JavaScript 是在程序的运行过程中逐行进行解释
- JavaScript 是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象
- JavaScript 是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化
- 跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
- 案例演示，JavaScript 是弱类型的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript是弱类型的</title>
<!--案例演示-->
<!--
解释：
1. js代码可以写在 script标签中
2. type="text/javascript" 表示这个脚本(script)类型是javascript
3. type="text/javascript" 可以不写，但是建议写上
4. js语句可以不写 ; 建议写上
5. var
-->
<script type="text/javascript">
// //弱类型
// var name = "虎年行大运";
// //输出 alert() 使用弹框方式
// //输出 console.log() 在调试输出
// alert("name=" + name);
// //输出变量的类型typeof, 输出变量的类型
// alert(typeof name); //String
// name = 100; //给name重新赋值
//alert(typeof(name));// 类型number
var age = 10;//数值
console.log("age=" + age)//age=10
console.log(typeof age);// 类型number
age = "北京";
console.log("age=" + age)//age=北京
console.log(typeof age);// 类型String
//那如果输出字符串+数字的话会把数字转成string吗
var n = 123 + "abc";
console.log(n);//123abc
console.log(typeof n);// 类型String
</script>
</head>
<body>
</body>
</html>
4.4 JavaScript 快速入门
4.4.1 使用方式 1:script 标签 写 JS 代码
- 应用实例 修改 1.js-use.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>script 标签中 写 js 代码</title>
<!--
解读：
1.可以在 head 和body 中嵌入 script
2.执行顺序是 从上到下
3.建议放在 head 中
-->
<script type="text/javascript">
//在head中使用 script 写 js
console.log("ok~");
</script>
</head>
<body>
<script type="text/javascript">
//在body内使用script写js
console.log("虎年行大运~");
</script>
</body>
</html>
4.4.2 使用方式 2: 使用 script 标签引入 JS 文件
- 应用实例 创建 test.js 和 2.js-use.html
alert("hi, xjs");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用 script 标签引入 JS 文件</title>
<!--
<script type="text/javascript" src="引入的js文件"></script>
-->
<script type="text/javascript" src="./js/my.js"></script>
</head>
<body>
</body>
</html>
4.4.3 两种使用 js 的方式，不能混用
- 应用实例 修改 js-use-detail.html，看使用细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两种使用 JS 的方式，是二选一，不能混用</title>
<!--
如果你两种方式都使用了
1.不会报错
2.但是只有一个生效，前面引入的 JS 文件生效(理解：执行从上到下)
-->
<script type="text/javascript" src="./js/my.js">
alert("虎年行大运~~~")//这里不会生效.如果想再次使用，再写一段 script 即可
</script>
</head>
<body>
</body>
</html>
4.5 查看 JS 错误信息 !!!
4.5.1 执行 JS，chrome 浏览器如何查看错误信息
- 更多工具->开发者->console
4.5.2 执行 JS，ff 浏览器如何查看错误信息
- web 开发者->web 开发者工具->控制台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>怎么看错误提示！！</title>
<!--
进入到调试器ctrl+shift+i，就可以看到错误
一定要get
-->
<script type="text/javascript">
console2.log("hi")
</script>
</head>
<body>
</body>
</html>
4.6 JavaScript 变量
4.6.1 JavaScript 变量表示存储数据的容器
4.6.2 应用实例 simple_var.html
- 应用实例，创建 simple_var.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>javaScript 变量</title>
<!--
进入到调试器ctrl+shift+i，就可以看到错误
一定要get
-->
<script type="text/javascript">
var age = 10;
age = "abc"
age = 1.1;
age = null;
console.log("hi");
name = 'a';
console.log(typeof name);//string->我们现在在将js,不是java
age = 1.1;
console.log(typeof age);//number
age = 100;
console.log(typeof age);//number
</script>
</head>
<body>
</body>
</html>
4.6.3 变量定义格式 var-define.html
- 应用实例，创建 var_define.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定义变量</title>
</head>
<body>
<script type="text/javascript">
var job;
var name = "张三丰";
age = 100;
console.log("job=" + job);//job=undefined
console.log("name=" + name);//name=张三丰
console.log("age=" + age);//age=100
</script>
</body>
</html>
4.7 JavaScript 数据类型
4.7.1 数据类型介绍
| 数值类型 | number |
|---|---|
| 字符串类型 | string |
| 对象类型 | object |
| 布尔类型 | boolean |
| 函数类型 | function |
4.7.2 特殊值!!!
- undefined ： 变量未赋初始值时，默认 undefined
- null ： 空值
- NaN ： (Not a Number)非数值
- 应用实例: 创建 datetype.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型-特殊值</title>
</head>
<body>
<script type="text/javascript">
//说明：
//1. typeof()是 JavaScript 语言提供的一个函数。
//2. 返回变量的数据类型
//3. 3个特殊值 undefined 没有赋值就使用 null, NaN 当不能识别类型
var email;//特殊值 undefined
console.log("email= " + email);//undefined
var address = null;
console.log("address= " + address);//null
console.log(10*"abc");//NaN Not a Number
</script>
</body>
</html>
4.7.3 数据类型注意事项
- String 字符串 【可以双引号括起来，也可以单引号括起来】
- 如：“a book of JavaScript”、‘abc’、“a”、“”
4.8 运算符
4.8.1 算术运算符
- 算术运算符用于执行变量与/或值之间的算术运算
- y 等于 5，下面的表格解释了这些算术运算符
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| + | 加 | x=y+2 | x=7 |
| - | 减 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除 | x=y/2 | x=2.5 |
| % | 求余数(保留整数) | x=y%2 | x=1 |
| ++ | 累加 | x=++y | x=6 |
| - - | 递减 | x=- -y | x=4 |
4.8.2 赋值运算符
- 赋值运算符用于给 JavaScript 变量赋值。
- 给定 x=10 和 y=5，下面的表格解释了赋值运算符。
| 运算符 | 例子 | 等价于 | 结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
4.8.3 关系运算符
- 关系(比较) 运算符在逻辑语句中使用，以测定变量或值是否相等
- 给定 x=5，下面的表格解释了比较运算符
4.8.4 关系运算符注意事项
- 等于： == 是简单的做字面值的比较
- 全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
- 应用实例: 创建 relationship-operator-关系运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关系运算符</title>
</head>
<body>
<script type="text/javascript">
var a = "100";//string
var b = 100;//number
console.log(a==b)//true 比较字面数值
console.log(a===b);//false 比较内容 + 数据类型
</script>
</body>
</html>
4.8.5 逻辑运算符
4.8.5.1 逻辑运算符说明
- 逻辑运算符用于测定变量或值之间的逻辑
- 给定 x=6 以及 y=3，下表解释了逻辑运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | ( x < 10 && y > 1 ) 为 true |
| || | or | ( x == 5 || y == 5 ) 为 false |
| ! | not | ! ( x == y ) 为 true |
4.8.5.2 逻辑符运算注意事项和细节
-
在 JavaScript 语言中，所有的变量，都可以做为一个 boolean
-
0 、null、 undefined、“”(空串)、NaN 都认为是 false
-
&& 且运算，有两种情况，即 && 返回值是遵守短路与的机制
① 当表达式全为真的时候。返回最后一个表达式的值
② 当表达式中，有一个为假的时候。返回第一个为假的表达式的值 -
|| 或运算，有两种情况，即 || 返回值是遵守短路或的机制
① 当表达式全为假时，返回最后一个表达式的值
② 只要有一个表达式为真，就返回第一个为真的表达式的值 -
&& 运算 和 || 运算 有短路现象。
① 短路现象：当这个 && || 运算有确定结果后，后面的表达式不再执行
② 回顾 => Java基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>逻辑运算符注意事项和使用细节</title>
<script type="text/javascript">
//1.在 JavaScript 语言中，所有的变量，都可以作为一个 Boolean 类型的变量去使用
var name = "小谢";
if (name) {
alert("hi~~~")
}
//2. 0、null、undefined、""(空串)、NaN 都认为 false
var address = "";
if (!address) {
alert("ok~~~")
}
if (!(100 * "hello")) {
alert("NaN~~~")
}
//3. && 且运算，有两种情况 ==> ( && 返回值是遵守短路与的机制)
var res1 = "虎年行大运" && 888;
alert("res1=" + res1);//888
var res2 = null && 888;
alert("res2=" + res2);//null
//4. || 或运算，有两种情况 ==> ( && 返回值是遵守短路或的机制)
var res3 = null || 888;
alert("res3=" + res3);//888
var res4 = "小谢" || 888;
alert("res4=" + res4);//小谢
//小练习
var res5 = (10 > 1) && (6 < 0);
alert("res5=" + res5);//false
var res6 = (10 + 1) || (6 < 0);
alert("res6=" + res6);//11
//5. && 运算和 || 运算 有短路现象
var n1 = 1;
var n2 = 3;
var res7 = n1++ || n2++;
alert("n1=" + n1 + " n2=" + n2); //n1=2 n2=3
var n3 = 0;
var n4 = 3;
var res8 = n3++ || n4++;
alert("n3=" + n3 + " n4=" + n4); //n3=1 n4=4
</script>
</head>
<body>
</body>
</html>
4.8.6 条件符运算
- JavaScript 还可以使用 类似 Java 的三元运算符
- 应用实例 创建: condition-operator-条件运算符.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件运算符</title>
<script type="text/javascript">
// 三元运算符
//1. 规则 如果 (10 > 1) 条件表达式为 T ，返回第一个表达式的值(一真大师)
//2. 如果 (10 > 1) 条件表达式为 F ，返回第二个表达式的值
var res = (10 > 1) ? "小谢" + "加油~" : 888;
alert(res);
</script>
</head>
<body>
</body>
</html>
4.9 数组定义
- 应用实例 — 演示 js 的数组定义使用的 4 种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组定义</title>
<script type="text/javascript">
//"Audi" , "BMW","Volvo";
//数组定义方式1
console.log("=====数组定义方式1=====");
var cars1 = ["Audi", "BMW", "Volvo"];
console.log("cars1=" + cars1);//cars1=Audi,BMW,Volvo
console.log("cars1[1]=" + cars1[1])//cars1[1]=BMW
//数组定义方式2
console.log("=====数组定义方式2=====");
var cars2 = [];
cars2[0] = "奥迪";
cars2[1] = "宝马";
cars2[2] = "奔驰";
console.log("cars2=" + cars2);//cars2=奥迪,宝马,奔驰
console.log("cars[2]=" + cars2[2]);//cars[2]=奔驰
console.log("cars[10]=" + cars2[10]);//cars[10]=undefined 如果该元素不存在，返回的就是undefined
//数组定义方式3
console.log("=====数组定义方式3=====");
var cars3 = new Array("Audi", "BMW", "Volvo");
console.log("car3=" + cars3);//car3=Audi,BMW,Volvo
console.log("car3[0]=" + cars3[0]);//car3[0]=Audi
//数组定义方式4
console.log("=====数组定义方式4=====");
var cars4 = new Array();//空数组
console.log(typeof cars4);//object
cars4[0] = "红旗";
cars4[1] = "法拉利";
cars4[2] = "兰博基尼";//相当于是给数组扩容
console.log("cars4=" + cars4);//cars4=红旗,法拉利,兰博基尼
cars4[0] = "abc~";//替换
console.log("cars4=" + cars4);//cars4=abc~,法拉利,兰博基尼
//如果是跳过了下标给赋值，那么中间没有赋值的元素为undefined
cars4[10] = "yy";
console.log("cars4=" + cars4);//cars4=abc~,法拉利,兰博基尼,,,,,,,,yy
console.log("cars4[5]="+cars4[5]);//cars4[5]=undefined
</script>
</head>
<body>
</body>
</html>
4.10 数组使用和遍历
- 应用实例: 创建: array_for.html, 演示 js 的数组遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组使用和遍历</title>
<script type="text/javascript">
var cars = ["Audi", "BMW", "Volvo", 100, 1.1, true];
console.log("数组的长度="+cars.length);//数组的长度=6
//遍历
for ( i = 0; i < cars.length; i++) {
console.log(cars[i]); //log方法会自动换行
}
</script>
</head>
<body>
</body>
</html>
4.11 JavaScript 函数快速入门
4.11.1 JS 函数介绍
- 一句话：函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码块
4.11.2 快速入门案例
- 演示 js 函数的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数快速入门</title>
<script type="text/javascript">
//编写一个简单的函数
function hi() {
alert("hi 小谢~");
}
//如果不调用函数，函数不会执行
//在JS中，调用函数有两种方式：
//1.主动调用 hi();
hi();
//2.通过事件去触发
</script>
</head>
<!--
这里表示给button绑定了一个单击事件
当用户点击了该button，就会触发 hi() 函数
-->
<body>
<!--
这里表示给button绑定了onclick事件
当用户点击了该button，就会触发 hi() 函数
-->
<button onclick="hi()">点击一下</button>
</body>
</html>
4.12 JavaScript 函数定义方式
4.12.1 方式 1: function 关键字来定义函数
- 基本语法：
function 函数名(形参列表) {
函数体
return 表达式
}
//调用 函数名(实参列表);
- 应用实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用函数方式1</title>
<script type="text/javascript">
//定义一个没有返回值的函数
function f1() {
alert("f1()被调用...")
}
f1();
//定义有形参的函数
//这里的形参，不需要指定类型, name的数据类型是由实参决定
function f2(name) {
alert("hi," + name);
}
f2("东辉哥~");
//定义有形参和返回值的函数, 不需要指定返回类型, 返回类型由返回的数据来决定
//js的函数调用机制和java一样
function f3(n1, n2) {
return n1 + n2;
}
alert("f3(n1,n2)=" + f3(10, 20));
</script>
</head>
<body>
</body>
</html>
4.12.2 方式 2: 将函数赋给变量
- 基本语法：
var 函数名 = function(形参列表) {
函数体
return 表达式
}
//调用 函数名(实参列表)
- 案例演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用函数方式2</title>
<script type="text/javascript">
//可以理解成f1指向了函数
var f1 = function () {
alert("hi, 小丽丽~~")
}
console.log(typeof f1);//function
f1();//调用函数
var f2 = function (name) {
alert("hello~ "+name);
}
f2("升哥哥")
//还可以这样玩一把, 也能调用f1()
var f3 = f1;
f3();
</script>
</head>
<body>
</body>
</html>
4.13 JavaScript 函数注意事项和细节
-
JS 中函数的重载会覆盖掉上一次的定义
-
函数的 arguments 隐形参数（作用域在 function 函数内）
① 隐形参数: 在 function 函数中不需要定义，可以直接用来获取所有参数的变量
② 隐形参数特别像 java 的可变参数一样。public void fun( int ... args )
③ js 中的隐形参数跟 java 的可变参数一样。操作类似数组 -
应用实例
- 控制台输出结果如下：
- 特别提示：如果我们希望通过
console.log()输出对象的数据，使用,连接而不是+，具体到后面 ES6新特性再说~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数使用注意事项和细节</title>
<script type="text/javascript">
//1.JS 中函数的重载会覆盖掉上一次的定义
//解读：
//(1) JS 中函数的重载会覆盖掉上一次的定义
//(2) 当你调用 f1() 的时候，其实调用的是 f1(name) 这个方法
//(3) 调用 f1(name) 的时候，如果没有传入实参，那么这个形参name就是undefined
function f1() {
alert("ok~ jack");
}
function f1(name) {
alert("hi " + name)
}
f1();//hi undefined
//2.函数的 arguments 隐形参数（作用域在 function 函数中）
// (1) 隐形参数：在 function 函数中不需要定义，可以直接用来获取所有参数的变量
// (2) 隐形参数特别像Java 的可变参数一样。public void fun(int... args)
// (3) JS 中的隐形参数跟 Java 的可变参数一样，操作类似数组
function f2() {
//遍历 函数的 arguments 隐形参数
//arguments 是数组
//小技巧：如果我们希望通过 console.log 输出对象的数据，使用 , 连接 而不是 +
console.log("arguments=", arguments);//arguments=10,20,30,谢家升
console.log("arguments长度=" + arguments.length);//arguments长度=4
alert("f2() ...")
}
f2(10, 20, 30, "谢家升");
//3. (1)如果我们的函数有形参，在传入实参的时候，任然按照顺序匹配
// (2)如果有匹配上，就赋给它，如果没有匹配上也无所谓
// (3)任然会把所有的实参都赋给 arguments
// (4)如果形参个数大于实参个数，则多余形参的值为 undefined
function f3(n) {
console.log("n=" + n); // n=100
console.log("arguments=", arguments); // arguments=100,90,20
}
f3(100, 90, 20);
</script>
</head>
<body>
</body>
</html>
4.14 JS 函数课堂练习
- 要求: 编写 一个函数。用于计算所有参数相加的和并返回, 如果实参不是 number, 就过滤掉
- 提示: 使用 typeof(变量) 来判断参数类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数小练习</title>
<script type="text/javascript">
//要求：编写一个函数，用于计算所有参数相加的和并返回，如果实参不是number，就过滤掉
//提示：使用 typeof(变量) 来判断参数类型
function f() {
var res = 0;
//通过arguments 来获取传入的参数
for (var i = 0; i < arguments.length; i++) {
//进行if判断，过滤掉不是number的数据
if (typeof (arguments[i]) == "number") {
res += arguments[i];
}
}
return res;
}
//测试
f(10,20,30,40,"谢家升",899);
alert("结果=" + res); //结果=999
</script>
</head>
<body>
</body>
</html>
4.15 JS 自定义对象
4.15.1 自定义对象方式 1：Object 形式
- 对象的定义
var 对象名 = new Object(); //对象实例(空对象)
对象名.属性名 = 值; //定义一个属性
对象名.函数名 = function(){} //定义一个函数
- 对象访问
对象名.属性
对象名.函数名();
- 应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义对象</title>
<script type="text/javascript">
//自定义对象的方式1
var person = new Object();//person是一个空对象，没有自定义的函数和属性
console.log("person的类型="+typeof(person));//person的类型=object
//增加一个属性name
person.name = "谢家升";
//增加一个属性age
person.age = 18;
//增加函数
person.say = function () {
//这里的this就是person
console.log("person的信息 " + this.name + " " + this.age + " " + this.job);
}
//调用
//访问属性
console.log("name= " + person.name + " email= " + person.email);
//访问方法
person.say();
//小细节, 如果没有定义属性，直接使用，就会出现变量提升， 显示undefined
console.log("address= " + person.address);//address= undefined
</script>
</head>
<body>
</body>
</html>
4.15.2 自定义对象方式 2：{} 形
- 对象的定义
var 对象名 = {
属性名: 值, //定义属性
属性名: 值, //定义属性 注意有,号
函数名: function(){} //定义函数
};
- 对象访问
对象名.属性
对象名.函数名();
- 应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义对象方式2：{} 形式</title>
<script type="text/javascript">
//自定义对象方式2：{} 形式
var person = {
name: "谢家升", //多个属性和函数之间，使用 , 隔开
age: "18",
hi: function () {
console.log("person的信息：" + this.name + " " + this.age);
},
sum: function (n1, n2) {
return n1 + n2;
}
}
//使用
console.log("外部访问 name= " + person.name + " age= " + person.age);
//外部访问 name= 谢家升 18
person.hi();//person的信息：谢家升 18
console.log("sum=" + person.sum(10, 30));//sum=40
</script>
</head>
<body>
</body>
</html>
4.16 事件
4.16.1 事件介绍
- 事件是电脑输入设备与页面进行交互的响应
- 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行
4.16.1.1 js 事件文档地址
4.16.2 事件一览表
- 下面是一些常见的 HTML 事件：
4.16.3 事件分类
-
事件的注册 (绑定)：当事件响应(触发)后要浏览器执行哪些操作代码，叫事件注册或事件绑定
-
静态注册事件：通过 html 标签的事件属性直接赋于事件响应后的代码，这种方式叫静态注册
-
动态注册事件：通过 js 代码得到标签的 dom 对象，然后再通过
dom 对象.事件名 = function(){}这种形式叫动态注册
4.16.4 动态注册事件步骤【拿到–>操作】
- 获取标签<—>dom 对象
dom 对象.事件名 = fucntion(){}
4.16.5 onload 加载完成事件
- onload : 某个页面或图像被完成加载
- 应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onload 加载完成事件</title>
<script type="text/javascript">
//定义了一个函数
function sayOk() {
alert("静态注册 onload 事件 sayOk");
}
//解读：
//1.在JS中，将页面窗口 映射成 window dom对象
//2.window对象有很多的函数和属性，可以使用
//3.window.onload 表示页面被加载完成
//4.后面的 function () {} 表示加载完毕后，要执行的函数/代码
//5.这里，如果同时存在静态注册和动态注册，只有静态注册会生效
window.onload = function () {
alert("动态注册 onload 事件");
}
</script>
</head>
<!--静态注册-->
<body onload="sayOk()">
hello~
</body>
</html>
4.16.6 onclick 单击事件
- onclick ：鼠标点击某个对象
- 应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onclick 单击事件</title>
<script type="text/javascript">
//静态注册
function sayOk() {
alert("你点击了sayOk按钮~");
}
//当页面加载完毕后，我们再进行动态绑定事件
window.onload = function () {//注意，此处要小心，不能忘了
//动态注册 onclick 事件
//1. 先拿到 id=btn01 的button标签对应的 dom对象
//2. 通过dom对象动态的绑定onclick单击事件
//3. 通过document的 getElementById 获取对应的dom对象
//4. 挖坑~~~填坑(要页面加载完成之后再绑定单击事件，否则报错)
var btn01 = document.getElementById("btn01");
//alert(btn01);//[object HTMLButtonElement]
btn01.onclick = function () {
alert("你点击了sayHi按钮~~~");
}
}
</script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="sayOk()">sayOk按钮</button>
<button id="btn01">sayHi按钮</button>
</body>
</html>
4.16.7 onblur 失去焦点事件
- onblur : 元素失去焦点
- 应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onblur 失去焦点</title>
<script type="text/javascript">
//静态绑定
function upperCase() {
//1.先得到fname 输入框的 value值 --> 得到对应的 dom对象
var fname = document.getElementById("fname");
fname.value = fname.value.toUpperCase();
}
//动态绑定【注意：要在页面加载完毕后再绑定事件】
window.onload = function () {
//1. 先拿到fname2对应的 dom 对象
var fname2 = document.getElementById("fname2");
//2. 给这个对象绑定事件
fname2.onblur = function () {
fname2.value = fname2.value.toUpperCase();
}
}
</script>
</head>
<body>
<h1>将字母转成大写</h1>
请输入英文单词:
<input type="text" id="fname" onblur="upperCase()"/><br/>
请输入英文单词:
<input type="text" id="fname2"/><br/>
</body>
</html>
4.16.8 onchange 内容发生改变事件
- onchange : 域的内容被改变
- 应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange 内容发生改变事件</title>
<script type="text/javascript">
//静态绑定事件
function mySal() {
alert("工资发生了变化~~");
}
//动态绑定事件
window.onload = function () {
//得到girlfriend对应的dom对象
var girlfriend = document.getElementById("girlfriend");
//动态绑定事件
girlfriend.onchange = function () {
alert("你的女友又换了？？")
}
}
</script>
</head>
<body>
你当前工资水平： <!--静态注册 onchange 事件-->
<select onchange="mySal()">
<option>--工资范围--</option>
<option>10k以下</option>
<option>10k-30k</option>
<option>30k以上</option>
</select>
<br/>
你当前的女友是谁： <!--动态注册 onchange 事件-->
<select id="girlfriend">
<option>--女友--</option>
<option>姬如雪</option>
<option>女帝</option>
<option>倾国倾城</option>
</select>
</body>
</html>
4.16.9 onsubmit 表单提交事件!
- onsubmit : 注册按钮被点击, 提交表单(需求: 如果用户名或密码为空，不能提交表单，温馨提示：正则表达式语法是通用)
- 应用实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onsubmit 表单提交事件</title>
<script type="text/javascript">
//静态注册submit表单提交事件
function register() {
//先得到输入的用户名和密码
var username = document.getElementById("username");
var pwd = document.getElementById("pwd");
//判断是否为空
if ("" == username.value || "" == pwd.value) {
alert("用户名和密码都不能为空，不能提交");
return false;//不提交
}
return true;//要提交
}
//动态绑定表单提交事件
window.onload = function () {
//调错：使用折半法，观察页面是否真的是最新的，是不是修改的页面和访问的页面一致
//先获取 id = form2 对应的dom对象
var form2 = document.getElementById("form2");
//给 form2 绑定表单提交事件
//解毒：onsubmit 绑定的函数，会直接将结果(true,false) 返回给 onsubmit
form2.onsubmit = function () {
//alert(form2.username.value);
if ("" == form2.username.value || "" == form2.pwd.value) {
alert("用户名和密码都不能为空~~");
return false;//不提交
}
return true;//提交
}
}
</script>
</head>
<body>
<h1>注册用户1</h1> <!--静态注册表单提交事件-->
<form action="ok.html" onsubmit=" return register()">
用户名：<input type="text" id="username" name="username"/><br/>
密 码：<input type="password" id="pwd" name="pwd"/><br/>
<input type="submit" value="注册用户"/>
</form>
<h1>注册用户2</h1> <!--动态注册表单提交事件-->
<form action="ok.html" id="form2">
用户名：<input type="text" name="username"/><br/>
密 码：<input type="password" name="pwd"/><br/>
<input type="submit" value="注册用户"/>
</form>
</body>
</html>
4.16.10 其他事件，基本原理都一样
4.16.11 作业布置
- onsubmit : 注册按钮被点击, 提交表单, 要求如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>homework</title>
<script type="text/javascript">
//动态绑定表单提交
window.onload = function () {
//1. 得到form2的dom对象
var form2 = document.getElementById("form2");
//2. 绑定onsubmit事件
form2.onsubmit = function () {
//3. 获取username输出
//过关斩将, 一个一个的条件验证，通过就继续，不通过就return false
//考虑正常情况，返回取反!!, 编程思想，写代码的思路
if(!(form2.username.value.length >= 4 && form2.username.value.length <= 6)) {
alert("用户名长度(4-6) 不满足");
return false;
}
//4. 处理密码合理性, 灵活
if(form2.pwd.value.length != 6) {
alert("密码长度(6) 不满足");
return false;
}
//5. 判断两次密码相等
if(form2.pwd.value != form2.pwd2.value) {
alert("你输入的两次密码不等");
return false;
}
//6 电子邮件..=> 需要使用正则表达式技术[在java基础中，877讲]
//主要给大家说如何使用正则表达式
//String regStr = "^[\\w-]+@([a-zA-Z]+\\.)+[a-zA-Z]+$";
//解读
//1. 在java中，转义符是\\, 在js中使用正则表达式 \
//2. emailPattern.test("xxx"), 验证"xxx"是不是满足emailPattern规则
// 如果满足返回true, 否则返回false
var emailPattern = /^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;
if(!emailPattern.test(form2.email.value)) {
alert("电子邮件格式不正确");
return false;
}
return true;
}
}
</script>
</head>
<body>
<h1>注册用户</h1> <!-- 动态注册表单提交事件 -->
<form action="ok.html" id="form2">
用户名: <input type="text" name="username"/>长度(4-6)<br/>
密 码: <input type="password" name="pwd"/>长度(6)<br/>
确 认: <input type="password" name="pwd2">长度(6)<br/>
电 邮: <input type="text" name="email">满足基本格式<br/>
<input type="submit" value="注册用户"/></form>
</body>
</html>
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
