JavaWeb：（学习笔记）五、JavaScript

已于 2022-02-28 13:29:09 修改
阅读量437 收藏
点赞数 1
分类专栏： JavaWeb笔记 文章标签： javascript 前端 学习 java 其他
于 2022-02-28 13:26:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44125436/article/details/123180378
版权

JavaWeb：（学习笔记）五、JavaScript

第五章—JavaScript

一、JavaScript概述

1、JavaScript历史

​ JavaScript是由Netscape公司（美国网景公司）开发的一种脚本语言，结构简单，使用方便，对用户自身知识水平的要求并不高，易学易懂。

2、JavaScript功能

​ JavaScript 是用来控制网页行为的，它能使网页可交互；如改变页面内容、修改指定元素的属性值、对表单进行校验等。

3、JavaScript引入方式

1）内部脚本：将 JS代码定义在HTML页面中

​ 在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

2）外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中

<script src="../js/demo.js" type="text/javascript" ></script>

二、基础语法

1、书写语法

1）JavaScript是一种区分大小写的语言。

2）每行结尾可以没有分号，但是一样如果包含多条语句时，必须用分号隔开。

2、注释

1）单行注释：

//  单行注释内容

2）多行注释：

/* 多行注释内绒 */

3、输出语句

1）警告提示框

<script type="text/javascript">
	alert("提示内容");
</ script>

2）浏览器控制台输出

<script type="text/javascript">
    console.log("提示内容");
</ scri>

4、数据类型

​ ①数值型(number)： 其中包括整型数和浮点型数。

​ ②布尔型(boolean)： 即逻辑值，true或flase。

​ ③字符串型： 由单个或多个文本字符组成。字符串是用单引号或双号来说明的（使用单引号来输入包含引号的字符串。）

​ ④undefined类型

​ ⑤Object类型：js对象结构与java对象结构不同

5、变量

​ 使用 var 关键字声明变量，可以存放任意数据类型的数据，不需要声明数据类型。格式如下：

var 变量名 = 数据值;

6、运算符

运算符说明
++，–一元运算符
+，-，*，/，%算术运算符
=，+=，-=…赋值运算符
>，<，>=，<=，!=，==，===…关系运算符
&&，||, !逻辑运算符
条件表达式 ? true_value : false_value三元运算符

1）说明

​ JavaScript的运算符规则基本与jJava运算符规则一致，但部分存在一些差异。

2）== 与 ===运算符

​ ① ==

​ 判断类型是否一样，如果不一样，则进行类型转换，再去比较其值。

​ ②===

​ 判断类型是否一样，如果不一样，直接返回false，再去比较其值

3）+ 运算符

​ +可以进行“加法”与“连接”运算，如果2个运算符中的一个是字符串，javascript就将另一个转换成字符串，然后将2个运算数连接起来。

4）运算符代码举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js基本语法</title>
		
		<script type="text/javascript">
			/* 变量的声明 */

			var a = 10;	//声明
			var b = "abc";	//声明
			b = true;	//修改
				
			/* 数据类型 */
			var c;
			// alert(c);	// 弹窗打印：undefined
			var date = new Date();	//时间对象
			// alert(date);
			
			/* 运算符 */
			console.log(10);	//调试，不会打印在网页中，而是在控制台
			console.log(10+5);	//15
			console.log(10+"5");	//"105"，连接，不会隐式转换
			console.log(10-5);	//5
			console.log(10-"5");	//5，数值-字符串数字(隐式的转换)=数字
			console.log(10*"5");	//50
			console.log(10-"a");	//NaN，不满足转换结果，返回NaN:Not a Number
			
			// =：赋值，==：比较（值），===：全等（值和类型）
			console.log(10>5);	//true
			console.log(10>"5");	//true
			console.log(5=="5");	//true

		</script>
		
	</head>
	<body>
	</body>
</html>

7、控制语句

1）选择结构

​ ①单一选择结构（if）

​ ②二路选择结构（if/else）

​ ③多路选择结构（switch）

2）循环结构

​ ①由计数器控制的循环（for）

​ ②在循环的开头测试表达式（while）

​ ③在循环的末尾测试表达式（do/while）

​ ④break continue

3）说明：使用方法基本与Java一致。

8、函数

1）定义格式

​ JavaScript的函数，其参数不需要定义数据类型，直接书写形参即可。

​ ①方式1

function 函数名(参数列表){
    要执行的代码
}

​ ②方式2

var 函数名 = function (参数列表){
    要执行的代码
}

2）函数调用

函数名(实参列表);

3）全局函数

​ 全局函数：js函数库提供的全局函数，函数库存在于浏览器中，可以直接使用

​ ① parseInt(arg) 把括号内的内容转换成整数之后的值。如果括号内是字符串， 则字符串开头的数字部分被转换成整数，如果以字母开头，则返回 “NaN”。

​ ②parseFloat(arg) 把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”。

​ ③typeof (arg)返回arg值的数据类型。

​ ④eval(arg) 可运算某个字符串。

4）举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css函数</title>
		
		<script type="text/javascript">
            
           // 无参无返回函数
		   function demo1() {
			   console.log("hello function");
		   }
		   
            // 有参无返回函数
		   function demo2(a, b, c) {
			   console.log(a+" "+b+" "+c);
		   }
		   
            // 有参有返回函数
		   function demo3(a, b) {
		   		return a+b;
		   }
			
            // 函数调用
		   demo1();	//hello function
		   demo2(1,true,"abc");//1 true abc
		   console.log(demo3(4,5));	//9
		   
		   // 全局函数
           // parseInt(arg) 
		   console.log( parseInt("10") );	//10
		   console.log( parseInt("10.5") );	//10
		   console.log( parseInt("11abc") );	//11
		   console.log( parseInt("12abc3") );	//12
		   console.log( parseInt("abc123") );	//Nan
		   
           // parseFloat(arg) 
		   console.log( parseFloat("10") );	//10
		   console.log( parseFloat("10.5abc") );	//10.5
		   console.log( parseFloat("10.5abc11.5") );	//10.5
		   console.log( parseFloat("abc11.5") );	//NaN
		   
           // typeof (arg)
		   var a = 1;
		   var b = 1.1;
		   var c = 'c';
		   var d = "d";
		   var e = true;
		   var date = new Date();
		   console.log( typeof(a) );	//number
		   console.log( typeof(b) );	//number
		   console.log( typeof(c) );	//string
		   console.log( typeof(d) );	//string
		   console.log( typeof(e) );	//boolean
		   console.log( typeof(date) );	//object
		   
           // eval(arg) 
		   console.log("4+5");	//4+5
		   console.log( eval("4+5") );	//9
		   
		</script>
		
	</head>
	<body>
	</body>
</html>

三、内置对象（常用基本对象）

1、说明

​ JavaScript 提供了很多对象供使用者来使用。这些对象总共分为：基本对象、BOM 对象、DOM对象。

2、基本对象：String

1）属性、

​ length ：返回该字符串的长度.

2）方法
①charAt(n)：返回该字符串位于第n位的单个字符.

​ ②indexOf(char)：返回指定char首次出现的位置.

​ ③lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找.

​ ④substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位 置到end位置的前一位置的一段.

​ ⑤substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位 置开始，长度为length的一段.

​ ⑥split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔 符字符>决定了分离的地方，它本身不会包含在所返回的数组中。

3）举例

var s = "abcabcdef";
console.log( s.length );	//9
console.log( s.charAt(1) );	//b
console.log( s.indexOf("b") );	//1
console.log( s.indexOf("b") );	//1
console.log( s.substring(1,3) );	//bc
console.log( s.substr(1,3) );	//bca
console.log( s.split("b") );	//['a','ca','cdef']

3、基本对象：Array

1）数组定义方法

​ ①var <数组名> = new Array(); 这样就定义了一个空数组。

​ 添加数组元素： <数组名>[下标] = 值;

​ ②在定义数组的时候直接初始化数据：

​ var <数组名> = new Array(<元素1>, <元素2>, <元素3>…);

​ var <数组名> = [<元素1>, <元素2>, <元素3>…];

2）属性

​ length ：数组的长度，即数组里有多少个元素。

3）方法

​ ①concat() 用于连接两个或多个数组

​ ②arrayObject.concat(arrayX,arrayX,…,arrayX)

​ ③pop() 用于删除并返回数组的最后一个元素。

​ ④push() 可向数组的末尾添加一个或多个元素，并返回新的长度。

​ ⑤join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔 符>置于元素与元素之间。

​ ⑥reverse() 使数组中的元素顺序反过来。如果对数组[1, 2, 3]使用这个方法，它将使数 组变成：[3, 2, 1]。

​ ⑦sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺 序排列。

4）举例

var array1 = new Array();
var array2 = new Array(2.1, 2.2, 2.3);
var array3 = [3.1, 3.2, 3.2];
			
console.log( array1 );	//[]
console.log( array2 );	//[2.1, 2.2, 2.3]
console.log( array3 );	//[3.1, 3.2, 3.2]
			
array1[0] = 1.1;
array1[1] = "1.2";
array1[2] = true;
console.log( array1 );	//[1.1, '2.1', true]
			
var concatArray = array1.concat(array2);
console.log( array1 );	//[1.1, '2.1', true]
console.log( array2 );	//[2.1, 2.2, 2.3]
console.log( concatArray );	//[1.1, '2.1', true, 2.1, 2.2, 2.3]
			
console.log( array1.pop() );	//true
console.log( array1 );	//[1.1, '1.2']
			
console.log( array1.push(false) );	//3
console.log( array1 );	//[1.1, '1.2', false]
			
console.log( array1.join("*") );	//1.1*1.2*false（返回为为字符串）
			
console.log( array2.reverse() );	//[2.3, 2.2, 2.1]
console.log( array2.sort() );	//[2.1, 2.2, 2.3]

/*  
	sort()方法默认安字符编码排序
*/
var arr1 = ['a', 'c', 'f', 'b', 'd', 'e'];
var arr2 = [5, 8, 4, 22];
			
console.log( arr1.sort() );	//['a', 'b', 'c', 'd', 'e', 'f']
console.log( arr2.sort() );	//[22, 4, 5, 8]
console.log( arr2.sort( mySort ) );	//[4, 5, 8, 22]
			
function mySort(a, b){
	return a-b;
}

4、基本对象：Date

1）方法

​ ①获取日期new Date() 返回当日的日期和时间

​ ②getFullYear() 返回四位数字年份

​ ③getDate() 返回一个月中的某一天 (1 ~ 31)

​ ④getMonth() 返回月份 (0 ~ 11)

​ ⑤getDay() 返回一周中的某一天 (0 ~ 6)

​ ⑥getHours() 返回 Date 对象的小时 (0 ~ 23)

​ ⑦getMinutes() 返回 Date 对象的分钟 (0 ~ 59)

​ ⑧getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

2）举例

var date = new Date();
			
console.log( date.getFullYear() );	//2022
console.log( date.getDate() );	//16
console.log( date.getMonth() );	//1
console.log( date.getDay() );	//3
console.log( date.getHours() );	//14
console.log( date.getMinutes() );	//41
console.log( date.getSeconds() );	//56

5、基本对象：Math

1）属性

​ PI 返回π（3.1415926535…)。

2）方法

​ ①Math.abs(x) 绝对值计算；

​ ②Math.pow(x,y) 数的幂；x的y次幂

​ ③Math.sqrt(x) 计算平方根；

​ ④Math.ceil(x) 对一个数进行上舍入

​ ⑤Math.floor(x) 对一个数进行下舍入。

​ ⑥Math.round(x) 把一个数四舍五入为最接近的整数

​ ⑦Math.random() 返回 0 ~ 1 之间的随机数

​ ⑧Math.max(x,y) 返回 x 和 y 中的最大值

​ ⑨Math.min(x,y) 返回 x 和 y 中的最小值

3）举例

console.log( Math.abs( -2 ) );	//2
console.log( Math.pow( 2, 3 ) );	//8
console.log( Math.sqrt( 9 ) );	//3
console.log( Math.ceil( 2.5 ) );	//3
console.log( Math.floor( 2.5 ) );	//2
console.log( Math.round( 2.5 ) );	//3
console.log( Math.random() );	//0.5363032718110621
console.log( Math.max( 1, 2 ) );	//2
console.log( Math.min( 1, 2 ) );	//1

四、事件

1、一些常用事件

事件说明
onclick()鼠标点击时
ondblclick鼠标双击时
onblur()标签失去焦点
onfocus()标签获得焦点
onmouseover()鼠标被移到某标签之上
onmouseout鼠标从某标签移开
onload()在网页加载完毕后触发相应的的事件处理程序
onchange()指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序
Onkeydown键盘按下
Onkeyup键盘抬起

2、Event对象

1）说明

​ Event 对象代表事件的状态，比如键盘按键的键位、鼠标的位置。

2）常用事件状态

事件状态说明
type事件类型
Button被点击的鼠标键位
altKey按下altKey返回true
ctrlKey按下ctrlKey返回true
shiftKey按下shiftKey返回true
keyCode返回被按下的键位编码
offsetX当前标签内的鼠标X轴
offsetY当前标签内的鼠标Y轴
clientX鼠标在浏览器内部X轴
clientY鼠标在浏览器内部Y轴
screenX鼠标在显示器内的X轴
screenY鼠标在显示器内的Y轴

3、举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
		
		<script type="text/javascript">
			
			function demo() {
				console.log("触发了函数");
			}
			
			function demo2(e){
				console.log(e);	//事件对象
				console.log(e.keyCode);	//事件对象
				console.log(e.ctrlKey);	//事件对象
				console.log(e.shiftKey);	//事件对象
				console.log(e.altKey);	//事件对象
			}
			
			function demo3(e){
				console.log(e.offsetX);	//事件对象鼠标点击坐标，当前标签内坐标
				console.log(e.offsetY);	
				console.log(e.clientX);	//网页坐标
				console.log(e.clientY);	
				console.log(e.screenX);	
				console.log(e.screenY);	//显示器内坐标
				
			}

			
		</script>
		
	</head>
	<body onload="demo()" >
		
		<input type="button" value="单击事件" onclick="demo()" />
		
		<div onclick="">单击事件</div>
		
		<input type="button" value="双击事件" ondblclick="demo()" />
		
		<hr />
		
		失去焦点<input type="text" onblur="demo()" />
		获得焦点<input type="text" onfocus="demo()" />
		
		<hr />
		
		<input type="button" value="移入事件" onmouseover="demo()" />
		<input type="button" value="移出事件" onmouseout="demo()" />
		
		<hr />
		
		失去焦点且内容改变<input type="text" onchange="demo()" />
		
		<hr />
		
		键盘按下触发<input type="text" onkeydown="demo()" />
		键盘抬起出发<input type="text" onkeyup="demo()" />
		
		<hr />
		
		获取事件对象<input type="text" onkeydown="demo2(event)" />
		
		<hr />
		
		<div onmousedown="demo3(event)" style="width: 100px;height: 100px;background-color: yellow;" >
			
		</div>

	</body>
</html>

五、DOM对象

1、BOM说明

​ BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。

​ BOM 中包含了：Window：浏览器窗口对象，Navigator：浏览器对象，Screen：屏幕对象，History：历史记录对象，Location：地址栏对象

2、BOM对象：Window

1）说明

​ window 对象是 JavaScript 对浏览器的窗口进行封装的对象。

2）获取Window对象

​ ①显式调用

window.alert("这是一个演示")

​ ②隐式调用

alert("这是一个演示")

3）window对象属性

​ window对象可以获取其他BOM组成的对象属性，即调用如：History，Location，Navigator，Screen等对象。

4）window对象常用函数

函数说明
alert()显示带有一段消息和一个确认按钮的警告框
confirm()显示带有一段消息及确认和取消按钮的对话框
setInterval()按照指定的周期(毫秒)来调用或计算表达式
setTimeout()在指定的毫秒数后调用函数或计算表达式

​ confirm()，点击确定按钮，返回true，点击取消按钮，返回false

​ setTimeout(function,毫秒值): 在一定的时间间隔后执行一个function，只执行一次

​ setInterval(function,毫秒值)` :在一定的时间间隔后执行一个function，循环执行

5）举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浏览器对象</title>
		
		<script type="text/javascript">
			
			function demo(){
				alert("你好，计时！");
			}
			//立即执行
			demo();
			//设置一个触发器，在触发后，延时5000毫秒执行
			var t1 = setTimeout("demo()",5000);
			
			function cancel1(){
				//取消执行
				clearTimeout(t1);
				alert("取消延时执行！");
			}
			
			//设置一个定时器，在触发后，间隔3秒调用指定函数，循环执行
			var t2 = setInterval("demo()",3000);
			
			function cancel2(){
				//取消执行
				clearInterval(t2);
				alert("取消循环执行！");
			}
			
		</script>
		
	</head>
	<body >
		
		<input type="button" value="取消定时" onclick="cance1l()" />
		<input type="button" value="取消循环" onclick="cancel2()" />
		
	</body>
</html>

3、BOM对象：History

1）说明

​ History 对象是 JavaScript 对历史记录进行封装的对象。

2）对象获取

​ 使用 window.history获取，其中window. 可以省略

3）对象函数

函数说明
back()加载history列表中的上一个URL
forward()加载history列表中的下一个URL

4、BOM对象：Location

1）说明

​ location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

2）对象获取

​ 使用 window.location获取，其中window. 可以省略

3）对象函数

函数说明
assign(url)加载一个新的文档
reload()重新加载当前文档
replace(url)可用一个新文档取代当前文档。

4）举例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浏览器对象</title>
		
		<script type="text/javascript">
			
			function testAssign(){
				//加载一个新页面到浏览器，保留了原来的页面（可退回）
				location.assign("newpage.html");
			}
			
			function testReplace(){
				//用新的页面替换原来的窗口页面（不可退回）
				location.replace("newpage.html");
			}
			
			function testReload(){
				//重新加载
				location.reload();
			}
        </script>
	</head>
	<body id="bid">
		
		<input type="button" value="assign" onclick="testAssign()" />
		<input type="button" value="replace" onclick="testReplace()" />
		<input type="button" value="reload" onclick="testReload()" />

		
	</body>
</html>

六、DOM对象

1、DOM说明

​ DOM是Document Object Model文档对象（网页中的标签）模型的

缩写。通过html dom，可用javaScript操作html文档的所有标签。封装的对象有

对象说明
Document整个文档对象
Element元素对象
Attribute属性对象
Text文本对象
Comment注释对象

2、作用

​ 改变 HTML 元素的内容，改变 HTML 元素的样式（CSS），对 HTML DOM 事件作出反应，添加和删除 HTML 元素

3、获取Element对象

​ HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

​ Document 对象中提供了以下获取 Element 元素对象的函数

​ ①getElementById()：根据id属性值获取，返回单个Element对象

​ ②getElementsByTagName()：根据标签名称获取，返回Element对象数组

​ ③getElementsByName()：根据name属性值获取，返回Element对象数组

​ ④getElementsByClassName()：根据class属性值获取，返回Element对象数组

4、举例

1）方法测试

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML DOM</title>
		
		<script type="text/javascript">

			*/
			function test1() {
				var tobj1 = document.getElementById("tid1");
				console.log(tobj1);
				console.log(tobj1.value);
				console.log(tobj1.type);
				console.log(tobj1.id);
				
				var tobj2 = document.getElementById("tid2");
				tobj2.value = tobj1.value;
			}
			
			function changeBgcolor(color) {
				var bobj = document.getElementById("bid");
				bobj.bgColor = color;
			}
			
			/*  
				HTML DOM - 改变 HTML 
			*/
			
			function test2() {
				var dobj1 = document.getElementById("div1");
				var dobj2 = document.getElementById("div2");
				console.log(dobj1.innerHTML);
				dobj2.innerHTML = dobj1.innerHTML;
			}
			
			/*  
				HTML DOM - 改变 CSS 
			*/
			
			function test3() {
				var dobj3 = document.getElementById("div3");
				var dobj4 = document.getElementById("div4");
				dobj3.style.width = "200px";
				dobj3.style.height = "200px";
				dobj3.style.backgroundColor = "red";
			}
			
			function test4() {
				var dobjs1 = document.getElementsByTagName("input");
				var dobjs2 = document.getElementsByClassName("ck");
				var dobjs3 = document.getElementsByClassName("ckname");
				// 循环遍历
				for(var i=0; i<dobjs2.length ;i++) {
					dobjs2[i].checked = "checked";
					// dobjs2[i].checked = true;
				}
			}
			
			
		</script>
		
	</head>
	<body id="bid">
		
		<input type="text" id="tid1" />
		<input type="text" id="tid2" />
		<input type="button" value="测试按钮" onclick="test1()" />
		
		<hr />
		
		<input type="button" value="红色" onclick="changeBgcolor('red')" />
		<input type="button" value="绿色" onclick="changeBgcolor('green')" />
		<input type="button" value="蓝色" onclick="changeBgcolor('blue')" />
		<input type="button" value="黄色" onclick="changeBgcolor('yellow')" />
		
		<hr />
		
		<div id="div1">第一个div</div>
		<div id="div2">第二个div</div>
		<input type="button" value="测试按钮" onclick="test2()" />
		
		<hr />
		
		<div id="div3">第三个div</div>
		<div id="div4">第四个div</div>
		<input type="button" value="测试按钮" onclick="test3()" />
		
		<hr />
		
		<input type="checkbox" class="ck" name="ckname" />
		<input type="checkbox" class="ck" name="ckname" />
		<input type="checkbox" class="ck" name="ckname" />
		<input type="checkbox" class="ck" name="ckname" />
		<input type="checkbox" class="ck" />
		<input type="checkbox" class="ck" />
		<input type="checkbox" class="ck" />
		<input type="checkbox" class="ck" />
		<input type="checkbox" class="ck" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="button" value="全选" onclick="test4()" />
		
		<hr />
		
		
		
	</body>
</html>

2）表单验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单验证</title>
		
		<script type="text/javascript">
		
			function subform() {
				var accobj = document.getElementById("accountid");
				var account = accobj.value;
				if(account.length==0){
					document.getElementById("accountMsgID").innerHTML="账号不能为空!";
					document.getElementById("accountMsgID").style.color="red";
					return;
				}else{
					document.getElementById("accountMsgID").innerHTML="√";
					document.getElementById("accountMsgID").style.color="green";
				}
				if(account.length<6 || account.length>10){
					document.getElementById("accountMsgID").innerHTML="账号在6-10位之间!";
					document.getElementById("accountMsgID").style.color="red";
					return;
				}else{
					document.getElementById("accountMsgID").innerHTML="√";
					document.getElementById("accountMsgID").style.color="green";
				}
				
				var passobj = document.getElementById("passwordID");
				var password = passobj.value;
				if(password.length<6 || password.length>10){
					document.getElementById("passwordMsgID").innerHTML="密码在6-10位之间!";
					document.getElementById("passwordMsgID").style.color="red";
					return;
				}else{
					document.getElementById("passwordMsgID").innerHTML="√";
					document.getElementById("passwordMsgID").style.color="green";
				}
				
				// document.getElementById("formID").submit();
			}
			
			function zhengze() {
				var account =document.getElementById("accountid1").value;
				//定义一个正则表达式
				// var reg = new RegExp("a");
				// var reg =/^\d$/;
				// var reg =/^1[3578]\d{9}$/;
				var res = reg.test(account);
				document.getElementById("accountMsgID1").innerHTML="√";
				console.log(res);
				
				// document.getElementById("formID").submit();
			}
			
		</script>
		
	</head>
	<body>
		
		<!-- 
			对表单数据验证，减少一些无效数据提交到服务器端 
			在提交表单数据之前，对表单数据进行验证
			满足我们的输入条件，就进行提交表单，否则不提交
		-->
		<form action="sever.html" method="get" id="formID">
			账号<input type="text" id="accountid">	
				<span id="accountMsgID"></span>	<br />
			密码<input type="password" id="passwordID" />	
				<span id="passwordMsgID"></span>	<br />
				<input type="button" value="保存" onclick="subform()" />
		</form>
		
		<hr />
		
		<form action="sever.html" method="get" id="formID1">
			账号<input type="text" id="accountid1">	
				<span id="accountMsgID1"></span>	<br />
				<input type="button" value="保存" onclick="zhengze()" />
		</form>
			
	</body>
</html>
ReNola
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
java解析javascript_Java解析JavaScript數據
weixin_34550555的博客
02-26 675
最近有一個小小的需求，就是在java中解析javascript腳本,JDK6就已經支持腳本語言了,針對JS有js引擎ScriptEngine。但是我在使用過程覺得用的不是很方便，比較別扭，經研究發現還有一個更強大的腳本引擎-mozilla提供的rhinoJava用ScriptEngine解析腳本javax.script，始於JDK1.6，不過現在只有sun實現的javascript的解析器，難道是...
java解析js_java解析JavaScript片段
weixin_42394054的博客
02-12 1749
前几天帮某个人抓取某电商网站商品属性的,得到页面后需要解析一个内的代码获得其中一个json对象的属性, 开始是想字符串截取呢,后来感觉不怎么好,就换成用java解析script了,感觉还行,其中有几个坑,在这里记录下,对于一段js代码,java在解析时,需要补齐其中的空间变量,比如 var window={};还有js中调用的函数,如果不关心的话,也需要按调用方式预先定义好,比如consloe.l...
Java解析JavaScript数据
热门推荐
Iteam项目组 Smith&Wesson(史密斯威森)
08-02 1万+
最近有一个小小的需求，就是在java中解析javascript脚本,JDK6就已经支持脚本语言了,针对JS有js引擎ScriptEngine。但是我在使用过程觉得用的不是很方便，比较别扭，经研究发现还有一个更强大的脚本引擎-mozilla提供的rhino Java用ScriptEngine解析脚本 　　javax.script，始于JDK1.6，不过现在只有sun实现的javascript的解
java对javascript语法分析
weixin_30851409的博客
01-30 202
http://code.google.com/p/jslint4java/ 下载jslint4java 的库 1.4版本以上使用jdk1.6 1.4版本以下使用的jdk1.5 我选择的jdk1.3 比较小只有870k左右 解压找到jslint4java-1.3.jar 文件 可是使用命令行来解析js文件 比如： java -jarjslint4java...
JavaWeb02-JavaScript学习笔记
08-22
JavaScript基础知识点 JavaScript是一种脚本语言...本笔记涵盖了JavaScript的基础知识点，包括变量、数据类型、流程控制语句、函数、数组、对象、JSON、BOM和Location等概念，为学习JavaScript提供了一个良好的基础。
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
JavaWeb入门学习笔记.chm
01-23
此文档为传智播客老师JavaWeb入门视频的笔记，其中包含视频中的讲解过程笔记记录以及课程中的案例源代码实现，笔记已转成CHM文档格式，方便阅读 1.此笔记为JavaWeb非常全面的教程，适合JavaWeb爱好者自学。循序渐进...
javaweb高级编程源码-javaweb:javaweb高级编程源码笔记
05-22
这个"javaweb-master"可能包含了上述技术的示例代码、注释和学习笔记，帮助开发者理解和掌握JavaWeb的高级编程技巧。通过研究这些源码，可以加深对JavaWeb原理的理解，提升实际项目开发能力。对于初学者来说，这是一...
javaweb笔记+狂神+知识总结
04-01
"狂神"可能是指一位知名的JavaWeb讲师或教程作者，他的笔记为学习者提供了深入理解和实践该技术的宝贵资源。下面将详细阐述JavaWeb的主要知识点。 1. **Servlet**：Servlet是Java Web应用程序的核心组件，它是一个...
效率非常快的java读取javascript，附带源码和js.jar
03-31
效率非常快的java读取javascript，附带源码和js.jar
java解析JavaScript片段
weixin_34362991的博客
05-19 257
为什么80%的码农都做不了架构师？>>> ...
Java识别JavaScript
victorzzzz的专栏
08-20 281
ScriptEngineManager mgr = new ScriptEngineManager(); ScriptEngine engine = mgr.getEngineByName("JavaScript"); engine.put("hello", "sayHi"); try { System.out.println("开始读取"); String ReadPath =...
java javascript解析_JavaScript解析Json(转)
weixin_31817039的博客
02-24 150
java代码privatevoiddoService(HttpServletRequest request, HttpServletResponse response)throwsIOException {String s3 = request.getParameter("car");try{JSONObjectjsonObj =newJSONObject(s3);System.out.print...
Javaweb之javascript的详细解析
最新发布
qq_69748833的博客
11-08 218
第一种定义格式如下：function 函数名(参数1,参数2..){要执行的代码因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：形式参数不需要声明类型，并且JavaScript中不管什么类型都是let或者var去声明，加上也没有意义。返回值也不需要声明类型，直接return即可如下示例：接下来我们需要在VS Code中编写代码来演示但是上述只是定义函数，函数需要被调用才能执行！所以接下来我们需要调用函数。
java js 解析器_java 解析js脚本
weixin_39792049的博客
02-16 663
JDK6已经支持脚本语言了。写两个测试js的代码。import javax.script.Invocable;import javax.script.ScriptEngine;import javax.script.ScriptEngineManager;import javax.script.ScriptException;import org.junit.Test;public class J...
java解析js,使用Java解析javascript生成的内容
weixin_33600827的博客
02-12 151
http://support.xbox.com/en-us/contact-us uses javascript to create some lists. I want to be able to parse these lists for their text. So for the above page I want to return the following:Billing and S...
java web之javascript(js)解析
jinqizhe的博客
08-08 1034
java web javascript(js): javascript(js): js嵌入在html中,在浏览器中运行的脚本语言 js跟java没有任何关系,只是语法相似 是一种网页的编程技术,用来向html页面添加交互行为 由浏览器解释执行代码,不进行预编译 javascript特点: -可以用任何编译文本的工具编写js代码 -由浏览器内置的...
JavaWeb学习总结（三）JavaScript详解
long3359的博客
03-16 912
JavaWeb学习总结（三）JavaScript详解
java解析js_Java ScriptEngine 解析js
weixin_35867994的博客
02-12 811
1、脚本引擎① 通过脚本名称获取：ScriptEngine engine = new ScriptEngineManager().getEngineByName("JavaScript");pastingScriptEngineManagermanager=newScriptEngineManager();ScriptEngineengine=manager.getEngineByNa...
javaweb学习笔记
06-10
好的，我可以和你分享一下关于javaweb学习的笔记。 1. JavaWeb的概念 JavaWeb是指利用Java语言开发Web应用程序的一种技术。它包括了Java Servlet、Java Server Pages（JSP）、JavaBean、Enterprise JavaBeans（EJB...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值