Javascript技术

最新推荐文章于 2024-07-11 00:03:32 发布

江湖侠客

最新推荐文章于 2024-07-11 00:03:32 发布

阅读量311

点赞数

分类专栏： Java框架技术

本文链接：https://blog.csdn.net/weixin_39868387/article/details/103026758

版权

Java框架技术专栏收录该内容

44 篇文章 4 订阅

订阅专栏

工程创建步骤

在这里插入图片描述

创建创建出来的目录如下：

使用JavaScript创建第一道Hello JavaScript
步骤：
首先，在WebContent文件创建index.jsp文件，并做编写代码

index.jsp

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- JavaScript代码需要写下script标签中 -->
<script type="text/javascript">
	//当整个文档都加载完成之后再执行函数中的内容
	window.onload = function(){
		//1.获取按钮对象
		var btnEle = document.getElementById("btnId");
		//2.给按钮对象绑定单击事件
		btnEle.onclick = function(){
			//3.弹出提示框
			alert("Hello JavaScript!");
		};
	};
</script>
</head>
<body>
	<button id="btnId">Say Hello</button>
</body>
</html>

在这里插入图片描述
启动运行服务器，效果图：
触发事件

编写弹出提示框，第一道Hello jQuery
步骤：
首先，在WebContent文件目录下创建script文件夹，并在script文件夹下引入jquery-1.7.2.js文件
](https://img-blog.csdnimg.cn/20191112131824942.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTg2ODM4Nw==,size_16,color_FFFFFF,t_70)
在这里插入图片描述

如图所示：

接着在WebContent文件下，创建jQuery.html页面

jQuery.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入jQuery的js文件库 -->
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	//相当于window.onload = function(){};
	$(function(){
		//获取按钮对象并给它绑定单击事件
		$("#btnId").click(function(){
			//弹出提示框
			alert("Hello jQuery!");
		});
	});
</script>
</head>
<body>
	<button id="btnId">Say Hello</button>
</body>
</html>

在这里插入图片描述

启动运行服务器，效果图：
在这里插入图片描述

正则表达式
步骤：
首先，在WebContent目录下创建reg.html页面，如图所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入jQuery的js文件库 -->
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
	$(function(){
		//给提交按钮绑定单击事件
		$("#sub").click(function(){
			//获取用户输入的用户名
			var username = $("#username").val();
			//设置一个验证用户名是否符合规则的正则表达式
			var userReg = /^[a-zA-Z0-9_-]{3,6}$/;
			//验证用户名是否符合规则
			var flag = userReg.test(username);
			if(!flag){
				alert("请输入3-6位的字母、数字、下划线或减号的用户名！");
				return false;
			}
		});
		
	});
</script>
</head>
<body>
	<form action="index.html" method="post">
		用户名：<input type="text" name="username" id="username"><br>
		<input type="submit" id="sub">
	</form>
</body>
</html>