JavaScript入门

Posted 2020-10-15

javascript的组成部分

1. ECMAScript：它是javascript的核心(语法、变量、数据类型、语句、函数……)
2. DOM：（document object model）文档对象
3. BOM：（brower object model）浏览器对象

JavaScript的语法

1. 区分大小写；
2. 弱类型；
3. 注释与Java相同；
4. 定义变量使用 var；

JavaScript的数据类型

1. 原始数据类型：string、number、boolean、null、undefined
2. 应用数据类型：Array、Boolean、Date、Math、Number、String、ReqExp

JavaScript的运算符

1. == ：它在做比较的时候会进行自动转换。
2. ===： 它在做比较的时候不会进行自动转换。
3. 其他运算符与java基本一致

JavaScript获取元素内容

1. 获取元素：document.getElementById(“id名称”);

2. 获取元素里面的值：document.getElementById("id名称").value;

JavaScript的输出

1. 警告框：alert("字符串");
2. 向页面指定的位置写入内容：innerhtml("写入的内容");
3. 向页面写入内容：document.write("写入的内容");

javaScript中的表单提交事件：onsubmit

实例1：简单的注册表单校验

HTML代码 <form action="#" method="get" name="regForm" onsubmit="return checkForm()"> <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white"> <tr height="40px"> <td colspan="2"> <font size="4">会员注册</font> &nbsp;&nbsp;&nbsp;USER REGISTER  </td> </tr> <tr> <td> 用户名 </td> <td> <input type="text" name="user" size="34px" id="user"/> </td> </tr> <tr> <td> 密码 </td> <td> <input type="password" name="password" size="34px" id="password"/> </td> </tr> <tr> <td> 确认密码 </td> <td> <input type="password" name="repassword" size="34px" id="repassword"></input> </td> </tr> <tr> <td> Emaile </td> <td> <input type="text" name="email" size="34px" id="eamil"/> </td> </tr> <tr> <td> 姓名 </td> <td> <input type="text" name="username" size="34px"/> </td> </tr> <tr> <td> 性别 </td> <td> <input type="radio" name="sex" value="男"/>男 <input type="radio" name="sex" value="女"/>女 </td> </tr> <tr> <td> 出生日期 </td> <td> <input type="text" name="birthday" size="34px"/> </td> </tr> <tr> <td> 验证码 </td> <td> <input type="text" name="yzm" /> <img src="../img/yanzhengma.png" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="注册" /> </td> </tr> </table> </form>

JavaScript代码 <script> function checkForm(){ //alert("aa"); /**校验用户名*/ //1.获取用户输入的数据 var uValue = document.getElementById("user").value; //alert(uValue); if(uValue==""){ //2.给出错误提示信息 alert("用户名不能为空!"); return false; }   /*校验密码*/ var pValue = document.getElementById("password").value; if(pValue==""){ alert("密码不能为空!"); return false; }   /**校验确认密码*/ var rpValue = document.getElementById("repassword").value; if(rpValue!=pValue){ alert("两次密码输入不一致!"); return false; }   /*校验邮箱*/ var eValue = document.getElementById("eamil").value; if(!/^([a-zA-Z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){ alert("邮箱格式不正确!"); return false; }   } </script>