JS简介
JS特点
Javascript是一种由Netscape(网景)的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，遗留的速度问题，为客户提供更流畅的浏览效果。JS是一种运行于浏览器端上的小脚本语句，可以实现网页如文本内容动，数据动态变化和动画特效等，JS有如下特点：
-
脚本语言
- JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。
-
基于对象
- JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。
-
弱类型
- JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。
-
事件驱动
- JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。
-
跨平台性
- JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。
JS组成部分
BOM编程
-
BOM是Browser Object Model的简写，即浏览器对象模型。
-
BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法
-
BOM没有统一的标准(每种客户端都可以自定标准)。
-
BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程
-
BOM编程的对象结构如下
- window 顶级对象：代表整个浏览器窗口
- location对象
window对象的属性之一，代表浏览器的地址栏 - history对象
window对象的属性之一，代表浏览器的访问历史 - screen对象
window对象的属性之一，代表屏幕 - navigator对象
window对象的属性之一，代表浏览器软件本身 - document对象
window对象的属性之一，代表浏览器窗口目前解析的html文档
- location对象
- window 顶级对象：代表整个浏览器窗口
DOM编程
- 简单来说:DOM编程就是使用document对象的API完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程。
- document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
- 根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。
- 上面的代码生成的树如下
- DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程
JS的引入方式
- js 声明函数 ：
function suprise(){}
java中的函数 ：public void suprise(){}- 函数如何和单击按钮的行为绑定到一起?
- 如何弹窗提示？
内部脚本方式引入（内嵌式）
- 在head中通过一对script标签定义脚本代码
- script代码放置位置具备一定的随意性，一般放在head标签中居多
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小标题</title>
<style>
/* 通过选择器确定样式的作用范围 */
.btn1 {
display: block;
width: 150px;
height: 40px;
background-color: rgb(245, 241, 129);
color: rgb(238, 31, 31);
border: 3px solid rgb(238, 23, 66);
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
}
</style>
<script>
function suprise(){
alert("Hello,我是惊喜")
}
</script>
</head>
<body>
<button class="btn1" onclick="suprise()">点我有惊喜</button>
</body>
</html>
- 效果
外部脚本方式引入
- 在head中通过一对script标签引入外部js文件
- 抽取脚本代码到独立的js文件中
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小标题</title>
<style>
/* 通过选择器确定样式的作用范围 */
.btn1 {
display: block;
width: 150px;
height: 40px;
background-color: rgb(245, 241, 129);
color: rgb(238, 31, 31);
border: 3px solid rgb(238, 23, 66);
font-size: 22px;
font-family: '隶书';
line-height: 30px;
border-radius: 5px;
}
</style>
<script src="js/button.js" type="text/javascript"></script>
</head>
<body>
<button class="btn1" onclick="suprise()">点我有惊喜</button>
</body>
</html>
- 效果
【注意】
- 一个html中可以有多个script标签
- 一对script标签不能在引入外部js文件的同时定义内部脚本
- script标签如果用于引入外部js文件，中间最好不要有任何字符，包括空格和换行
JS的数据类型和运算符
JS的数据类型
JS中的常见的数据类型：
- 数值类型
数值类型统一为number，不区分整数和浮点数 - 字符串类型
字符串类型为string，和JAVA中的String相似，JS中不严格区分单双引号，都可以用于表示字符串 - 布尔类型
布尔类型为boolean，和Java中的boolean相似，但是在JS的if语句中，非空字符串会被转换为’真’，非零数字也会被认为是’真’ - 引用类型
引用数据类型对象是Object类型，各种对象和数组在JS中都是Object类型 - function类型
JS中的各种函数属于function数据类型 - 命名未赋值
js为弱类型语言，统一使用 var 声明对象和变量，在赋值时才确定真正的数据类型，变量如果只声明没有赋值的话，数据类型为undefined，值为undefined - 赋予null值
如果给一个变量赋值为null，其数据类型是Object，值为null，
可以通过
typeof关键字判断数据类型
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
var i = 10
console.log(i) //10
console.log(typeof i) //number
// JS 的变量可以重复声明
var i = "asdf"
console.log(i) //asdf
console.log(typeof i) //string
i = 1>10
console.log(i) //false
console.log(typeof i) //boolean
var i = new Object()
console.log(i) //Object
console.log(typeof i) //object
// 函数声明方法
// var fun1 = function (){}
function fun1(){}
console.log(fun1) //ƒ fun1(){}
console.log(typeof fun1) //function
var y
console.log(y) //undefined
console.log(typeof y) //undefined
var x = null
console.log(x) //null
console.log(typeof x) //object
</script>
</head>
JS的变量
- JS是弱类型的，不是没有类型，是变量在声明时不指定类型，赋值时才确定类型，JS中变量的声明统统使用
var - var声明的变量可以再次声明
- 变量可以使用不同的数据类型多次赋值
- JS的语句可以以
;结尾，也可以不用;结尾 - 变量标识符严格区分大小写
- 标识符的命名规则参照JAVA
- 如果使用了 一个没有声明的变量，那么运行时会报
uncaught ReferenceError: *** is not defined at index.html:行号:列号 - 如果一个变量只声明没赋值，那么值是
undefined
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
var i = 10
var str = "asdf"
var i = true //重复说明 不同类型赋值
console.log(i) //true
// console,log(I) 未声明变量I 报错 区分大小写
var I
console.log(I) //undefined
</script>
</head>
JS的运算符
算数运算符 + - * / %
- 除零 ：
Infinity(无穷大) - 模零 ：
NaN(not a number)
复合算数运算符 ++ – += -= *= /= %=
- 除等零 ：
Infinity(无穷大) - 模等零 ：
NaN(not a number)
关系运算符 > < >= <= != == ===
- == ： 如果两端的数据类型不一致，会尝试将两端的数据都转换为number再对比
- ‘123’ => 123
- true => 1
- false => 0
- === ： 如果两端的数据类型不一致，直接返回false，相同则会继续对比
逻辑运算符 || &&
几乎和JAVA中的一样，需要注意的是，这里直接就是短路的逻辑运算符，单个的| 和 & 以及 ^ 是位运算符
条件运算符 条件表达式 ? 值1 : 值2
几乎和JAVA中的一样
位运算符 | & ^ << >> >>>
和 java中的类似（了解即可）
代码
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
console.log(10/2) //5
console.log(10/4) //2.5
console.log(10/0) //Infinity
console.log(10%0) //NaN
var i = 10
console.log(i /= 0) //Infinity
console.log(i %= 0) //NaN
console.log(1 == 1) //true
console.log(1 == '1') //true
console.log(1 == true) //true
console.log(1 === 1) //true
console.log(1 === '1') //false
console.log(1 === true) //false
</script>
</head>
JS的流程控制和函数
JS分支结构
if结构
-
JS的if结构几乎和JAVA中的一样，需要注意的是
- if()中的非空字符串会被认为是true
- if()中的非零数字会被认为是true
-
代码
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
/*
1 非空字符串 会判断为 true
2 非空对象 会判断为 true
3 非0number 会判断为 true
*/
if('false'){ // 非空字符串 if判断为true
console.log(true)
}else{
console.log(false)
}
if("asdf"){ // 非空字符串 if判断为true
console.log(true)
}else{
console.log(false)
}
if(''){ // 长度为0字符串 if判断为false
console.log(true)
}else{
console.log(false)
}
if(3.1){ // 非零数字 if判断为true
console.log(true)
}else{
console.log(false)
}
if(0){ // 0 if判断为false
console.log(true)
}else{
console.log(false)
}
</script>
</head>
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
/* 根据月份输出季节 */
// prompt返回的结果就是用户在窗口上输入的值，以string类型返回的
// var month = prompt("请输入月份")
var monthStr = prompt("请输入月份")
console.log(typeof monthStr) //string
//字符串转换为整数
var month = Number.parseInt(monthStr)
console.log(typeof month) //number
if(month == 12 || month == 1 || month == 2){
console.log("冬天皮肤变好了")
}else if(month >= 3 && month <= 5){
console.log("春眠不觉晓")
}else if(month >= 6 && month <= 8){
console.log("夏天蚊子咬")
}else if(month >= 9 && month <= 11){
console.log("蚊子死翘翘")
}else{
console.log("客官不可以")
}
</script>
</head>
switch结构
- 代码
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
var monthStr = prompt("请输入月份","例如:10 ")
var month = Number.parseInt(monthStr)
switch(month){
case 3:
case 4:
case 5:
console.log("春季")
break
case 6:
case 7:
case 8:
console.log("夏季")
break
case 9:
case 10:
case 11:
console.log("秋季")
break
case 12:
case 1:
case 2:
console.log("冬季")
break
defalt:
console.log("月份有误")
}
</script>
</head>
- 代码
JS循环结构
while结构
- 代码
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
/* 打印九九乘法表 */
var i = 1
while(i <= 9){
var j = 1
while(j <= i){
document.write(j+"*"+i+"="+(j*i)+" ")
j++
}
document.write("<hr>")
i++
}
</script>
</head>
- 效果
for循环
- 代码
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
/* 九九乘法表 */
for( var i = 1;i <= 9; i++){
for(var j = 1;j <= i;j++){
document.write(j+"*"+i+"="+i*j+" ");
}
document.write("<hr/>");
}
</script>
</head>
- 效果
foreach循环
- 迭代数组时,和java不一样：
- 括号中的临时变量表示的是元素的索引，不是元素的值
- ()中也不在使用
:分隔，而是使用in关键字
- 代码
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
var cities =["北京","上海","深圳","武汉","西安","成都"]
document.write("<ul>")
for(var index in cities){
document.write("<li>"+cities[index]+"</li>")
}
document.write("</ul>")
</script>
</head>
- 效果
JS函数声明
函数声明的语法
JS中的方法,多称为函数,函数的声明语法和JAVA中有较大区别
function 函数名(){}var 函数名=function(){}
和java相比
- 没有访问修饰符（权限控制符）
- 参数列表中，无需数据类型
- 声明函数时需要用
function关键字 - 没有返回值类型也没有void，如果有值要返回，则直接return即可
- 调用方法时，实参和形参可以在数量上不一致（不报错），在方法内部可以通过
arguments获得调用时的实参 - 没有异常列表
- 函数也可以作为参数传递给另一个方法
代码
<head>
<script>
// 声明函数
/* function sum(a, b){
return a+b
} */
var sum = function(a, b){
// console.log(arguments)
return a+b;
}
function add(getSum){
return getSum(20,30)
}
// 调用函数 接收结果
var result = sum(10,20)
console.log(result) //30
var result1 = sum(10,20,30,40,50)
console.log(result1) //30 多的参数相当于没传
var result2 = sum(10)
console.log(result2) //NaN
// 函数作为参数
var res = add(sum)
console.log(res) //50
</script>
</head>
JS的对象和JSON
JS声明对象的语法
语法1
通过new Object()直接创建对象
- 代码
<head>
<script>
var person = new Object()
// 对象的属性？添加属性
person.name="张三"
person.age=10
// 对象的方法？添加方法
person.eat=function(food){
console.log(this.age+"岁的"+this.name+"正在吃"+food)
}
// 访问属性
console.log(person.name) //张三
console.log(person.age) //10
// 调用方法
person.eat("火锅") //10岁的张三正在吃火锅
</script>
</head>
语法2
通过 {属性名:属性值, ... ..., 函数名:function(){}}形式创建对象
- 代码
<head>
<script>
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();
</script>
</head>
- 效果
JSON格式
JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。简单来说，JSON 就是一种字符串格式，这种格式无论是在前端还是在后端，都可以很容易的转换成对象，所以常用于前后端数据传递
JSON格式的语法
var personStr = '{"属性名":"属性值","属性名":"属性值",..."属性名":{对象},"属性名":[数组],"属性名":[{},{},..]}'
属性名 ：必须用
" "包裹上
属性值 ：字符串必须用" "包好，数字可以不处理
-
通过
JSON.parse()方法可以将一个JSON串转换成对象 -
通过
JSON.stringify()方法可以将一个对象转换成一个JSON格式的字符串 -
代码
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 这是一个JSON格式的字符串
var personStr = '{"name":"张三","age":10,"dog":{"dname":"小花"},"loveSingers":["张小明","王小东","李小黑"],"friends":[{"fname":"赵四儿"},{"fname":"玉田"},{"fname":"王小蒙"}]}'
console.log(typeof personStr) //string
console.log(personStr.name) //undefined 字符串没有对象
// 通过JSON.parse()可以将一个JSON串转换为一个对象
var person = JSON.parse(personStr)
console.log(personStr)
//{"name":"张三","age":10,"dog":{"dname":"小花"},"loveSingers":["张小明","王小东","李小黑"],"friends":[{"fname":"赵四儿"},{"fname":"玉田"},{"fname":"王小蒙"}]}
console.log(person)
//{name: '张三', age: 10, dog: {…}, loveSingers: Array(3), friends: Array(3)}
console.log(person.name) //张三
console.log(person.dog.dname) //小花
console.log(person.loveSingers[0]) //张小明
console.log(person.friends[0].fname) //赵四儿
// 通过JSON.stringify()将一个对象转换为JSON串
var personStr2 = JSON.stringify(person)
console.log(personStr2) //和personStr一样
</script>
</head>
前后端传递数据
JSON在服务端的使用（IDEA）
- Dog类
public class Dog {
private String name;
@Override
public boolean equals(Object o) {
if (this == o) return true;
if (o == null || getClass() != o.getClass()) return false;
Dog dog = (Dog) o;
return Objects.equals(name, dog.name);
}
@Override
public int hashCode() {
return Objects.hash(name);
}
public Dog() {
}
public Dog(String name) {
this.name = name;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
- Person类
public class Person {
private String name;
private Integer age;
private Dog dog;
@Override
public boolean equals(Object o) {
if (this == o) return true;
if (o == null || getClass() != o.getClass()) return false;
Person person = (Person) o;
return Objects.equals(name, person.name) && Objects.equals(age, person.age) && Objects.equals(dog, person.dog);
}
@Override
public int hashCode() {
return Objects.hash(name, age, dog);
}
public Person() {
}
public Person(String name, Integer age, Dog dog) {
this.name = name;
this.age = age;
this.dog = dog;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Integer getAge() {
return age;
}
public void setAge(Integer age) {
this.age = age;
}
public Dog getDog() {
return dog;
}
public void setDog(Dog dog) {
this.dog = dog;
}
}
- TestJson
public class TestJson {
// 对象转字符串
@Test
public void testWriteJson() throws JsonProcessingException {
// 实例化 Person对象，将 Person对象 转换为 JSON 用
Dog dog = new Dog("小黄");
Person person = new Person("张三", 10, dog);
// 将 Person对象 转换成一个字符串 Gson Jackson Fastjson
ObjectMapper objectMapper = new ObjectMapper();
String personStr = objectMapper.writeValueAsString(person);
System.out.println(personStr);
}
// 字符串转对象
@Test
public void testReadJson() throws JsonProcessingException {
String personStr = "{\"name\":\"张三\",\"age\":10,\"dog\":{\"name\":\"小黄\"}}";
ObjectMapper objectMapper = new ObjectMapper();
Person person = objectMapper.readValue(personStr, Person.class);
System.out.println(person); //断点 在 Debug窗口 看 person属性值
}
// JSON 和 Map List Array 之间的转换问题
/* map */
@Test
public void testMapToJson() throws Exception {
Map data = new HashMap();
data.put("a","valuea");
data.put("b","valueb");
ObjectMapper objectMapper = new ObjectMapper();
String s = objectMapper.writeValueAsString(data);
System.out.println(s); //{"a":"valuea","b":"valueb"}
}
/* list array */
@Test
public void testListToJson() throws Exception {
/* List data = new ArrayList();
data.add("a");
data.add("b");
data.add("c"); */
//String[] data = {"a","b","c"};
/* ObjectMapper objectMapper = new ObjectMapper();
String s = objectMapper.writeValueAsString(data);
System.out.println(s); //["a","b","c"] */
Dog dog = new Dog("小黄");
Person person = new Person("张三", 10, dog);
List data = new ArrayList();
data.add(person);
ObjectMapper objectMapper = new ObjectMapper();
String s = objectMapper.writeValueAsString(data);
System.out.println(s); //[{"name":"张三","age":10,"dog":{"name":"小黄"}}]
}
}
JSON和Map List Array之间的转换问题（IDEA）
// JSON 和 Map List Array 之间的转换问题
/* map */
@Test
public void testMapToJson() throws Exception {
Map data = new HashMap();
data.put("a","valuea");
data.put("b","valueb");
ObjectMapper objectMapper = new ObjectMapper();
String s = objectMapper.writeValueAsString(data);
System.out.println(s); //{"a":"valuea","b":"valueb"}
}
/* list array */
@Test
public void testListToJson() throws Exception {
/* List data = new ArrayList();
data.add("a");
data.add("b");
data.add("c"); */
//String[] data = {"a","b","c"};
/* ObjectMapper objectMapper = new ObjectMapper();
String s = objectMapper.writeValueAsString(data);
System.out.println(s); //["a","b","c"] */
Dog dog = new Dog("小黄");
Person person = new Person("张三", 10, dog);
List data = new ArrayList();
data.add(person);
ObjectMapper objectMapper = new ObjectMapper();
String s = objectMapper.writeValueAsString(data);
System.out.println(s); //[{"name":"张三","age":10,"dog":{"name":"小黄"}}]
}
JS常见对象
数组
-
创建数组的四种方式：
new Array()创建空数组new Array(5)创建数组时给定长度new Array(ele1,ele2,ele3,... ... ,elen);创建数组时指定元素值
+[ele1,ele2,ele3,... ... ,elen];相当于第三种语法的简写
在JS中，数组属于Object类型，其长度是可以变化的，更像JAVA中的集合
- 数组的常见API
<head>
<script>
//数组的创建
var arr = new Array(5)
console.log(arr) //[empty × 5]
console.log(arr.length) //5
//var arr = new Array("zhangsan",10,false)
var arr = ["zhangsan", 10, false]
console.log(arr) //['zhangsan', 10, false]
console.log(arr.length) //3
var arr = new Array()
console.log(arr) //[]
console.log(arr.length) //0
//向数组中添加数据，数据类型可以不一致
arr[0] = "zhangsan"
arr[1] = 10
arr[9] = true
console.log(arr) // ['zhangsan', 10, empty × 7, true]
console.log(arr.length) //10
arr.length = 20
console.log(arr) // ['zhangsan', 10, empty × 7, true, empty × 10]
console.log(arr.length) //20
var fruits = ["apple","orange","banana"]
var fruits2 = ["荔枝","桃子","榴莲"]
//concat：拼接两个或更多的数组，并返回结果
var fruitsAll = fruits.concat(fruits2)
console.log(fruits) //['apple', 'orange', 'banana']
console.log(fruits2) //['荔枝', '桃子', '榴莲']
console.log(fruitsAll) // ['apple', 'orange', 'banana', '荔枝', '桃子', '榴莲']
//indexOf/lastIndexOf：查找榴莲
var index1 = fruitsAll.indexOf("榴莲")
console.log(index1) //5
var index2 = fruitsAll.lastIndexOf("榴莲")
console.log(index2) //5
//pop：移除并返回最后一个元素
var res = fruitsAll.pop();
console.log(res) //榴莲
console.log(fruitsAll) //['apple', 'orange', 'banana', '荔枝', '桃子']
//push：从尾端增加元素，并返回长度
var len = fruitsAll.push("葡萄")
console.log(len) //6
console.log(fruitsAll) //['apple', 'orange', 'banana', '荔枝', '桃子', '葡萄']
//reverse：反转
fruitsAll.reverse()
console.log(fruitsAll) //['葡萄', '桃子', '荔枝', 'banana', 'orange', 'apple']
//join：转换为字符串
console.log(fruitsAll.join()) //葡萄,桃子,荔枝,banana,orange,apple
console.log(fruitsAll.join("-")) //葡萄-桃子-荔枝-banana-orange-apple
//slice：截取数组的一部分，并返回一个新数组
console.log(fruitsAll) //['葡萄', '桃子', '荔枝', 'banana', 'orange', 'apple']
console.log(fruitsAll.slice(2,5)) //['荔枝', 'banana', 'orange'] 包前不包后（左闭右开）
//splice：从数组中添加或删除元素
console.log(fruitsAll) //['葡萄', '桃子', '荔枝', 'banana', 'orange', 'apple']
//增加
fruitsAll.splice(2,0,'el1','el2')
console.log(fruitsAll) // ['葡萄', '桃子', 'el1', 'el2', '荔枝', 'banana', 'orange', 'apple']
//删除
fruitsAll.splice(2,2)
console.log(fruitsAll) //['葡萄', '桃子', '荔枝', 'banana', 'orange', 'apple']
//先删除后增加（替换）
fruitsAll.splice(2,2,'el1','el2')
console.log(fruitsAll) //['葡萄', '桃子', 'el1', 'el2', 'orange', 'apple']
</script>
</head>
Boolean对象
Date对象
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
/* //当前时间
var date = new Date()
console.log(date) //Mon Jul 29 2024 09:12:17 GMT+0800 (中国标准时间)
console.log(date.getFullYear()) //年 2024
console.log(date.getMonth()+1) //月 7
console.log(date.getDate()) //日 29
console.log(date.getHours()) //时 9
console.log(date.getMinutes()) //分 12
console.log(date.getSeconds()) //秒 17 */
//设置时间
var date = new Date()
date.setFullYear(2022)
date.setMonth(1)
date.setDate(2)
date.setHours(2)
date.setMinutes(2)
date.setSeconds(2)
console.log(date) //Mon Jul 29 2024 09:12:17 GMT+0800 (中国标准时间)
console.log(date.getFullYear()) //年 2022
console.log(date.getMonth()) //月 2
console.log(date.getDate()) //日 2
console.log(date.getHours()) //时 2
console.log(date.getMinutes()) //分 2
console.log(date.getSeconds()) //秒 2
var str = '10'
var res = 10 + str
console.log(res) //1010
var res = 10 + Number.parseInt(str)
console.log(res) //20
</script>
</head>
Math
JavaScript Math 对象
和JAVA中的Math类比较类似
Number
JavaScript Number 对象
Number中准备了一些基础的数据处理函数
String
JavaScript String 对象
和JAVA中的String类似
事件的绑定
什么是事件
HTML事件可以是浏览器行为，也可以是用户行为。 当这些一些行为发生时，可以自动触发对应的JS函数的运行，我们称之为事件发生。JS的事件驱动指的就是行为触发代码运行的这种特点。
事件的绑定方式
通过元素的属性绑定 on***
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
function testDown1(){
console.log("down1")
}
function testDown2(){
console.log("down2")
}
function testFocus(){
console.log("获得焦点")
}
function testBlur(){
console.log("失去焦点")
}
function testChange(input){
console.log("内容改变")
console.log(input.value);
}
function testMouseOver(){
console.log("鼠标悬停")
}
function testMouseLeave(){
console.log("鼠标离开")
}
function testMouseMove(){
console.log("鼠标移动")
}
</script>
</head>
<body>
<input type="text"
onkeydown="testDown1(),testDown2()"
onfocus="testFocus()"
onblur="testBlur()"
onchange="testChange(this)"
onmouseover="testMouseOver()"
onmouseleave="testMouseLeave()"
onmousemove="testMouseMove()"
/>
</body>
通过DOM编程动态绑定
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
// 页面加载完毕事件,浏览器加载完整个文档行为
window.onload=function(){
var in1 =document.getElementById("in1");
// 通过DOM编程绑定事件
in1.onchange=testChange
}
function testChange(){
console.log("内容改变")
console.log(event.target.value);
}
</script>
</head>
<body>
<input id="in1" type="text" />
</body>
[ 注意事项 ]
- 通过事件属性绑定函数,在行为发生时会自动执行函数
- 一个事件可以同时绑定多个函数
- 一个元素可以同时绑定多个事件
- 方法中可以传入 this对象,代表当前元素
常见事件
- 鼠标事件
onclick单击
ondbclick双击
onmouseover鼠标悬停
onmousemove鼠标移动
onmouseleave鼠标离开 - 键盘事件
onkeydown按键按下
onkeyup按键抬起 - 表单事件
onfocus获取焦点(点进输入框)
onblur失去焦点(点输入框以外的部分)
onchange内容改变(改变后失去焦点才会触发)
onsubmit提交
onreset重置 - 页面加载事件
onload页面加载完毕事件
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function fun1(){
//alert("单击了")
console.log("单击了")
}
function fun2(){
//alert("单击了2")
console.log("单击了2")
}
function fun3(){
//alert("双击了")
console.log("双击了")
}
function fun4(){
console.log("鼠标悬停了")
}
function fun5(){
console.log("鼠标移动了")
}
function fun6(){
console.log("鼠标离开了")
}
function fun7(){
console.log("键盘按键按下了")
}
function fun8(){
console.log("键盘按键抬起了")
}
function testFocus(){
console.log("获得焦点了")
}
function testBlur(){
console.log("失去焦点了")
}
function testChange(value){
console.log("内容改变为:"+value)
}
function testChange2(value){
console.log("选项改变为:"+value)
}
function testSubmit(){
/*
弹窗的三种方式
alert()信息提示框
prompt()信息输入框
confirm()信息确认框
*/
/* var flag = confirm("确定要提交表单吗？")
if(!flag){
//在这里阻止表单的提交
event.preventDefault();//阻止组件的默认行为
}
//alert("表单发生提交了") */
var flag = confirm("确定要提交表单吗？")
if(!flag){
return false //返回一个false结果
}
return true
}
function testReset(){
alert("表单要重置了")
}
</script>
</head>
<body>
<!-- 表单事件 -->
<!-- <form action="01js引入方式.html" method="get" οnsubmit="testSubmit()"> -->
<form action="01js引入方式.html" method="get" onsubmit="return testSubmit()" onreset="testReset()">
用户昵称:<input
type="text"
name="realName"
onfocus="testFocus()"
onblur="testBlur()"
onchange="testChange(this.value)"
> <br>
登陆账号:<input type="text" name="loginName"> <br>
选择籍贯:
<select onchange="testChange2(this.value)">
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<br>
<input type="submit" value="注册">
<input type="reset" value="清空">
</form>
<hr>
<!-- 鼠标事件 -->
<input
type="button"
value="按钮"
onclick="fun1(),fun2()"
ondblclick="fun3()"
>
<br>
<!-- 键盘事件 -->
<img src="img/222.jpg" onmouseover="fun4()" onmousemove="fun5()" onmouseleave="fun6()">
<br>
<input type="text" onkeydown="fun7()" onkeyup="fun8()">
</body>
</html>
事件的触发
行为触发
- 发生行为时触发,
DOM编程触发
-
通过DOM编程，用代码触发，执行某些代码相当于发生了某些行为
-
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
/* 页面加载事件 onload （页面加载完毕事件） */
/* function ready(){
// 通过dom编程获得要操作的元素
var btn = document.getElementById("btn1")
// 绑定一个单击事件
btn.onclick = function (){
alert("按钮单击了")
}
} */
window.onload = function (){
// 通过dom编程获得要操作的元素
var btn = document.getElementById("btn1")
// 绑定一个单击事件
btn.onclick = function (){
alert("按钮单击了")
// 通过dom编程触发事件,相当于某些事件发生了
// 通过dom编程触发div的单击事件
div1.onclick()
}
// 为div1绑定单击事件
var div1 = document.getElementById("d1")
div1.onclick = function(){
div1.style.backgroundColor="red"
}
}
</script>
<style>
.div1{
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<!-- <body οnlοad="ready()"> -->
<body>
<div id="d1" class="div1" >
</div>
<br>
<button id="btn1">按钮</button>
<a href="13jsBOM编程常见API.html">13页</a>
</body>
</html>
BOM编程
什么是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对象的属性之一,代表浏览器的本地数据会话级存储
window对象的常见属性(了解)
history: 窗口的访问历史
back: 加载 history 列表中的前一个 URL
forword: 加载 history 列表中的下一个 URL
location: 修改地址栏中的urlsessionStorage: 用于存储一些会话级数据(浏览器关闭数据清除)localStorage: 用于存储一些持久级数据(浏览器关闭数据还在)console log: 向控制台打印日志
window对象的常见方法(了解)
通过BOM编程控制浏览器行为演示
三种弹窗方式
window 对象是由浏览器提供给我们使用的，无需自己new
window.可以省略不写
alert普通信息提示框prompt确认框confirm信息输入对话框
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
function testAlert(){
//普通信息提示框
window.alert("提示信息");
}
function testConfirm(){
//确认框
var con =confirm("确定要删除吗?");
if(con){
alert("点击了确定")
}else{
alert("点击了取消")
}
}
function testPrompt(){
//信息输入对话框
var res =prompt("请输入昵称","例如:张三");
alert("您输入的是:"+res)
}
</script>
</head>
<body>
<input type="button" value="提示框" onclick="testAlert()"/> <br>
<input type="button" value="确认框" onclick="testConfirm()"/> <br>
<input type="button" value="对话框" onclick="testPrompt()"/> <br>
</body>
页面跳转
<head>
<meta charset="UTF-8">
<title>小标题</title>
<script>
function goAtguigu(){
var flag =confirm("即将跳转到尚硅谷官网,本页信息即将丢失,确定吗?")
if(flag){
// 通过BOM编程地址栏url切换
window.location.href="http://www.atguigu.com"
}
}
</script>
</head>
<body>
<input type="button" value="跳转到尚硅谷" onclick="goAtguigu()"/> <br>
</body>
通过BOM编程实现会话级和持久级数据存储
- 会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过window的
sessionStorge属性实现 - 持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过window的
localStorge实现 - 可以用于将来存储一些服务端响应回来的数据,比如：token令牌,或者一些其他功能数据,根据数据的业务范围我们可以选择数据存储的会话/持久 级别
<!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>
function saveItem(){
// 让浏览器存储一些会话级数据
window.sessionStorage.setItem("sessionMsg","sessionValue")
// 让浏览器存储一些持久级数据
window.localStorage.setItem("localMsg","localValue")
console.log("haha")
}
function removeItem(){
// 删除数据
sessionStorage.removeItem("sessionMsg")
localStorage.removeItem("localMsg")
}
function readItem(){
console.log("read")
// 读取数据
console.log("session:"+sessionStorage.getItem("sessionMsg"))
console.log("local:"+localStorage.getItem("localMsg"))
}
</script>
</head>
<body>
<button onclick="saveItem()">存储数据</button>
<button onclick="removeItem()">删除数据</button>
<button onclick="readItem()">读取数据</button>
</body>
</html>
- 测试，存储数据后，再读取数据，然后关闭浏览器，获取数据，发现sessionStorge的数据没有了，localStorge的数据还在
- 通过removeItem可以将这些数据直接删除
- 在F12开发者工具的应用程序栏，可以查看数据的状态
DOM编程
什么是DOM编程
简单来说，DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改，以实现网页数据和样式动态变化效果的编程
-
document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
-
根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。
-
上面的代码生成的树如下
-
DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程
-
dom树中节点的类型
node 节点，所有结点的父类型element 元素节点，node的子类型之一，代表一个完整标签attribute 属性节点，node的子类型之一，代表元素的属性
+text 文本节点，node的子类型之一，代表双标签中间的文本
获取页面元素的几种方式
在整个文档范围内查找元素结点
在具体元素节点范围内查找子节点
查找指定子元素节点的父节点
查找指定元素节点的兄弟节点
代码
<!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 // 获取后面的第一个元素
*/
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>
操作元素属性值
属性操作
内部文本操作
代码
<!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>
/*
3 对元素进行操作
1. 操作元素的属性 元素名.属性名=""
2. 操作元素的样式 元素名.style.样式名="" 样式名"-"要进行驼峰转换
3. 操作元素的文本 元素名.innerText 只识别文本
元素名.innerHTML 识别文本同时可以识别html代码
*/
function changeAttribute(){
// 语法 元素名.属性名=""
// 获得属性值
console.log(in1.type) //text
console.log(in1.value) //hello
// 修改属性值
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.innerText="<h1>嗨</h1>" // <h1>嗨</h1>
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>
增删元素
对页面的元素进行增删操作
代码
<!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>
/*
4. 增删元素
var element =document.createElement("元素名") // 创建元素
父元素.appendChild(子元素) // 在父元素中追加子元素
cityul.insertBefore(新元素,参照元素) // 在某个元素前增加元素
父元素.replaceChild(新元素,被替换的元素) // 用新的元素替换某个子子元素
元素.remove() // 删除当前元素
*/
function addCs(){
// 创建一个新的元素
// 创建元素
var csli =document.createElement("li") // <li></li>
// 设置子元素的属性和文本
csli.id="cs"
csli.innerText="长沙"
// 将子元素放入父元素中
var cityul =document.getElementById("city")
// 在父元素中追加子元素
cityul.appendChild(csli)
}
function addCsBeforeSz(){
// 创建一个新的元素
// 创建元素
var csli =document.createElement("li") // <li></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>
// 设置子元素的属性和文本
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")
//不能用for循环，索引改变，会漏删
/* var fc =cityul.firstChild
while(fc != null ){
fc.remove()
fc =cityul.firstChild
} */
cityul.innerHTML=""
//cityul.remove() 不建议用 ul也删除了 不能增加元素了
}
</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>
<!-- 目标1 在城市列表的深圳前添加一个子标签 <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>
正则表达式
正则表达式简介
正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换，是对字符串执行模式匹配的强大工具。
语法
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers;
修饰符
方括号
正则表达式使用
验证
注意：这里是使用正则表达式对象来调用方法。
// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 调用正则表达式对象的test()方法验证目标字符串是否满足我们指定的这个模式，返回结果true
console.log("/o/.test('Hello World!')="+reg.test(str));
匹配
// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
// 在目标字符串中查找匹配的字符，返回匹配结果组成的数组
var resultArr = str.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);
// 数组内容是o
console.log("resultArr[0]="+resultArr[0]);
替换
注意：这里是使用字符串对象来调用方法。
// 创建一个最简单的正则表达式对象
var reg = /o/;
// 创建一个字符串对象作为目标字符串
var str = 'Hello World!';
var newStr = str.replace(reg,'@');
// 只有第一个o被替换了，说明我们这个正则表达式只能匹配第一个满足的字符串
console.log("str.replace(reg)="+newStr);//Hell@ World!
// 原字符串并没有变化，只是返回了一个新字符串
console.log("str="+str);//str=Hello World!
全文查找
如果不使用g对正则表达式对象进行修饰，则使用正则表达式进行查找时，仅返回第一个匹配；使用g后，返回所有匹配。
// 目标字符串
var targetStr = 'Hello World!';
// 没有使用全局匹配的正则表达式
var reg = /[A-Z]/;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为1
console.log("resultArr.length="+resultArr.length);
// 遍历数组，发现只能得到'H'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
对比
// 目标字符串
var targetStr = 'Hello World!';
// 使用了全局匹配的正则表达式
var reg = /[A-Z]/g;
// 获取全部匹配
var resultArr = targetStr.match(reg);
// 数组长度为2
console.log("resultArr.length="+resultArr.length);
// 遍历数组，发现可以获取到“H”和“W”
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
忽略大小写
//目标字符串
var targetStr = 'Hello WORLD!';
//没有使用忽略大小写的正则表达式
var reg = /o/g;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为1
console.log("resultArr.length="+resultArr.length);
//遍历数组，仅得到'o'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
对比
//目标字符串
var targetStr = 'Hello WORLD!';
//使用了忽略大小写的正则表达式
var reg = /o/gi;
//获取全部匹配
var resultArr = targetStr.match(reg);
//数组长度为2
console.log("resultArr.length="+resultArr.length);
//遍历数组，得到'o'和'O'
for(var i = 0; i < resultArr.length; i++){
console.log("resultArr["+i+"]="+resultArr[i]);
}
元字符使用
var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java开头
var reg = /^Java/g;
console.log('reg.test(str01)='+reg.test(str01)); // false
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // true
var str01 = 'I love Java';
var str02 = 'Java love me';
// 匹配以Java结尾
var reg = /Java$/g;
console.log('reg.test(str01)='+reg.test(str01)); // true
console.log("<br />");
console.log('reg.test(str02)='+reg.test(str02)); // false
字符集合的使用
//n位数字的正则
var targetStr="123456789";
var reg=/^[0-9]{0,}$/;
//或者 ： var reg=/^\d*$/;
var b = reg.test(targetStr);//true
//数字+字母+下划线，6-16位
var targetStr="HelloWorld";
var reg=/^[a-z0-9A-Z_]{6,16}$/;
var b = reg.test(targetStr);//true
常用正则表达式
| 需求 | 正则表达式 |
|---|---|
| 用户名 | /^[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]+$/ |
案例开发-日程管理-第一期
登录页及校验
<!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>
注册页及校验
<!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>
扫一扫
2193
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
