JavaWeb前端: JavaScript 简介

时间：2016-10-11 18:23:50 阅读：178 评论：0 收藏：0 [点我收藏+]

标签：

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="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="登录">  
           <input type="button" value="取消" onClick="reset()"></td>  
       </tr>  
  </table>  
</form>  
</center>  
  
</body>  
</html>

JavaWeb前端: JavaScript 简介

标签：

原文地址：http://www.cnblogs.com/vivian-test/p/5950087.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行