表示层JavaScript【JavaEE】

最新推荐文章于 2023-02-04 11:41:37 发布

二喵君

最新推荐文章于 2023-02-04 11:41:37 发布

阅读量328

点赞数 1

分类专栏： JavaEE笔记

本文链接：https://blog.csdn.net/sodacoco/article/details/102726866

版权

JavaEE笔记专栏收录该内容

6 篇文章 1 订阅

订阅专栏

JavaScript是一种脚本语言，可以在浏览器中直接运行；

JavaScript代码可以直接嵌套在HTML网页中，响应事件，执行事件处理函数。

一、基本语法

1》数据类型：int、float、string、boolean、null空类型；

2》变量：使用命令var声明变量，格式：var 变量名 [ =值 ]；

3》运算符：算术运算符、关系运算符、逻辑运算符、字符串运算符、位操作运算符、赋值运算符和条件运算符等运算符

4》控制语句：分支语句（if、switch），循环语句（while 、do-while、for）；

5》函数的定义和调用：

//函数声明格式：

function functionName([parameter1, parameter2,…]){
   //有关的处理语句;
}

二、事件

在浏览器中网页与客户的交互都是通过“事件”引发的，当一个事件发生时，执行相应的JavaSript脚本或指定的函数。

1》JavaScript的事件

JavaScript事件、事件处理函数及何时触发事件处理函数关系

事件	事件处理函数名	何时触发
change	onChange	当表单元素获取焦点，且内容值发生改变时触发
click	onClick	单击鼠标左键时触发
focus	onFocus	任何元素或窗口本身获得焦点时触发
keydown	onKeydown	键盘键被按下时触发，如果一直按着某键，则会不断触发
select	onSelect	选中文本时触发
submit	onSubmit	单击提交按钮时，在<form>上触发

2》在HTML中引用（指定）事件处理函数（函数的调用）

在HTML中指定事件处理程序，需要在HTML标记中添加相应的事件处理程序的属性，并在其中指定作为属性值的代码或是函数名称。

使用格式：<标签各有关属性及其属性值 on事件名称="函数名称(参数)">

<!-- 通过input输入标签，引发单击事件，该事件的处理函数名是onClick()，
要完成的功能是通过函数test()实现的，而函数test()的功能是显示一个提示窗口
（由windows的alert方法完成），并提示“事件引发一操作，并成功执行了这个操作！”。 -->
<html>
  <head>
    <meta charset="UTF-8">
    <title>单击鼠标事件示例</title>
    <head> 
      <script language="javascript">
          function test(){
             window.alert("事件引发一操作，并成功执行了这个操作！");
          }
      </script> 
    </head>
    <body>
      <form action="">
          <input type="button" value="警告对话框" onclick="test()"><br/>
      </form> 
  </body>
</html>

三、对象

JavaScript中设有浏览器的文档对象：window 、navigator、screen、history、location、document，利用这些对象，实现对网页信息的操作和处理加工。

1》window对象

方法	描述
alert()	弹出一个警告对话框
confirm()	显示一个确认对话框，单击“确认”按钮时返回true，否则返回false
prompt()	弹出一个提示对话框，并要求输入一个简单的字符串

2》location对象

location对象实现页面的自动跳转。

使用格式： window.location.href="网页路径";

3》document对象

每个HTML文档被加载后都会在内存中创建一个document对象，该对象存放整个网页HTML内容，从中可获取页面表单的各种信息，并对这些信息进行操作加工处理。

//假设有如下的表单：
<form action=""  name= "form1" >
       <input type="text" name= "t1"  value="" >
</form> 

//获取表单域对象：
var fObj=document.form1.t1;    
//form1为表单的名字，t1为某表单域的name值

//获取表单域的值（其中，fObj是表单域对象名。）：
var v=fObj.value;

三、使用样例：

/**
输入表单的验证就是对表单中输入的数据进行检验，
如果表单中填入的数据不符合要求，则禁止提交，并给用户适当的提示信息，以便用户重新输入。
当所有输入的数据符合所要求后，才允许提交，
并进入表单标签的action属性所指定的处理程序，即：<form action="提交后，进入的处理页面">。

（1）注册页面，需要验证的表单输入域和要求：
    用户名：用户名是否为空，是否符合规定的格式
            （用户名由字母开头，后跟字母、数字或下划线！）。
    密码：密码长度是否超过6，两次密码输入是否一致。
    邮箱地址：邮箱地址必须符合邮箱格式。

（2）必须注意提交表单并实现输入验证的方式
    使用“button类型”按钮提交，“提交”时先执行“响应函数”。提交方式为：
  <input type="button"  value="提交"  onClick="响应函数">
另外，在验证函数中，当都满足格式后，采用如下格式，实现提交：document.forms[0].submit();

**/

//JS文件
function validate(){
    var name=document.forms[0].userName.value;
    var pwd=document.forms[0].userPwd.value;
    var pwd1=document.forms[0].userPwd1.value;
    var email=document.forms[0].userEmail.value;
    var accept=document.forms[0].accept.checked;
    var regl=/[a-zA-Z]\w*/;
    var reg2= /\w+([-+.']\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*/;
    if(name.length<=0) alert("用户名不能为空！");
    else if(!regl.test(name)) alert("用户名格式不正确！");
    else if(pwd.length<6) alert("密码长度必须大于等于6！");
    else if(pwd!=pwd1) alert("两次密码不一致！"); 
    else if(!reg2.test(email)) alert("邮件格式不正确！"); 
    else if(accept==false) alert("您需要仔细阅读并同意接受用户使用协议！");
    else document.forms[0].submit(); 
} 

//html文件

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">
<title>具有输入验证的注册页面</title>

<script language="javascript" src=" ch02_4.js"></script>

<link href="ch02_4.css" type="text/css" rel="stylesheet">

</head>
<body>
   <form action="">
     <table align="center">
	<tr>
	   <td colspan="3" align="center" height="40" id="abc">填写注册信息</td>
	</tr>
	<tr>
	  <td align="right" id="t">用户名:*</td>
	  <td><input type="text" name="userName" /></td>
	  <td id="i">用户名由字母开头，后跟字母、数字或下划线！</td>
	</tr>
	<tr>
	   <td align="right" id="t">密码:*</td>
	   <td><input type="password" name="userPwd" /></td>
	   <td id="i">设置登录密码，至少6位！</td>
	</tr>
	<tr>
	  <td align="right" id="t">确认密码:*</td>
	  <td><input type="password" name="userPwd1" /></td>
	  <td id="i">请再输入一次你的密码！</td>
	</tr>
	<tr>
	  <td align="right" id="t">性别:*</td>
	  <td><input type="radio" name="userSex" value="男" checked />男 <input
					type="radio" name="userSex" value="女" />女</td>
	  <td id="i">请选择你的性别！</td>
	</tr>
    
    <tr>
	  <td align="right" id="t">邮箱地址:*</td>
	  <td><input type="text" name="userEmail" /></td>
	  <td id="i">请填写您的常用邮箱，可以用此邮箱找回密码！</td>
	</tr>
	<tr>
	  <td align="right" valign="top" id="t">基本情况:*</td>
	  <td colspan="2"><textarea name="userBasicInfo" rows="5"
						cols="50"></textarea></td>
	</tr>
	
	<tr>
	  <td colspan="3" align="center" height="15"><input
					type="checkbox" name="accept" value="yes" /> 我已经仔细阅读并同意接受用户使用协议</td>
	</tr>
	
	<tr>
	  <td colspan="3" align="center" height="40">
		<input type="Button" value="确认" onClick="validate()"/>	
					&nbsp; 
		<input type="reset" value="取消" /></td>
	</tr>
   </table>
  </form>
</body>
</html>

二喵君

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
表示层JavaScript【JavaEE】

JavaScript是一种脚本语言，可以在浏览器中直接运行；JavaScript代码可以直接嵌套在HTML网页中，响应事件，执行事件处理函数。一、基本语法1》数据类型：int、float、string、boolean、null空类型；2》变量：使用命令var声明变量，格式：var 变量名 [ =值 ]；3》运算符：算术运算符、关系运算符、逻辑运算符、字符串运算符、位操作...
复制链接

扫一扫