zoukankan      html  css  js  c++  java

  • JavaWeb前端: JavaScript 简介

    JavaScript基本概念

    什么是JavaScript

    • JS是运行在浏览器里的解释性语言，能实现浏览器端和用户的直接交互（HTML输出/响应事件/改变HTML内容图像样式）；除了变量不区分类型以外，语法和Java类似，有几乎相同的流程控制语法，变量操作符，异常处理。

    JavaScript有什么作用

    JavaScript主要用于实现前端的动态交互：

    • JS操作DOM元素：浏览器根据HTML规范把HTML文档渲染成一棵DOM树,HTML标签对应一个个元素,HTML标签内的属性对应为元素的属性,HTML标签关联的文本对应为元素的文本.JS 可以根据HTML标签对应的（标签名，id, class） 查找到标签对应的元素，并且通过元素取出对应的属性值/文本值/样式，并对这些进行更改；达到动态交互的效果
    • JS响应用户请求事件：JS可以捕获Web页面上各个元素的事件状态(鼠标事件，键盘事件)，并且通过脚本动态的响应用户的请求。前段的交互(字段的校验：邮箱格式/用户名格式/日期格式/是否为空，计时，UI展现的动态效果..)都应该由JS来实现，速度快并且不对后台服务器造成压力。

    JS开发注意事项

    • JS可以引入到Html中，也可以直接定义在Html中；一个HTML里面可以有多个JS片段，这些JS片段按页面的先后顺序执行。通常把JS Function定义在Head中，把JS脚本定义在Body的最底端，避免先后顺序造成的JS执行异常。
    Javascript有执行顺序和引入顺序！！！
Javascript有执行顺序和引入顺序！！！
Javascript有执行顺序和引入顺序！！！

重要的事情说三遍，metisMenu Jquery插件调试了好几天都没有运行成功，后来发现是引入顺序的问题。metisMenu方法的加载调用metisMenu.js，metisMenu.js基于Jquery，因此必须在metisMenu执行之前引入Jquery，从上至下顺序：
1.引入jquery.js
2.引入MetisMenu.js
3.加载metisMenu方法
$('menu').metismenu()
    • JS调试相对困难，有些错误在编译时不能被识别（变量，脚本的调用顺序不对或者是语法错误都会导致界面不能正常显示或者是响应），用浏览器打开也不会报错，只是不能正常显示或执行。实际调试通常采用Firebug或者是Chrome工具断点（alert）调试。
    • JS开发框架：Sublime比Eclipse更适合用作前端开发，有很多较好的插件来帮助代码补全，标示不同元素的颜色，简化开发速度。Eclipse对前端和Mobile的开发较为有限。常用开发工具：Sublime＋PackageControl＋EMMET
    • JS的具体语法可以查询W3C School，有非常多的实例参考。

    JavaScripts & HTML DOM

    JS基于HTML DOM对象模型响应用户请求，首先通过HTML DOM定位出元素，在此基础上对DOM对象进行样式改变，捕获DOM对象事件并响应，为DOM对象增加或删除子元素。

     

    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'
    • 相应UI事件：
      • 鼠标事件：鼠标点击元素(onclick)，鼠标移入元素区域(onmouseover)，鼠标移出元素区域(onmouseout)
      • 加载事件：网页加载时，图片加载时触发（onload, onunload）
      • 变更事件(文本框有输入变更)：onchange()；
      • 表单事件：表单提交时触发
      • 除了捕获事件，还能生成/移除网页元素：
        • var para=document.createElement("p");
        • var node=document.createTextNode("这是新段落。");
        • para.appendChild(node);

    JS响应事件

    JS能捕获页面上元素的如下事件：
    • 鼠标事件：鼠标点击元素(onclick)，鼠标移入元素区域(onmouseover)，鼠标移出元素区域(onmouseout)
    • 加载事件：网页加载时，图片加载时触发（onload, onunload）
    • 变更事件(文本框有输入变更)：onchange()；
    • 表单事件：表单提交时触发
    • 除了捕获事件，还能生成/移除网页元素：
      • var para=document.createElement("p");
      • var node=document.createTextNode("这是新段落。");
      • para.appendChild(node);

    JavaScript实例

    JS基本语法 

    JS&DOM对象

    登陆校验

    <!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>

    Javascript有执行顺序和引入顺序！！！

    Javascript有执行顺序和引入顺序！！！

    Javascript有执行顺序和引入顺序！！！

     

    重要的事情说三遍，metisMenu调试了好几天都没有运行成功，后来发现竟然是引入顺序的问题，metisMenu方法的加载调用metisMenu.js，metisMenu.js基于Jquery，因此引入的jquery.js必须在metisMenu执行之前，从上至下顺序：

    1.引入jquery.js

    2.引入MetisMenu.js

    3.加载metisMenu方法

    $('menu').metismenu()
  • 相关阅读:
    构建工具系列二--Grunt
    构建工具系列一--Travis-cli
    Windows平台下如何使用node.js显示系统盘符
    【译文】采用chrome的DevTool中TimeLine和profile工具提升Web app性能
    浏览器重绘和重排
    迁移oracle数据库至新分区
    模拟app上商品详情点击图片放大并且可以切换大图
    JavaScript 复制内容到剪贴板
    原生js ajax
    原型与原型链
  • 原文地址：https://www.cnblogs.com/vivian-test/p/5950087.html
Copyright © 2011-2022 走看看