1.JavaScript的基本语法
1-1:为什么要学习JavaScript
例如：a.表单验证 b.页面动态效果等等
1-2:什么是JavaScript
a.脚本的基本结构
语法：
<script language="JavaScript"> <script language="JavaScript">
<!- <!-
JavaScript 语句; JavaScript 语句;
--!> --!>
</script> </script>
b.脚本的执行原理
过程：用户录入信息到IE上面，发送请求(包括JavaScript的页面)给服务器，然后从服务器下载含JavaScript的页面返回响应信息
1-3:JavaScript的基本语法
a.变量的声明和赋值
语法：
var 合法的变量名;
声明并赋值，例如：var count=10;
同时声明多个变量，例如：var x,y,z=10;
允许不声明变量直接使用，系统自动会声明该变量。例如：x=88;//没有声明变量，直接使用 document.write(x);
b.运算符号
算术运算符 + - * / % ++ -- -(求反) 比较运算符< > <= >= == != 逻辑运算符! && || 赋值运算符包括=及其扩展赋值运算符
c.逻辑控制语句
语法：
if(表达式){ for(初始化;条件;增量或减量){ while(条件){
JavaScript 语句1; JavaScript 语句; JavaScript 语句;
}else{ } }
JavaScript 语句2;
}
switch(表达式){
case 常量1：JavaScript 语句1；
case 常量2：JavaScript 语句2；
case 常量3：JavaScript 语句3；
...
default:javaScript 语句4;
}
d.注释
例如：
单行注释以//开始，以行末结束
多行注释以/*开始，以*/结束
e.类型转换
两种：转换为整型和转换为浮点型数字parseInt和parseFloat 如果无法转换第一个字符，此函数将返回NaN(Not a Number，非数字)
1-4:JavaScript的高级语法-自定义函数function
a.什么是函数
函数就是一个方法、也可以返回
b.如何使用函数
(1)创建函数
语法：
function 函数名(参数1，参数2,...){ function 函数名(){
语句; 语句;
} }
函数的定义放在<script>与</script>之间
c.调用函数
语法：事件名="函数名()";
1-5:常见错误
声明变量，和使用变量的时候不一致。
2.DOM编程-window对象
2-1:DOM模型介绍
DOM(Document Object Model)由万维网联盟(World Wide Web Consortium,W3C)定义的一套操作HTML文档
a.HTML文档的树状结构(和HTML树状结构基本一致，此处就不在列举P31)
b.什么是DOM(DOM是以层次结构的节点或信息片段的集合)
c.DOM对象模型(Window下面的三个层次：history、document、location下面的层次此处布列出了P34)
2-2:window对象常用的属性、方法、事件介绍
a.常用属性(status、screen、history、location、document)
b.常用方法(alert("提示信息")、confirm("提示信息")、open("url","name")、close、showModalDialog())
c.常用事件
注意：要注意的是，当使用层、框架和多窗口时，就不能省略window对象的名称。例如：必须为document.location..
例如：
语法：
open("打开窗口的url","窗口名","窗口特征")[height、width、toolbars、scrollbars、menubar、location、status、resizable]
showModalDialog("打开对话框的url","对话框名","对话框特征")[height、width、toolbars、scrollbars、menubars、location、status、statusbars、resizable]
2-3:Date对象和setTimeout()方法做时钟显示
a.时钟特效（使用定时器setTimeout（）方法）
b.Date对象常用的方法
语法：
var 日期对象=new Date(参数);
或者是 var 日期对象=new Date();
方法组：setXX和getXX
特殊的：日期：1-31 其它的全都是从0开始
c.setTimeout()方法
语法：
setTimeout("disptime()",1000) 隔多久执行一次
clearTimeout 停止
setInternal 永远执行
2-4:history和location对象
a.history对象
back()、forward()、go("url or number")
b.location对象
(1)属性(host、hostname、href)
(2)方法(assign("url")、reload()、replace("url"))
注意：下拉列表选中是selected默认选中
2-5:常见错误
默认选中：selected
3.DOM编程-document对象
3-1:document对象的常用属性和方法介绍
a.属性(getElementById()获得指定的id)
b.方法(getElementsByName()获得名称name)
3-2:制作浮动的广告图片
例如：
<html>
<head>
<title>浮动广告</title>
<script language="javaScript">
var advInitTop=0;//使层总置于顶端的初始值
function move(){
document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop;
}
window.onscroll=move;//窗口的滚动事件，当前页面滚动时调用move()函数
<script>
</head>
<body>
<div id="advLayer" style="position:absolute;left:16px;top:129px;width:180px;height:230px;z-index:1;">
<img src="" width="180" height="230"
</div>
<p>
</p>
<p>
<img src="" width="993" height="1799"
</p>
<p>
</p>
</body>
</html>
3-3:制作带关闭按钮的浮动窗口
a.带关闭按钮的浮动窗口
<html>
<head>
<title>浮动广告</title>
<script language="javaScript">
var advInitTop=0;//使层总置于顶端的初始值
function inix(){
document.getElementById("advLayer").style.pixelTop;
}
var advInitTop=0;//使层总置于顶端的初始值
function move(){
document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop;
}
function closeMe(){
document.getElementById("closeLayer").style.display="none";
document.getElementById("advLayer").style.display="none";
}
window.onscroll=move;//窗口的滚动事件，当页面滚动时调用move（）函数
<script>
</head>
<body >
<div id="closeLayer" onclick="closeMe()"style="position:absolute;left:16px;top:129px;width:180px;height:230px;z-index:1;">
<img src="" width="180" height="230"
</div>
<p>
</p>
<p>
<img src="" width="993" height="1799"
</p>
<p>
</p>
</body>
</html>
b.关闭按钮随滚动条同步滚动的浮动窗口
....
var advInitTop=0;//使层总置于顶端的初始值
function inix(){
advinitTop=document.getElementById("advLayer").style.pixelTop;
closeInitTop=document.getElementById("closeLayer").style.pixelTop;
}
function move(){
document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop;
document.getElementById("closeLayer").style.pixelTop=closeInitTop+docuemnt.body.scrollTop;
}
3-4:制作实现全选效果
例如：
<html>
<head>
<title>全选或不全选</title>
<script language="javaScript">
function checkAll(boolValue){
var allCheckBoxs=document.getElementsByName("isBuy");
for(var i=0;i<allCheckBoxs.length;i++){
if(allCheckBoxs[i].type=="checkbox"){//判断是否是复选框
allCheckBoxs[i].checked=boolValue;
}
}
}
</script>
</head>
<body>
.....
<a href="javaScript:checkAll(true)">全选</a>
<a href="javaScript:checkAll(false)">全不选</a>
.....
</body>
</html>
注意：input框的名称必须得一致.
3-5:常见错误
例如：if(allCheckBoxs[i].type="checkbox")或者是<a href="javaScript:checkAll(‘false或true‘)">全选或不全选 </a>
4.CSS样式特效
4-1:回顾已学的CSS样式表
a.样式表类型
(1)行内样式
<input name="Button" type="button" style="background-image:url(image/back1.jpg);color="#0000ff";border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;"value="登 录">
(2)内嵌样式
<style type="text/css">
a{/*设置五下划线的超链接样式*/
color:blue;
text-decoration:none;
}
a:hover{/*鼠标在超链接上悬停时变为红色*/
color:red;
}
.boxBorder{/*设置细边框样式*/
border-width:1px;
border-style:solid;
}
#content{/*ID样式*/
background-color:#e7fbff;
}
<div id="content">
<input id=txtName class="boxBorder" size=15 name=txtName>
.......
<input name=Button type="button" class="pixButton" value="登 录">
<td align=right colspan=2><a href="#">免费注册</a></td>
.......
</div>
</style>
(3)外部样式表
<html>
<head>
<title>浮动广告</title>
<link rel="stylesheet" href="out_file.css" type="text/css">
<script language="javaScript">
<style type="text/css">
a{/*设置五下划线的超链接样式*/
color:blue;
text-decoration:none;
}
a:hover{/*鼠标在超链接上悬停时变为红色*/
color:red;
}
.boxBorder{/*设置细边框样式*/
border-width:1px;
border-style:solid;
}
#content{/*ID样式*/
background-color:#e7fbff;
}
</style>
</script>
</head>
<body>
.......
</body>
</html>
b.常用样式
(1)文本框属性(font-size、font-familly、font-style、color、text-align)
(2)背景属性(background-color、background-image、background-repeat)
(3)组合属性样式a{无下划线 a:hover{ .boxBorder{/*细边框
color:blue; color:red; border-width:1px;
text-decoration:none; } border-style:solid;
} }
.picButton{/*图片按钮样式
background-image:url(image/back2.jpg);
border:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
font-size:14px;
}
4-2:制作改变字体大小的样式特效
例如：
<html>
<head>
<title>全选或不全选</title>
<style type="text/css">
a{
color:blue;
text-decoration:none;
}
a:hover{
color:red;
}
.boxBorder{
border-width:1px;
border-style:solid;
}
.pixButton{
background-image:url(images/back1.jpg);
color:0px;
border:0px;
margin:0px;
padding:0px;
height:23px;
width:82px;
font-size:14px;
}
</style>
<script language="javaScript">
.....
</script>
</head>
<body>
...
<input class="boxBorder" id=txtName size=15 name=txtName>
...
<a href="#" onMouseOver="this.style.fontSize=‘24px‘" onMouseOut="this.style.fontSize=14px">免费注册</a>
...
</body>
</html>
4-3:制作改变按钮背景图片的特效
<html>
<head>
<title>改变按钮背景图</title>
<body>
<form name="form1" method="post" action="">
<input type="submit" name="Submit" value="提交"
style="width:82px;height:23px;background-image:url(images/back1.jpg);"onMouseOver="this.style.backgroundImage=‘url(images/back2.jpg)‘ onMouseOut="this.style.backgroundImage=‘url(images/back1.jpg)‘">
</form>
</body>
</html>
4-4:层的显示/隐藏特效
a.显示属性display
语法：(display属性的语法格式如下)
Object.style.display="value"; block换行（添加新行）、none不显示（隐藏）、inline换行（同行显示）
b.制作层的显示/隐藏特效
例如：
<html>
<head>
<title>改变按钮背景图</title>
<style type="text/css">
#advLayer{
position:absolute;
left:62px;
top:44px;
width:360;
height:190px;
z-index:2;
}
</style>
<script type="text/javaScript">
function closeMe(){
document.getElementById("closeLayer").style.display="none";
document.getElementById("advLayer").style.display="none";
}
function showMe(){
document.getElementById("closeLayer").style.display="block";
document.getElementById("advLayer").style.display="block";
}
</script>
</head>
<body>
<p>
<input name="placeButton" type="button" onclick="closeMe()" value="关闭层">
<input name="placeButton2" type="button" onClick="showMe()" value="弹出层">
</p>
<div id="advLayer"><img src="" width="360" height="190">
</div>
<h1>层下方的内容</h1>
<h1>层下方的内容</h1>
<h1>层下方的内容</h1>
<h1>如果修改代码：去掉层DIV的样式</h1>
<h1>将出现内容动态隐藏显示的效果。</h1>
</form>
</body>
</html>
4-5:图片的显示/隐藏特效
例如：
function showGame(){
document.getElementById("gameTab1").style.display="none";
document.getElementById("mobileTab1").style.display="none";
document.getElementById("gameTab2").style.display="block";
document.getElementById("mobileTab2").style.display="block";
}
注意：visibility：hidden对象任占据着页面的空间，只是该控件看上去是空的。
display：none对象根本就不会显示，在页面中仿佛没有该对象一样。
5.基本的表单验证技术
5-1:为什么需要表单验证
a.避免信息无法更新或出现新错误
b.减轻服务器端的压力
5-2:表单验证的内容
年、月、日、输入长度、中英文、特殊字符、是否为空、是否为数字、邮件是否有效、年月日是否有效。
5-3:表单验证思路
a.String对象简介
(1)字符串对象的属性【length表示字符串中的字符个数，包括所有符合 如：空格】
语法：
字符串对象.属性名或字符串对象.方法名()
第一种：var newstr="这是我写的 脚本";
第二种：var newstr=new String("这是我写的脚本");
(2)字符串对象的方法
indexOf("子字符串",起始位置)查找字符串的位置，这个位置是要查找文本框出现的第一个位置
charAt(index)获取位于指定索引位置的字符
substring(index1[,index2])返回位于指定索引index1和index2之间的字符串，并且包括索引index1所对应的字符串，不包括索引index2所对应的字符串，即前闭、后开。
toLowerCase()将字符串转换成小写
toUpperCase()将字符串转换成大写
注意：其中最常用的就是indexOf()方法
字符串对象.indexOf("查找的字符或字符串",查找的起始位置)如果找到了，则返回找到的位置，否则返回-1.
例如：
<html>
<head>
<title>方法indexOf()用法</title>
</head>
<body>
<script language="javaScript">
var str="Hello world";
document.write(str.indexOf("Hello",0)+"<br/>");
document.write(str.indexOf("World")+"<br/>");
document.write(str.indexOf("world"));
</script>
</body>
</html>
b.电子邮件格式的验证
例如：
<html>
<head>
<title>验证用户名和密码</title>
<script language="javaScript">
function checkUserName(){
var fname=document.myform.txtUser.value;//验证用户名是否合法
if(fname.length !=0){
for(i=0;i<fname.length;i++){
var ftext=fname.substring(i,i+1);//获取字符串中单个字符
if(ftext<9||ftext>0){
alert("名字中包含数字\n"+"请删除名字中的数字和特殊字符");
return false;
}
}
}else{
alert("未输入用户名\n"+"请输入用户名");
return false;
}
return true;
}
function passCheck(){
var userpass=document.myform.txtPassword.value;
if(userpass==""){
alert("未输入密码\n"+"请输入密码");
return false;
}
if(userpass.length<6){
alert("密码必须多于或等于6个字符。\n");
return false;
}
}
function validateform(){
if(checkUserName()&&passCheck()){
return true;
}else{
return false;
}
}
</script>
</head>
<body>
....
<input name="clearButton" type="button" id="clearButton" value="清 空">
<input name="registButton" type="submit" id="registerButton" value="登 录">
....
</body>
</html>
5-4:文本框控件
a.文本框对象简介（事件：onBlur、onFocus、onChange 方法：focus()、select() 属性：value）
b.电子邮件格式验证的改进
例如：
<html>
<head>
<title>使用文本框控件</title>
<script language="javaScript">
function checkEmail(){
var strEmail=document.myform.txtEmail.value;
if(strEmail.length==0){
alert("电子邮件不能为空！");
return false;
}
if(strEmail.indexOf("@",0)==-1){
alert("电子邮件格式不正确\n必须包含@符号！");
document.myform.txtEmail.focus();
document.myform.txtEmail.select();
return false;
}
if(strEmail.indexOf(".",0)==-1){
alert("电子邮件格式不正确\n必须包含.符号！");
document.myform.txtEmail.focus();
document.myform.txtEmail.select();
return false;
}
return true;
}
function clearText(){
if(document.myform.txtEmail.value=="请输入真实的电子邮箱,我们将发送激活密码"){
document.myform.txtEmail.value="";
document.myform.txtEmail.style.color="red";//修改文本框的颜色
}
}
</script>
<style type="text/css">
.textBorder{
border:1px solid;
font-size:15px;
}
</style>
</head>
<form name="myform" method="post" action="reg_success.html" onSubmit="return checkEmail()">
.................
<td>您的电子邮件：</td>
<td colspan="2">
<input name="txtEmail" type="text" class="textBorder" id="txtEmail" value="请输入真实的电子邮箱，我们将发送激活密码" size="40" onFocus="clearText" style="color:#666666;">*必填
</td>
.................
<body>
</body>
</form>
</html>
5-5:常见错误
<form name="myform" method="post" action="reg_success.html" onSubmit="return checkEmail()">不在表单中写
未调用函数
6.表单验证的相关事件和辅助特效
6-1:制作图片代替按钮的提交效果
例如：
简略代码：
<div align="center">
<img src="images/requick.jpg" width="114" height="27" onclick="checkForm()">
</div>
6-2:制作回车切换输入的效果
例如：
简略代码：
function changeFocus(){
if(event.keyCode==13){//判断按键是否是回车键
event.keyCode=9;//设置按键为Tab键
}
}
...
<input name="sname" type="text" class="borderBox" id="sname" size="24" onKeyDown=""changeFocus()>
...
6-3:制作输入提示的特效
例如：
简略代码：
function checkLogin(){
var myDiv=document.getElementById("loginError");
myDiv.innerHTML="";
var strName=document.userfrm.loginName.value;
if(strName.length==0){
myDiv.innerHTML="<font color=‘red‘>用户名不能为空！";
return;
}
}
...
<input name="loginName" type="text" class="borderBox" id="loginName" size="24" onblur="checkLogin()">
...
6-4:制作内容动态改变的层特效
例如：
简略代码：
function InitDIV(){
document.getElementById("DIV1").style.display="none";
}
...
<body >//页面加载的时候就自动调用函数InitDIV()
...
7.表单验证的高级特效
7-1:实现简单的省市级联功能
a.下拉列表控件select
事件 onChange当选项发生变化时产生 方法 add(new,old)将新的Option插入到old前面，如果old为空，直接插入到末尾 属性 value 下拉列表框中被选选项的值、 options下标从0开始，表示整个选项数组、selectedIndex 从0开始的下标，为选中的下标、length返回下拉菜单中的选项个数
b.实现简单的省市级联的特效
例如：
省略代码：
function changeCity(){
var province=document.myform.selProvince.value;
var newOption1,newOption2;
switch(province){
case "四川省":
newOption1=new Option("成都市","chengdu");
newOption2=new Option("泸州","luzhou");
break;
case "湖北省":
newOption1=new Option("武汉","wuhan");
newOption2=new Option("襄樊","xiangfan");
break;
case "山东省":
newOption1=new Option("青岛市","qingdaos");
newOption2=new Option("烟台市","yantaishi");
break;
}
document.myform.selCity.options.length=0;
document.myform.selCity.options.add(newOption1);
document.myform.selCity.options.add(newOption2);
}
...
<select name="selProvince" onChange="changeCity()">
<option>--请选择开户账号的省份--</option>
<option value="四川省">四川省</option>
<option value="山东省">山东省</option>
<option value="湖北省">湖北省</option>
...
7-2:使用数组优化省市级联功能
a.数组用法的介绍
(1)创建数组 语法：var arrayObjectName=new Array(size);
(2)为数组元素赋值 var temp; temp=new Array("1","2","3");
(3)访问数组元素 var temp=new Array(3); temp[0]=1; temp[1]=2‘; temp[2]=3;
(4)数组的常用属性和方法 join 分隔符 sor()排序 默认升序 详细请看P188
语法：
for(variable in object){
code to be executed;
}
b.使用数组优化省市级联效果 详细请看P193
7-3:使用文字下标的数组再次优化 请看P196