JavaScript2

最新推荐文章于 2024-08-27 15:59:21 发布

秋雨红枫正是时

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量248

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ccl112804/article/details/134913490

版权

什么是JavaScript？

Java与JavaScript没什么太大的关系，如果非要扯上关系的话……它都是编程语言。

JavaScript是Web开发领域中的一种强大的编程语言，主要用于开发交互式的网页。以下简称：js。

网页的组成

一个完整的网页由三个部分组成：

HTML（网页的主要组成部分）
CSS（网页美化的主要部分）
JavaScript（实现网页交互的主要部分，实现业务逻辑与页面交互）

js的三大部分

核心语法（js代码）
DOM文档对象模型（js可以控制HTML元素进行相关的操作）
BOM浏览器对象模型（js可以控制浏览器元素进行相关操作）

其中有关于浏览器的元素有：弹窗、浏览器的滚动条等。

js的特点

简单易用（只需用户安装浏览器便可使用）
跨平台特性
支持面向对象

js的常见开发工具

常见的开发工具有：VSCode、HBuilderX

VSCode以下简称vs

什么语言都可以用它来编写
轻量级的编辑器，这使得在实际使用中能够增强用户的体验感
丰富的插件系统，这使得vs拥有更多的可能性
拥有自动保存

HBuilderX以下简称hbx

相比于vs，hbx则更加轻量化在实际的使用中占用的资源比vs少的多
易上手，对于一个刚刚接触前端的小白来说强大的提示与一键打包的功能十分贴心

在内存允许的情况下，想要得到更好的体验vs绝对是你最佳的选择。

写一个拥有js代码的HTML的网页

在写js代码之前有几个小知识需要我们了解

js代码必须写在<script>标签内部，就如同食物要吃进胃里面而不是吃进大肠里一样
script可以随意摆放，但是推荐放在body标签下面，因为在实际使用中代码是从下往运行的，下先提前显示出网页将会大大增强用户体验

警告框

输入框

用户需要输入值，再点击确认或取消

用户无需输入值，只需点击确认或取消

在HTML网页上打印内容

在控制台中打印内容

js中的变量

首先我们要知道什么是变量，变量是程序在内存中申请的一块用来存放数据的空间。

变量由变量名和变量值组成，通过变量名可以访问变量的值。

变量的命名规则

js的命名规则与Java一致，不能使用数字、关键字等作为变量名。

在js中常见的关键字有：

if
else
switch
for
class
do
while
case
break
contiue
return
default
new
var
void

如何声明一个变量

声明一个变量的格式为：数据类型变量名 = 值；

但是在js中使用“var”，便可以声明所有的变量，因为var是varible（变量）的缩写

由此我们便可以使用var来声明变量，有以下两个方式：

先声明再赋值

var num;
num = 10;

声明的同时进行赋值

var num = 10;

练习：将两个变量的值进行交换
var num1 = 10;
var num2 = 20;
var num3 = num1;
num1 = num2;
num2 = num3;
console.log(num1);
console.log(num2);
将其中的num1变量的值赋值给第三方变量，再将num2的值赋值给num1，最后再将第三方变量中的值重新赋值给num2。

由此变量值的交换完成。

js中数据类型

基本数据类型：

number 在js当中number为数据类型并不是特殊字符
string 在js当中string为基本数据类型
Boolean

引用数据类型：

数组
Object（对象）
函数（方法）
等等

//boolean读布尔
//js的boolean和java的boolean完全一致
//体现在:都是基本数据类型  都只有true和false
//意义:用程序表示一件事成功或者失败，或表示一个条件成立或不成立。
//JavaScript中严格区分大小写，因此true和false值只有全部为小写时才表示布尔型。

			
			
			
//js中的number（读数值类型）讲解
//一句话总结:即可以存放小数,也可以存储整数
// var a = 123;
// var b = 12.5;
//a和b都是number类型.没有加引号
			
			
//js中的string（读字符类型）讲解
//这里要注意:
//js的String和java的String不同之处1:
// string在java是引用，在JS是基本
//js的String和java的String不同之处2:
// string在java中通过双引号声明
// string在js  中既可以通过双引号也可以通过单引号声明
//例如:
var str1 = "你好";
var str2 = '我好';
//以上都是string的写法

转义符的使用

//我想在页面输出:   你好,我的外号是"大聪明";
// document.write("你好,我的外号是"大聪明";");写法是错误的.不能同时存在多个双引号
//做法1:我们需要知道  单引号里面可以包着双引号
// document.write('你好,我的外号是"大聪明";');
//做法2:通过转义符--  反斜杠(enter上面的)：\  斜杠：/ (shift左边的)
document.write("你好,我的外号是\"大聪明\";");

null和undefined数据类型解析

// null 表示空的意思 例如:
var str = null;
//null的注意事项:没有任何属性或方法可言
			
			
//undefined 表示未定义的意思 只声明了变量但是未赋值
//例如:
var str123 ;//这个str123就是undefined

特殊变量

//bigint 翻译:大数值
//如果存在需求需要计算很大很大(不用去记，因为很大。)数字,那么number将无法实现
//例如:下面的number绰绰有余
// var num1 = 1111111;
// var num2 = 2222222;
// console.log(num1+num2);
// var num1 = 11111111111111111111;//number
// var num2 = 11111111111111111111;//number
// console.log(num1+num2);//计算结果出现了误差
//所以就需要借助于bigint
//bigint类声明方法:
// var num3 = 1111111111111111111n;//只需要在最后加n即可
// var num4 = 1111111111111111111n;//只需要在最后加n即可
// console.log(num3+num4);
			
//symbol讲解:略 常用于独一无二的对象.

数据类型的检查

var num = 11;//number
var str = "11";//string类型
console.log(num);
console.log(str);
//以上写法:是我们可以看到的.所以可以知道是什么类型.
//但是缺点也很明显不方便在控制台得知是什么类型

如图所示我们无法得知这两个数据为什么类型的。

由此我们便需要以下方法

//例如我们在之前学习的prompt语法
// var money = prompt("请输入你的金额");
//通过money变量接受用户在前台输入的值
// console.log(money);//所需我们就要学习如何识别xx变量是什么类型
//总结:prompt的返回值都是string
			
			
//如何判断一个变量是什么类型
//语法:  typeof xxx 返回是一个数据类型
var str = 123;
console.log( typeof str);//number
str = "123";
console.log( typeof str);//string

由此我们便能得知这个变量为什么数据类型。

数据类型的转换

//为什么要学习数据类型转换？见一下例题:
// var num1 = prompt("请输入第一个数");
// var num2 = prompt("请输入第二个数");
// alert("两数之和为" + (num1 + num2));//这种写法是错误的  
//原因:prompt返回的是一个string类型,两个string类型相加,是以拼接的形式
			
			
//如何将字符串转成number类型.
//js提供了下面三个方法,各有区别,都要掌握
// parseInt()
// parseFloat()
// Number()
			
//parseInt 将一个字符串类型的数字解析成整数
// alert( parseInt("11.12")  );//11
// alert( parseInt("11.99")  );//11   总结1小数后面直接省略,不会四舍五入
// alert( parseInt("11.a12")  );//11     总结2小数后面直接省略
// alert( parseInt("11a.a12")  );//11    总结3:解析顺序从左到右,解析到非数字就停止.
// alert( parseInt("1a1a.a12")  );//1    总结4:只需要记住总结3
// alert( parseInt("a11a.a12")  );//NaN      NAN 翻译: not a   numnber  不是一个数字
			
			
//parseFloat()和上面的语法完全一致,唯一区别保留小数
// console.log(  parseFloat("11.11") );//11.11
// console.log(  parseFloat("11.11a") );//11.11
// console.log(  parseFloat("11.1a1a") );//11.1
// console.log(  parseFloat("11a.11") );//11
// console.log(  parseFloat("a11.11") );//NAN
// console.log(  parseFloat("11.a") );//11   
			
//Number()只能将真正的数字解析
// console.log(  Number("11.11") );//11.11
// console.log(  Number("11") );//11
// console.log(  Number("11") );//NAN

扩充：随机数

// for(var i = 1 ; i<=1000 ;i++){
// 	var num = Math.random();
// 	console.log(num);
// }
//总结:Math.random()这个方法返回的是一个 0-1的随机数  (0,1)
			
//如果说想生成1-100的随机数
for(var i = 1 ; i<=1000 ;i++){
		var num = Math.random() * 100+1;//(0,100)
		console.log(parseInt(num));//得知:0-99
}

运算符

算术运算符

/*
算数运算符有如下几种：
+   -    *     /   %
以上五种是最基本的加减乘除和取余
其中取余的注意事项：例题如下			
*/
// console.log(10%3);//1
// console.log(10%-3);//1
// console.log(-10%3);//-1
// console.log(-10%-3);//-1
//总结:取余结果的正负取决于%左边的正负,也就是两个数取余,首先全看成正数
//然后结果的正负和%左边的正负一致即可.
			
//** 幂运算  语法:  a ** b  理解为a的b次方
// console.log(2**3);//8
			
//++ 和 --  表示自增1  和自减1
//有两种用法:  a++ 表示先用在加   ++a表示先加再用
			
//做算数运算的注意事项: 任何编程语言都有一个通病
//做小数运算会可能损失精度
// console.log(0.1+0.2);//0.300000004
			
//所以JS提供了一个方法 来避免这种情况出现
//  aaa.toFixed(num); 表示保留小数点后面几位小数
//  aaa表示某个数  num表示保留几位   如果没写默认就是0
// console.log(  (0.1+0.2).toFixed(3)  );
//注意事项: 该方法的返回值是string类型.
			
			
//字符运算符 就是一个  +  
// 字符之间的运算 通过 +  即可完成拼接
// var str1 = "张三";
// var str2 = "是猪";
// console.log(str1+str2);//张三是猪
			
//注意事项:任何类型 + string   = string
//所以:我们不仅可以将字符串转型成数字  也可以将任何类型 转成string
//最常见的做法: 直接和空字符串相加即可.这样不会影响值的本身.
// console.log( typeof (1234 + ""));

小数案例：

// 根据弹窗，用户输入的数据完成求和运算，能够利用运算符计算用户输入的两数之和
// 为了避免JavaScript的精度问题，将结果保留两位小数。
var num1 = prompt("请输入第一个数字");
var num2 = prompt("请输入第二个数字");
			
//注意:下面写法是错误的.原因: 因为toFieed方法只能给数字使用
//但是prompt方法返回的一定是字符串,所以num1+num2的结果就是字符串.无法调用toFixed方法.
// alert( (num1 + num2).toFixed(2) );
			
//思考: 是一个一个将Num1和num2转成数字 还是为了节省代码将（num1+num2）看成一个整体然后进行转型
//答案:这里不能为了节省代码. 因为string+string是字符串的拼接
			
num1 = Number(num1);
num2 = Number(num2);
			
//这里注意:可以改进,如果结果是NAN  我们应该给用户提示一个"请输入合法的数据"
			
//思路:将NAN的值弄清楚是什么类型 通过typeof 得知 NAN 是一个String类型
if ( (num1 + num2).toFixed(2) == "NaN") {
		alert("请输入合法的数据");
}else{
		alert( (num1 + num2).toFixed(2) );
}

赋值运算符

//赋值运算符:最常见的就是 =   将右边的式子赋给左边.
// var a = 2 ;
//不常见的有如下:
// +=   *=   -=  /=  %=
//例如
// a  =  a + 1; 等同于 a+=1;

习题：

//习题:
var a = 3;
a += 2;		
console.log(a);//5
a -= 2;		
console.log(a);//3   		
a *= 2;		
console.log(a);//6  		
a /= 2;		
console.log(a);  //3	
a %= 2;		
console.log(a);  //1
a **= 2;		
console.log(a);  //1

比较运算符

//比较运算符 用来比较两个值 怎么样 返回结果为boolean类型.
//例如常见的有以下:  >    <    >=  <=  !=   ==   
			
			
//了解一下的   ===   表示全等于 
//==仅仅是判断值是否相等   ===不仅要值相等而且要类型相等
console.log("1"  ==  1);//true
console.log("1"  ===  1);//false

逻辑运算符

//逻辑运算符的用法主要分为以下4类:
//  && 短路与   & 逻辑与
//  || 短路或   |逻辑或
//用法完全一致  区别如下:
//  例如 a  &&  b
//如果a和b都为真,返回值才为真. 那么当a为false 将不会执行b
//  例如 a  &  b
//如果a和b都为真,返回值才为真. 当a为false 将会执行b
//  例如 a  ||  b
//如果a和b只要有一个为真,返回值才为真. 那么当a为true 将不会执行b
//  例如 a  |  b
//如果a和b只要有一个为真,返回值才为真. 当a为true 将会执行b
		
var num = 1;
false && num++
//因为a为false，所以不会执行++指令，所以num的值为1
console.log(num);//1
true || num++;
//因为a为true，所以不会执行++指令，所以num的值为1
console.log(num);//1
			
var num = 1;
false & num++;
//因为a为false，所以执行++指令，所以num的值为2
console.log(num);//2
true | num++;
//因为a为true，所以执行++指令，所以num的值为3
console.log(num);//3

三元运算符

/*
三元运算符也称为三元表达式
语法如下：
条件表达式 ? 表达式1 : 表达式2

如果条件表达式的值为true，则返回表达式1的执行结果。
如果条件表达式的值为false，则返回表达式2的执行结果。
常用于替代简单的if-else语句
			
*/
		   
var age = 18;
// if (age>18) {
// 	alert("成年了");
// } else{
// 	alert("未成年");
// }
alert( age>18?"陈年了":"未成年" );

位运算符

位运算符用来对数据进行二进制运算，在运算时，位运算符会将参与运算的操作数视为由二进制数（0和1）组成的32位的串

位运算符
运算符名称说明
& 按位“与” 将操作数进行按位“与”运算，如果两个二进制位都是1，则该位的运算结果为1，否则为0
| 按位“或” 将操作数进行按位“或”运算，只要二进制位上有一个值是1，该位的运算结果为1，否则为0
~ 按位“非” 将操作数进行按位“非”运算，如果二进制位为0，则按位“非”的结果为1；如果二进制位为1，则按位非的结果为0
^ 按位“异或” 将操作数进行按位“异或”运算，如果二进制位相同，则按位“异或”的结果为0，否则为1
<< 左移将操作数的二进制按照指定位数向左移动，运算时，右边的空位补0，左边移走的部分舍去
>> 右移将操作数的二进制按照指定位数向右移动，运算时，左边的空位补根据原数的符号位补0或者1，原来是负数就补1，是正数就补0
>>> 无符号右移将操作数的二进制按照指定位数向右移动，不考虑原数的正负，运算时，左边的空位补0

注意：JavaScript中的位运算仅能对数字型的数据进行运算。在对数字进行位运算之前，程序会将所有的操作数转换为二进制，然后逐位运算

例如：

使用“~15”对15进行按位“非”运算，过程如下：

~ 0000000 0000000 0000000 00001111

11111111 11111111 11111111 11111000

上述运算结果为补码，符号位（最左边的一位）是1表示负数，为了将其转换为十进制，我们需要计算其原码

11111111 11111111 11111111 11110000 补码

11111111 11111111 11111111 11101111 反码（补码减1）

10000000 00000000 00000000 00010000 原码

计算原码之后得到“~15”的结果对应的十进制数字为-16

位运算符
运算符	名称	说明
&	按位“与”	将操作数进行按位“与”运算，如果两个二进制位都是1，则该位的运算结果为1，否则为0
\|	按位“或”	将操作数进行按位“或”运算，只要二进制位上有一个值是1，该位的运算结果为1，否则为0
~	按位“非”	将操作数进行按位“非”运算，如果二进制位为0，则按位“非”的结果为1；如果二进制位为1，则按位非的结果为0
^	按位“异或”	将操作数进行按位“异或”运算，如果二进制位相同，则按位“异或”的结果为0，否则为1
<<	左移	将操作数的二进制按照指定位数向左移动，运算时，右边的空位补0，左边移走的部分舍去
>>	右移	将操作数的二进制按照指定位数向右移动，运算时，左边的空位补根据原数的符号位补0或者1，原来是负数就补1，是正数就补0
>>>	无符号右移	将操作数的二进制按照指定位数向右移动，不考虑原数的正负，运算时，左边的空位补0

2.3.7 运算符优先级

JavaScript中运算符的优先级
结合方向	运算符
无	()
左	. [] new(有参数，无结合性)
右	new(无参数)
无	++(后置) --(后置)
右	! ~ -（负数） +（正数）++（前置）--（前置）typeof void delete
右	**
左	* / %
左	+ -
左	<< >> >>>
左	< <= > >= in instatnceof
左	== != === !==
左	&
左	^
左	\|
左	&&
左	\|\|
右	?:
右	= += *= /= % <<= >>= >>>= &= ^= \|=
左	,

小提示：运算符优先级高低由上到下递减，同一个单元格的运算符具有相同的优先级，左结合方向表示同级运算符的执行顺序方向从左向右，右结合方向则表示同级运算符的执行顺序从右向左，小括号“()”是优先级最高的运算符，运算时，要先计算小括号内的表达式。当表达式中有多个小括号时，最内层小括号中的表达式优先级最高

【案例】计算圆的周长和面积

<script>
var r = prompt('请输入圆的半径');
r = Number(r);
var c = 2 * 3.14 * r;
var s = 3.14 * r * r;
alert('圆的周长为：' + c.toFixed(2));
alert('圆的面积为：' + s.toFixed(2));
</script>

2.5 流程控制

2.5.1 选择结构

if 语句

语法格式1：

if(条件表达式){

语句块;

}

语法格式2:

if(条件表达式){

语句块1;

}else{

语句块2;

}

语法格式3：

if(条件表达式1){

语句块1;

}else if(条件表达式2){

语句块2 }

...

else if(条件表达式n){

语句块n;

} else{

语句块n+1;

}
<script>

var score = 90;

if(score >= 90){

console.log('优秀');

}else if(score >= 80){

console.log('良好');

}else if(score >= 70){

console.log('中等');

}else if(score >= 60){

console.log('良好');

}else{

console.log('不及格');

}

</script>

switch语句

语法格式

switch(表达式){

case 常量1：

执行语句;

break;

case 常量2：

执行语句;

break;

...

default

执行语句;

break;

}
<script>

var week = 6;

switch(week){

case 1:

console.log('星期一');

break;

case 2:

console.log('星期二');

break;

case 3:

console.log('星期三');

break;

case 4:

console.log('星期四');

break;

case 5:

console.log('星期五');

break;

case 6:

console.log('星期六');

break;

case 7:

console.log('星期日');

break;

default:

console.log('请输入合法数1~7其中一个');

}

</script>

【案例】查询水果的价格

<script>
var fruit = prompt('请输入要查询的水果');
switch(fruit){
case '苹果':
alert('苹果的价格是4元/斤');
break;
case '香蕉':
alert('香蕉的价格是3元/斤');
break;
case '西瓜':
alert('西瓜的价格是2元/斤');
break;
case '葡萄':
alert('葡萄的价格是10元/斤');
break;
default:
alert('没有此水果');
}
</script>

2.5.2 循环结构

循环结构之一：while循环

1、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件  变量或表达式为boolean
③循环体
④迭代部分

2、while的格式
①
while(②){
③
④
}

执行过程：①→②→③→④→②→③→...→②

for和while可以相互转换

循环结构之一：do-while循环

1、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件  变量或表达式为boolean
③循环体
④迭代部分

2、while的格式
①
do{
③
④
}while(②);

执行过程：①→③→④→②→③→④...→②

循环结构之一：for循环

1、java中规范了3种循环结构：for、while、do-while
2、凡是循环结构，就一定会有4个要素
①初始化条件
②循环条件  变量或表达式为boolean
③循环体
④迭代部分

3、for循环的格式

for(①;②;④){
   ③；
}
   
执行过程：①→②→③→④→②→③→...→②

“无限”循环的结果的使用

1、格式：while(true)或for(;;)

嵌套循环的使用

1、嵌套循环：是指一个循环结构A的循环体是另一个循环结构B
-外层循环：循环结构A
-内层循环：循环结构B

2、说明：
①内层循环充当外层循环的循环体
②两层嵌套循环，外层循环控制行数，内层循环处理列数
③外层执行m次，内层循环执行n，内层循环的循环体执行m*n次
④实际开发基本不会出现三层循环，三层的循环结构少见

2.5.3 跳转语句

break和continue关键字的使用
   
           使用范围         在循环结构中的作用                   相同点
break：    switch-case                             在此关键字的后面不能声明执行语句
           循环结构中     结束（或跳出）当前循环结构
continue： 循环结构中     结束（或跳出）当次循环

2、带标签的break和continue
3、开发中，break的使用频率要远高于continue

【案例】输出金字塔

<script>
var str = '';
var level = prompt('请设置金字塔的层数');
//获取输入的纯数字，其余情况皆转为NaN
level = parseInt(level) && Number(level);
//判断用户输入是否合法
if(isNaN(level)){
alert('金字塔层数必须是纯数字');
}
//循环遍历金字塔的层数
for(var i = 1;i <= level;++i){
//计算“*”前的空格并累加到str中
var blank = level - i;
for(var k = 0;k < blank; ++k){
str += ' ';
}
//计算“*”的数量并累加到str中
var star = i * 2 - 1;
for(var j = 0;j < star; ++j){
str += '*';
}
//换行
str += '\n';
}
console.log(str);
</script>

三、数组

3.1 数组基本概念

java中的数组：储存很多数据的容器，

特点：1.所有的数据的类型必须要一致

2.长度无法更改

javaScript中的数组：储存很多数据的容器，

特点：1.所有的数据的类型可以不一致

2.长度可以随意更改

数组是存储一系列值的集合，它是由一个或多个元素组成的，各元素之间使用逗号“,”分隔。

数组中的每个元素由“索引”和“值”构成。

索引：也可称为“下标”，用于识别元素，以数字表示，默认情况下从0开始依次递增。

值：元素的内容，可以是任意类型的数据。

3.2 如何创建数组

js中创建数组的两种方式：都要掌握

1.静态声明:声明数组的同时，将元素值都定下来。

var arr = [1,2,3,4,5,6,7]; //java是大括号 JS是中括号

var arr = []; //创建一个长度为0的空数组

2.动态声明：暂时只声明，赋值放到后续进行

var arr = new Array();//声明了一个空数组（长度为0）

arr[0] = 1; arr[1] = 2;

动态声明的注意事项：

写法1：var arr = new Array(); 创建了一个长度为0的空数组

写法2：var arr = new Array(10); 创建了一个长度为10的空数组

写法3：var arr = new Array(1,2,3,4,5); 创建了一个长度为0的空数组

注意事项：写法2和写法3的区分。如果括号内部只有一个数字，就表示长度，而非值

如果有若干个，才表示值

3.3 数组的基本操作

//常见的数组操作1:获取指定位置的元素语法:arr[index] 下标从0开始

//常见的数组操作2:获取数组的长度，通过属性，xxx.length

// 注意事项:Java中获取数组长度通过方法：xxx.length()

//常见的数组操作3:遍历数组,根据for循环进行遍历

var arr = [1,2,3,"语文" , true , 22.22 , undefined , null];

// console.log(arr[5]);//获取下标为5的元素

// console.log(arr.length);

// for(var i = 0 ;i<arr.length;i++){

// console.log(arr[i]);

// }

//常见的数组操作4:随意地更改数组的长度

console.log("数组修改之前的长度为" + arr.length);

//方法1: 简单操作直接修改 ,不推荐

// arr.length = 100;

// console.log("数组修改之后的长度为" + arr.length);

//方法2:直接在数组的后面添加元素即可

arr[8] = "新元素1";

arr[9] = "新元素2";

arr[19] = "新元素3";

//修改元素

arr[0] = 111;

console.log("数组修改之后的长度为" + arr.length);

for(var i = 0 ;i<arr.length;i++){

console.log(arr[i]);

}

console.log("~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~")

//删除数组中指定的元素

var arr = [1,2,3,4,5];

// console.log(arr);

// delete arr[2];//准确地说法应该是: 讲指定位置的元素修改成 empty而已并没有实现真正的删除.

// console.log(arr);

//如何实现真正的删除: Java也好JS也好都没有直接提供相对的方法.

//思路:创建一个新的数组,然后旧数组遍历赋值给新数组.然后遍历的时候进行判断,如果到了那个值不想要,跳过

// var arr1 = [ ];

// var index = 0;

// for(var i = 0 ; i<arr.length;i++){

// if (arr[i]==3) {

// continue;

// }

// arr1[index] = arr[i];

// index++;

// }

// console.log(arr);

// console.log(arr1);

3.4 找出最大小值

var arr =[12,324,543,654,6,547,3,5443,534,5654,654,654,7,5,765];

//查找出最大值和最小值

var max = arr[0];

var min = arr[0];

for(var i = 0 ;i<arr.length;i++){

if( arr[i] > max ){

max = arr[i];

}

if(arr[i]<min){

min = arr[i];

}

}

console.log(max + "~~" + min);

3.5 菲波那切数列

/*

该数列又称为为兔子数列，源自于澳大利亚的兔子衍生事件

若干年以前一位农夫不小心弄丢了一对兔子，然后2年以后他的农场就没了

原因：兔子不仅可以公母繁殖，还可以公公母母繁殖

兔子的繁殖能力特别强，强到什么地步如下：

每对兔子每第三个月都能够产下一对兔子。然后后续每个月都能产下一对兔子

问第10个月有多少对兔子：假设一开始就一对。

月份对数

1 1

2 1

3 2 原有的一对 + 生下来的1对

4 3 原有的一对 + 生下来的2对

5 5 原有的一对 + 生下来的3对 + 最开始生下来的又生了

6 8

7 13

8 21

*/

//规律: 从第三个月开始每个月的兔子数 = 前第1个月 + 前第2个月

//要求:显示前10对兔子的对数

var arr = new Array(10);

arr[0] = 1;

arr[1] = 1;

for(var i = 2;i<arr.length;i++){

arr[i] = arr[i-1] + arr[i-2];

}

console.log(arr)

3.6 数组排序

//数组的排序非常重要: 成绩销量热度等等属性都需要进行排序

var arr = [78,6213,5544,5432,213,654,756,767,654,876,87,69789,789,78];

//要求:从小到大排序.

//最常见的排序算法 : 冒泡排序

//相邻的两个数比较然后根据需求进行替换

//步骤1: 需要判断多少轮 arr.length-1

for(var i = 0 ; i<arr.length-1;i++){

//步骤2:比较第i个数和后续的数一一比较问题:比较多少次 arr.length-1-i

for(var j = i+1 ; j<arr.length;j++){

if(arr[i]>arr[j]){

var temp = arr[i];

arr[i] = arr[j];

arr[j] = temp;

}

}

}

console.log(arr);

3.7 二维数组

/*

javaScript中的数组：数据的类型可以不一致

也就是意味着数组里面可以再次存储数组来实现二维甚至多维数组

一般来说掌握二维数组就够了。

二维数组：可以看成几行几列

*/

//声明二维数组的语法:

//语法1: var arr = new Array( new Array(10) , new Array(9) , new Array(12) );

//语法2: var arr = [ [1,3] , [11,22,33] , [33,22,55] ];

/*

var arr = [

[1,2],

[2,3,4],

[4,5,6]

]

*/

//例题:如何创建一个二维数组,要求长度为100 且二维数组里面的每个数组长度也为100,暂时不知道元素内容

//写法1：不推荐 var arr = new Array( new Array(10) , new Array(10) , new Array(10) , ... ,new Array(10) );

//写法2:

// var arr = new Array(100);//仅仅是一个一维数组

// for(var i = 0 ; i<100;i++){

// arr[i] = new Array(100);

// }

// console.log(arr);

//遍历二维数组思路: 先将二维数组看成一维数组

// var arr = [ [1,2,3,4] , [5,6,7,8] , [11,22,33,44] ];

// //如何遍历

// //1.先遍历总长度

// for(var i = 0 ; i<arr.length ; i++){

// //2.在遍历数组里面的数组

// for(var j = 0 ; j<arr[i].length ; j++){

// console.log(arr[i][j]);

// }

// }

// //如何获取二维数组中指定的数

// var index = arr[1][2] ; //7

// var index = arr[2][1] ; //22

//利用二维数组实现杨辉三角姓名为杨辉吃饱了没事做,发明的一个三角形

//将杨辉三角的前10行打印在页面上.

/*

1

1 1

1 2 1

1 3 3 1

1 4 6 4 1

1 5 10 10 5 1

1 6 15 20 15 6 1

*/

//思路:1.找规律几行几列的三角形 10行和 "和行数相等的" 列

//第几行就有几列

//转换成二维数组,我们应该创建一个长度为10的二维数组 ,然后数组里面的长度随之改变

var arr = new Array(10);

for(var i = 0;i<arr.length;i++){

arr[i] = new Array(i+1);

}

//以上就声明了一个可以容纳的容器

//赋值:

for(var i = 0 ; i<arr.length;i++){//i行数

for(var j = 0 ; j<arr[i].length ; j++){//j列数

if( j==0 || j==i ){

arr[i][j] = 1;

}else{

arr[i][j] = arr[i-1][j] + arr[i-1][j-1];

}

}

}

//以上知识点均没有实际意义,单纯就是提升自己思维能力.解决问题的能力

for(var i = 0 ; i<arr.length;i++){

for(var j = 0 ; j<arr[i].length ; j++){

document.write(arr[i][j] + " ");

}

document.write("<br>");

}

四、函数

4.1 函数的相关概念

/*

JavaScript的函数理解为Java里面的方法，

把一些经常复用的代码，抽取出来封装在一个函数中。

提高程序的可读性，减少开发者的工作量，便于后期的维护。

Java中的方法的语法：

public 返回类型方法名(数据类型变量名 , 数据类型变量 ...){

}

js中函数的分类：

A.内置函数（JS提供的）: console.log(); alert() confirm parseInt... ：

B.自定义函数（程序员自己写的）

其中自定义函数的声明语法如下：

function 方法名(变量名，变量名...){

}

调用：方法名(参数列表);

函数定义与调用的编写顺序不分前后。

你可以先调用函数，再声明函数

*/

//声明一个无参函数

function a1(){

console.log(123);

}

a1();

//声明一个指定个数的有参函数

function a2(a,b,c){

console.log(a+b+c);

}

a2(1,2,3);

//声明一个若干个数的有参函数

function a3(... a){

for(var i = 0 ; i<a.length ; i++){

console.log(a[i]);

}

}

a3(1,1.1,true,undefined,null,"你好");

//有返回值的函数

function a4(a,b){

return a + b;

}

var sum = a4(10,20);

alert(sum)

4.2 变量的作用域

/*

和Java一样 JS的变量也分为局部变量和全局变量（Java的叫法是成员变量，只是概念和全局类似）

*/

function info() {

var age = 18;

}

info();

console.log(age);

//思考以上代码的执行结果是什么

//A.18 B.报错 C.null D.undefined

//答案:B 提示:age is not defined 表示未定义

//原因如下:age是在函数里面定义的理解为局部变量.但是console.log是在函数外调用的.

/*

全局变量：在所有函数之外声明（script标签内部的最开始几行），它的作用域称为全局作用域，在同一个页面文件中的所有脚本内都可以使用。

局部变量：在函数体内利用var关键字声明的变量称为局部变量，仅在该函数体内有效。

*/

4.3 函数进阶

//以下知识点掌握即可:用的很少,但是看到了需要知道意思.

//函数的声明一般就是上面两个知识点即可.就是利用function声明

//不仅有函数还有一个叫做函数表达式的东西

//函数表达式指的是将函数赋值给变量的表达式，

// 通过“变量名()”的方式即可完成函数的调用，小括号“()”内可以传入参数，示例代码如下。

//函数的写法:

function a1(a){

console.log("我被调用了。参数是" + a)

}

a1(123);

//函数表达式的写法:

var abc = function (a){

console.log("我被调用了。参数是" + a)

};

abc(567);

4.4 匿名函数

// 匿名函数自调用:HTML页面解析之后自动执行的一段代码.只会执行一次.

//例如跳转网页之后提示:登录成功加载成功

//语法如下:

// (function(){

// alert("登录成功！！！");

// })();

//下面是函数叫做a的函数

function a(){

alert(123);

}

//匿名函数指的就是:没有函数名的函数但是又拥有了变量名

var a = function(){

alert(456);

}

4.5 箭头函数

//箭头函数了解即可:和函数表达式一样比较鸡肋, 但是需要能看懂它.

//以下3个函数的实际意义完全一样.

function sum(a,b){

return a + b;

}

var fn = (a, b) => a + b;

var fn = (a,b) => {

return a + b;

};

4.6 递归函数

//递归函数:了解即可. 函数的内部调用自己函数本身.

//优点:代码简化. 缺点:难得想

//例如声明一个函数求1-N的和

function sum(n){

var sum = 0;

for(var i = 1 ;i<=n;i++){

sum = sum + i;

}

return sum;

}

var i = sum(100);

alert(i);

//递归的核心1:鸿沟(临界值)

function sumDg(n){

if(n==1){

return 1

}else{

return n + sumDg(n-1);

}

}

alert(sumDg(100));

//案例:求菲不拉切序列 1 1 2 3 5 8 13 21

//求第N项值

function dg(n){

if(n==1 || n == 2){

return 1;

}else{

return dg(n-1) + dg(n-2);

}

}

五、对象

5.1 对象的概念

/*

在JavaScript中，对象属于复杂数据类型，

它是由属性和方法组成的一个对象。

属性是指对象的特征。

方法是指对象的行为。

下面以学生的特征和行为为例进行说明。

学生的特征：姓名、年龄和性别，这些特征可以用对象的属性来表示。

学生的行为：打招呼、唱歌、写作业，这些行为可以用对象的方法来表示。

*/

//将10个学生的成绩输出在页面上。

var arr = [1,2,32,543,65,35,35,654,46,31];

for(var i = 0 ;i<arr.length;i++){

if(i==arr.length-1){

document.write(arr[i] );

}else{

document.write(arr[i] + ',');

}

}

document.write("<hr>");

//将10个学生的全部信息(id name age sex)输出在页面上。

//传统的思路:定义40个变量或者4个数组或者二维数组等等

//按照对象的思想:10个学生理解10个对象将10个对象放在一个数组里面即可

var s1 = {id:1001,name:"张三1" , age:18};

var s2 = {id:1002,name:"张三2" , age:18};

var s3 = {id:1003,name:"张三3" , age:18};

var s4 = {id:1004,name:"张三4" , age:18};

var s5 = {id:1005,name:"张三5" , age:18};

var s6 = {id:1006,name:"张三76" , age:18};

var s7 = {id:1007,name:"张三7" , age:18};

var s8 = {id:1008,name:"张三8" , age:18};

var s9 = {id:1008,name:"张三9" , age:18};

var s10 = {

id :10010,

name:"张三",

age:20,

};

var arr = [s1,s2,s3,s4,s5,s6,s7,s8,s9,s10];

// for(var i = 0 ;i<arr.length;i++){

// if(i==arr.length-1){

// document.write(arr[i] );

// }else{

// document.write(arr[i] + ',');

// }

// }

//注意:上述写法打印的仅仅是外观的Object而非内部的属性。

// for(var i = 0 ;i<arr.length;i++){

// if(i==arr.length-1){

// document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");

// }else{

// document.write(arr[i].id + arr[i].name + arr[i].age +"<br>");

// }

// }

//以上写法较为麻烦

for(var i = 0 ;i<arr.length;i++){

for(var sx in arr[i]){

document.write(arr[i][sx]);

}

document.write("<br>")

}

5.2 创建对象

//判断一个变量是否为对象的小技巧:通过console.log打印.

//如果打印的是一行字符串就说明是基本数据类型

//如果打印的是一个可以折叠的数据就表示对象

// var a = 11;

// console.log(a);

// var arr = [1,2,3,4];

// console.log(arr);

/*

如何创建一个JS的对象：

方法1：使用对象的字面量创建对象（理解为直接赋值）

例如：var arr = [1,2,3];，//静态声明数组字面量创建

就是用大括号“{}”来标注对象成员，

每个对象成员使用键值对的形式保存，即 “key: value”的形式。

多个成员通过逗号隔开

键指的就是独一无二的属性

*/

// var student1 = { 'id' :1001 ,name:"张三" , age : 18 , 'sex-sex' : '男' } ;

// //其中键可以选择性的加引号

// console.log(student1);

// //如何访问对象里面的值的方法1: 通过对象名.属性名即可

// console.log(student1.id + "~" + student1.name + "~" + student1.age );

// //如果存在一些命名不规范的变量无法通过对象名.属性名访问

// // console.log(student1.sex-sex);这行代码是报错的

// //访问对象里面的值的方法2:通过对象名[属性名]

// console.log(student1['sex-sex']);

// console.log(student1['name']);

//创建对象的补充:如果一开始只知道有对象,但是不知道它有什么属性或属性值,

//那么可以先创建一个空对象壳子

// var s123 = {};

// //后续再声明属性的同时进行赋值

// s123.id = 123;

// s123.name = "Lisi";

// s123.age = "男";

// console.log(s123.id);//123

// console.log(s123.dasd);//undefined

//创建对象的方法2:

//第一步:创建对象的函数(想象成Java的构造函数)

// function Person(id,name,age){

// this.id = id;

// this.name = name;

// this.age = age;

// }

// //第二步:new对象

// var p1 = new Person(123,"王五" , 20);

// console.log(p1);

//使用场景:如果对象很多就用方法2 反之方法1

//补充:对象由:属性和方法

// var s1 = {

// id :11,

// name:"张三",

// age :18,

// study : function(){

// alert("成功调用了这个对象的这个方法");

// }

// };

// alert(s1.id);

// s1.study();

function Person(id,name,age){

this.id = id;

this.name = name;

this.age = age;

this.eat = function(){

alert("我吃拉面");

}

}

//第二步:new对象

var p1 = new Person(123,"王五" , 20);

p1.eat();

//创建对象的方法3:

//如果谁不知道给对象取什么名字,就叫做Object

var o = new Object();

o.id=1231;

o.name="李四";

console.log(o);

5.3 如何遍历一个对象

// var arr = [1,2,4,3];

// console.log(arr);

var s10 = {

id :10010,

name:"张三",

age:20,

sex:'男',

height : 188,

weight :200

};

// console.log(s10);

//由于直接输出s10将只会显示object我们需要内部的属性值/

//方法1:如果只需要某一个属性值, 直接通过s10.属性名即可

//方法2:如果所有的属性值都需要,那么也可以通过s10.属性名只是比较麻烦.

//学习:如何遍历对象:语法如下:

// for(var i = 0;i<a10.length;i++){

// //错误的写法:1.对象的键并不是012 其次对象并没有长度

// }

//i表示对象的下标(属性) s10表示遍历的对象

for(var i in s10){

console.log(s10[i]);

}

5.4 值对象和引用对象

//JS的参数传递也分为值传递和引用传递

var a = 111;

var b = "你好";

var c = true;

var d = [1,2,3];

function change(a,b,c,d){

a = 222;

b = "我好";

c = false;

d[0] = 123;

}

change(a,b,c,d);

console.log(a);//111

console.log(b);//你好

console.log(c);//true

console.log(d[0]);//123

5.5 Math对象

             // Math对象的用法和Java中Math对象的用法几乎一致。

             // 唯一不同的就是 Java的数据类型分为int double等但是js里面只有number



             //第一个 Math.min(a,b,c,d,...);获取最小的值

             // alert(Math.min(2,534,32,43,76,86));

             // //第二个 Math.max(a,b,c,d,...);//获取最大值

             // alert(Math.min(2,534,32,43,76,86));



            //第三个:Math.ceil(a); 向上取整舍去小数点 (但是Java是保留的)

            // alert(Math.ceil(11.1));

            //第四个:Math.floor(a); 向下取整舍去小数点 (但是Java是保留的)

            // alert(Math.floor(11.1));



            //第五个 Math.round(x);四舍五入如果是临界值都是往高的入

            // alert(Math.round(1.5) + "~" + Math.round(-1.5));



            //第六个:Math.random();返回一个随机数范围 0~1 官方概念:可以取0但是不能取1 但是实际场景可以忽略0

            // alert(Math.random());

5.6 猜数字案例

            /*

                猜数字游戏:

                无限通过promot弹窗来让用户输入数字

                要求：1-100的随机数

            */





            var r = Math.ceil(Math.random()*100);

            var min = 1;

            var max = 100;

            var n = 0;//计数

            while(true){//不知道用户要输入多少次

                var userR = prompt("请输入你的数字，当前范围为" + min +"~" + max);

                userR = parseInt(userR);

                if( ! (userR>=min && userR<=max) ){

                    alert("你输入的数有误！");

                    continue;

                }





                n++;

                //注意:prompt接受的值都是string类型, 虽然string类型如果做数字运算会自动转成number 但是不推荐





                if(userR==r){

                    alert("恭喜你才对了，一共猜了" + n + "次");

                    break;

                }else if(userR>r){

                    max = userR;

                    alert("你猜大了,当前范围为" + min +"~" + max);

                }else {

                    min = userR;

                    alert("你猜小了,当前范围为" + min +"~" + max);

                }

            }

5.7 模拟猜拳案例

            //如何实现简化版AI猜拳

            /*

                石头剪刀布





            */



         var arr = ["石头" , "剪刀" , "布"];

         //只需要利用随机数生成0-2的随机数然后AI就拿到arr[rrr]

         var ran =Math.floor(Math.random()*3 );



         var r = arr[ran];//模拟AI出的选项



         var userR = prompt("请输入:'石头'，'剪刀' , '布'");

         //省略数据校验,假设用户一定会按规矩输入



         if(r==userR){

             alert("平了，你和AI都出的" + userR);

         }else if( ( userR=="石头" && r=="剪刀" ) || ( userR=="剪刀" && r=="布" ) || ( userR=="布" && r=="石头" ) ){

             alert("你赢了,你出的是" + userR + ",AI出的是" + r);

         }else{

             alert("你输了,你出的是" + userR + ",AI出的是" + r);

}

5.8 date对象

            //区分date表示日期和data表示数据



            //date对象创建的2种方式：



            // //第一种不放任何参数表示获取当前时间

            // var d = new Date();

            // console.log(d);





            //第二种方式:放若干个数字,分别表示年月日时分秒按照顺序其中月份比较特殊 0表示1月

            // var d = new Date(2020,11,11);//表示2020年12月11日 0点0分0秒





            //date对象的常见方法:



            var d = new Date(2020,11,11,12,6,33);;//表示2020年12月11日 0点0分0秒

            console.log(d.getFullYear());//获取年份

            console.log(d.getMonth() + 1);//获取月份注意0表示1

            console.log(d.getDate());//获取日期

            console.log(d.getHours());//获取小时

            console.log(d.getMinutes() );//获取分钟

            console.log(d.getSeconds() );//获取秒



            console.log(d.toLocaleString());//返回当前日期的字符串格式





            console.log(d.getTime());//返回从1970年1月1日0时0分0秒到指定时刻的毫秒数

5.9 倒计时案例

            //计算当前时刻距离2024年1月1日0时还差多少时间



            var d1 = new Date();

            var d2 = new Date(2024,0,1);



            var sjc = d2.getTime() - d1.getTime(); //计算出两个时间节点的相差毫秒数



            sjc = parseInt(sjc / 1000);//得到是两者的秒数



            var s = sjc%60;



            var m = parseInt(sjc/60%60);



            var h = parseInt(sjc/60/60%24);



            var day = parseInt(sjc/60/60/24);



            document.write("距离倒计时还剩下" + day +"天 " + h +"时" + m +"分" + s + "秒");

5.10 array对象

            //array对象之前学过一遍了。

            // var arr = [];

            // arr.push("aa");//表示奖元素添加到数组的尾部

            // console.log(arr);





            // var arr = ['张三','分','阿萨德三','类似'];

            // var str =arr.toString();//默认以,分割

            // console.log(str);

            // var str = arr.join(":");

            // console.log(str);



            //适用常见: 用户选择自己的爱好框







            //数组的去重:

            var arr = [12,543,654,,432,12,3,342,53,543,6,546,54,675,756,7,3,5,3456,46,54,654,756,42,34,234,23];

            // //要求数组中重复的数字去掉.

            console.log(arr.length + "这是原有的长度");

            var newArr = [];



            for(var i = 0 ;i<arr.length;i++){

                if(newArr.indexOf(arr[i]) == -1){

                    newArr.push(arr[i]);

                }

            }

            console.log(newArr);

5.11 string对象

            //JS中的String对象的方法和Java几乎完全一致.

            // 判断输入的账号是否合法

            // 要求：长度8-18位。必须以yyzy开头。账号的最后6位必须是纯数字组成。

            var str = "yyzysaf111111";

            // console.log(str.substring(str.length-6,str.length));



            // console.log(Number(str.substring(str.length-6,str.length))) ;



            var b = panduan(str);

            alert(b);



            function panduan(str){

                if( !(str.length>=8 && str.length<=18) ){

                    alert("长度不符合条件");

                    return false;

                }



                if( ! str.startsWith("yyzy") ){

                    alert("不是以yyzy开头");

                    return false;

                }





                //思路:如何判断后6位是否为纯数字

                //步骤1: 取出后6位思路通过subString(a,b);截取

                //其中b是定死了就是str.length 其中a=str.length-6



                if(Number(str.substring(str.length-6,str.length))+"" =="NaN"){

                    alert("后6位不是纯数字");

                    return false;

                }

                return true;

            }

六、DOM文档对象模型

6.1 dom简介

什么是API？

应用程序编程接口（Application Programming Interface，API）是软件系统预先定义的接口，

用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。

例如console.log方法。就是JS的一个API。

文档对象模型（Document Object Model，DOM）用于处理HTML文档的编程接口。

翻译：对HTML内部的标签进行处理。

6.2 如何通过dom获取

<h3 id="c" name="b">我是h3标签</h3>

<h3 class="a">我是h3标签</h3>

<h3 class="a">我是h3标签</h3>

<p name="b" class="a">我是p标签</p>

<script>

//通过DOM节点获取HTML元素的4种方法每种方法都要掌握.非常相似.

//方法1:通过标签名获取元素

var a = document.getElementsByTagName("h3");

//此时就已经获取到了页面上所有的h3标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

//至于怎么去处理,就是后续的任务.

//方法2:通过class名获取元素

var b = document.getElementsByClassName("a");

//此时就已经获取到了页面上所有的class为a标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

//方法3:通过name获取元素

var c = document.getElementsByName("b");

//此时就已经获取到了页面上所有的class为a标签注意返回的一定是一个数组（遍历）.即使只有一个h3标签,也是数组.

//方法4:通过id获取元素因为id是唯一标识符所以返回的是一个元素,可以直接处理

var d = document.getElementById("c");

</script>

6.3 如何操作结点

<h3 id="c" name="b">我是h3标签</h3>

<h3 class="a">我是h3标签1<a href="#">你好</a> </h3>

<input type="text" id="abc" value="739737680" />

<script>

/*

常见的操作节点的三个属性：

1.innerText表示给标签内部重新赋值或取值这里是文本值

2.innerHtml表示给标签内部重新赋值或取值这里是html值

注意以上2个方法只能作用于非表单元素例如 h标签 a标签 p标签等等

//第三个方法只能作用于表单元素

例如input

方法3： value表示给标签内部重新赋值或取值这里是html值

*/

// var a = document.getElementsByTagName("h3");

// for(var i = 0 ;i<a.length;i++){

// console.log(a[i].innerText);//表示获取各个h3标签内部的文本值

// a[i].innerHTML = "<a href='#'>你好</a>";

// }

// var b = document.getElementsByClassName("a");

// for(var i = 0 ;i<b.length;i++){

// console.log(b[i].innerHTML);//表示获取各个h3标签内部的文本值

// }

var d = document.getElementById("abc");

// d.value = "账号123";

console.log(d.value);

</script>

6.4 如何操作结点的样式

<p id="abc" >你好，我是p标签</p>

<script>

var p = document.getElementById("abc");

//如何改变一个节点的样式:

//步骤1.思考需要修改什么样式

//步骤2.去css里面查看该样式的单词

//步骤3.按照提示来

//步骤4.通过节点.style.xxx 表示取值或赋值

//例如我要修改字体颜色

// p.style.color = "red";

// console.log(p.style.color)

//例如我要修改背景色

// p.style.backgroundColor = "green"

//以上写法的缺点: 麻烦每次只能修改一个样式

//所以: 如果样式很多,我们可以先将其封装到一个css里面

p.className = "abcd";//表示给该元素赋予一个class为abcd的属性

</script>

6.5 js中的事件管理

<p id="a">你好</p>

<p>你好</p>

<p>你好</p>

<p>你好</p>

<hr>

<img src="img/1.PNG" />

<hr>

账号：<input type="text" id="aaa" /> <span id="bbb"></span> 

<script>

//js中的事件: 用户对前台页面做出的一些操作来触发一些函数

//例如用户的单击双击等等等等

//需求:用户点击id为a的元素弹出一个窗口

//步骤1:获取元素

// 步骤2: 元素.事件名 = function(){代码体}

//步骤3 常见的事件名:

//单击事件 onclick

// document.getElementById("a").onclick = function(){

// alert(123);

// }

// //需求2:给所有的p标签加上点击事件下面的写法是错误的需要遍历

// // document.getElementsByTagName("p");.onclick = function(){

// // alert(123);

// // }

// var p = document.getElementsByTagName("p");

// for(var i = 0 ;i<p.length;i++){

// p[i].onclick = function(){

// alert(456);

// }

// }

//双击事件

// document.getElementById("a").ondblclick = function(){

// alert(123);

// }

//鼠标移入事件悬浮事件

//需求:鼠标放上图片图片就放大2倍鼠标移出就恢复原状

//鼠标移入事件onmouseover

// document.getElementsByTagName("img")[0].onmouseover = function(){

// document.getElementsByTagName("img")[0].style.width = "400px";

// document.getElementsByTagName("img")[0].style.height = "400px";

// }

// //鼠标移出事件onmouseout

// document.getElementsByTagName("img")[0].onmouseout = function(){

// document.getElementsByTagName("img")[0].style.width = "200px";

// document.getElementsByTagName("img")[0].style.height = "200px";

// }

//输入账号,失去焦点就需要数据校验

document.getElementById("aaa").onblur = function(){

var str = document.getElementById("aaa").value;

if(str.length >10){

document.getElementById("bbb").innerText = "长度太长了";

document.getElementById("bbb").style.color = "red";

}else{

document.getElementById("bbb").innerText = "数据合格";

document.getElementById("bbb").style.color = "green";

}

}

</script>

6.6 js的属性

<a id="a" href="1_dom简介.html">进入1页面</a>

<button id="abc">按钮</button>

<img id="b" src="img/1.PNG" />

<h3></h3>

<button id="btn">开始点名</button>

<script>

//js获取元素的属性：

//元素的常见属性: id class src href

//需求:点击按钮让这个a标签的href改成跳转到第二个页面

//需求点击按钮,进入下一张图片

document.getElementById("abc").onclick = function(){

document.getElementById("a").setAttribute("href" , "2_如何通过DOM获取元素节点.html");

document.getElementById('b').setAttribute("src","img/2.PNG");

}

//点击开始点名按钮来回切换

document.getElementById("btn").onclick = function(){

if(document.getElementById("btn").innerText=="开始点名"){

document.getElementById("btn").innerText = "停止点名"

}else{

document.getElementById("btn").innerText = "开始点名"

}

}

</script>

6.7 迷你版点名系统

<font id="1">张三1</font>

<font id="2">张三2</font>

<font id="3">张三3</font>

<font id="4">张三4</font>

<font id="5">张三5</font>

<hr>

<button id="btn">开始点名</button>

<script>

document.getElementById("btn").onclick = function(){

if(document.getElementById("btn").innerText=="开始点名"){

document.getElementById("btn").innerText = "停止点名"

//让5个名字对应的font标签的背景色改变

var r =Math.ceil(Math.random()*5);//(0,5)

document.getElementById(r).style.backgroundColor = "red";

}else{

document.getElementById("btn").innerText = "开始点名"

}

}

</script>

6.8 js中的事件管理

            //js中的事件: 用户对前台页面做出的一些操作来触发一些函数

            //例如用户的单击双击鼠标移入移出键盘的输入等等等等



            //常见的事件如下:

            //1.单击事件: onclick 用处最多.

            //2.双击事件: ondblclick

            //3.鼠标移入事件: onmouseover

            //4.鼠标移出事件: onmouseout

            //5.键盘输入事件:onkeyup

            //6.失去焦点事件:onblur

            //7.获取焦点事件:onfocus

            //8.表单提交事件:onsubmit

            //9.下拉菜单事件:onchange



            //事件的语法如下:

            //xxx表示获取的元素节点 abc表示什么事件

            // xxx.onabc = function(){ }

6.9 单机事件

        <button>开始点名</button>





        <script>

            //需求如下:点击按钮来回展示开始点名或停止点名

            //思路:获取到button标签,然后给它赋予一个点击事件.

            //接着判断button标签内部的value值.根据值来进行判断.进而修改/



            var btn = document.getElementsByTagName("button")[0];





            btn.onclick = function(){

                //获取button的文本值.

                var text = btn.innerText ;

                if(text=="开始点名"){

                    btn.innerText = "停止点名"

                }else{

                    btn.innerText = "开始点名";

                }

            }





        </script>

6.10 双击事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            div{

                width: 230px;

                height: 230px;

                text-align: center;

                border : 1px solid black;

                display: none;

            }

        </style>



    </head>

    <body>

        <button>双击打开登录页面</button>



        <div>

            <h3>登录弹窗！！</h3>

            账号<input type="text" placeholder="请输入你的账号" /> <br>

            密码<input type="password" placeholder="请输入你的密码" /> <br><br><br>

            <button>登录</button> <button>返回</button>

        </div>







        <script>



            //思考:浏览器中的弹窗为啥那么好看

            //但是我们学习的三个弹窗一个比一个丑

            //其实浏览器的弹窗并不是真正的弹窗.

            //思路: 就是一个提前绘制好的一个div页面.然后将其隐藏. 当用户触发的时候就蹦出来.实现一个弹窗的效果.





            //需求:双击打开登录页面

            document.getElementsByTagName("button")[0].ondblclick = function(){



                document.getElementsByTagName("div")[0].style.display = "block";



            }



            document.getElementsByTagName("button")[2].onclick = function(){

                document.getElementsByTagName("div")[0].style.display = "none";

            }

        </script>



    </body>

</html>

6.11 鼠标移入移出事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            .a{

                width: 200px;

                height: 200px;

            }

            .b{

                width: 400px;

                height: 400px;

            }





        </style>

    </head>

    <body>



        <img class="a" src="img/1.PNG">



        <script>

            //需求鼠标移入图片内部 ,图片放大鼠标移出图片图片还原

            var img = document.getElementsByTagName("img")[0];



            img.onmouseover = function(){

                    // img.style.width = "400px";

                    // img.style.height = "400px";

                    img.className = "b";

            }



            img.onmouseout = function(){

                    // img.style.width = "200px";

                    // img.style.height = "200px";

                    img.className = "a";

            }



        </script>



    </body>

</html>

6.12 键盘输入事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        小写字母：<input type="text" id="a" /> <br>

        大写字母：<input type="text" id="b" />



        <script>

            //在第一个文本框输入小写字母.下面的文本框默认输出上面的与之对应的大写字母



            //思路:给第一个文本框加上键盘输入事件（每敲击一下键盘就触发一下事件）.

            //获取第一个文本框的值.然后赋予给第二个文本框



            var i1 = document.getElementById("a");

            var i2 = document.getElementById("b");

            i1.onkeyup = function(){

                i2.value = i1.value.toUpperCase();

            }



        </script>



    </body>

</html>

6.13 获取和失去焦点事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        账号：<input type="text" id="a" />        <span id="c"></span>       <br>



        <script>

            var username = document.getElementById("a");

            var password = document.getElementById("a");

            var tip1 = document.getElementById("c");

            var tip2 = document.getElementById("d");



            //需求:输入账号之后.提示账号输入规则.

            //思路给文本框加上获取焦点事件给第一个span标签生产一个提示用于

            username.onfocus = function(){

                tip1.innerText = "账号的长度要在6-10之间";

                tip1.style.color = "red";

            }



            //需求2:输入完成之后,要判断账号是否符合格式.

            //思路:失去焦点之后判断.

            username.onblur = function(){

                var username123 = username.value;

                if (username123.length >=6 && username123.length<=10) {

                    tip1.innerText = "√";

                    tip1.style.color = "green";

                } else{

                    tip1.innerText = "X";

                    tip1.style.color = "red";

                }

            }

        </script>



    </body>

</html>

6.14 复习表单

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        



        <form action="#" method="post" enctype="text/plain" >

            账号：<input type="text" id="a" name="username" /> <br>

            密码：<input type="password" id="b" name="password" /> <br>

            <input type="submit" value="登录提交" />

        </form>

    </body>

</html>

6.15 表单提交事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <form id="f" action="#" method="post">

            账号：<input type="text" id="a" />            <span id="c"></span>       <br>

            密码：<input type="password" id="b" />        <span id="d"></span>       <br>

            <input type="submit" value="登录" />

        </form>

        <script>

            var username = document.getElementById("a");

            var password = document.getElementById("b");

            var tip1 = document.getElementById("c");

            var tip2 = document.getElementById("d");

            var f = document.getElementById("f");





            //需求:输入账号之后.提示账号输入规则.

            //思路给文本框加上获取焦点事件给第一个span标签生产一个提示用于

            username.onfocus = function(){

                tip1.innerText = "账号的长度要在6-10之间";

                tip1.style.color = "red";

            }



            //需求2:输入完成之后,要判断账号是否符合格式.

            //思路:失去焦点之后判断.

            username.onblur = function(){

                var username123 = username.value;

                if (username123.length >=6 && username123.length<=10) {

                    tip1.innerText = "√";

                    tip1.style.color = "green";

                } else{

                    tip1.innerText = "X";

                    tip1.style.color = "red";

                }

            }



            password.onfocus = function(){

                tip2.innerText = "密码的长度要在6-10之间";

                tip2.style.color = "red";

            }



            //需求2:输入完成之后,要判断账号是否符合格式.

            //思路:失去焦点之后判断.

            password.onblur = function(){

                var password123 = password.value;

                if (password123.length >=6 && password123.length<=10) {

                    tip2.innerText = "√";

                    tip2.style.color = "green";

                } else{

                    tip2.innerText = "X";

                    tip2.style.color = "red";

                }

            }







            //onsubmit和其他的事件有个不同之处. 需要返回值的默认是return true表示提交 return false就表示不提交

            f.onsubmit = function(){



                if(tip1.innerText=="√" && tip2.innerText=="√" ){

                    return true;

                }else{

                    alert("请按照要求写");

                    return false;

                }

            }



            </script>



    </body>

</html>

6.16 下拉菜单事件

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <select id="a">

            <option>中国银行</option>

            <option>建设银行</option>

            <option>交通银行</option>

        </select>



        <select id="b">

            <option>中国银行卡号111</option>

            <option>建设银行卡号222</option>

            <option>交通银行卡号333</option>

        </select>



        <script>

            // onchange事件: 一般只会作用于下拉框点击下拉框且改变值.

            //适用场景: 银行卡的互动. 地址栏的联动



            var a = document.getElementById("a");

            var b = document.getElementById("b");





            //需求实现两个下拉框的联动效果.

            //思路:给第一个下拉框加上一个onchange事件

            //思路:获取第一个下拉框的第几个元素(下标)

            //思路:将上一步的思路的下标赋予给第二个下拉框即可

            a.οnchange= function(){

                // 如何获取下拉框的下标

                // console.log(a.selectedIndex);

                b.selectedIndex = a.selectedIndex;

            }



            b.οnchange= function(){

                // 如何获取下拉框的下标

                // console.log(a.selectedIndex);

                a.selectedIndex = b.selectedIndex;

            }

        </script>





    </body>

</html>

6.17 修改元素属性

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <img src="img/1.PNG" />

        <button>替换图片</button>



        <script>

            //html元素是有很多属性的.

            //例如 id class name src href



            document.getElementsByTagName("button")[0].onclick = function(){

                //将xxx元素的aaa属性改成bbb

                //xxx.setAttribute("aaa","bbb");



                //var a = xxx.getAttribute("aaa");表示xxx的aaa属性的值



                // document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");





                if(document.getElementsByTagName("img")[0].getAttribute("src") == "img/1.PNG" ){

                    document.getElementsByTagName("img")[0].setAttribute("src","img/2.PNG");

                }else{

                    document.getElementsByTagName("img")[0].setAttribute("src","img/1.PNG");

                }

            }

        </script>

    </body>

</html>

6.18 简化版轮播图

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            img{

                width: 100px;

                height: 100px;

            }

        </style>



    </head>

    <body>

        <img src="img/1.PNG" />

        <script>

            //只要有需求: 每隔一段事件就要作什么事就需要联想到使用定时器



            var img = document.getElementsByTagName("img")[0];

            //实现图片的替换但是图片的文件名可能不是有规律.

            //所以可以将图片的所有文件名路径名存到数组中. 数组是有规律的.

            var src_1 = ["img/1.PNG","img/2.PNG","img/3.PNG","img/4.PNG"];



            var index = 1;

            setInterval(function(){



                img.setAttribute("src",src_1[index]);

                index++;

                if(index==4){

                    index = 0;

                }

            },1000);



        </script>



    </body>

</html>

七、BOM浏览器对象模型

8.1 BOM简介

//DOM:document object model

//DOM: 文档对象模型,通过document.getElementByXxx()获取HTML文档内部的元素

//BOM: Brower object model

//浏览器器对象模型.可以获取一些浏览器自带的功能

// 由于没有统一的BOM标准，每个浏览器都有自己的BOM实现方法，

// BOM的浏览器兼容性较差。常见的BOM对象有：

// window

// document

// location

8.2 window对象讲解

<button id="btn">点击我跳转到另外一个页面</button>

<a href="1_BOM简介.html">点击我跳转到另外一个页面</a>

<button id="close">退出网页</button>

<script>

//window对象是全局对象又称顶级对象.可以省略不写

//常见的方法:console.log() alert

// console可以写成window.console。

// alert()可以写成window.alert()。

// prompt()可以写成window.prompt()。

// open()可以写成window. open()。

// close()可以写成window.close()。

//open表示开启一个新窗口重新开启一个窗口而a标签是在当前窗口完成覆盖.

document.getElementById("btn").onclick = function(){

// window.open("1_BOM简介.html");

open("1_BOM简介.html");

}

//close方法表示直接关闭浏览器

document.getElementById("close").onclick = function(){

// window.open("1_BOM简介.html");

close();

}

</script>

8.3 location对象

<button id="btn">点击我跳转页面</button> <br>

<button id="btn1">点击我获取当前页面的网址</button> <br>

<button id="btn2">点击我刷新网页</button>

<script>

//location对象常用于路径相关的用法

//常见用法1: 跳转到指定页面等同于A标签的功能

document.getElementById("btn").onclick = function(){

location.href = "1_BOM简介.html";

}

//常见用法2: 获取当前页面的URL地址

document.getElementById("btn1").onclick = function(){

console.log(location.href);

}

//客串知识点: 编码和乱码的区别:

//乱码值得是两个字符串采用的编码不一致,导致数据乱套.

//数据呈现出无法阅读的字样 .

//编码:将占据空间较大的汉字转成占据空间较小的字母的编码形式

//解码:将字母又转回汉字.

//如何对字符串进行编码解码的操作

var str = "%E5%AF%B9%E8%B1%A1";

str = decodeURI(str);//进行解码

console.log(str);

var str = "对象";

str = encodeURI(str);//进行编码

console.log(str);

//常见用法3: 刷新当前网页

document.getElementById("btn2").onclick = function(){

location.reload();

</script>

8.4 定时器基本使用

//定时器: 每间隔多少时间毫秒自动执行函数的一种机制.

//例如5秒后退出系统例如轮播图每隔1秒进行图片的转变

//定时器的种类: 分为延时定时器和重复定时器

//延时定时器: 等待多少时间执行一次函数就GG

//重复定时器: 每隔多少时间都执行一次函数无限循环除非代码写了关闭的条件

8.5 延时定器的使用

// 等待多少时间执行一次函数就GG

//延时定时器的语法如下:

/*

1. setTimeout(function(){ 代码块 }, xx); xx毫秒

2. setTimeout(aa, xx); 注意aa表示函数名不要加括号

function aa(){

}

*/

// setTimeout(function(){

// console.log("你好~~~");

// },2000)

// function aa(){

// console.log("你好~~");

//

// setTimeout(aa,3000)

setTimeout(function(){

close();

},5000)

8.6 重复定时器的使用

<button id="btn">点击我停止定时器</button>

<script>

//重复定时器: 每隔多少时间都执行一次函数

//无限循环除非代码写了关闭的条件

//重复定时器的语法如下:

/*

1. setInterval(function(){ 代码块 }, xx); xx毫秒

2. setInterval(aa, xx); 注意aa表示函数名不要加括号

function aa(){

}

*/

// setInterval(function(){

// console.log("~~");

// },1000);

// setInterval(aa,1000);

// function aa(){

// console.log("~~~");

// }

//如何关闭定时器

//1.需要先定义定时器的名字

//2.加上关闭的条件

//3.通过clearInterval(xxx); xxx表示定时器的名字

var dsq ; //假设该变量是存储定时器

dsq = setInterval(function(){

console.log("~~");

},1000);

document.getElementById("btn").onclick = function(){

clearInterval(dsq);

}

</script>

8.7 在页面显示当前时间

当前时间为： <span id="sj"></span>

<script>

//需求在网页上刷新时间

var sj = document.getElementById("sj");

//立刻马上时时刻刻刷新时间

// setInterval(function(){

// var date = new Date();

// sj.innerText = date.toLocaleString();

// },0);

//先赋予一个初值

var date = new Date();

sj.innerText = date.toLocaleString();

//每秒刷新.

setInterval(function(){

var date = new Date();

sj.innerText = date.toLocaleString();

},1000);

</script>

8.8 距离新年倒计时

距离2024年还差：

<span id="d"></span>天

<span id="h"></span>时

<span id="m"></span>分

<span id="s"></span>秒

<script>

//需求在网页上刷新倒计时的时间

var d = document.getElementById("d");

var h = document.getElementById("h");

var m = document.getElementById("m");

var s = document.getElementById("s");

setInterval(function(){

//倒计时的本质:两个时间节点的时间差计算出两者相差的时间

var d1 = new Date();//当前时间

var d2 = new Date(2024,0,1);//未来时间

var sjc = d2.getTime() - d1.getTime(); //两个时间节点的时间差

//此时的jsc是一个毫秒数. 先转成秒

sjc = Math.ceil(sjc / 1000);//秒数

s.innerText = sjc%60; //秒

m.innerText = Math.floor(sjc/60%60);//分

h.innerText = Math.floor(sjc/60/60%24);//时

d.innerText = Math.floor(sjc/60/60/24);//天

8.9 点名系统版本1

<style>

td{

width: 100px;

height: 40px;

border: 1px solid black;

text-align: center;

}

</style>

</head>

<body>

<div align="center">

<table>

<tr>

<td>张三</td>

<td>李四</td>

<td>王五</td>

</tr>

<tr>

<td>赵六</td>

<td>张三1</td>

<td>张三2</td>

</tr>

<tr>

<td>张三3</td>

<td>张三4</td>

<td>张三5</td>

</tr>

</table>

<button id="btn">开始点名</button>

</div>

<script>

//思路 :随机数函数获取任意一个单元格然后改变其样式

var btn = document.getElementById("btn");

var td = document.getElementsByTagName("td");

var dsq ;

btn.onclick = function(){

if(btn.innerText == "开始点名"){

//点击开始了

btn.innerText = "停止点名";

dsq = setInterval(function(){

var sjs =Math.floor(Math.random() * 9); //

for(var i = 0 ;i<td.length;i++){

td[i].style.backgroundColor = "white";

}

td[sjs].style.backgroundColor = "pink";

},10);

}else{

//点击结束了

btn.innerText = "开始点名";

clearInterval(dsq);

}

}

</script>

8.10 点名系统版本2

<p></p>

<button id="btn">开始点名</button>

<script>

var student = ["张三1","张三2","张三3","张三4","张三5","张三6","张三7"];

var btn = document.getElementById("btn");

var p = document.getElementsByTagName("p")[0];

var dsq

btn.onclick = function(){

if(btn.innerText == "开始点名"){

//点击开始了

btn.innerText = "停止点名";

dsq = setInterval(function(){

var sjs =Math.floor(Math.random() * student.length); //

p.innerText = student[sjs];

},10);

}else{

btn.innerText = "开始点名";

clearInterval(dsq);

}

}

8.11 模拟发送短信

手机号：<input type="text" /><button id="btn">发送</button>

<script>

var sj = 5;//倒计时的时间

var dsq ;

var btn = document.getElementById("btn");

btn.onclick = function(){

btn.setAttribute("disabled" , "disabled");

btn.innerText = "还剩下" + sj + "秒";

dsq = setInterval(function(){

sj--;

btn.innerText = "还剩下" + sj + "秒";

if (sj==0) {

clearInterval(dsq);

btn.removeAttribute("disabled");

btn.innerText = "发送";

sj=5;

}

},1000)

}

</script>

8.12 红绿灯的实现

<style>

#body{

width: 450px;

height: 180px;

background-color: black;

border-radius: 10%;

}

.deng{

width: 100px;

height: 100px;

background-color: floralwhite;

float: left;

margin-left: 20px;

margin-top: 40px;

border-radius: 100%;

}

#sj{

color: white ;

margin-left: 20px;

margin-top: 58px;

border-radius: 100%;

float: left;

font-size: 40px;

}

</style>

</head>

<body>

<div id="body">

<div class="deng" id="red" style="background-color: red;" ></div>

<div class="deng" id="yellow"></div>

<div class="deng" id="green"></div>

<div id="sj">35</div>

</div>

<script>

var time = 30;

var d = 0;//0-70为一次循环

// 红灯时长为30秒，绿灯时长为35秒，

// 黄灯时长为5秒。每隔1秒会减1，当减到0时会换灯。

var red = document.getElementById("red");

var yellow = document.getElementById("yellow");

var green = document.getElementById("green");

var sj = document.getElementById("sj");

setInterval(function(){

d++;

time--;

sj.innerText = time;

if(time==0){

if (d==30) {

time=5;

red.style.backgroundColor = "floralwhite";

yellow.style.backgroundColor = "yellow";

}else if(d==35){

time=35;

yellow.style.backgroundColor = "floralwhite";

green.style.backgroundColor = "green";

}else if (d==70) {

time=30;

d=0;

green.style.backgroundColor = "floralwhite";

red.style.backgroundColor = "red";

}

}

},330)

</script>

八、正则表达式

9.1 表单验证

用户名：<input type="text" id="username" />

<span id="tip"></span> 

<br>

<button id="btn" disabled="disabled">提交信息</button>

<script>

/*

要求对输入的账号进行数据校验：

1.长度为10-20之间

2.必须以yyzy开头

3.必须以2023结尾

4.中间必须存在abcd字符串。

5.必须是复杂账号（大写字母，小写字母，数字，特殊符号必须至少含有3项）

需求如下：输入数据完成之后失去焦点进行校验，如果校验通过则按钮恢复正常，反之给出相关的提示。

*/

var input_username = document.getElementById("username");

var span_text = document.getElementById("tip");

var btn = document.getElementById("btn");

input_username.onblur = function(){

//第一步:获取文本值

var username = input_username.value;

if (username.length<10 || username.length>20) {

span_text.innerText = "长度出现了问题";

return ;//不是作为返回值仅仅是作为跳出方法,节省时间后续代码都不需要执行

}

if (!username.startsWith("yyzy")) {

span_text.innerText = "不是以yyzy开头";

return ;

}

if (!username.endsWith("2023")) {

span_text.innerText = "不是以2023结尾";

return ;

}

if (username.indexOf("abcd")==-1) {

span_text.innerText = "用户名没有包含abcd";

return ;

}

let a1 = false;//表示是否包含大写字母

let a2 = false;//表示是否包含小写字母

let a3 = false;//表示是否包含数字

let a4 = false;//表示是否包含特殊符号

for(let i = 0 ;i<username.length;i++){

if( username.charAt(i)>='A' && username.charAt(i)<='Z' ){

a1 = true;

}else if( username.charAt(i)>='a' && username.charAt(i)<='z' ){

a2 = true;

}else if( username.charAt(i)>='0' && username.charAt(i)<='9' ){

a3 = true;

}else{

a4 = true;

}

}

if(a1+a2+a3+a4<3){

span_text.innerText = "复杂度不够";

return ;

}

span_text.innerText = "√";

btn.removeAttribute("disabled");

}

input_username.onfocus = function(){

span_text.innerText = "";

btn.setAttribute("disabled","disabled");

}

</script>

9.2 正则表达式简介

// 正则表达式（Regular Expression）是一种描述字符串规律的表达式，

// 可以迅速地用极简单的方式达到字符串的校验控制。

//符合一个正确的规则的表达式

// 正则表达式的应用：常用于数据校验，过滤敏感词等等

//如何创建正则表达式:

//方法1 直接声明注意任何情况下不要加引号

// var reg1 = /aa/bb ; //reg不仅有注册的意思还有正则表达式的意思

//方法2:通过new声明该放引号就放引号

// var reg2 = new RegExp("aa","bb");

//一般情况下使用方法1

//解释正则表达式的参数是什么意思

// 第一个参数，用于描述字符串特征，例如以什么开头，以什么结尾，包含什么字符。

// 第二个参数，用于描述额外的功能，例如是否忽略大小写(i)。是否全局匹配(g) 可以省略

//全局匹配的意思: 一般情况下匹配到一个就停止了.

//例如

// var str = "aabbcc";//现在需要将a替换成你

// console.log(str.replace("a","你"));//你abbcc

// 第一种方法

// var reg1 = /ab/;

// // 第二种方法

// var reg2 = new RegExp('ab');

// //上述代码的意思判断字符串是否包含 ab

// //如何去判断通过正则表达式的test方法即可

// var str = "你好123abacd";

// console.log(reg1.test(str))//true

// var reg = /ab/;

// console.log(reg.test('abcd')); // 输出结果：true

// console.log(reg.test('dcba')); // 输出结果：false

// console.log(reg.test('Abcd')); // 输出结果：false

//一般来说都是通过test方法来判断字符串是否符合要求

//其中还有一个方法也可以判断但是用的比较少

// var reg = /ab/;

// console.log(reg.exec('cdab'));

// console.log(reg.exec('dcba'));

// console.log(reg.exec('Abcd'));

// 不同的是：返回值。exec返回的是一个数组，如果不匹配返回一个null。

// 如果匹配就返回出现的下标等。

9.3 正则表达式的元字符

// 之前的写法太过于局限性。a只能代表a，b只能代表b。

// 元字符是具有特殊含义的字符，例如[a-z]就表示所有小写字母

//第一个元字符 . 表示任意字符

// 例如

// var reg = /a./;

// var str = "qwerta~";

// console.log(reg.test(str));

// //第二个元字符 ^ 表示以什么开头必须放在第一个

// var reg = /^yyzy/;

// var str = "yyzy123";

// console.log(reg.test(str));

//第三个元字符 $ 表示以什么结尾必须放在最后第一个

// var reg = /yyzy$/;

// var str = "yyzy123yyzy";

// console.log(reg.test(str));

//元字符之间是可以统一使用的

// var reg = /^2023yyzy$/;这里的语法表示必须是2023yyzy 这里还不完善

// var str = "2023yyzy";

// console.log(reg.test(str));

//下面两种写法的区别 i表示忽略大小写

// var reg1 = /^ab$/i;//必须是ab

// var reg2 = /ab/i;//只要包含ab即可

//元字符之间是可以统一使用的

// var reg = /^2023...yyzy$/;

// var str = "2023ab啊yyzy";

// console.log(reg.test(str));

// 正则表达式中的“[]”表示一个字符集合，

// 只要待匹配的字符符合字符集合中的某一项，即表示匹配成功。

//需要校验的字符串必须要包含a或d或1或z

// var reg = /[ad1z]/;

// console.log(reg.test("aaaaa"));

//常见的字符串集合

// var reg = /[a-z]/;

// var reg = /[A-Z]/;

// var reg = /[0-9]/;

// var reg = /[a-zA-Z0-9]/;//所以非符号的字符

// // 分别叙述两种写法的区别

// var reg1 = /[abc123]/i; //字符串中只要包含abc123 6个中的任意1个即可

// var reg2 = /abc123/i; //字符串必要包含abc123的整体

// 注意连字符必需要结合中括号一起使用

// 分别叙述两种写法的区别。

// var reg1 = /[a-z]/i;

// var reg2 = /a-z/i;

// 当需要匹配某个范围外的字符时，可以在“[”的后面加上“^”，

// 此时“^”不再表示定位符，而是反义符，表示某个范围之外。

// 分别叙述两种写法的区别

// var reg1 = /^[a-z]/i;//必须是开头有一个字母

// var reg2 = /[^a-z]/i;//必须包含非字母的

//限定符表示只允许出现的次数

// var reg1 = /a{6}/;

// console.log(reg1.test("aaaaaab"))

//必须是6个数字开头然后紧紧跟着1~5个字母即可

// var reg1 = /^[0-9]{6}[a-z]{1,5}[0-9]{1}$/i;

// console.log(reg1.test("123456abf1"))

//模拟需求实现敏感词的过滤

// var reg = /[习法西斯]/g;

// var str = "你好作者。法西斯XX啊啊法国XX";

// console.log(str.replace(reg,"*"));//你abbcc

秋雨红枫正是时

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript2

什么是API？应用程序编程接口（Application Programming Interface，API）是软件系统预先定义的接口，用于软件系统不同组成部分的衔接。每一种开发语言都有自己的API。例如console.log方法。就是JS的一个API。文档对象模型（Document Object Model，DOM）用于处理HTML文档的编程接口。翻译：对HTML内部的标签进行处理。//DOM: 文档对象模型,通过document.getElementByXxx()获取HTML文档内部的元素。
复制链接

扫一扫