首页 > 代码库 > JavaWeb前端: JavaScript 简介
JavaWeb前端: JavaScript 简介
JavaScript基本概念
- 浏览器根据HTML规范把HTML文档渲染成一棵DOM树,HTML标签对应一个个元素,HTML标签内的属性对应为元素的属性,HTML标签关联的文本对应为元素的文本.
- JS 可以根据HTML标签对应的（标签名，id, class） 查找到标签对应的元素，并且通过元素取出对应的属性值/文本值/样式，并对这些进行更改；达到动态交互的效果
- JS 还可以捕获UI界面上各个元素的事件状态(鼠标事件，键盘事件)，并通过在HTML标签中定义各种事件状态的处理方法来达到动态交互的效果。
- 前段的交互(字段的校验：邮箱格式/用户名格式/日期格式/是否为空，计时，UI展现的动态效果..)都应该由JS来实现，速度快并且不对后台服务器造成压力。
- JS是一种解释型脚本语言，被触发时才在浏览器中编译执行；除了变量不区分类型以外，语法和Java类似，有几乎相同的流程控制语法，变量操作符，异常处理。
- JS可以存在于Head，body当中，也可以直接从外部引用。
JS的具体语法可以查询W3C School，有非常多的实例参考。
JS查找元素(可以逐层定位，先找到父元素，再用父元素查找子元素)
- 通过 id 找到 HTML 元素：var x=document.getElementById("main")
- 通过标签名找到 HTML 元素：var y=x.getElementsByTagName("p")
- 通过类名找到 HTML 元素：var y=x.getElementsByClass("uname")
JS操作元素（修改文本内容/修改属性/修改样式/新生成元素/删除元素）
- 修改元素文本（innerHTML）：document.getElementById(id).innerHTML=new HTML
- 修改元素属性（修改图片显示）：document.getElementById("image").src="http://www.mamicode.com/landscape.jpg";
- 修改元素样式（比如错误高亮，元素显示）：document.getElementById("p2").style.color="blue"; document.getElementById(‘p1‘).style.visibility=‘hidden‘
- 鼠标事件：鼠标点击元素(onclick)，鼠标移入元素区域(onmouseover)，鼠标移出元素区域(onmouseout)
- 加载事件：网页加载时，图片加载时触发（onload, onunload）
- 变更事件(文本框有输入变更)：onchange()；
- 表单事件：表单提交时触发
- 除了捕获事件，还能生成/移除网页元素：
- var para=document.createElement("p");
- var node=document.createTextNode("这是新段落。");
- para.appendChild(node);
JS响应事件（JS核心功能，查找和更改元素都是为了响应事件）
JS能捕获页面上元素的如下事件：- 鼠标事件：鼠标点击元素(onclick)，鼠标移入元素区域(onmouseover)，鼠标移出元素区域(onmouseout)
- 加载事件：网页加载时，图片加载时触发（onload, onunload）
- 变更事件(文本框有输入变更)：onchange()；
- 表单事件：表单提交时触发
- 除了捕获事件，还能生成/移除网页元素：
- var para=document.createElement("p");
- var node=document.createTextNode("这是新段落。");
- para.appendChild(node);
JavaScript实例（登录校验）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <meta name="Author" content="刘江波"> <script type="text/javascript"> function login(){ var userName=document.getElementById("userName").value; var pwd=document.getElementById("pwd").value; var repwd=document.getElementById("repwd").value; var address=document.getElementById("address").value; var matchResult=true; if(userName==""||pwd==""||repwd==""||address==""){ alert("请确认是否有空缺项！"); matchResult=false; }else if(userName.length<6||userName.length>20){ alert("用户名长度应在6到20个字符之间！"); matchResult=false; }else if(userName==pwd||userName==repwd){ alert("密码或重复密码不能和用户名相同！"); matchResult=false; }else if(pwd.length<6||pwd.length>20||repwd.length<6||repwd.length>20){ alert("密码或重复密码长度应在6到20个字符之间！"); matchResult=false; }else if(pwd!=repwd){ alert("密码和重复密码不同，请重新输入！"); matchResult=false; }else if(userName.length<6||userName.length>20){ alert("用户名长度应在6到20个字符之间！"); matchResult=false; } if(matchResult==true){ var mailreg = /^\w+@\w+(\.\w+)+$/; if(!address.match(mailreg)){ alert("邮箱格式不正确"); matchResult=false; } } if(matchResult==true){ if(userName.charAt(0)>=0&&userName.charAt(0)<=9){ alert("用户名不能以数字字符开始！"); matchResult=false; } } return matchResult; } </script> <title>用户注册及验证</title> </head> <body> <center> <form name="loginForm" action="http://www.ytu.edu.cn" onsubmit="return login()" method="post"> <table bgcolor="#6666FF" width="300" cellspacing="0" cellpadding="0" border="0" align="left" valign="top"> <tr> <td class="table-title" colspan="2" align="center" bgcolor="#3366FF">用户注册</td> </tr> <tr> <td width="130" height="28" align="left">登录用户名</td> <td><input id="userName" name="userName" type="text" class="input"></td> </tr> <tr> <td width="80" height="28" align="left">登录密码</td> <td><input id="pwd" name="pwd" type="password" class="input"></td> </tr> <tr> <td width="80" height="28" align="left">重复输入密码</td> <td><input id="repwd" name="repwd" type="password" class="input"></td> </tr> <tr> <td width="80" height="28" align="left">有效邮箱地址</td> <td><input id="address" name="address" type="text" class="input"></td> </tr> <tr> <!--<td width="10" height="28" align="left"></td>--> <td colspan="2"> <input type="submit" value="http://www.mamicode.com/登录"> <input type="button" value="http://www.mamicode.com/取消" onClick="reset()"></td> </tr> </table> </form> </center> </body> </html>
JavaWeb前端: JavaScript 简介
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。