Top

WebBasicJavaScriptUnit02

  1. 登录验证
  2. 模拟方法重载
  3. 简单计算器

1 登录验证

1.1 问题

1)验证登录页面上的账号、密码

2)如果验证失败,则在页面提示验证信息

1.2 方案

使用正则表达式判断账号、密码的格式。

1.3 步骤

实现此案例需要按照如下步骤进行。

步骤一:创建HTML

在day05文件夹下创建demo1.html,代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>登录验证</title>
    <meta charset="utf-8" />
    <style type="text/css">
      body {
        font-family: "微软雅黑", '文泉驿正黑';
      }
      .form {
        width:400px;
        margin:150px auto;
        border:1px solid #ccc;
      }
      .form h1 {
        text-align:center;
        margin:0;
        padding:5px;
        border:1px solid #ccc;
      }
      .form p {
        margin:0;
        padding:20px;
        border:1px solid #ccc;
      }
      .form div {
        text-align:center;
        margin:0;
        padding:10px;
        border:1px solid #ccc;
      }
      .form div input {
        width:60px;
        height:30px;
      }
      .error_msg {
        color:#f00;
        border:1px solid #f00;
      }
    </style>
    <script type="text/javascript">
      function check_name() {
        var name = document.getElementById("name").value;
        var name_msg = document.getElementById("name_msg");
        var reg = /^\w{3,20}$/;
        if(reg.test(name)) {
          name_msg.className = "";
          return true;
        } else {
           name_msg.className = "error_msg";
           return false;
        }
      }
      function check_pwd() {
        var pwd = document.getElementById("pwd").value;
        var pwd_msg = document.getElementById("pwd_msg");
        var reg = /^\w{6,20}$/;
        if(reg.test(pwd)) {
          pwd_msg.className = "";
          return true;
        } else {
           pwd_msg.className = "error_msg";
           return false;
        }
      }
    </script>
  </head>
  <body>
    <div class="form">
      <form action="/www.tmooc.cn" 
        onsubmit="return (check_name()+check_pwd())==2">
        <h1>登录</h1>
        <p>
          <label>账号:</label>
          <input type="text" id="name" onblur="check_name();"/>
          <span id="name_msg">3-20位字符</span>
        </p>
        <p>
          <label>密码:</label>
          <input type="password" id="pwd" onblur="check_pwd();"/>
          <span id="pwd_msg">6-20位字符</span>
        </p>
        <div>
          <input type="submit" value="登录" />
        </div>
      </form>
    </div>
  </body>
</html>

步骤二:测试

使用浏览器打开demo1.html,输入错误格式的账号、密码,效果如下图:

图-1

输入正确的账号、密码,效果如下图:

图-2

1.4 完整代码

demo1.html完整代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>登录验证</title>
    <meta charset="utf-8" />
    <style type="text/css">
      body {
        font-family: "微软雅黑", '文泉驿正黑';
      }
      .form {
        width:400px;
        margin:150px auto;
        border:1px solid #ccc;
      }
      .form h1 {
        text-align:center;
        margin:0;
        padding:5px;
        border:1px solid #ccc;
      }
      .form p {
        margin:0;
        padding:20px;
        border:1px solid #ccc;
      }
      .form div {
        text-align:center;
        margin:0;
        padding:10px;
        border:1px solid #ccc;
      }
      .form div input {
        width:60px;
        height:30px;
      }
      .error_msg {
        color:#f00;
        border:1px solid #f00;
      }
    </style>
    <script type="text/javascript">
      function check_name() {
        var name = document.getElementById("name").value;
        var name_msg = document.getElementById("name_msg");
        var reg = /^\w{3,20}$/;
        if(reg.test(name)) {
          name_msg.className = "";
          return true;
        } else {
           name_msg.className = "error_msg";
           return false;
        }
      }
      function check_pwd() {
        var pwd = document.getElementById("pwd").value;
        var pwd_msg = document.getElementById("pwd_msg");
        var reg = /^\w{6,20}$/;
        if(reg.test(pwd)) {
          pwd_msg.className = "";
          return true;
        } else {
           pwd_msg.className = "error_msg";
           return false;
        }
      }
    </script>
  </head>
  <body>
    <div class="form">
      <form action="/www.tmooc.cn" 
        onsubmit="return (check_name()+check_pwd())==2">
        <h1>登录</h1>
        <p>
          <label>账号:</label>
          <input type="text" id="name" onblur="check_name();"/>
          <span id="name_msg">3-20位字符</span>
        </p>
        <p>
          <label>密码:</label>
          <input type="password" id="pwd" onblur="check_pwd();"/>
          <span id="pwd_msg">6-20位字符</span>
        </p>
        <div>
          <input type="submit" value="登录" />
        </div>
      </form>
    </div>
  </body>
</html>

2 模拟方法重载

2.1 问题

使用 arguemnts 对象模拟方法的重载

2.2 方案

使用 arguemnts 对象模拟方法的重载

2.3 步骤

实现此案例需要按照如下步骤进行。

步骤一:创建HTML

创建demo2.html,代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>模拟方法重载</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
      function sum() {
        var sum = 0;
        for(var i=0;i<arguments.length;i++) {
          sum += arguments[i];
        }
        return sum;
      }
      function f1() {
        var s = sum(1,2,3);
        alert(s);
      }
      function f2() {
        var s = sum(1,2,3,4,5,6);
        alert(s);
      }
    </script>
  </head>
  <body>
    <h1>模拟方法重载</h1>
    <input type="button" value="1~3的和" onclick="f1();"/>
    <input type="button" value="1~6的和" onclick="f2();"/>
  </body>
</html>

步骤二:测试

使用浏览器打开demo2.html,点击按钮[1~3的和],效果如下图:

图-2

点击按钮[1~6的和],效果如下图:

图-3

2.4 完整代码

demo2.html完整代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>模拟方法重载</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
      function sum() {
        var sum = 0;
        for(var i=0;i<arguments.length;i++) {
          sum += arguments[i];
        }
        return sum;
      }
      function f1() {
        var s = sum(1,2,3);
        alert(s);
      }
      function f2() {
        var s = sum(1,2,3,4,5,6);
        alert(s);
      }
    </script>
  </head>
  <body>
    <h1>模拟方法重载</h1>
    <input type="button" value="1~3的和" onclick="f1();"/>
    <input type="button" value="1~6的和" onclick="f2();"/>
  </body>
</html>

3 简单计算器

3.1 问题

实现简单计算器

3.2 方案

使用eval函数直接执行用户输入的算式。

3.3 步骤

实现此案例需要按照如下步骤进行。

步骤一:创建HTML

创建demo3.html,代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>简单计算器</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
      function cal() {
        var input = document.getElementById("input").value;
        var out = document.getElementById("out");
        try {
          var result = eval("("+input+")"); 
          out.innerHTML = result;
        } catch(e) {
          console.log(e);
          out.innerHTML = "表达式有误";
        }
      }
    </script>
  </head>
  <body>
    <h1>计算器</h1>
    <p>
      <input type="text" id="input"/>
      <input type="button" value="计算" onclick="cal();"/>
    </p>
    <p>
      = <span id="out"></span>
    </p>
  </body>
</html>

步骤二:测试

使用浏览器打开demo3.html,输入任意算式,效果如下图:

图-4

3.4 完整代码

demo3.html完整代码如下:

<!DOCTYPE html>
<html>
  <head>
    <title>简单计算器</title>
    <meta charset="utf-8" />
    <script type="text/javascript">
      function cal() {
        var input = document.getElementById("input").value;
        var out = document.getElementById("out");
        try {
          var result = eval("("+input+")"); 
          out.innerHTML = result;
        } catch(e) {
          console.log(e);
          out.innerHTML = "表达式有误";
        }
      }
    </script>
  </head>
  <body>
    <h1>计算器</h1>
    <p>
      <input type="text" id="input"/>
      <input type="button" value="计算" onclick="cal();"/>
    </p>
    <p>
      = <span id="out"></span>
    </p>
  </body>
</html>