JAVAWeb---JavaScript

Xiao Ling.2024-02-25 9:22

JavaScript

一：JS的引入：

什么是JS:

JavaScript（简称JS）是一种高级的动态编程语言，通常用于在网页上为用户提供交互式功能。它可以通过在网页中嵌入脚本来实现各种功能，例如验证表单、创建动画效果、响应用户操作等。JavaScript是一种解释性语言，不需要编译，可以直接在浏览器中执行。它是一种多范式语言，支持面向对象、函数式和基于原型的编程风格。JavaScript是目前最流行的前端开发语言之一，被广泛用于网页开发和移动应用程序开发。
引入方式一：
内嵌式，可以内嵌在HTML中任何位置，但是一般建议在head中。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Surprise Page</title>
<style>
.text{
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #c42929;
  padding: 20px;
  width: 300px;
  height: 50px;
}
</style>
<script>
    function Surprise(){
        alert("hello,我是惊喜")
    }
</script>
</head>
<body>
<button class="text" onclick="Surprise()">点击有惊喜</button>
</body>
</html>
引入方式二：
外部引入：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Surprise Page</title>
<style>
.text{
  font-family: Arial, sans-serif;
  text-align: center;
  background-color: #c42929;
  padding: 20px;
  width: 300px;
  height: 50px;
}
</style>
<script src="test.js/01.js" type="text/javascript"></script>
</head>
<body>
<button class="text" onclick="Surprise()">点击有惊喜</button>
</body>
</html>
js 复制代码 
function Surprise(){
    alert("hello,我是惊喜")
}
效果展示：

二：数据类型与运算符：

数据类型：
JS是弱类型的，在声明时，不指定具体类型，统统为var。可以用console.log()输出在控制台。
注意，可以用typeof来判断类型。如果未赋值，那就是undefined。
注意，在JS中有function类型，可以让一个变量等于一个函数。
引用数据类型：引用数据类型对象是Object类型，各种对象和数组在 JS中都是Object类型。
在JS中，如果给一个变量赋值为null，其数据类型是Object，可以通过typeof判断数据类型。
数组，在JS中，数组是这么定义的：var cities == ["北京","上海","深圳","武汉","西安","成都"];。
运算符：
其中需要注意的是 / 和 %：/0时，结果是Infinity ，而不是报错；

%在模0时，结果是NaN,意为not a number ，而不是报错；

三：流程控制语句：

IF结构：
if结构几乎和JAVA中的一样，需要注意的是：
if()中的非空字符串会被认为是true；
if()中的非0数会被认为是 true；
补充------prompt函数：
prompt函数是JavaScript中用于在浏览器中显示一个对话框，让用户输入信息或做出选择的函数。它通常用于与用户交互，例如要求用户输入用户名或密码，或者让用户确认一个操作。prompt函数接受一个字符串作为参数，该字符串会显示在对话框中，提示用户应该输入什么信息。用户可以在对话框中输入信息后点击确认或取消按钮来确定他们的选择。prompt函数会返回用户输入的信息作为字符串，或者返回null如果用户点击了取消按钮。以下是一个简单的示例：
javascript 复制代码 
var name = prompt("请输入您的名字:");
if (name != null) {
    alert("您好，" + name + "!");
} else {
    alert("您取消了输入。");
}
在这个示例中，prompt函数会显示一个对话框，提示用户输入他们的名字。如果用户输入了名字并点击了确认按钮，那么会显示一个包含用户姓名的欢迎消息。如果用户点击了取消按钮，那么会显示一个消息表示用户取消了输入。需要注意的是，prompt函数通常用于简单的用户输入，如果需要更复杂的用户界面交互，可以考虑使用其他更强大的工具和技术。
------document.write()：
该方法可以直接在网页上输出内容，例如：
html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>Print on Web Page</title>
</head>
<body>
    <script>
        document.write("Hello, World!");
    </script>
</body>
</html>
注意，可以用这种方法和HTML一些方法配合使用。比如：document.write("<hr>");
在foreach中，循环遍历与JAVA有一定的区别：
js 复制代码 
var cities =="北京","上海","深圳","武汉","西安","成都"?
document.write("<ul>")
for(var index in cities){
document.write("<li>"+cities[index]+"</li>")
}
document.write("</ul>")
函数：
注意，函数的参数列表中的参数因为都是弱类型，所以没有必要声明类型，直接就是变量即可。
其次，调用函数时,实参和形参的个数可以不一致。后面的参数无效。
js 复制代码 
/* 
语法1 
    function 函数名 (参数列表){函数体}
            */
function sum(a, b){
    return a+b;
}
var result =sum(10,20);
console.log(result)

/* 
语法2
    var 函数名 = function (参数列表){函数体}
            */
var add = function(a, b){
    return a+b;
}
var result = add(1,2);
console.log(result);
当然，函数也可以作为参数去传递：

四：JS的对象和JSON:

4.1.对象的创建：

（1）：new Object () 创建：
js 复制代码 
var person =new ObLect();
// 给对象添加属性并赋值
person.name="张小明";
person.age=10;
person.foods=["苹果","橘子","香蕉","葡萄"];
// 给对象添加功能函数
person.eat= function (){
	console.log(this.age+"岁的"+this.name+"喜欢吃:")
	for(var i = 0;i<this.foods.length;i++){
		console.log(this.foods[i])
		}
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();

(2)：{} 创建：

js 复制代码 
var person ={
"name":"张小明",
"age":10,
"foods":["苹果","香蕉","橘子","葡萄"],
"eat":function (){
console.log(this.age+"岁的"+this.name+"喜欢吃:")
for(var i = 0;i<this.foods.length;i++){
console.log(this.foods[i])
}
}
}
//获得对象属性值
console.log(person.name)
console.log(person.age)
//调用对象方法
person.eat();

4.2.JSON:

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于阅读和编写。它基于JavaScript的对象字面量语法，但可以被多种编程语言使用。JSON格式由键/值对组成，数据以键值对的形式表示，键和值之间用冒号分隔，不同键值对之间用逗号分隔，整个数据用大括号{}包围。JSON格式常用于Web应用程序中，用于传输和存储数据。
js 复制代码 
/* 定义一个JSON串 */
var personStr ='{"name":"张小明","age":20,"girlFriend":{"name":"铁铃","age":23},"foods":["苹果","香蕉","橘子","葡萄"],"pets":[{"petName":"大黄","petType":"dog"},{"peNtame":"小花","petType":"cat"}]}'
console.log(personStr)
console.log(typeof personStr)
/* 将一个JSON串转换为对象 */
var person =JSON.parse(personStr);
console.log(person)
console.log(typeof person)
/* 获取对象属性值 */
console.log(person.name)
console.log(person.age)
console.log(person.girlFriend.name)
console.log(person.foods[1])
console.log(person.pets[1].petName)
console.log(person.pets[1].petType)
Java 复制代码 
/* 将对象转换成JSO0字符串 */
var personStr =JSON.stringify(person)
console.log(personStr)
console.log(typeof personStr)
举例第三方jar包导入后后端json和类的互化:
假设我们有一个第三方的JSON解析库，比如Gson，我们想要在后端将一个JSON字符串转换成一个Java对象。
首先，我们需要导入Gson库到我们的项目中。假设我们已经将gson-2.8.6.jar这个jar包导入到我们的项目中。
接下来，我们可以使用以下代码示例来实现JSON字符串和Java对象的互相转换：
java 复制代码 
import com.google.gson.Gson;

public class Main {
    public static void main(String[] args) {
        // JSON字符串
        String jsonString = "{\"name\":\"Alice\",\"age\":25}";

        // 创建一个Gson对象
        Gson gson = new Gson();

        // 将JSON字符串转换成Java对象
        Person person = gson.fromJson(jsonString, Person.class);

        // 输出Java对象的属性
        System.out.println("Name: " + person.getName());
        System.out.println("Age: " + person.getAge());

        // 创建一个新的Java对象
        Person newPerson = new Person("Bob", 30);

        // 将Java对象转换成JSON字符串
        String newJsonString = gson.toJson(newPerson);

        // 输出JSON字符串
        System.out.println(newJsonString);
    }

    // 定义一个Person类
    static class Person {
        private String name;
        private int age;

        public Person(String name, int age) {
            this.name = name;
            this.age = age;
        }

        public String getName() {
            return name;
        }

        public int getAge() {
            return age;
        }
    }
}
在这个示例中，我们使用Gson库将一个JSON字符串{"name":"Alice","age":25}转换成一个Person对象，并将一个Person对象转换成JSON字符串{"name":"Bob","age":30}。
同理，举例Map_List_Array与json的转化:
假设我们有一个第三方的JSON解析库，比如Gson，我们想要在后端将一个Map、List、Array对象转换成JSON字符串，或者将JSON字符串转换成Map、List、Array对象。
首先，我们需要导入Gson库到我们的项目中。假设我们已经将gson-2.8.6.jar这个jar包导入到我们的项目中。
接下来，我们可以使用以下代码示例来实现Map、List、Array对象和JSON字符串的互相转换：
java 复制代码 
import com.google.gson.Gson;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class Main {
    public static void main(String[] args) {
        // 创建一个Map对象
        Map<String, Object> map = new HashMap<>();
        map.put("name", "Alice");
        map.put("age", 25);

        // 创建一个List对象
        List<String> list = new ArrayList<>();
        list.add("apple");
        list.add("banana");
        list.add("cherry");

        // 创建一个Array对象
        String[] array = {"red", "green", "blue"};

        // 创建一个Gson对象
        Gson gson = new Gson();

        // 将Map对象转换成JSON字符串
        String mapJsonString = gson.toJson(map);
        System.out.println("Map JSON: " + mapJsonString);

        // 将List对象转换成JSON字符串
        String listJsonString = gson.toJson(list);
        System.out.println("List JSON: " + listJsonString);

        // 将Array对象转换成JSON字符串
        String arrayJsonString = gson.toJson(array);
        System.out.println("Array JSON: " + arrayJsonString);

        // 将JSON字符串转换成Map对象
        Map<String, Object> newMap = gson.fromJson(mapJsonString, Map.class);
        System.out.println("New Map: " + newMap);

        // 将JSON字符串转换成List对象
        List<String> newList = gson.fromJson(listJsonString, List.class);
        System.out.println("New List: " + newList);

        // 将JSON字符串转换成Array对象
        String[] newArray = gson.fromJson(arrayJsonString, String[].class);
        System.out.println("New Array: " + newArray);
    }
}
在这个示例中，我们使用Gson库将一个Map对象、List对象、Array对象转换成JSON字符串，并将JSON字符串转换成Map对象、List对象、Array对象。

4.3.常见对象：

4.3.1.数组：
创建数组的四种方式
new Array() 创建空数组
new Array(5) 创建数组时给定长度
new Array(ele1,ele2,ele3,... ... ,elen); 创建数组时指定元素值
[ele1,ele2,ele3,... ... ,elen]; 相当于第三种语法的简写
方法 描述
concat() 连接两个或更多的数组，并返回结果。
copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。
entries() 返回数组的可迭代对象。
every() 检测数值元素的每个元素是否都符合条件。
fill() 使用一个固定值来填充数组。
filter() 检测数值元素，并返回符合条件所有元素的数组。
find() 返回符合传入测试（函数）条件的数组元素。
findIndex() 返回符合传入测试（函数）条件的数组元素索引。
forEach() 数组每个元素都执行一次回调函数。
from() 通过给定的对象中创建一个数组。
includes() 判断一个数组是否包含一个指定的值。
indexOf() 搜索数组中的元素，并返回它所在的位置。
isArray() 判断对象是否为数组。
join() 把数组的所有元素放入一个字符串。
keys() 返回数组的可迭代对象，包含原始数组的键(key)。
lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置。
map() 通过指定函数处理数组的每个元素，并返回处理后的数组。
pop() 删除数组的最后一个元素并返回删除的元素。
push() 向数组的末尾添加一个或更多元素，并返回新的长度。
reduce() 将数组元素计算为一个值（从左到右）。
reduceRight() 将数组元素计算为一个值（从右到左）。
reverse() 反转数组的元素顺序。
shift() 删除并返回数组的第一个元素。
slice() 选取数组的一部分，并返回一个新数组。
some() 检测数组元素中是否有元素符合指定条件。
sort() 对数组的元素进行排序。
splice() 从数组中添加或删除元素。
toString() 把数组转换为字符串，并返回结果。
unshift() 向数组的开头添加一个或更多元素，并返回新的长度。
valueOf() 返回数组对象的原始值。
Array.of() 将一组值转换为数组。
Array.at() 用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。
Array.flat() 创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
Array.flatMap() 使用映射函数映射每个元素，然后将结果压缩成一个新数组。
4.3.2 Boolean对象
方法 描述
toString() 把布尔值转换为字符串，并返回结果。
valueOf() 返回 Boolean 对象的原始值。
4.3.3 Date对象
方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getYear() 已废弃。 请使用 getFullYear() 方法代替。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setTime() setTime() 方法以毫秒设置 Date 对象。
setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。
setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
setUTCSeconds() setUTCSeconds() 方法用于根据世界时 (UTC) 设置指定时间的秒字段。
setYear() 已废弃。请使用 setFullYear() 方法代替。
toDateString() 把 Date 对象的日期部分转换为字符串。
toGMTString() 已废弃。请使用 toUTCString() 方法代替。
toISOString() 使用 ISO 标准返回字符串的日期格式。
toJSON() 以 JSON 数据格式返回日期字符串。
toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
toString() 把 Date 对象转换为字符串。
toTimeString() 把 Date 对象的时间部分转换为字符串。
toUTCString() 根据世界时，把 Date 对象转换为字符串。实例：var today = new Date(); var UTCstring = today.toUTCString();
UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
valueOf() 返回 Date 对象的原始值。
4.3.4 Math
方法 描述
abs(x) 返回 x 的绝对值。
acos(x) 返回 x 的反余弦值。
asin(x) 返回 x 的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 Ex 的指数。
floor(x) 对 x 进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y,z,...,n) 返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n) 返回 x,y,z,...,n中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 四舍五入。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
tanh(x) 返回一个数的双曲正切函数值。
trunc(x) 将数字的小数部分去掉，只保留整数部分。
4.3.5 Number
方法 描述
isFinite 检测指定参数是否为无穷大。
isInteger 检测指定参数是否为整数。
isNaN 检测指定参数是否为 NaN。
isSafeInteger 检测指定参数是否为安全整数。
toExponential(x) 把对象的值转换为指数计数法。
toFixed(x) 把数字转换为字符串，结果的小数点后有指定位数的数字。
toLocaleString(locales, options) 返回数字在特定语言环境下的表示字符串。
toPrecision(x) 把数字格式化为指定的长度。
toString() 把数字转换为字符串，使用指定的基数。
valueOf() 返回一个 Number 对象的基本数字值。
4.3.6 String
方法 描述
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接两个或更多字符串，并返回新的字符串。
endsWith() 判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。
fromCharCode() 将 Unicode 编码转为字符。
indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。
includes() 查找字符串中是否包含指定的子字符串。
lastIndexOf() 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。
match() 查找找到一个或多个正则表达式的匹配。
repeat() 复制字符串指定次数，并将它们连接在一起返回。
replace() 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。
replaceAll() 在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。
search() 查找与正则表达式相匹配的值。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
split() 把字符串分割为字符串数组。
startsWith() 查看字符串是否以指定的子字符串开头。
substr() 从起始索引号提取字符串中指定数目的字符。
substring() 提取字符串中两个指定的索引号之间的字符。
toLowerCase() 把字符串转换为小写。
toUpperCase() 把字符串转换为大写。
trim() 去除字符串两边的空白。
toLocaleLowerCase() 根据本地主机的语言环境把字符串转换为小写。
toLocaleUpperCase() 根据本地主机的语言环境把字符串转换为大写。
valueOf() 返回某个字符串对象的原始值。
toString() 返回一个字符串。

五：事件：

5.1.什么是事件

HTML 事件可以是浏览器行为，也可以是用户行为。 当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生.JS的事件驱动指的就是行为触发代码运行的这种特点。

5.2 常见事件

鼠标事件
属性 描述
onclick 当用户点击某个对象时调用的事件句柄。
oncontextmenu 在用户点击鼠标右键打开上下文菜单时触发
ondblclick 当用户双击某个对象时调用的事件句柄。
onmousedown 鼠标按钮被按下。
onmouseenter 当鼠标指针移动到元素上时触发。
onmouseleave 当鼠标指针移出元素时触发
onmousemove 鼠标被移动。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmouseup 鼠标按键被松开。
键盘事件
属性 描述
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
表单事件
属性 描述
onblur 元素失去焦点时触发
onchange 该事件在表单元素的内容改变时触发( , , , 和 )
onfocus 元素获取焦点时触发
onfocusin 元素即将获取焦点时触发
onfocusout 元素即将失去焦点时触发
oninput 元素获取用户输入时触发
onreset 表单重置时触发
onsearch 用户向搜索域输入文本时触发 ( <input="search">)
onselect 用户选取文本时触发 ( 和 )
onsubmit 表单提交时触发

5.3.事件的绑定

（1）：通过属性绑定：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> </title>
<script>
    function changeText() {
       alert("鼠标点击了按钮");
    }
    </script>
    
</head>
<body>
    <button onclick="changeText()">点击我!</button>
</body>
</html>
通过事件属性绑定函数,在行为发生时会自动执行函数
一个事件可以同时绑定多个函数
一个元素可以同时绑定多个事件
方法中可以传入 this对象,代表当前元素
效果：
补充：
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Confirmation and Prevent Default Example</title>
</head>
<body>
<form id="myForm" onsubmit="return confirmSubmit()">
    <input type="text" name="username" placeholder="Enter your username">
    <button type="submit">Submit</button>
</form>

<script>
function confirmSubmit() {
    if (confirm('Are you sure you want to submit this form?')) {
        alert('Form submitted successfully!');
        return true; // Allow form submission
    } else {
        alert('Form submission canceled.');
        return false; // Prevent form submission
    }
}
</script>
</body>
</html>
效果展示：
点击取消或者确认会弹出不同的弹窗。
注意：即使是表单事件的提交，要写在form，而不是submit里面。

（2）：DOM触发：

注意，必须放在操作元素的后面。

当然，我们可以用下面的操作让它也可以写在前面：

补充：onload：

onload方法是一个事件处理器，用于在页面或某个元素加载完成后执行特定的代码。在JavaScript中，可以将onload方法添加到window对象或者某个特定的元素上，以便在页面或元素加载完成后执行相应的操作。
例如，可以使用以下代码将一个函数绑定到页面加载完成事件：
js 复制代码 
window.onload = function() {
  // 在页面加载完成后执行的代码
};
类似地，也可以将onload方法添加到某个元素上，以在该元素加载完成后执行相应的操作：
js 复制代码 
var element = document.getElementById("myElement");
element.onload = function() {
  // 在元素加载完成后执行的代码
};
通过使用onload方法，可以确保在页面或元素加载完成后再执行相关的操作，以避免出现因为页面或元素未完全加载而导致的错误。
这样，就可以声明在前面。或者用下面的方式：
html 复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>DOM Programming with Window Onload</title>
    <script>
        window.onload = function() {
            var heading = document.createElement("h1");
            heading.textContent = "Dynamic Heading";
            document.body.appendChild(heading);
            
            var paragraph = document.createElement("p");
            paragraph.textContent = "This paragraph was added dynamically using DOM programming.";
            document.body.appendChild(paragraph);
        };
    </script>
</head>
<body>
    <h1>DOM Programming with Window Onload</h1>
    <p>This is an example of using DOM programming with the window.onload event.</p>
</body>
</html>
在实际应用中，我们还可以通过DOM来触发其它的事件：

六：BOM编程：

6.1.什么是BOM编程：

BOM是Browser Object Model的简写，即浏览器对象模型。
BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法(通过window对象及属性的一系列方法 控制浏览器行为的一种编程)
BOM没有统一的标准(每种客户端都可以自定标准)。
BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程
BOM编程的对象结构如下
  • window 顶级对象,代表整个浏览器窗口
    • location对象 window对象的属性之一,代表浏览器的地址栏
    • history对象 window对象的属性之一,代表浏览器的访问历史
    • screen对象 window对象的属性之一,代表屏幕
    • navigator对象 window对象的属性之一,代表浏览器软件本身
    • document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档
    • console对象 window对象的属性之一,代表浏览器开发者工具的控制台
    • localStorage对象 window对象的属性之一,代表浏览器的本地数据持久化存储
    • sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储

6.2 window对象的常见属性(了解)

属性 描述
closed 返回窗口是否已被关闭。
defaultStatus 设置或返回窗口状态栏中的默认文本。
document 对 Document 对象的只读引用。(请参阅对象)
frames 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
history 对 History 对象的只读引用。请参数 History 对象。
innerHeight 返回窗口的文档显示区的高度。
innerWidth 返回窗口的文档显示区的宽度。
localStorage 在浏览器中存储 key/value 对。没有过期时间。
length 设置或返回窗口中的框架数量。
location 用于窗口或框架的 Location 对象。请参阅 Location 对象。
name 设置或返回窗口的名称。
navigator 对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener 返回对创建此窗口的窗口的引用。
outerHeight 返回窗口的外部高度，包含工具条与滚动条。
outerWidth 返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent 返回父窗口。
screen 对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft 返回相对于屏幕窗口的x坐标
screenTop 返回相对于屏幕窗口的y坐标
screenX 返回相对于屏幕窗口的x坐标
sessionStorage 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
screenY 返回相对于屏幕窗口的y坐标
self 返回对当前窗口的引用。等价于 Window 属性。
status 设置窗口状态栏的文本。
top 返回最顶层的父窗口。

6.3 window对象的常见方法(了解)

方法 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
atob() 解码一个 base-64 编码的字符串。
btoa() 创建一个 base-64 编码的字符串。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup() 创建一个 pop-up 窗口。
focus() 把键盘焦点给予一个窗口。
getSelection() 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle() 获取指定元素的 CSS 样式。
matchMedia() 该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scroll() 已废弃。 该方法已经使用了 scrollTo() 方法来替代。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
stop() 停止页面载入。
postMessage() 安全地实现跨源通信。
我们在实际应用时，有的时候调用window的方法，比如：window.alert();这个window可以省略，而这个window对象是浏览器自带的一种对象。
代码举例：
javascript 复制代码 
// 获取窗口的宽度和高度
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;

// 获取窗口的位置
const windowX = window.screenX;
const windowY = window.screenY;

// 打开一个新窗口
window.open('https://www.example.com', '_blank');

// 关闭当前窗口
window.close();

// 获取窗口的历史记录
const historyLength = window.history.length;

// 跳转到指定的URL
window.location.href = 'https://www.example.com';

// 显示一个警告框
window.alert('这是一个警告框');

// 显示一个确认框
const result = window.confirm('确定要执行操作吗？');
if (result) {
  // 执行操作
}

// 显示一个提示框
const userInput = window.prompt('请输入您的姓名：');
console.log(userInput);
js 复制代码 
// 获取窗口的历史记录对象
const historyObject = window.history;

// 获取历史记录的长度
const historyLength = historyObject.length;

// 在历史记录中向前或向后跳转
historyObject.forward();
historyObject.back();

// 在历史记录中向前或向后跳转指定步数
historyObject.go(-2); // 向后跳转两步
historyObject.go(3); // 向前跳转三步

// 替换当前历史记录条目
historyObject.replaceState({ data: 'new state' }, 'New Title', 'new-url.html');

七：DOM编程：

7.1.DOM简介：

先来看看BOM编程：
简单来说:DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.
document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。
假如有以下代码：
那么它的DOM树如下：
在实际应用中，我们无法直接改变HTML文件，但是，我们可以使用DOM编程，DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程。
操作步骤如下：

7.2.获取操作元素：

7.2.1 在整个文档范围内查找元素结点
功能 API 返回值
根据id值查询 document.getElementById("id值") 一个具体的元素节
根据标签名查询 document.getElementsByTagName("标签名") 元素节点数组
根据name属性值查询 document.getElementsByName("name值") 元素节点数组
根据类名查询 document.getElementsByClassName("类名") 元素节点数组
7.2.2 在具体元素节点范围内查找子节点
功能 API 返回值
查找子标签 element.children 返回子标签数组
查找第一个子标签 element.firstElementChild 标签对象
查找最后一个子标签 element.lastElementChild 节点对象
7.2.3 查找指定子元素节点的父节点
功能 API 返回值
查找指定元素节点的父标签 element.parentElement 标签对象
7.2.4 查找指定元素节点的兄弟节点
功能 API 返回值
查找前一个兄弟标签 node.previousElementSibling 标签对象
查找后一个兄弟标签 node.nextElementSibling 标签对象
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script>
    /* 
    1 获得document  dom树
        window.document
    2 从document中获取要操作的元素
        1. 直接获取
            var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
            var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
            var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
            var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
        2. 间接获取
            var cs=div01.children // 通过父元素获取全部的子元素
            var firstChild =div01.firstElementChild  // 通过父元素获取第一个子元素
            var lastChild = div01.lastElementChild   // 通过父元素获取最后一个子元素
            var parent = pinput.parentElement  // 通过子元素获取父元素
            var pElement = pinput.previousElementSibling // 获取前面的第一个元素
            var nElement = pinput.nextElementSibling // 获取后面的第一个元素
    3 对元素进行操作
        1. 操作元素的属性
        2. 操作元素的样式
        3. 操作元素的文本
        4. 增删元素   
    */
   function fun1(){
        //1 获得document
        //2 通过document获得元素
        var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
        console.log(el1)
   }
   function fun2(){
        var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
        for(var i = 0 ;i<els.length;i++){
            console.log(els[i])
        }
   }
   function fun3(){
        var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
        console.log(els)
        for(var i =0;i< els.length;i++){
            console.log(els[i])
        }
   }
 
   function fun4(){
    var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
    for(var i =0;i< els.length;i++){
            console.log(els[i])
        }
   }
 
   function fun5(){
    // 先获取父元素
     var div01 = document.getElementById("div01")
     // 获取所有子元素
     var cs=div01.children // 通过父元素获取全部的子元素
     for(var i =0;i< cs.length;i++){
            console.log(cs[i])
     }
 
     console.log(div01.firstElementChild)  // 通过父元素获取第一个子元素
     console.log(div01.lastElementChild)   // 通过父元素获取最后一个子元素
   }
 
   function fun6(){
        // 获取子元素
        var pinput =document.getElementById("password")
        console.log(pinput.parentElement) // 通过子元素获取父元素
   }
 
   function fun7(){
        // 获取子元素
        var pinput =document.getElementById("password")
        console.log(pinput.previousElementSibling) // 获取前面的第一个元素
        console.log(pinput.nextElementSibling) // 获取后面的第一个元素
   }
   </script>
</head>
<body>
    <div id="div01">
        <input type="text" class="a" id="username" name="aaa"/>
        <input type="text" class="b" id="password" name="aaa"/>
        <input type="text" class="a" id="email"/>
        <input type="text" class="b" id="address"/>
    </div>
    <input type="text" class="a"/><br>
 
    <hr>
    <input type="button" value="通过父元素获取子元素" onclick="fun5()" id="btn05"/>
    <input type="button" value="通过子元素获取父元素" onclick="fun6()" id="btn06"/>
    <input type="button" value="通过当前元素获取兄弟元素" onclick="fun7()" id="btn07"/>
    <hr>
 
    <input type="button" value="根据id获取指定元素" onclick="fun1()" id="btn01"/>
    <input type="button" value="根据标签名获取多个元素" onclick="fun2()" id="btn02"/>
    <input type="button" value="根据name属性值获取多个元素" onclick="fun3()" id="btn03"/>
    <input type="button" value="根据class属性值获得多个元素" onclick="fun4()" id="btn04"/>
     
</body>
</html>

7.3.操作元素：

7.3.1 属性操作
需求 操作方式
读取属性值 元素对象.属性名
修改属性值 元素对象.属性名=新的属性值
7.3.2 内部文本操作
需求 操作方式
获取或者设置标签体的文本内容 element.innerText
获取或者设置标签体的内容 element.innerHTML
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script>
    /* 
    1 获得document  dom树
        window.document
    2 从document中获取要操作的元素
        1. 直接获取
            var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
            var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
            var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
            var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
        2. 间接获取
            var cs=div01.children // 通过父元素获取全部的子元素
            var firstChild =div01.firstElementChild  // 通过父元素获取第一个子元素
            var lastChild = div01.lastElementChild   // 通过父元素获取最后一个子元素
            var parent = pinput.parentElement  // 通过子元素获取父元素
            var pElement = pinput.previousElementSibling // 获取前面的第一个元素
            var nElement = pinput.nextElementSibling // 获取后面的第一个元素
    3 对元素进行操作
        1. 操作元素的属性   元素名.属性名=""
        2. 操作元素的样式   元素名.style.样式名=""  样式名"-" 要进行驼峰转换
        3. 操作元素的文本   元素名.innerText   只识别文本
                           元素名.innerHTML   同时可以识别html代码 
        4. 增删元素   
    */
   function changeAttribute(){
        var in1 =document.getElementById("in1")
        // 语法 元素.属性名=""
        // 获得属性值
        console.log(in1.type)
        console.log(in1.value)
        // 修改属性值
        in1.type="button"
        in1.value="嗨"
   }
   function changeStyle(){
        var in1 =document.getElementById("in1")
        // 语法  元素.style.样式名=""   原始样式名中的"-"符号 要转换驼峰式  background-color > backgroundColor
        in1.style.color="green"
        in1.style.borderRadius="5px"
         
   }
   function changeText(){
        var div01 =document.getElementById("div01")
        /* 
        语法  元素名.innerText   只识别文本
              元素名.innerHTML   同时可以识别html代码
        */
        console.log(div01.innerText)
        div01.innerHTML="<h1>嗨</h1>"
   }
 
   </script>
   <style>
    #in1{
        color: red;
    }
   </style>
</head>
<body>
    <input id="in1" type="text" value="hello">
    <div id="div01">
        hello
    </div>
 
    <hr>
    <button onclick="changeAttribute()">操作属性</button>
    <button onclick="changeStyle()">操作样式</button>
    <button onclick="changeText()">操作文本</button>
     
</body>
</html>

7.4 增删元素

7.4.1 对页面的元素进行增删操作
API 功能
document.createElement("标签名") 创建元素节点并返回，但不会自动添加到文档中
document.createTextNode("文本值") 创建文本节点并返回，但不会自动添加到文档中
element.appendChild(ele) 将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle) 将newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle) 用新节点替换原有的旧子节点
element.remove() 删除某个标签
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <script>
    /* 
    1 获得document  dom树
        window.document
    2 从document中获取要操作的元素
        1. 直接获取
            var el1 =document.getElementById("username") // 根据元素的id值获取页面上唯一的一个元素
            var els =document.getElementsByTagName("input") // 根据元素的标签名获取多个同名元素
            var els =document.getElementsByName("aaa") // 根据元素的name属性值获得多个元素
            var els =document.getElementsByClassName("a") // 根据元素的class属性值获得多个元素
        2. 间接获取
            var cs=div01.children // 通过父元素获取全部的子元素
            var firstChild =div01.firstElementChild  // 通过父元素获取第一个子元素
            var lastChild = div01.lastElementChild   // 通过父元素获取最后一个子元素
            var parent = pinput.parentElement  // 通过子元素获取父元素
            var pElement = pinput.previousElementSibling // 获取前面的第一个元素
            var nElement = pinput.nextElementSibling // 获取后面的第一个元素
    3 对元素进行操作
        1. 操作元素的属性   元素名.属性名=""
        2. 操作元素的样式   元素名.style.样式名=""  样式名"-" 要进行驼峰转换
        3. 操作元素的文本   元素名.innerText   只识别文本
                           元素名.innerHTML   同时可以识别html代码 
        4. 增删元素
            var element =document.createElement("元素名") // 创建元素
            父元素.appendChild(子元素)               // 在父元素中追加子元素
            父元素.insertBefore(新元素,参照元素)     // 在某个元素前增加元素
            父元素.replaceChild(新元素,被替换的元素) // 用新的元素替换某个子子元素
            元素.remove()                            // 删除当前元素
    */
   function addCs(){
        // 创建一个新的元素
        // 创建元素
        var csli =document.createElement("li") // <li></li>
        // 设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        // 将子元素放入父元素中
        var cityul =document.getElementById("city")
        // 在父元素中追加子元素
        cityul.appendChild(csli)
   }
   function addCsBeforeSz(){
        // 创建一个新的元素
        // 创建元素
        var csli =document.createElement("li") // <li></li>
        // 设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        // 将子元素放入父元素中
        var cityul =document.getElementById("city")
        // 在父元素中追加子元素
        //cityul.insertBefore(新元素,参照元素)
        var szli =document.getElementById("sz")
        cityul.insertBefore(csli,szli)
   }
 
   function replaceSz(){
        // 创建一个新的元素
        // 创建元素
        var csli =document.createElement("li") // <li></li>
        // 设置子元素的属性和文本 <li id="cs">长沙</li>
        csli.id="cs"
        csli.innerText="长沙"
        // 将子元素放入父元素中
        var cityul =document.getElementById("city")
        // 在父元素中追加子元素
        //cityul.replaceChild(新元素,被替换的元素)
        var szli =document.getElementById("sz")
        cityul.replaceChild(csli,szli)
   }
 
   function removeSz(){
        var szli =document.getElementById("sz")
        // 哪个元素调用了remove该元素就会从dom树中移除
        szli.remove()
   }
 
   function clearCity(){
         
        var cityul =document.getElementById("city")
 
        /* var fc =cityul.firstChild
        while(fc != null ){
            fc.remove()
            fc =cityul.firstChild
        } */
        cityul.innerHTML=""
        //cityul.remove()
         
   }
    
   </script>
    
</head>
<body>
    <ul id="city">
        <li id="bj">北京</li>
        <li id="sh">上海</li>
        <li id="sz">深圳</li>
        <li id="gz">广州</li>
    </ul>
 
    <hr>
    <!-- 目标1 在城市列表的最后添加一个子标签  <li id="cs">长沙</li>  -->
    <button onclick="addCs()">增加长沙</button>
    <!-- 目标2 在城市列表的深圳前添加一个子标签  <li id="cs">长沙</li>  -->
    <button onclick="addCsBeforeSz()">在深圳前插入长沙</button>
    <!-- 目标3  将城市列表的深圳替换为  <li id="cs">长沙</li>  -->
    <button onclick="replaceSz()">替换深圳</button>
    <!-- 目标4  将城市列表删除深圳  -->
    <button onclick="removeSz()">删除深圳</button>
    <!-- 目标5  清空城市列表  -->
    <button onclick="clearCity()">清空</button>
     
</body>
</html>

八：正则表达式：

8.1 正则表达式简介

正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
js 复制代码 
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;

8.2.正则表达式的用法

修饰符

修饰符 描述
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

方括号

表达式 描述
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 查找任何从 0 至 9 的数字。
[a-z] 查找任何从小写 a 到小写 z 的字符。
[A-Z] 查找任何从大写 A 到大写 Z 的字符。
[A-z] 查找任何从大写 A 到小写 z 的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green) 查找任何指定的选项。

元字符

元字符 描述
. 查找单个字符，除了换行和行结束符。
\w 查找数字、字母及下划线。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NULL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词 描述
n+ 匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。
n* 匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。
n? 匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。
n{X} 匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。
n{X,} X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。
n{X,Y} X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。
n$ 匹配任何结尾为 n 的字符串。
^n 匹配任何开头为 n 的字符串。
?=n 匹配任何其后紧接指定字符串 n 的字符串。
?!n 匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp对象方法

方法 描述
compile 在 1.5 版本中已废弃。 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
test 检索字符串中指定的值。返回 true 或 false。
toString 返回正则表达式的字符串。

支持正则的String的方法

方法 描述
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。

8.3.常用正则表达式

需求 正则表达式
用户名 / ^ [a-zA-Z ][a-zA-Z-0-9]{5,9}$/
密码 /^ [a-zA-Z0-9 _-@#& *]{6,12}$/
前后空格 /^\s+|\s+$/g
电子邮箱 /^ [a-zA-Z0-9 _.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/

九：综合练习：

9.1.登录页面：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 
        .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }
        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }
        .ltr td{
            border: 1px solid  powderblue;
 
        }
        .ipt{
            border: 0px;
            width: 50%;
 
        }
        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:60px;
            background-color: antiquewhite;
 
        }
        #usernameMsg , #userPwdMsg {
            color: rgb(230, 87, 51);
        }
 
        .buttonContainer{
            text-align: center;
        }
    </style>
    <script>
        // 检验用户名格式是否合法的函数
        function checkUsername(){
            // 定义正则表示字符串的规则
            var  usernameReg= /^[a-zA-Z0-9]{5,10}$/
            // 获得用户在页面上输入的信息
            var usernameInput =document.getElementById("usernameInput")
            var username = usernameInput.value
            // 获得格式提示的框
            var usernameMsg =document.getElementById("usernameMsg")
            // 格式有误时,返回false,在页面上提示
            if(!usernameReg.test(username)){ 
                usernameMsg.innerText="用户名格式有误"
                return false
            }
            // 格式OK,返回true 在页面上提示OK
            usernameMsg.innerText="OK"
            return true
 
        }
 
        // 检验密码格式是否合法的函数
        function checkUserPwd(){
            // 定义正则表示字符串的规则
            var  userPwdReg= /^[0-9]{6}$/
            // 获得用户在页面上输入的信息
            var userPwdInput =document.getElementById("userPwdInput")
            var userPwd = userPwdInput.value
            // 获得格式提示的框
            var userPwdMsg =document.getElementById("userPwdMsg")
            // 格式有误时,返回false,在页面上提示
            if(!userPwdReg.test(userPwd)){ 
                userPwdMsg.innerText="密码必须是6位数字"
                return false
            }
            // 格式OK,返回true 在页面上提示OK
            userPwdMsg.innerText="OK"
            return true
 
        }
 
        // 表单在提交时,校验用户名和密码格式,格式OK才会提交
        function checkForm(){
            var flag1 =checkUsername()
            var flag2 =checkUserPwd()
 
            return flag1&&flag2
        }
 
 
    </script>
 
     
</head>
<body>
    <h1 class="ht">欢迎使用日程管理系统</h1>
    <h3 class="ht">请登录</h3>
    <form method="post" action="/user/login" onsubmit="return checkForm()">
        <table class="tab" cellspacing="0px">
            <tr class="ltr">
                <td>请输入账号</td>
                <td>
                    <input class="ipt" type="text" id="usernameInput" name="username" onblur="checkUsername()">
                    <span id="usernameMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td>请输入密码</td>
                <td>
                    <input class="ipt" type="password" id="userPwdInput"  name="userPwd" onblur="checkUserPwd()">
                    <span id="userPwdMsg"></span>
                </td>
            </tr>
            <tr class="ltr">
                <td colspan="2" class="buttonContainer">
                    <input class="btn1" type="submit" value="登录">
                    <input class="btn1" type="reset" value="重置">
                    <button class="btn1"><a href="regist.html">去注册</a></button>
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

9.2.注册页面：

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
 
        .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }
        .tab{
            width: 500px;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }
        .ltr td{
            border: 1px solid  powderblue;
 
        }
        .ipt{
            border: 0px;
            width: 50%;
 
        }
        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:60px;
            background-color: antiquewhite;
 
        }
 
        .msg {
            color: gold;
        }
 
        .buttonContainer{
            text-align: center;
        }
    </style>
 
    <script>
        function checkUsername(){
            var usernameReg = /^[a-zA-Z0-9]{5,10}$/
            var usernameInput = document.getElementById("usernameInput")  
            var username = usernameInput.value  
            var usernameMsg = document.getElementById("usernameMsg")
            if(!usernameReg.test(username)){
                usernameMsg.innerText="格式有误"
                return false
            } 
            usernameMsg.innerText="OK"
            return true 
        }
 
 
        function checkUserPwd(){
            var userPwdReg = /^\d{6}$/
            var userPwdInput = document.getElementById("userPwdInput")  
            var userPwd = userPwdInput.value  
            var userPwdMsg = document.getElementById("userPwdMsg")
            if(!userPwdReg.test(userPwd)){
                userPwdMsg.innerText="格式有误"
                return false
            } 
            userPwdMsg.innerText="OK"
            return true 
        }
 
 
        function checkReUserPwd(){
            var userPwdReg = /^\d{6}$/
            // 再次输入的密码的格式
            var reUserPwdInput = document.getElementById("reUserPwdInput")  
            var reUserPwd = reUserPwdInput.value 
            var reUserPwdMsg = document.getElementById("reUserPwdMsg")
            if(!userPwdReg.test(reUserPwd)){
                reUserPwdMsg.innerText="格式有误"
                return false
            } 
            // 获得上次密码,对比两次密码是否一致
            var userPwdInput = document.getElementById("userPwdInput")  
            var userPwd = userPwdInput.value  
            if(reUserPwd != userPwd){
                reUserPwdMsg.innerText="两次密码不一致"
                return false
            } 
            reUserPwdMsg.innerText="OK"
            return true 
        }
 
 
        function checkForm(){
            var flag1 = checkUsername()
            var flag2 = checkUserPwd()
            var flag3 = checkReUserPwd()
 
            return flag1 && flag2 && flag3
        }
 
 
    </script>
 
 
    
</head>
<body>
<h1 class="ht">欢迎使用日程管理系统</h1>
<h3 class="ht">请注册</h3>
<form method="post" action="/user/regist" onsubmit="return checkForm()">
    <table class="tab" cellspacing="0px">
        <tr class="ltr">
            <td>请输入账号</td>
            <td>
                <input class="ipt" id="usernameInput" type="text" name="username" onblur="checkUsername()">
                <span id="usernameMsg" class="msg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td>请输入密码</td>
            <td>
                <input class="ipt" id="userPwdInput" type="password" name="userPwd" onblur="checkUserPwd()">
                <span id="userPwdMsg" class="msg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td>确认密码</td>
            <td>
                <input class="ipt" id="reUserPwdInput" type="password" onblur="checkReUserPwd()">
                <span id="reUserPwdMsg" class="msg"></span>
            </td>
        </tr>
        <tr class="ltr">
            <td colspan="2" class="buttonContainer">
                <input class="btn1" type="submit" value="注册">
                <input class="btn1" type="reset" value="重置">
                <button class="btn1"><a  href="login.html">去登录</a></button>
            </td>
        </tr>
    </table>
 
</form>
</body>
</html>
相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量，JavaScript中使用Sass变量
javascript·css·sass
兔老大的胡萝卜2 小时前
ppk谈JavaScript，悟透JavaScript，精通CSS高级Web，JavaScript DOM编程艺术，高性能JavaScript pdf
前端·javascript
一点媛艺3 小时前
Kotlin函数由易到难
开发语言·python·kotlin
姑苏风3 小时前
《Kotlin实战》-附录
android·开发语言·kotlin
奋斗的小花生4 小时前
c++ 多态性
开发语言·c++
魔道不误砍柴功4 小时前
Java 中如何巧妙应用 Function 让方法复用性更强
java·开发语言·python
闲晨4 小时前
C++ 继承：代码传承的魔法棒，开启奇幻编程之旅
java·c语言·开发语言·c++·经验分享
老猿讲编程5 小时前
一个例子来说明Ada语言的实时性支持
开发语言·ada
Chrikk6 小时前
Go-性能调优实战案例
开发语言·后端·golang
热门推荐
01如何才能让手机厂商主动拥抱华为，接入鸿蒙系统？02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【TC3xx芯片】TC3xx芯片电源管理系统PMS详解05基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测06【经验分享】Ubuntu22.04安装微信(linux官方版)07Macbook pro M1 安装Ubuntu教程08RAG 实践- Ollama+RagFlow 部署本地知识库09Windows10安装PCL1.14.0及点云配准10文件或文件夹名称中有空格如何批量去除