javaScript入门

一.什么是javaScript

 

注：Java 与 javascript 没有关系

二.javascript 的作用

            HTML：它是整个网站的骨架。
            CSS： 它是对整个网站骨架的内容进行美化(修饰)
            Javascript： 它能够让整个页面具有动态效果。

三.javascript 的组成部分

 

        ECMAScript:它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数
据类型、语句、函数等等)
        DOM：(Document Object Model) 文档对象模型， 包含(整个 html 页面的内容)、
        BOM： (Brower Object Model)浏览器对象模型,包含(整个浏览器相关内容)

四.javascript 语法

  • 区分大小写
  • 变量是弱类型的(String str=”aaa” ,var str=”123”;)
  • 每行结尾的分号可有可无(建议大家写上)
  • 注释与 java、 php 等语言相同。
1.变量
 

            变量可以不用声明，变量是弱类型。 统一使用 var 来定义！ 定义变量的时候不要使用关键字和保留字。

 

2.数据类型
 

        Javascript 数据类型分为原始数据类型和引用数据类型

2.1 原始数据类型：

            string、 number、 boolean、 null、 undefined

2.2 引用数据类型：

 

 

五. 运算符

        其它运算符与 java 大体一致，需要注意其等性运算符。

  •         == 它在做比较的时候会进行自动转换。
  •         === 它在做比较的时候不会进行自动转换。

六.语句

所有语句与 java 大体一致。

1.获取元素内容

        获取元素
        document.getElementById(“id 名称”);
        获取元素里面的值
        document.getElementById(“id 名称”).value;

2. 事件

3. javaScript的输出(三种输出方式)

        警告框： alert();
        向页面指定位置写入内容： innerHTML(属性);
        向页面写入内容： document.write(“”);

 

七.javaScript的引入

 

八.JS中正则匹配方式

 

九.JS中的函数编写方式

 

十.代码演示

1.获取元素.html

 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>获取元素</title>
  6         <script>
  7             window.onload = function(){
  8                 //获取页面指定位置的元素
  9                 var uEle = document.getElementById("username");
 10                 //alert(uEle);
 11                 //获取页面指定位置的内容(值)
 12                 var uValue = uEle.value;
 13                 alert(uValue);
 14             }
 15         </script>
 16     </head>
 17     <body>
 18         用户名：<input type="text" name="username" id="username"/><br />
 19         密码: <input type="password" name="password" />
 20     </body>
 21 </html>
 22 
 23 2.注册页面.html
 24 
 25 <!DOCTYPE html>
 26 <html>
 27     <head>
 28         <meta charset="UTF-8">
 29         <title>注册页面</title>
 30         <script>
 31             function checkForm(){
 32                 //alert("aa");
 33                 /**校验用户名*/
 34                 //1.获取用户输入的数据
 35                 var uValue = document.getElementById("user").value;
 36                 //alert(uValue);
 37                 if(uValue==""){
 38                     //2.给出错误提示信息
 39                     alert("用户名不能为空!");
 40                     return false;
 41                 }
 42                 
 43                 /*校验密码*/
 44                 var pValue = document.getElementById("password").value;
 45                 if(pValue==""){
 46                     alert("密码不能为空!");
 47                     return false;
 48                 }
 49                 
 50                 /**校验确认密码*/
 51                 var rpValue = document.getElementById("repassword").value;
 52                 if(rpValue!=pValue){
 53                     alert("两次密码输入不一致!");
 54                     return false;
 55                 }
 56                 
 57                 /*校验邮箱*/
 58                 var eValue = document.getElementById("eamil").value;
 59                 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
 60                     alert("邮箱格式不正确!");
 61                     return false;
 62                 }
 63                 
 64             }
 65         </script>
 66     </head>
 67     <body>
 68         <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
 69             
 70             <tr>
 71                 <td height="600px" >
 72                     <!--嵌套一个十行二列的表格-->
 73                     <form action="#" method="get" name="regForm" onsubmit="return checkForm()">
 74                         <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
 75                             <tr height="40px">
 76                                 <td colspan="2">
 77                                     <font size="4">会员注册</font>    USER REGISTER 
 78                                 </td>
 79                             </tr>
 80                             <tr>
 81                                 <td>
 82                                     用户名
 83                                 </td>
 84                                 <td>
 85                                     <input type="text" name="user" size="34px" id="user"/>
 86                                 </td>
 87                             </tr>
 88                             <tr>
 89                                 <td>
 90                                     密码
 91                                 </td>
 92                                 <td>
 93                                     <input type="password" name="password" size="34px" id="password"/>
 94                                 </td>
 95                             </tr>
 96                             <tr>
 97                                 <td>
 98                                     确认密码
 99                                 </td>
100                                 <td>
101                                     <input type="password" name="repassword" size="34px" id="repassword"></input>
102                                 </td>
103                             </tr>
104                             <tr>
105                                 <td>
106                                     Emaile
107                                 </td>
108                                 <td>
109                                     <input type="text" name="email" size="34px" id="eamil"/>
110                                 </td>
111                             </tr>
112                             <tr>
113                                 <td>
114                                     姓名
115                                 </td>
116                                 <td>
117                                     <input type="text" name="username" size="34px"/>
118                                 </td>
119                             </tr>
120                             <tr>
121                                 <td>
122                                     性别
123                                 </td>
124                                 <td>
125                                     <input type="radio" name="sex" value="男"/>男
126                                     <input type="radio" name="sex" value="女"/>女
127                                 </td>
128                             </tr>
129                             <tr>
130                                 <td>
131                                     出生日期
132                                 </td>
133                                 <td>
134                                     <input type="text" name="birthday" size="34px"/>
135                                 </td>
136                             </tr>
137                             <tr>
138                                 <td>
139                                     验证码
140                                 </td>
141                                 <td>
142                                     <input type="text" name="yzm" />
143                                     <img src="../img/yanzhengma.png" />
144                                 </td>
145                             </tr>
146                             <tr>
147                                 <td colspan="2">
148                                     <input type="submit" value="注册" />
149                                 </td>
150                             </tr>
151                         </table>
152                     </form>
153                 </td>                
154             </tr>
155             
156                 
157         </table>
158     </body>
159 </html>

 

posted @ 2018-03-02 11:48  IT狂热爱好者  阅读(119)  评论(0)    收藏  举报