12月17日——培训第24天

来源：互联网发布：恒源祥淘宝官方旗舰店编辑：程序博客网时间：2024/05/16 18:23

今天应该是javaScript、CSS样式表和DOM编程这一块儿了吧……

先是javaScript，主要是能够作出一级树状导航菜单，以及图片的拖动，和状态栏上显示时间的效果。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
上午课程开始：
JavaScript：
JavaScript是一种运行在客户端的脚本语言，可以嵌入在HTML文件中在浏览器上运行

JavaScript是1995年由NetScape提出，后由于得到Sun公司的支持，而成为一种类似Java语言的脚本语言

JavaScript是脚本语言，是解释执行的；java是编译解释执行的（先编译后解释）；
C语言是编译语言，编译后的语言形成机器语言，不能跨平台；解释是一句一句的执行解释，其实编译执行
的速度快于解释执行的速度。

JavaScript由于是解释执行，所以速度较慢，但是可以跨浏览器，但是针对不同的浏览器有不同的特性，
就像sql对数据库一样。

JavaScript还是一种弱类型语言。强类型语言比如Java；所有变量都必须指明类型的语言是强类型
但是JavaScript中不需要指明变量类型，直接拿过来就可以使用，JavaScript可以放在页面的任何位置

可以直接在HTML页面中调用JavaScript函数，也可以通过链接方式运行指定的函数
<script language=“javascript”>
alert(“Hello, World!”);
</script>

<a href=“javascript:alert(“You click a link!”)”>
click here!
</a>
　其中，alert是JavaScript内置的一个函数，用于弹出对话框。

JavaScript语法上与Java十分相似，不同的是JavaScript不是强类型，变量没有任何类型
变量：JavaScript不是强类型语言，变量可以不声明而直接使用。即使声明也不用指明类型

a = new Object(); //a就成为了一个对象
a.age = 1;
a['name'] = "javascript" ; //a这个对象就有了age和name两个属性！
alert(a.name); //打印a对象的name属性。
//在javascript中就是把对象当作数组了
a.getAge = function() {
return this.age ;
} ; //为对象a创建一个getAge方法

alert(a.getAge()); //调用了getAge，就可以得到a的age属性
</script>

JavaScript中函数有多种，如对象的方法、全局函数等等。这里所说的函数是指自定义函数。

定义函数用以下语句：
function 函数名([参数集]) {...[return[ <值>];]...}
其中，用在 function 之后和函数结尾的大括号是不能省去的，就算整个函数只有一句。

Ajax
异步的javascript和xml
Asynchronism JavaScript and XML
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
JavaScript与Java类似，也采用了对象化编程，对象包括基本对象和DOM对象

基本对象：可以将声明的变量视为对象，依其类型不同可以调用对象不同的属性和方法
DOM对象：页面内容也可以抽象成对象，依其种类的不同，也有不同的属性和方法

对象具有属性、方法和事件三大特征。
属性：决定了对象的特征，如长度、颜色等等。
方法：是对象可以做的事情，通过调用方法达到改变对象状态的目的
事件：能响应发生在对象上的事情

基本对象如下：
数字对象－－Number
字符串对象－－String
数组对象－－Array
“数学”对象－－Math
日期对象－－Date
全局对象－－Global
--------------------------------------------------
Number对象：
属性
MAX_VALUE ：Number.MAX_VALUE，返回“最大值”
MIN_VALUE ：Number.MIN_VALUE；返回“最小值”
NaN ：Number.NaN 或 NaN；返回“NaN”
NEGATIVE_INFINITY ：Number.NEGATIVE_INFINITY，返回负无穷大，比“最小值”还小的值。
POSITIVE_INFINITY ：Number.POSITIVE_INFINITY；返回正无穷大，比“最大值”还大的值。

方法
toString() ：<数值变量>.toString()；返回字符串形式。
　　　　　　若 a == 123；则 a.toString() == '123'。

alert(Number.MAX_VALUE) ;//最大值
window.document.write("<h1>"+Number.MIN_VALUE); //在浏览器的源文件中写入<h1>Number.MIN_VALUE

--------------------------------------------------------
String对象：
属性
　length ：<字符串对象>.length；返回该字符串的长度。

方法
charAt() 用法：<字符串对象>.charAt(<位置>)；返回该字符串位于第<位置>位的单个字符。注意：字符串中的一个字符是第 0 位。
charCodeAt() 用法：<字符串对象>.charCodeAt(<位置>)；返回该字符串位第<位置>位字符的 ASCII 码。
fromCharCode() 用法：String.fromCharCode(a, b, c...)；返回一个字符串，该字符串每个字符的 ASCII码
     由 a, b, c... 等来确定
indexOf() 用法：<字符串对象>.indexOf(<另一个字符串对象>[, <起始位置>])；该方法从<字符串对象>中查找<另一个字符串对象>
    （如果给出<起始位置>就忽略之前的位置），如果找到了，就返回它的位置，没有找到就返回“-1”。
    所有的“位置”都是从零开始的。
lastIndexOf() 用法：
    <字符串对象>.lastIndexOf(<另一个字符串对象>[, <起始位置>])；

split() 用法：<字符串对象>.split(<分隔符字符>)；返回一个数组，该数组是从<字符串对象>中分离开来的，
   <分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。
   例如：'1&2&345&678'.split('&')返回数组：1,2,345,678。
substring() 用法：<字符串对象>.substring(<始>[, <终>])；返回原字符串的子字符串，该字符串是
    原字符串从<始>位置到<终>位置的前一位置的一段。
substr() 用法：<字符串对象>.substr(<始>[, <长>])；返回原字符串的子字符串，该字符串是原字符串
     从<始>位置开始，长度为<长>的一段。
toLowerCase() 用法：<字符串对象>.toLowerCase()；返回把原字符串所有大写字母都变成小写的字符串。
toUpperCase() 用法：<字符串对象>.toUpperCase()；返回把原字符串所有小写字母都变成大写的字符串。

DOM:Document Object Model文档对象模型，将页面上所有的标签都抽象成javascript的对象
<script language="javascript">
function check()
{ //注意下面的还可以写为：document.forms[0].number.value
number = document.form1.number.value ; //用number来接这个字符串对象

  for(i=0;i<number.length;i++)
  {
   if(number.charAt(i)<'0'||number.charAt(i)>'9')
   {
    alert("您输入的字符串中含有非数字的字符");
    return ;
   }
  }
  alert("您输入的是数字！");
}
</script>

注意：在internet的高级选项中要选上“显示每个脚本的错误信息”，并且不要选中“禁用脚本调试。”

--------------------------------------------------------------
Array对象：

JavaScript中的数组对象与Java中的数组对象相同，也是一个对象的集合。
不同在于JavaScript中数组中的对象可以是不同类型的。
数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置，从零开始。

数组定义方法：
　var <数组名> = new Array();

多维数组定义：
var myArray = new Array(new Array(), new Array(), new Array(), ...);

其实这是一个一维数组，里边的每一个元素又是一个数组。调用这个“二维数组”的元素时：myArray[2][3] = ...;

a = new Array(4,5) //注意这可不是二维数组，而是一个一维数组里面有4和5两个元素

数组初始化方法：
　var <数组名> = new Array(<元素1>, <元素2>, <元素3>...);
　例如，var myArray = new Array(1, 4.5, 'Hi');

属性
　length 用法：<数组对象>.length。

方法
　join() 用法：<数组对象>.join(<分隔符>)；返回字符串，把数组元素用<分隔符>串起来。
　reverse() 用法：<数组对象>.reverse()；使数组中的元素顺序反过来。
　slice() 用法：<数组对象>.slice(<始>[, <终>])；返回原数组的子集，始于<始>，终于<终>。
　sort() 用法：<数组对象>.sort([<方法函数>])；

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

Math对象：
属性
E 返回常数 e (2.718281828...)。
LN2 返回 2 的自然对数 (ln 2)。
LN10 返回 10 的自然对数 (ln 10)。
LOG2E 返回以 2 为低的 e 的对数 (log2e)。
LOG10E 返回以 10 为低的 e 的对数 (log10e)。
PI 返回π（3.1415926535...)。
SQRT1_2 返回 1/2 的平方根。
SQRT2 返回 2 的平方根。

方法
abs(x) 返回 x 的绝对值。
acos(x) 返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。
asin(x) 返回 x 的反正弦值。
atan(x) 返回 x 的反正切值。
atan2(x, y) 返回复平面内点(x, y)对应的复数的幅角，用弧度表示，其值在 -π 到 π 之间。
ceil(x) 返回大于等于 x 的最小整数。
cos(x) 返回 x 的余弦。
exp(x) 返回 e 的 x 次幂 (ex)…………………………
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
日期对象：

Date 可以储存任意一个日期，从 0001 年到 9999 年，精确到毫秒数（1/1000 秒）。

在内部，日期对象是一个整数，它是从 1970 年 1 月 1 日零时正开始计算到日期对象所指的日期的毫秒数。
如果所指日期比 1970 年早，则它是一个负数。

所有日期时间，如果不指定时区，都采用“UTC”（世界时）时区，它与“GMT”（格林威治时间）在数值上是一样的。

定义日期对象：
　var d1 = new Date;
　var d2 = new Date();
　d1和d2的初始值都是当前时间。
如果要自定初始值，可以用：
　var d1=new Date(99, 10, 1);???? //99 年 10 月 1 日var d2=new Date(‘Oct 1, 1999’); //同上

date=new Date;
document.write(date.getYear()+"年"+date.getMonth()+"月"+date.getDate()+"日"+date.getHours()+"时"+
date.getMinutes()+"分"+date.getSeconds()+"秒")
//上面的语句静态的显示时间，但是如何动态的显示时间呢？？？

//下面的代码动态的显示时间

//showTime()执行的时候是在底下的状态栏中显示时间！下面的setInterval是每隔1000毫秒重新调用showTime方法。
function showTime()
{
date=new Date();
window.status=date.getYear()+"年"+date.getMonth()+"月"+date.getDate()+"日"+date.getHours()+"时"+
date.getMinutes()+"分"+date.getSeconds()+"秒"
}

showTime();
window.setInterval(showTime,1000); //这里面的showTime是绝对不可以加括号的！！！！

window.setTimeout(showTime,3000);//setTimeout隔3秒后执行一次showTime函数，但是只执行一次！
//上面的setInterval是每隔1秒都要执行一次showTime函数！

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

全局对象是一个虚拟的对象，通常用Global代表它
JavaScript有一些全局的函数，通常认为是Global对象的，调用这些方法时直接写名字就可以了，无须用对象名限定

属性
　NaN 非数字。

方法
eval() 把括号内字符串当作标准语句或表达式来运行。
isFinite() 如果括号内的数字是“有限”的（介于 Number.MIN_VALUE 和 Number.MAX_VALUE 之间）返回 true；否则false。
isNaN() 如果括号内的值是“NaN”则返回 true 否则返回 false。
parseInt() 把括号内的内容转换成整数。如果字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”。
parseFloat() 转换浮点数，其它同上

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
正则表达式：

正则表达式是一个描述字符模式的对象。
JavaScript的RegExp对象和String对象定义了使用正则表达式来执行强大的模式匹配和文本检索与替换函数的方法
可以使用一个RegExp()构造函数来创建RegExp对象，也可以将正则表达式直接包含在一对斜杠(/)之间
var pattern = new RegExp("s$");
var pattern = /s$/;

所有的字母字符和数字都是按照字面意思与自身相匹配
以反斜杠(/)开头的转义序列支持某些非字母字符.例如,序列 “/n” 在字符串中匹配的是一个直接量换行符
/ f 换页符    / ? 一个 ? 直接量
/ n 换行符     / | 一个 | 直接量
/r 回车    / ( 一个 ( 直接量
/ t 制表符     / ) 一个 ) 直接量
/ v 垂直制表符    / [ 一个 [ 直接量
/ / 一个 / 直接量 / ] 一个 ] 直接量
/ / 一个 / 直接量 / { 一个 { 直接量
/ . 一个 . 直接量    / } 一个 } 直接量
/ * 一个 * 直接量    / + 一个 + 直接量

将单独的直接符放进中括号内就可以组合成字符类
一个字符类和它所包含的任何一个字符都匹配,所以正则表达式 / [abc] / 和字母 “a” , “b” , “c” 中的任何一个都匹配
定义否定字符尖时,要将一个 ^ 符号作为从左中括号算起的第一个字符

[...] 位于括号之内的任意字符
[^...] 不在括号之中的任意字符
. 除了换行符之外的任意字符,等价于[^/n]
/w 任何单字字符, 等价于[a-zA-Z0-9]
/W 任何非单字字符,等价于[^a-zA-Z0-9]
/s 任何空白符,等价于[/ t / n / r / f / v]
/S 任何非空白符,等价于[^/ t / n / r / f / v]
/d 任何数字,等价于[0-9]
/D 除了数字之外的任何字符,等价于[^0-9]
[/b] 一个退格直接量(特例)

{n, m} 匹配前一项至少n次,但是不能超过m次
{n, } 匹配前一项n次,或者多次
{n} 匹配前一项恰好n次
? 匹配前一项0次或1次,也就是说前一项是可选的. 等价于 {0, 1}
+ 匹配前一项1次或多次,等价于{1,}
* 匹配前一项0次或多次.等价于{0,}

number = document.forms[0].number.value;
rg=//d+/; //表示一个或多个数字
if(rg.exec(number)) //如果number满足rg定义的正则表达式的话
{//注意上面也可以写为number.match(rg)!!!
alert("输入的是一个数字！");
}
else
{
alert("输入的不是一个数字！");
}

假如对电话号码进行校验的话，是8位电话号码，并且都得是数字
rg=//d{8}/

| 选择.匹配的要么是该符号左边的子表达式,要么它右边的子表达式
(...) 分组.将几个项目分为一个单元.这个单元可由 *、+、？和|等符号使用,而且还可以记住和这个组匹配的字符以供此后引用使用
/n 和第n个分组所匹配的字符相匹配.分组是括号中的子表达式(可能是嵌套的).分组号是从左到右计数的左括号数

/ab|cd|ef/
//d{3}|[a-z]{4}/
/([Jj]ava([Ss]cript)) /sis /s (fun/w*) /
/( [' "] ) [^ ' "] * /1/

假如判断手机号码的话，必须11位，以13或是15开头

rg = /^(13|15)/d{9}$/ //注意：开始的是^，最后的一个$表示结束
      //如果不加上前后两个标识位的话，那么类似于djfaskl13617890142dfjska
      //也是符合条件的！！
如果要求写个邮箱地址的正则表达式呢？

rg = /^(/w)+@(/w)+/.(com|org)$/
//注意上面的.一定别忘记加上转义字符

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

下午讲DOM
DOM是Document Object Model的缩写，即文档对象模型
DOM将HTML页面中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events) 。
通过DOM 可以在JavaScript中操纵HTML页面的内容

有些DOM对象在浏览器中只有一个，因此他们的名字是惟一确定的，比如navigator
大部分DOM对象是不确定不惟一的，因此需要在HTML标记中给他们起名，如<form>、<input>等等
DOM对象同基本对象一样，也有属性、方法和事件，尤其是DOM对象对事件的响应是JavaScript中尤为重要的部分

再来说一下创建对象：
原始的创建方法：
obj = new Object();
obj.age = 1 ;
obj.getAge = showTime;

另外一种创建方法,类似于java的类创建
function User(age,name)
{
this.age=age ;
this.name=name ;
this.getAge=function(){return this.age;}
}

user = new User(1,"javascript");
alert(user.getAge());

或者：user = {
   age:1,
   name:"javascript"
  };
alert(user.name);

创建对象方法：
1 直接使用Object可以new出一个对象来，定义属性和方法可以直接通过"."来指定属性直接赋值，
方法将函数的名字赋给一个方法名即可
user = new Object(); //创建一个对象
user.age = 12 ; //定义属性并赋值
user.setAge = function(a){ //定义方法

this.age=a ;
}

缺点是：不可以再次复制，下次如果再想创建相同功能的对象，还需要
重新声明。

2 定义一个函数，通过new这个函数名来创建新的对象。
定义属性使用this.<属性名>=<值>
定义方法使用this.<方法名>=<函数名>

function User(age) //定义一个函数，相当于java中的构造函数
{
this.age = age ; //定义属性
this.setAge = function(a){this.age=a;}; //定义方法
}

user = new User(12); //创建对象的方法

3 JSON方法，通过键值对来定义：
以：分隔属性、值，或者是方法、函数名

user = {
age:1,
setAge:function(a){this.age=a;}
}

和第一种方法一样，它也不可复制

－－－－－－－－－－－－－－－－－－－－－－－－－－－
浏览器对象：
navigator反映了当前浏览器的资料

属性
appCodeName 返回浏览器代号，一般返回 ‘Mozilla’。
appName 返回浏览器名。IE 返回 ‘Microsoft Internet Explorer’，NN 返回 ‘Netscape’。
appVersion 返回浏览器版本。
platform 返回浏览器的操作平台。
userAgent 返回以上全部信息。
javaEnabled() 当前浏览器是否允许 Java。

document.write(navigator.appCodeName+"<br>");
document.write(navigator.appName+"<br>");
document.write(navigator.appVersion+"<br>");
document.write(navigator.platform+"<br>");
document.write(navigator.userAgent+"<br>");

上面的语句可以得到属性信息。
－－－－－－－－－－－－－－－
屏幕对象：
screen反映了当前用户的屏幕设置，只有属性没有方法（注意是屏幕设置，而不是浏览器）

属性
width 屏幕的宽度（像素数）。
height 屏幕的高度。
availWidth 屏幕的可用宽度（除去了一些不自动隐藏的类似任务栏的东西所占用的宽度）。
availHeight 返回屏幕的可用高度。
colorDepth 返回当前颜色设置所用的位数 - 1：黑白；8：256色；16：增强色；24/32：真彩色

document.write(screen.width+"<br>");
document.write(screen.height+"<br>");
document.write(screen.availWidth+"<br>");
document.write(screen.availHeight+"<br>");
document.write(screen.colorDepth+"<br>");

-----------------------------
窗口对象（很重要！！！）
window是DOM最顶层对象，描述一个浏览器窗口。引用它的属性和方法时，不需用“window.xxx” ，而直接使用“xxx”。
navigator与screen对象与window对象是平级的，其余所有对象都是这个对象的属性，或者是属性的属性。例如，调用一个form，可以写成：
　window.document.formName或
　document.formName

属性
name 窗口的名称，由打开它的连接（<a target=“...”>）或框架页（<frame name=“...”>）或某调用的 open() 方法决定。
status “状态栏”所显示的内容。
opener 打开本窗口的窗口对象。
self 窗口本身，如：
　　　<a href="javascript:self.close()">关闭窗口</a>。
parent 窗口所属的框架页对象。
top 占据整个浏览器窗口的最顶端的框架页对象。
history 历史对象location 地址对象
document 文档对象

例：<a href="form.html" target="_blank">form</a>//将会在新的窗口中打开form.html
<a href="javascript:window.opener.document.write('hello!')">dfska</a>
上面这一句表明在form.html中单击dfska链接后可以将打开它的那个窗口重写为hello

－－－－－－－－－－－－－－－－－－－－－－－－－－
event对象

event代表事件的状态，例如事件发生的元素、鼠标的位置等等，event对象只在事件过程中才有效。
尽管所有事件属性都可通过所有的 event 对象访问，但是在某些事件中某些属性可能无意义。
<BODY onmousemove="window.status = 'X=' + window.event.x + ' Y=' + window.event.y">

altKey
检索ALT键的当前状态
可能的值 true为关闭
false为不关闭

button
检索按下的鼠标键
可能的值： 0 没按键
1 按左键
2 按右键
3 按左右键
4 按中间键
5 按左键和中间键
6 按右键和中间键
7 按所有的键

//上面的onmousedown禁止了右键的使用！
//

</body>

例：假如我按住一副图片然后可以把它拖动的话，该如何去做？
需要使用div图层，里面有一个属性叫做style
如果定义了<div id=mydiv></div>
之后就可以调用mydiv.style.position=absolute;//只有把位置设为absolute，才可以指定它的值
mydiv.style.left
            right
            top
   bottom
设为absolute后，就可以改动上面的四个值了
所以用div层把图片包起来

当event.Button是1的时候（左键按下的时候），让div的left和top跟着鼠标变动，
鼠标的位置可以通过event.x和event.y来设置

div还有一个特性：div.innerHTML,可以使用javaScript动态添加html代码
比如div.innerHTML="<img src=aa.jpg>"

setCapture():仅让当前div对象捕捉鼠标事件
releaseCapture():归还鼠标事件给所有的对象

例：

<body>
<div id="my">
<img src="aa.jpg">
</div>
<script language="javascript">
my.style.position="absolute";
my.style.left=100;
my.style.top = 100;
</script>

</body>

如何让图片移动呢？？
我写的方法：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

</BODY>
</HTML>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

窗口对象：

方法
open() 打开一个窗口。
　open(<URL字符串>, <窗口名称字符串>, <参数字符串>);
1、<URL字符串>：打开页面URL
2、<窗口名称字符串>：窗口名称（window.name），可使用‘_top’、‘_blank’等内建名称。
3、<参数字符串>：窗口样貌。如打开普通窗口则留空。
例：打开一个 400 x 100 的窗口：
open('','_blank','width=400,height=100,menubar=no)
open() 方法返回打开的窗口对象，可以通过这个对象控制窗口。

<a href="javascript:window.open('form.html','dd','width=400,height=300,scrollbars=yes'">
window.operner.close()方法是用来关闭父窗口的。

close()?关闭一个已打开的窗口。
blur()?使窗口变为“非活动窗口”。
focus()?使窗口变为“活动窗口”。
scrollTo()? [<窗口对象>.]scrollTo(x, y)；使窗口从左上角数起的(x, y)点滚动到窗口的左上角。
scrollBy()? [<窗口对象>.]scrollBy(deltaX, deltaY)；使窗口向右滚动 deltaX 像素，
向下滚动 deltaY 像素。如果取负值，则向相反的方向滚动。

resizeTo()?
　[<窗口对象>.]resizeTo(width, height)；
　使窗口调整到宽 width 像素，高 height 像素。
resizeBy()?
　[<窗口对象>.]resizeBy(deltaWidth, deltaHeight)；
　宽调整 deltaWidth 像素，高调整deltaHeight 像素。
setTimeout(expression,time):在一定时间后自动执行expression描述的代码,使用time设置时间,单位是毫秒，返回是一个定时器对象?
clearTimeout(timer):取消以前的定时设置.

//注意下面的代码是最常用的多长时间后跳转的典型例子，每隔一秒钟会多画一个点！
<meta http-equiv="refresh" content="4;url=想要跳转的页面.htm">
function closeC()
{
content.innerHTML=content.innerHTML+'<font color=red>>.</font>' ;
}

setInterval(closeC,1000);

<div id=content>三秒后跳转</div>
--------------------------------------------
window的open方法、计时方法(setTimeout、setInterval)、close()、blur方法
alert()、confirm和prompt方法必须掌握

form表单中：
如果<form onsubmit="return false">则表单永远不会提交！

一般情况下确认表单提交，应该按照如下的代码：
<script language="javascript">
function check()
{
  res = confirm("是否确认删除？");
  if(res)
  {
   return true ;
  }
  else
  {
   return false ;
  }
}
</script>

当然也可以这么写：<form onsubmit="return confirm('是否确认删除？')">
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

历史对象：
history：

back()后退（要求掌握）
forward()前进
go()去往历史中的某一页

<a href="form.html">open window</a>

<a href="javascript:history.back()">返回</a>//返回前一个页面

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
地址对象location
方法（掌握reload就可以了）
reload() 相当于按浏览器上的“刷新”(IE)或“Reload”(Netscape)键。
replace() 打开一个 URL，并取代历史对象中当前位置的地址。用这个方法打开一个 URL 后，
按下浏览器的“后退”键将不能返回到刚才的页面。

<a href="javascript:location.reload()">刷新</a>
注意：这个刷新不是整个页面的刷新，而只是本部分页面的刷新！
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
文档对象：
document 描述当前窗口或指定窗口对象的文档。它包含了从<head>到</body>的内容。

document方法
open() 打开文档以便 JavaScript 能向文档的当前位置写入数据。通常不需要用这个方法，
在需要的时候 JavaScript 自动调用。
write(); writeln() 向文档写入数据，所写入的会当成标准文档 HTML 来处理。writeln() 换行,只是在 HTML 中换行。
clear() 清空当前文档。
close() 关闭文档。如果用了 write[ln]() 或 clear() 方法，就一定要用 close() 方法来保证所做的更改能够显示出来。
如果JavaScript 插在文档中，就不必使用该方法。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

表单对象：

如何用一个button来提交？？

-----------------------------------------------
style="cursor:hand" 在元素中加入这个语句后，鼠标移动到那个元素上后就会变成小手了！

晚上作业：所有的校验，校验成功的话还要判断一下是否提交！！！（加上email和手机号码，也就是写正则表达式）
还有那个树状的菜单栏代码编写。

还有，如果改变了用户名（输出1、2、3），让下拉列表框也跟着变！是上述过程的逆过程。
还有，再看一下那个图片拖动的源代码是怎么弄的！

先看张老师书上的第四章，明天会讲！

还有一点，那个选课的源代码今天把它调通！

－－－－－－－－－－－－－－－－－－－－－－－－－－－－

验证表单完整代码如下：

  checkLength = document.form1.hobby.length ;//复选框的个数
  reg1 = /^/d+$/ ;
  reg2 = /^(13|15)/d{9}$/ ;
  reg3 = /^(/w)+@(/w)+/.(com|org|net)$/ ;
//************************************************************************

  if(name.length==0||name=="")
  {
   alert("用户名不可以为空！！");
   return false;
  }
  for(i = 0 ; i < name.length ; i ++)
  {
   if(name.charAt(i)<'9'&&name.charAt(i)>'0')
   {
    alert("用户名中不可以包含数字！！！");

    return false;
   }
  }
//************************************************************************
  if(password.length==0||password=="")
  {
   alert("密码不可以为空！！");
   return false;
  }

  if(password.length < 6)
  {
   alert("密码长度不可以小于6！");

   return false;
  }

  if(password.length > 12)
  {
   alert("密码长度不可以大于12");

   return false;
  }

  if(password != password2)
  {
   alert("您两次输入的密码不一样！！");
   return false ;
  }
//************************************************************************
  if(!reg1.exec(age))
  {
   alert("您输入的年龄中包含非法字符！");
   return false ;
  }

  if(age > 120 || age < 1)
  {
   alert("您输入的年龄大小与实际情况严重不符！");
   return false ;
  }
//************************************************************************
  if(!reg2.exec(identity))
  {
   alert("您输入的手机号码非法！！");
   return false ;
  }
//************************************************************************

  if(!reg3.exec(mail))
  {
   alert("您输入的邮件地址非法！！");
   return false ;
  }
//************************************************************************

  for(var i = 0 ; i < checkLength ; i ++)
  {
   if(document.form1.hobby[i].checked)
   {
    flag = 1;
    break ;
   }

  }

  if(flag == 0)
  {
   alert("您没有选择爱好！！");
   return false ;
  }

//************************************************************************
  if(confirm("您的所有输入均符合要求，是否确认提交表单？？"))
  {
   alert("表单已经成功提交！");
   return true ;
  }
  else
  {
   return false ;
  }
}

function showTime()
{
  date=new Date();
  window.status=date.getYear()+"年"+date.getMonth()+"月"+date.getDate()+"日"+date.getHours()+"时"+
    date.getMinutes()+"分"+date.getSeconds()+"秒"
}

showTime(); //showTime()执行的时候是在底下的状态栏中显示时间！下面的setInterval是每隔1000毫秒重新调用showTime方法。
window.setInterval(showTime,1000); //这里面的showTime是绝对不可以加括号的！！！！
</script>

</HEAD>

<BODY>
<form action="Practice.html" method="post" name="form1" onSubmit="return check()"> //注意这里的return可是千万不能少啊！
  <h1 align="center">请您输入如下的用户注册信息！</h1>
  <table align="center" height="300" width="500" border="1">

   <tr>
    <td>姓名</td>
    <td><input type="text" name="username" size=20></td>
   </tr>

   <tr>
    <td>密码</td>
    <td><input type="password" name="password" size=20></td>
   </tr>

   <tr>
    <td>请您再次输入密码</td>
    <td><input type="password" name="password2" size=20></td>
   </tr>

</table>

------------------------------------------------------------
一层树型结构的源代码如下：

<BODY>

</script>

<div id="parent">
  <img id=change src="tminus.gif" onclick="show()" style="cursor:hand">
  <img src="icon_folderopen.gif">
  导航栏
</div>

<div id="child1">
  <img src="t.gif">
  <img src="i.gif">
  java编程思想
</div>

<div id="child2">
  <img src="t.gif">
  <img src="i.gif">
  java语言设计
</div>

<div id="child3">
  <img src="t.gif">
  <img src="i.gif">
  java数据结构和算法分析
</div>

<div id="child4">
  <img src="t.gif">
  <img src="i.gif">
  jsp和servlet
</div>

<div id="child5">
  <img src="t.gif">
  <img src="i.gif">
  深入浅出Java虚拟机
</div>

</div>

</BODY>
</HTML>