一、javaScript概述：
用于开发交互式Web页面，无需编译，而是直接嵌入在HTML页面中，由浏览器执行。
作用：嵌入动态文本于HTML页面、对浏览器事件作出响应、读写HTML元素、验证提交数据等。
组成：核心（ECMAScript）:语法、语句
BOM：浏览器对象
DOM：Document Object Model，操作文档中的元素和内容。
引入：（1）内嵌式。在HTML文档中，通过<script>标签引入，如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--此处是javaScript代码--> 7 <script type="text/javascript"> 8 9 </script> 10 11 </head> 12 <body> 13 14 </body> 15 </html>
（2）外联式。在HTML文档中，通过<script src=" ">标签引入.js文件，如下：
1 <script src="xxxxx.js" type="text/javascript" charset="UTF-8"></script>
区别于引入CSS代码：
1 <link rel="stylesheet" type="text/css" href="xxxxx.css" />
二 javaScript基本语法
（1）命名规范和变量的声明：
- 必须以字母或者下划线开始，中间可以是数字、字符或者下划线
- 变量名不能包含空格等符号
- 不能使用关键字作为变量名，如：function
- 严格区分大小写！
- 通过 var 进行变量的声明和赋值
（2）数据类型
- 基本类型
undefined：当声明的变量未初始化时，该变量的默认值就是undefined
null：表示空，一个占位符。javaScript中规定undefined和null是相等的
boolean：布尔值，true或者false
number：表示任意数字
String：字符串由单引号或者双引号声明的，javaScript没有字符类型
- 引用类型（object或者NULL类型）
就是对象，javaScript是基于对象而不是面向对象。对象的默认类型就是null。javaScript提供很多内置对象。
三、基本操作：
- alert() : 向页面弹出一个提示框
- innerHTML ： 向页面的某个元素写上一段内容，将原有内容覆盖
- document . write：向页面写内容
- 正则匹配规则：
-
- 使用String对象中的match方法
- 使用正则对象中的test方法
- js中编写函数的规范：
1 <script type="text/javascript"> 2 //方式1：函数的声明 3 function demo1(){ 4 alert("案例一"); 5 } 6 7 //方式2：声明匿名函数 8 var demo2 = function(){ 9 alert("案例二"); 10 }; 11 12 </script>
案例一：用js实现登录界面的交互：
登录页面HTML代码：
1 <body> 2 <form action="#" method="post" onsubmit="return check()" > 3 <table align="center" border="1px" cellspacing="0" cellpadding="0"> 4 <tr> 5 <td align="center">姓名</td> 6 <td><input type="text" id="loginnameId" name="loginname" /></td> 7 </tr> 8 9 10 <tr> 11 <td align="center">密码</td> 12 <td><input type="password" id="loginpwdId" name="loginpwd" /></td> 13 </tr> 14 15 <tr> 16 <td align="center">确认密码</td> 17 <td><input type="password" id="reloginpwdId" name="reloginpwd" /></td> 18 </tr> 19 20 <tr> 21 <td align="center">邮箱</td> 22 <td><input type="text" id="emailId" name="email" /></td> 23 </tr> 24 25 26 <tr> 27 <td colspan="2" align="center"> 28 <input type="submit" value="提交" /> 29 </td> 30 </tr> 31 32 </table> 33 </form> 34 </body>
javaScript代码：
1 <script> 2 function check(){ 3 var username = document.getElementById("loginnameId").value; 4 if(username==""){ 5 alert("用户名不得为空！"); 6 return false; 7 } 8 9 var password = document.getElementById("loginpwdId").value; 10 if(password==""){ 11 alert("密码不得为空！"); 12 return false; 13 } 14 15 var repassword = document.getElementById("reloginpwdId").value; 16 if(password!=repassword){ 17 alert("确认密码与原密码不同！"); 18 return false; 19 } 20 21 var email = document.getElementById("emailId").value; 22 23 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-]+)+$/.test(email)){ 24 alert("邮箱格式不正确!"); 25 document.getElementById("emailId").focus();/*提示信息后获得焦点*/ 26 return false; 27 } 28 return true; 29 } 30 </script>
四、javaScript的定时器
- setInterval : 以指定周期执行函数或者代码片段
window.setInterval(code,millisec);
- clearInterval : 取消有setInterval设置的定时效果
- setTimeout : 在指定的毫秒数后调用函数或执行代码片段
window.clearInterval(code,millisec);
- clearTimeout : 取消由setTimeout方法设置的定时效果
例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <script> 8 function init(){ 9 10 setInterval("changeImgs()",2000); 11 } 12 var num = 0; 13 function changeImgs(){ 14 num++; 15 document.getElementById("img1").src="img/"+num+".jpg"; 16 if(num >=3){ 17 num = 1; 18 } 19 } 20 </script> 21 22 </head> 23 <body onload="init()"> 24 25 <div style="width: 1200px;margin: auto;"> 26 <img src="img/1.jpg" width="100%" id="img1" /> 27 </div> 28 29 </body> 30 </html>
例子：定时弹出广告
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <script> 8 var time; 9 function init(){ 10 11 time = setInterval("showAd()",4000); 12 } 13 14 function showAd(){ 15 var divAd = document.getElementById("imgAd"); 16 divAd.style.display="block"; 17 clearInterval(time); 18 time = setInterval("hiddenAd()",4000); 19 } 20 21 function hiddenAd(){ 22 var divAd = document.getElementById("imgAd"); 23 divAd.style.display="none"; 24 clearInterval(time); 25 } 26 27 </script> 28 29 </head> 30 <body onload="init()"> 31 32 <div id="imgAd" style="width: 1200px;margin: auto;display: none;"> 33 <img src="img/ad.jpg" width="100%" /> 34 </div> 35 36 </body> 37 </html>
案例二：完善注册表单校验
常见事件：
| 事件名 | 描述 |
| onsubmit | 提交按钮被点击，一般放在<form>标签里 |
| onblur | 元素失去焦点 |
| onfocus | 元素获得焦点 |
- 校验不通过，当前标签后面红色字体提醒
- 对需要校验的表单项进行校验
- 第一个校验不通过的元素获得焦点
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <script> 8 9 function check(){ 10 var focusObjId; 11 12 /*val("objId");获得指定id属性对应的value值*/ 13 var loginNmae = val("loginnameId"); 14 if(loginNmae==""){ 15 showTip("loginnameIdMsg","用户名不得为空"); 16 focusObjId = "loginnameId"; 17 }else{ 18 hideTip("loginnameIdMsg"); 19 } 20 21 22 var loginpwd = val("loginpwdId"); 23 if(loginNmae==""){ 24 showTip("loginpwdIdMsg","密码不得为空"); 25 focusObjId = "loginpwdId" || focusObjId; 26 }else{ 27 hideTip("loginpwdIdMsg"); 28 } 29 30 31 var reloginpwd = val("reloginpwdId"); 32 if(loginNmae!=reloginpwd){ 33 showTip("reloginpwdIdMsg","密码与确认密码不一致"); 34 focusObjId = "reloginpwdId" || focusObjId; 35 }else{ 36 hideTip("reloginpwdIdMsg"); 37 } 38 39 40 var email = val("emailId"); 41 if(!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(email)){ 42 showTip("emailIdMsg","邮箱格式不正确"); 43 focusObjId = "emailId" || focusObjId; 44 }else{ 45 hideTip("reloginpwdIdMsg"); 46 } 47 48 49 if(focusObjId){ 50 focus(focusObjId); 51 return false; 52 } 53 54 return true; 55 } 56 57 /*获取元素id属性对应的value值*/ 58 function val(objId){ 59 return document.getElementById(objId).value; 60 } 61 62 /*显示错误信息*/ 63 function showTip(errObjId,text){ 64 var showObj = document.getElementById(errObjId); 65 showObj.innerHTML = text; 66 showObj.style.display = "block"; 67 } 68 69 /*隐藏错误信息*/ 70 function hideTip(errObjId){ 71 var showObj = document.getElementById(errObjId); 72 showObj.innerHTML = ""; 73 showObj.style.display = "none"; 74 } 75 76 /*获取焦点*/ 77 function focus(objId){ 78 document.getElementById(objId).focus(); 79 } 80 81 </script> 82 83 </head> 84 <body> 85 86 <form action="#" onsubmit="return check()"> 87 <table width="650px" height="250" align="center" style="border: 1px black solid;"> 88 <tr> 89 <td align="center" colspan="3"> 90 <font color="burlywood">会员注册</font> 91 </td> 92 </tr> 93 94 <tr> 95 <td align="right">用户名</td> 96 <td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60"/></td> 97 <td align="left"><font color="red" id="loginnameIdMsg"></font></td> 98 </tr> 99 100 <tr> 101 <td align="right">密码</td> 102 <td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60"/></td> 103 <td align="left"><font color="red" id="loginpwdIdMsg"></font></td> 104 </tr> 105 106 <tr> 107 <td align="right">确认密码</td> 108 <td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60"/></td> 109 <td align="left"><font color="red" id="reloginpwdIdMsg"></font></td> 110 </tr> 111 112 <tr> 113 <td align="right">邮箱</td> 114 <td colspan="2"><input id="emailId" type="text" name="email" size="60"/></td> 115 <td align="left"><font color="red" id="emailIdMsg"></font></td> 116 </tr> 117 118 <tr> 119 <td align="center" colspan="3"><input type="submit" value="提交"/></td> 120 </tr> 121 122 </table> 123 124 </form> 125 126 </body> 127 </html>