JavaScript基础教程之Javascript学习第无节-职坐标

JavaScript基础教程之Javascript学习第无节

沉沙 2019-06-11 来源：阅读 1038 评论 0

摘要：本篇文章探讨了JavaScript基础教程之Javascript学习第无节，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了JavaScript基础教程之Javascript学习第无节，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

JavaScript基础教程之Javascript学习第无节

一、常见的运算符：
1、赋值： =、+=、-=、/=、*=
这个赋值类似于：x = x += y
2、算术运算符：+、-、χ、÷
3、比较运算符：>、>=、<=、==(相等)、!=(不等于)
二、文本框的值：
document.getElementById("id名称").value
值作为广本框的一个属性。
三、表单验证：
提交表单时，表单发生一个事件，onsubmit事件。
验证表单时，应该是onsubmit事件调用函数。
onsubmit事件可以有一个值，当值为true时，提交表单，当值为false时，不提交表单，而默认的情况下，onsubmit事件的值为true。
返回值即为：return true/false;
下面的例子可以是对以上的理解：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="//www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript">
    function biaodan(){
        if(document.getElementById("username").value==""){
            alert("对不起，您的用户名不能为空。");
            return false;
        }
        if(document.getElementById("password").value == ""){
            alert("sorry，您的密码不能为空");
            return false;
        }
        if(document.getElementById("password02").value != document.getElementById("password").value){
            alert("对不起，您两次输入的密码不一致");
            return false;
        }
    }
    </script>
    </head>

    <body>
    <form id="form1" name="form1" method="post" action="">
    <table width="600" border="1" cellspacing="3" cellpadding="3" bordercolordark="#FFFFFF" bordercolorlight="#000000">
      <tr>
        <td>姓名：</td>
        <td><label>
          <input name="username" type="text" id="username" />
        </label></td>
      </tr>
      <tr>
        <td>密码：</td>
        <td><label>
          <input name="password" type="password" id="password" />
        </label></td>
      </tr>
      <tr>
        <td>重复密码：</td>
        <td><label>
          <input name="password02" type="text" id="password02" />
        </label></td>
      </tr>
      <tr>
        <td><label>
          <input type="submit" name="Submit" value="提交" onclick="biaodan()" />
          </label></td>
        <td><label>
          <input type="reset" name="Submit2" value="重置" />
        </label></td>
      </tr>

    </table>
    </form>
    </body>
    </html>
四、字符串对象的length属性：
得到字符串对象的长度。
语法：字符串对象.length
五、逻辑运算符：
A、&&逻辑与（并且）
条件1 && 条件2 理解为：条件1并且条件2。即为：两个条件均成立。
B、||逻辑或（或者）
条件1 || 条件2 理解为：条件1或者条件2
3、字符串对象的indexOf与lastIndexOf方法（直接翻译为：位置）
A、indexOf方法：
语法：
字符串对象.indexOf(子字符串);
返回子字符串在字符串对象中第一次出现的索引位置。
①索引位置从0开始；
②如果子字符串没有在字符串对象中出现过，返回值为-1；
③如果子字符串在字符串出现两次，返回值为第一次出现的位置。
B、lastIndexOf方法：
语法：
字符串对象.lastIndexOf(子字符串);
返回子字符串在字符串对象中最后一次出现的索引位置
最后一个字符的索引位置应该是字符串的长度-1。
六、for循环语句：
语法：for(i=1;i<=100;i=i+1){
循环体语句;
循环体语句;
......
}
for(i=1;i<=100;i=i+1)依次为：for(变量初始表达式;条件表达式;变量更新表达式)
其中：i=i+1可以写成：i++
执行流程：
①先计算变量初始表达式；
②计算条件表达式，如果条件成立，则执行循环体语句，如果条件不成立，则退出for循环语句；
③如果步骤2成立执行完循环体语句后，再计算变量更新表达式；
④重复回到步骤2，再计算条件。
下面的例子可以更好的理想以上内容：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="//www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Untitled Document</title>
    <script language="javascript" type="text/javascript">
    function biaodan(){
        if(document.getElementById("username").value==""){
            alert("对不起，您的用户名不能为空。");
            return false;
        }
        if(document.getElementById("username").value.length < 6 || document.getElementById("username").value.length > 12){
            alert("您的用户名必须是6到12位");
            return false;
        }
        if(document.getElementById("age").value ==""){
            alert("对不起，您的年龄不能为空");
            return false;
        }
        if(document.getElementById("age").value >= 40 || document.getElementById("age").value <= 17){
            alert("您不适合本站的年龄");
            return false;
        }
        if(document.getElementById("password").value == ""){
            alert("sorry，您的密码不能为空");
            return false;
        }
        if(document.getElementById("password").value.length < 6){
            alert("对不起，您的密码长度不符合要求");
            return false;
        }
        if(document.getElementById("password02").value != document.getElementById("password").value){
            alert("对不起，您两次输入的密码不一致");
            return false;
        }
         if(document.getElementById("email").value.length!=0)
      {
        if (document.getElementById("email").value.charAt(0)=="." ||
             document.getElementById("email").value.charAt(0)=="@"||
             document.getElementById("email").value.indexOf('@', 0) == -1 ||
             document.getElementById("email").value.indexOf('.', 0) == -1 ||
             document.getElementById("email").value.lastIndexOf("@")==document.getElementById("email").value.length-1 ||
             document.getElementById("email").value.lastIndexOf(".")==document.getElementById("email").value.length-1)
         {
          alert("Email地址格式不正确！");
          document.getElementById("email").focus();
          return false;
          }
       }
     else
      {
       alert("Email不能为空！");
       document.getElementById("email").focus();
       return false;
       }
    }
    </script>
    </head>

    <body>
    <form id="form1" name="form1" method="post" action="">
    <table width="600" border="1" cellspacing="3" cellpadding="3" bordercolordark="#FFFFFF" bordercolorlight="#000000">
      <tr>
        <td>姓名：</td>
        <td>
          <input name="username" type="text" id="username" />
        </td>
      </tr>
      <tr>
        <td>年龄：</td>
        <td>
          <input name="age" type="text" id="age" />
        </td>
      </tr>
      <tr>
        <td>密码：</td>
        <td>
          <input name="password" type="password" id="password" />
        </td>
      </tr>
      <tr>
        <td>重复密码：</td>
        <td>
          <input name="password02" type="text" id="password02" />
        </td>
      </tr>
      <tr>
        <td>邮箱：</td>
        <td>
          <input name="email" type="text" id="email" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="submit" name="Submit" value="提交" onclick="biaodan()" />
        </td>
        <td>
          <input type="reset" name="Submit2" value="重置" />
        </td>
      </tr>

    </table>
    </form>
    </body>
    </html>