JavaScript6

最新推荐文章于 2023-06-19 10:24:23 发布

270年前

最新推荐文章于 2023-06-19 10:24:23 发布

阅读量303

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_49344258/article/details/108421344

版权

https://www.w3school.com.cn/js/index.asp

1.JavaScript条件判断语句

在JsvsScript中，我们可使用如下条件语句：

1.if（判断条件）{被执行的Javascript代码块}

2.if（判断条件）{被执行的Javascript代码块1}else{被执行的Javascript代码块2}

3.if(判断条件1）{

被执行的JavaScript代码块1}

else if（判断条件2）

{被执行的Javascript代码块2}...

else if(判断条件n){被执行的javascript代码块n}else{全是flase的时候执行}

4.使用switch来规定多个被执行的备选代码块

switch（表达式）{

case 常量值1 被执行的Javascript代码1；[break;]

case 常量值2 被执行的Javascript代码2；[break;]

....

case 常量值n: 被执行的javascript代码n;[break;]}

defualt:全是false的时候执行；[break;]

}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function getRes(op){
				//得到文本框中输入的数据值
				var num1=Number(document.getElementById("input1").value);
				var num2=Number(document.getElementById("input2").value);
				//定义一个保存运算结果的变量
				var res=0;
				//通过switch语句开执行运算结果
				switch(op){
					case "+": res=num1+num2,
							  //将运算结果输出到
							  document.getElementById("res").innerHTML="运算结果是:"+res;
							  break;
					case "-": res=num1-num2;
								//将运算结果输出到
								document.getElementById("res").innerHTML="运算结果是:"+res;
								break;
					case "*": res=num1*num2;
								//将运算结果输出到
								document.getElementById("res").innerHTML="运算结果是:"+res;
								break;
					case "/": if(num2==0){
								document.getElementById("res").innerHTML="除数不能为0!";
								}else{
									res=num1/num2;
									document.getElementById("res").innerHTML="运算结果是:"+res;
								}
								break;
				}	
			}
			//清除运算
			function qingchu(){
				document.getElementById("input1").value="";
				document.getElementById("input2").value="";
				document.getElementById("res").innerHTML="";
			}
		</script>
	</head>
	<body>
		<input id="input1" type="text" /><br>
		<input id="input2" type="text" /><br>
		<input id="but" type="button" value="+" onclick="getRes('+');"/>
		<input id="but" type="button" value="-" onclick="getRes('-');"/>
		<input id="but" type="button" value="*" onclick="getRes('*');"/>
		<input id="but" type="button" value="/" onclick="getRes('/');"/>
		<input id="but" type="button" value="C" onclick="qingchu();"/>
		<h1 id="res"></h1>
	</body>
</html>

2.JavaScriptFor循环

循环--代码需要被运行多次重复执行，而且每次使用不同的值。

for循环格式

for（初始条件；判断条件；循环增量/减量）{

}

初始条件--循环的开始【变量】

判断条件--判断是否需要执行被多次重复执行的代码

循环减量/增量--改变初始条件值

{}---循环体【包含多次重复执行的代码】

for循环格式：执行过程

1.执行的初始条件

2.执行的判断条件

3.当判断条件为true时执行循环体【包含多次重复执行的代码】

当判断条件为flase时结束循环

4.执行循环增量/减量

5.回到第二步

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function testfor1(){
				for(var i=1;i<=6;i++){
					document.write("<h"+i+">测试for循环--i="+i+"</h"+i+">");
				}
			}
			
			function testfor2(){
				for(var i=6;i>=1;i--){
					document.write("<h"+i+">测试for循环--i="+i+"</h"+i+">");
				}
			}
			
			function testfor3(){
				var names=["zhangsan","lisi","wangwu"];
				var ulObject=document.getElementById("ul1");
				var listr="";
				for(var i=0;i<names.length;i++){
						listr=listr+"<li>"+names[i]+"</li>";
				}
				// i==0  listr="<li>zhangsan</li>";
				// i==1  listr="<li>zhangsan</li><li>lisi</li>"
				// i==2  listr="<li>zhangsan</li><li>lisi</li><li>wangwu</li>"
				ulObject.innerHTML=listr;
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试for循环,递增" onclick="testfor1()"/>
		<input type="button" value="测试for循环,递减" onclick="testfor2()"/>
		<input type="button" value="测试for循环,显示无序列表" onclick="testfor3()"/>
		<ul id="ul1"></ul>
	</body>
</html>

3.JavaScript while循环

1.wuile循环

while循环会一直循环代码块，只要指定的条件为true。

格式：

while（条件）{

要执行的代码块

}

执行步骤：

1.1 先执行判断条件

1.2 当判断条件的结果为true要执行的代码块，回到第一步

1.3 当判断条件的结果为flase结束循环


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格循环</title>
		<script>
			function testwhile1(){
				/*var xue1={xueid:46855,xuename:"liujianming",xueaddress:"尖沙咀"};
				var xue2={xueid:46887,xuename:"chenyongren",xueaddress:"九龙"};
				var xue3={xueid:46842,xuename:"lixiner",xueaddress:"牛头角"};*/
				var stuattay=[
			{xueid:46855,xuename:"liujianming",xueaddress:"尖沙咀"},
			{xueid:46887,xuename:"chenyongren",xueaddress:"九龙"},
			{xueid:46842,xuename:"lixiner",xueaddress:"牛头角"}];
				var i=0;
				var trvalue="";
				do{
					trvalue=trvalue+"<tr><td>"+stuattay[i].xueid+
					               "</td><td>"+stuattay[i].xuename+
								   "</td><td>"+stuattay[i].xueaddress+"</td></tr>"
								   i++;
								   
				}while(i<stuattay.length);
				document.getElementById("b1").innerHTML=trvalue;
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试表格循环" onclick="testwhile1()"  />
		<table id="b1" border="1px" bordercolor="red"></table>
	</body>
</html>

1.4.DO/while循环

do/while循环时while循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要添加为真就会重复循环。

格式：

do{

要执行的代码块

}while（条件）；

DO{}while的执行步骤

1.执行要执行的代码块

2.先执行判决条件

3.当判断条件的结果为true回到第一步

4.当判断条件的结果为false结束循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function testdowhile1(){
				//定义初始条件值
				var i=1;
				do{
					document.write("<h"+i+">测试do-while循环--i="+i+"</h"+i+">");
					//手动控制循环条件。
					i++;
				}while(i<=6);
			}
			
			function testdowhile2(){
				//定义初始条件值
				var i=6;
				do{
				document.write("<h"+i+">测试do-while循环--i="+i+"</h"+i+">");
				//手动控制循环条件。
				i--;	
				}while(i>=1);
			}
			
			function testdowhile3(){
				/*
				//创建3个学生对象
				var stu1={stuid:1001,stuname:"zhangsan",stuage:23,stuaddress:"西安"};
				var stu2={stuid:1002,stuname:"lisi",stuage:24,stuaddress:"上海"};
				var stu3={stuid:1003,stuname:"王五",stuage:25,stuaddress:"北京"};
				var  stuattay=[stu1,stu2,stu3];
				*/
			   
			   var  stuattay=[{stuid:1001,stuname:"zhangsan",stuage:23,stuaddress:"西安"},
							  {stuid:1002,stuname:"lisi",stuage:24,stuaddress:"上海"},
							  {stuid:1003,stuname:"王五",stuage:25,stuaddress:"北京"}];
				//定义while的初始值
				var i=0;
				var trvalue="";
				do{
					trvalue=trvalue+"<tr><td>"+stuattay[i].stuid+
								   "</td><td>"+stuattay[i].stuname+
								   "</td><td>"+stuattay[i].stuage+
								   "</td><td>"+stuattay[i].stuaddress+"</td></tr>"
					i++;	
				}while(i<stuattay.length);
				document.getElementById("table1").innerHTML=trvalue;
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试do-while循环,递增" onclick="testdowhile1()"/>
		<input type="button" value="测试do-while循环,递减" onclick="testdowhile2()"/>
		<input type="button" value="测试do-while循环,显示表格" onclick="testdowhile3()"/>
		<table id="table1" border="1px"></table>
	</body>
</html>

for循环与while和do-while的区别

for循环---必选明确循环次数

while和do--while的区别？

while---先判断后执行

do--while先执行后判断

当判断为fales的时候do-while会比while多判断一次

JavaScript Break和Continue

break语句”跳出"循环

continue语句，结束本次循环的执行，直接执行下一次。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			function testdbreak(){
				for(var i=1;i<=6;i++){
					if(i==3){
						break;
					}
					document.write("<h"+i+">测试for循环--i="+i+"</h"+i+">");
				}
			}
			
			function testdcontinue(){
				for(var i=1;i<=6;i++){
					if(i==3){
						continue;
					}
					document.write("<h"+i+">测试for循环--i="+i+"</h"+i+">");
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="测试break" onclick="testdbreak()"/><br>
		<input type="button" value="测试continue " onclick="testdcontinue ()"/>
	</body>
</html>

4.JavaScript正则表达式

正则表达式--校验一组字符串数据的一个规则/模板/公式。

正则表达模式

括号用于查找一定范围的字符串：

表达式	描述
[abc]	查找方括号之间的任何字符。	试一试
[0-9]	查找任何从 0 至 9 的数字。	试一试
(x\|y)	查找由 \| 分隔的任何选项。	试一试

元字符（Metacharacter）是拥有特殊含义的字符：

元字符	描述
\d	查找数字。	试一试
\s	查找空白字符。	试一试
\b	匹配单词边界。	试一试
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。	试一试

Quantifiers 定义量词：

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

如何通过正则表达式来验证输入？

test	检索字符串中指定的值。返回 true 或 false。

进行正则表达式的验证输入。

掌握常见的正则表达式

一、校验数字的表达式

1. 数字：^[0-9]*$

2. n位的数字：^\d{n}$

3. 至少n位的数字：^\d{n,}$

4. m-n位的数字：^\d{m,n}$

5. 零和非零开头的数字：^(0|[1-9][0-9]*)$

6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$

7. 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$

8. 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$

9. 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$

10. 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$

11. 非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$

12. 非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$

13. 非负整数：^\d+$ 或 ^[1-9]\d*|0$

14. 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$

15. 非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$

16. 非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$

17. 正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

18. 负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

19. 浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

二、校验字符的表达式

1. 汉字：^[\u4e00-\u9fa5]{0,}$

2. 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$

3. 长度为3-20的所有字符：^.{3,20}$

4. 由26个英文字母组成的字符串：^[A-Za-z]+$

5. 由26个大写英文字母组成的字符串：^[A-Z]+$

6. 由26个小写英文字母组成的字符串：^[a-z]+$

7. 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$

8. 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$

9. 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$

10. 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$

11. 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+ 12 禁止输入含有~的字符：[^~\x22]+

其它：

.*匹配除 \n 以外的任何字符。

/[\u4E00-\u9FA5]/ 汉字

/[\uFF00-\uFFFF]/ 全角符号

/[\u0000-\u00FF]/ 半角符号

三、特殊需求表达式

1. Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$

2. 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?

3. InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$

4. 手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$

5. 电话号码("XXX-XXXXXXX"、"XXXX-XXXXXXXX"、"XXX-XXXXXXX"、"XXX-XXXXXXXX"、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$

6. 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}

7. 身份证号(15位、18位数字)：^\d{15}|\d{18}$

8. 短身份证号码(数字、字母x结尾)：^([0-9]){7,18}(x|X)?$ 或 ^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$

9. 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$

10. 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$

11. 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$

12. 日期格式：^\d{4}-\d{1,2}-\d{1,2}

13. 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$

14. 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$

15. 钱的输入格式：

16. 1.有四种钱的表示形式我们可以接受:"10000.00" 和 "10,000.00", 和没有 "分" 的 "10000" 和 "10,000"：^[1-9][0-9]*$

17. 2.这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$

18. 3.一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$

19. 4.这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$

20. 5.必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 "10" 和 "10.2" 是通过的：^[0-9]+(.[0-9]{2})?$

21. 6.这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$

22. 7.这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$

23 8.1到3个数字,后面跟着任意个逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$

24. 备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里

25. xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$

26. 中文字符的正则表达式：[\u4e00-\u9fa5]

27. 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))

28. 空白行的正则表达式：\n\s*\r (可以用来删除空白行)

29. HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)

30. 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)

31. 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)

32. 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)

33. IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)

34. IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))

35. IP-v4地址：\\b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\\b (提取IP地址时有用)
36. 校验IP-v6地址:(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))
37. 子网掩码：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))
38. 校验日期:^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$(“yyyy-mm-dd“ 格式的日期校验，已考虑平闰年。)
39. 抽取注释：
40. 查找CSS属性:^\\s*[a-zA-Z\\-]+\\s*[:]{1}\\s[a-zA-Z0-9\\s.#]+[;]{1}
41. 提取页面超链接:(<a\\s*(?!.*\\brel=)[^>]*)(href="https?:\\/\\/)((?!(?:(?:www\\.)?'.implode('|(?:www\\.)?', $follow_list).'))[^" rel="external nofollow" ]+)"((?!.*\\brel=)[^>]*)(?:[^>]*)>
42. 提取网页图片:\\< *[img][^\\\\>]*[src] *= *[\\"\\']{0,1}([^\\"\\'\\ >]*)
43. 提取网页颜色代码:^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$
44. 文件扩展名效验:^([a-zA-Z]\\:|\\\\)\\\$[^\\\\]+\\\$*[^\\/:*?"<>|]+\\.txt(l)?$
45. 判断IE版本：^.*MSIE [5-8](?:\\.[0-9]+)?(?!.*Trident\\/[5-9]\\.0).*$

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>账号登录</title>
		<script>
			var phonezhengze=/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
			var passzhengze=/^[a-zA-Z]\w{5,17}$/;
			function phoneBlur(){
				var phone=document.getElementById("phonenumber").value;
				var flag=phonezhengze.test(phone);
				if(!flag){
					document.getElementById("phoneerror").innerHTML="<font color='crimson'>号码有误请重新输入</font>";
				}
			}
			function phonefocus(){
				document.getElementById("phonenumber").value="";
				document.getElementById("phoneerror").innerHTML="";
			}
			function passBlur(){
				var pass=document.getElementById("mypassword").value;
				var flag=passzhengze.test(pass);
				if(!flag){
					document.getElementById("passworderror").innerHTML="<font color='brown'>密码有误请重新输入</font>";
				}
			}
			function passfocus(){
				document.getElementById("mypassword").vakue="";
				document.getElementById("passworderror").vakue="";
			}
		</script>
	</head>
	<body>
		<input id="phonenumber" type="text" value="请输入手机号码" onblur="phoneBlur()" onfocus="phonefocus()"/><span id="phoneerror"></span><br>
		<input id="mypassword" type="password" onblur="passBlur()" onfocus="passfocus()"/><span id="passworderror"></span><br>
		<input type="button" value="登陆">;
	</body>
</html>