第 11 章综合实训

第 11章综合实训

JavaScript 是 Web 页面中的一种脚本编程语言，也是一种通用的、跨平台的、基于对象和事件驱动并具有安全性的脚本语言。它不需要进行编译，而是直接嵌入在 HTML 页面中，把静态页面转变成支持用户交互并响应相应事件的动态页面。通过前面 10 章的学习，相信读者已经对 JavaScript 有了深刻的认识和掌握。本章将通过 10 个实例来综合运用和扩展前面的知识，使读者进一步掌握所学知识。

√

本章目录

实训 1 JavaScript 基本操作实训 2 HTML 文档基本操作实训 3 JavaScript 语言基础操作实训 4 JavaScript 基本语句的应用实训 5 函数的应用实训 6 对象编程的操作实训 7 事件处理的操作实训 8 浏览器对象的应用实训 9 css+div 技术的应用实训 10 Ajax 技术的应用

√√√

√√√

√√

√

实训 1 JavaScript 基本操作

（ 1 ）熟练掌握 HTML 文件中编写 JavaScript 程序的基本操作。（ 2 ）基本掌握 Dreamweaver 编写工具。

【实训目的】


编写一个 JavaScript 程序，实现在页面上输出“欢迎访问明日公司主页”，效果如图 11.1 所示。

【实训内容】


（ 1 ）打开 Dreamweaver ，在“创建新项目”列中选择“ HTML” 。（ 2 ）自动创建 HTML 模板，将 <title>…</title> 标记间的内容改为“欢迎页”。（ 3 ）在 <body>…</body> 标记间编写如下代码，实现在页面上输出“欢迎访问明日公司主页”。<script language="javascript">

document.write("<HR>");

document.write("<h1> 欢迎访问明日公司主页 </h1>");

document.write("<HR>");

</script>

（ 4 ）选择“文件” /“ 在浏览器中预览” /“IExplore 6.0” ，预览网页。

【实训步骤】

实训 2 HTML 文档基本操作

（ 1 ）熟练掌握 HTML 文档中的常用标记。（ 2 ）熟练应用框架进行网页布局。

【实训目的】


（ 1 ）应用 HTML 文档中的常用标记制作一个在线音乐网站主页，要求主页应用框架实现。（ 2 ）在各个子页应用 HTML 文档中的表格标记，段落标记、文字标记、列表标记和图像标记等来显示个人网站的 LOGO ，图像，音乐歌词等相关信息。（ 3 ）单击主页歌名超级链接时，显示歌词信息，并将歌词显示在指定的框架页。（ 4 ）在线音乐网主页页面美观大方，以不同大小、不同颜色、不同样式和不同格式的网页信息展现给读者。效果如图 11.2 所示。

【实训内容】


（ 1 ）打开 Dreamweaver ，在“创建新项目”列中选择“ HTML” 。（ 2 ）自动创建 HTML 模板，将文件保存为 index.html 。（ 3 ）在 index.html 页中应用框架标记实现在音乐网主页的基本框架结构。框架页分别保存为 top.

html 、 left.html 、 main.html 和 bottom.html ，效果如图 11.3 所示。

【实训步骤】


首页 index.html 实现框架的完整代码如下。<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title> 在线音乐网 </title></head><frameset rows="220,*" frameborder="no" border="0" framespacing="0"> <frame src="top.html" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" /> <frameset rows="*,159" cols="*" framespacing="0" frameborder="no" border="0">

<frameset rows="*" cols="430,*" framespacing="0" frameborder="no" border="0">

<frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" />

<frame src="main.html" name="mainFrame" id="mainFrame" /></frameset>

<frame src="bottom.html" name="bottomFrame" scrolling="No" noresize="noresize" id="bottomFrame" /> </frameset></frameset><noframes><body bgcolor="#CCFF33"></body></noframes></html>

【实训步骤】


（ 4 ）在 top.html 页中应用图像标记 <img> 调用在线音乐网的 Banner 广告，代码如下。<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td align="center"><img src="images/bg.JPG" width="768" height="220" /></td>

</tr>

</table>

（ 5 ）在 bottom 页中应用表格标记 <table> 、换行标记 <br> 输出版权信息，代码如下。<table width="800" border="0" align="center" cellpadding="0" cellspacing="0">

<tr>

<td height="70" align="center" bgcolor="#FFCC33"> 我行我秀在线音乐网 w

ww.mrbccd.com<br/>

<br/>

本站请使用 IE 6.0 或以上版本 1024*768 为最佳分辨率 </td>

</tr>

</table>

【实训步骤】


（ 6 ）在左侧导航页 left.html 页中，应用标题标记、列表标记和超链接标记等实现歌曲名称超级链接。

<table width="180" border="0" align="right" cellpadding="0" cellspacing="0"> <tr> <td width="206" height="507" valign="top" bgcolor="#FFFFCC">

<br><br><h4> 最新主打歌 </h4><ul type="circle">

<li><a href="music.html" target="mainFrame"> 小草 </a></li><li><a href="music.html" target="mainFrame"> 你是我的天使 </a></li><li><a href="music.html" target="mainFrame"> 我的爱人 </a></li><li><a href="music.html" target="mainFrame"> 缘没了爱依旧 </a></li><li><a href="music.html" target="mainFrame"> 花儿谢了 </a></li><li><a href="music.html" target="mainFrame"> 蓝色玫瑰 </a></li><li><a href="music.html" target="mainFrame"> 你是我伤口永远的痛 </a></li>

</ul><br><br><h4> 经典老歌 </h4><ol type="A" start="1">

<li><a href="music.html" target="mainFrame"> 下辈子你会爱我吗 </a></li><li><a href="music.html" target="mainFrame"> 逃避你的眼神 </a></li><li><a href="music.html" target="mainFrame"> 没来由的爱 </a></li><li><a href="music.html" target="mainFrame"> 一生情 </a></li><li><a href="music.html" target="mainFrame"> 爱没完没了 </a></li><li><a href="music.html" target="mainFrame"> 我是最幸福的人 </a></li><li><a href="music.html" target="mainFrame"> 我的爱天作证 </a></li><li><a href="music.html" target="mainFrame"> 你是我永远的爱人 </a></li>

</ol></td>

</tr></table>

【实训步骤】


为歌曲名称添加文字超级链接，单击歌曲名称，打开歌词链接文件 music.html ，并将 music.html页中的内容显示在名称为“ mainFrame” 的框架内。在歌词信息页 music.html 中，应用图像标记显示音乐图标，应用表格标记、段落标记、换行标记等显示歌词信息，完整代码如下。<table width="600" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td height="89" align="center" valign="top" bgcolor="#FFFFFF"><br /> <br /> <h2><img src="images/music.JPG" width="298" height="70" /><br /> <br /> </h2> </td> </tr> <tr> <td height="249" align="center" valign="top" bgcolor="#FFFFFF"><p class="STYLE1"> 写信告诉我今天海是什么颜色 <br /> 夜夜陪著你的海心情又如何 <br /> …… 为何你明明动了情却又不靠近 </p> <p class="STYLE1"> 听海哭的声音 <br /> 叹息著谁又被伤了心却还不清醒 <br /> …… 说你在离开我的时候是怎样的心情</td> </tr></table>

【实训步骤】


（ 7 ）在信息主显示页 main.html 页中，应用表格标记、段落标记、换行标记、标题标记等显示歌词信息。<table width="600" border="0" align="left" cellpadding="0" cellspacing="0"> <tr> <td height="89" align="center" valign="top" bgcolor="#EFFBA5"><br /> <br /> <h2> ==== 音乐欣赏 ====</h2> </td> </tr> <tr> <td height="249" align="center" valign="top" bgcolor="#EFFBA5"><p class="STYLE1"> 写信告诉我今天海是什么颜色 <br/> 夜夜陪著你的海心情又如何 <br />…… 为何你明明动了情却又不靠近 </p> <p class="STYLE1"> 听海哭的声音 <br /> 叹息著谁又被伤了心却还不清醒 <br />…… 说你在离开我的时候是怎样的心情 <br /></td> </tr></table>（ 8 ）选择“文件” /“ 在浏览器中预览” /“IExplore 6.0” ，预览在线音乐网站，在主页单击歌曲名称超级链接，在 mainFrame 框架内显示歌词内容。

【实训步骤】

实训 3 JavaScript 语言基础操作

（ 1 ）熟练掌握 JavaScript 常用的数据类型。（ 2 ）熟练掌握定义变量的方法，熟悉运算符和表达式的应用。（ 3 ）熟悉三目运算符的应用。

【实训目的】


编写一个 JavaScript 程序，通过三目运算符来返回用户输入的年份是否为闰年，如图 11.4 所示。

【实训内容】


（ 1 ）打开 Dreamweaver ，在“创建新项目”列中选择“ HTML” 。（ 2 ）自动创建 HTML 模板，将 <title>…</title> 标记间的内容改为“判断指定的年份是否为闰年”，将文件保存为 index.html 。（ 3 ）在 <body>…</body> 标记间编写如下代码，应用三目运算符编写判断指定年份是否为闰年的 JavaScript 代码。<script language="javascript">

function leapyear(){

var now = new Date();

var years = now.getFullYear(document.form1.txt_year.value);

var str;

var years = document.form1.txt_year.value;

var result =(years%4==0 && years%100!=0)||(years%400==0)?years+" 是闰年 ":years+" 不是闰年 ";

document.form1.txt_yearresult.value = result;

}

</script>

【实训步骤】


<form name="form1" method="post" action=""><table width="392" height="101" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#009900" bgcolor="#CCFF00"> <tr> <td height="25" colspan="2" align="center" class="STYLE5"> 判断指定的年份是否为闰年 </td> </tr> <tr> <td width="152" height="30" bgcolor="#FFFF99"><span class="STYLE3"> 请输入一个四位数的年份： </span></td> <td width="216" bgcolor="#FFFF99"><table width="196" height="29" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="136"><input name="txt_year" type="text" value="2009" size="20"> </td> <td width="60"> <input type="button" name="Button" value=" 计算 " onClick="leapyear();"></td> </tr> </table> </td> </tr> <tr> <td height="37" colspan="2" align="center"> <input name="txt_yearresult" type="text" value="" size="51"> </td> </tr></table>

（ 4 ）选择“文件” /“ 在浏览器中预览” /“IExplore 6.0” ，预览网页，在文本框中输入 4位数的年份，单击“计算”按钮，判断指定的年份是否为闰年。

【实训步骤】

实训 4 JavaScript 基本语句的应用

熟练掌握 JavaScript 中 if条件语句和 for循环语句的应用。

【实训目的】


编写一个 JavaScript 程序，应用 JavaScript 脚本中的 if 语句和 for循环语句实现复选框的全选和反选。单击“全选 /”复选框可以实现快速选择当前页的所有用户信息；当“全选 /反选”复选框处于选中状态时，再次单击“全选 /”复选框可以实现快速在原有用户选择的状态进行反项选择，效果如图 11.5 、图 11.6 所示。

【实训内容】


（ 1 ）打开 Dreamweaver ，在“创建新项目”列中选择“ HTML” 。（ 2 ）自动创建 HTML 模板，将 <title>…</title> 标记间的内容改为“应用 if 语句和 for循环语句实现复选框的全选和反选”，将文件保存为 index.html 。（ 3 ）在 <head>…</head> 标记间编写 JavaScript 脚本。应用 if 语句和 for循环语句实现复选框的全选和反选。<script language="javascript">function CheckAll(elementsA,elementsB){

var len = elementsA;if(len.length > 0){

for(i=0;i<len.length;i++){elementsA[i].checked = true;

}if(elementsB.checked ==false){

for(j=0;j<len.length;j++){elementsA[j].checked = false;

}}

}else{

len.checked = true;if(elementsB.checked == false){

len.checked = false;}

}}</script>

【实训步骤】


（ 4 ）在 <body>…</body> 标记间添加用户信息管理页面表单元素的 HTML 代码。<form name="deluser" method="post"><table width="600" border="1" align="center" cellpadding="3" cellspacing="2" bordercolor="#FFFFFF" bordercolorlight="#FFFFFF" bordercolordark="#336699" bgcolor="#CCFF33"> <tr> <td width="7%" height="27" align="center" nowrap style="color:black;"> 选项 </td> <td width="21%" height="27" align="center" nowrap style="color:black;"> 用户名称 </td>

<td width="22%" height="27" align="center" nowrap style="color:black;"> 密码 </td><td width="30%" height="27" align="center" nowrap style="color:black;"> 注册时间 </

td></tr>

<tr> <td height="27" align=center nowrap bgcolor="#FFFFCC"> <input type="checkbox" name="ChkBox" value="130008100001" style="border:0;"> </td>

<td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;"> 纯净水</td>

<td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">chunjingshui666</td>

<td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">2008-11-14 </td>

</tr>

【实训步骤】


<tr> <td height="27" align=center nowrap bgcolor="#FFFFCC"> <input type="checkbox" name="ChkBox" value="130008100008" style="border:0;"> </td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;"> 小草 </td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">xiaocao888</td> <td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">2008-12-10 </td></tr> <tr> <td height="27" align=center nowrap bgcolor="#FFFFCC"> <input type="checkbox" name="ChkBox" value="130008100066" style="border:0;"> </td>

<td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;"> 城市中的狼 </td><td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">city12345</td><td height="27" align=center nowrap bgcolor="#FFFFCC" style="color:black;">2009-2-6 </td></tr>

</table><table width="600" border="0" cellspacing="0" cellpadding="0" align=center><tr><td width="9%" height="40" align=center nowrap><input name="Chkall" type="checkbox" style="border:0;" onClick="CheckAll(this.form.ChkBox,this.form.Chkall)"></td><td width="91%" align=left nowrap style="color:black;">[ 全选 / 反选 ]</td></tr></table></form>（ 5 ）选择“文件” /“ 在浏览器中预览” /“IExplore 6.0” ，预览网页。

【实训步骤】

实训 5 函数的应用

熟练应用 JavaScript 脚本进行自定义函数，并掌握函数的调用方法。

【实训目的】


编写一个 JavaScript 程序，调用自定义函数来限制发送祝福的文字数量，效果如图 11.7 所示。

【实训内容】


（ 1 ）打开 Dreamweaver ，在“创建新项目”列中选择“ HTML” 。（ 2 ）自动创建 HTML 模板，将 <title>…</title> 标记间的内容改为“调用自定义函数来限制发送祝福的文字数量”，将文件保存为 index.html 。（ 3 ）在 <head>…</head> 标记间编写 JavaScript 脚本。实现用户输入文字信息字符数量的计算，其中，英文、数字、空格占 1 个字符，汉字占两个字符。<script language="javascript">function textCounter(field, countfield, maxlimit) { // 文本信息限制在 150个字符内 var StrValue = field.value; var ByteCount = 0;

var StrLength = field.value.length;for (i=0;i<StrLength;i++){ // 计算输入的字符个数，英文数字占 1

个字符，汉字占两个字符ByteCount = (StrValue.charCodeAt(i)<=256) ? ByteCount + 1 : ByteCou

nt + 2;}

if(ByteCount<=maxlimit){strtemp=StrValue;countfield.value = maxlimit - ByteCount;

}else{document.getElementById('content').innerHTML = strtemp;

}}</script>

【实训步骤】


（ 4 ）在 <body>…</body> 标记间添加用户信息管理页面表单元素的 HTML 代码。<form id="form1" name="form1" method="post" action="wishingadd_ok.php">

<span style="margin-left:22px"> 您还能输入<input style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDT

H: 0px; BORDER-RIGHT-WIDTH: 0px; color:#CC0099" readonly="readOnly" maxlength="3" size="3"

value="150" name="freeLength" />

个字符的祝福信息，发送给你最想祝福的人吧！ <br />

<textarea name="content" id="content" cols="66" rows="6" onkeydown="textCounter(this.form.content,t

his.form.freeLength,150)" onkeyup="textCounter(this.form.content,this.form.freeLength,150)" style="ba

ckground:url('images/mrbccd.gif')"></textarea>

</span>

</form>


【实训步骤】

实训 6 对象编程的操作

（ 1 ）熟练掌握 JavaScript 中对象的创建及使用。（ 2 ）熟练应用 JavaScript 中的日期对象、字符串对象、数学对象和数组对象。

【实训目的】


编写一个 JavaScript 程序，本实例主要应用日期对象、字符串对象、数学对象和数组对象来获取指定日期的相关信息，并用 Lunar 对象将指定日期转换成相应的农历日期。效果如图 11.8 所示。

【实训内容】


（ 1 ）打开 Dreamweaver ，在“创建新项目”列中选择“ HTML” 。（ 2 ）自动创建 HTML 模板，将 <title>…</title> 标记间的内容改为“带农历的日历”，将文件保存为 index.html 。（ 3 ）在页面中添加一个表格，代码如下：<CENTER>

<FORM name=CLD>

<TABLE>

<TR>

<TD align=middle>

<TABLE border=1 cellpadding="0" cellspacing="0" bordercolordark="#FFFFFF"

bordercolor="#ffffff" bordercolorlight="#EEEEEE">

<TR bgcolor="#006600">

<TD colSpan=7><FONT color=#ffffff style="FONT-SIZE: 9pt"> 公历 <SELECT name=SY onchange=changeCld() style="FONT-SIZE: 9pt">

JavaScript 代码在 Menu 组件中动态添加下拉菜单（年）：<SCRIPT language="JavaScript">

for(i=1900;i<2050;i++) document.write('<option>'+i);

</SCRIPT>

</SELECT> 年 <SELECT name=SM onchange=changeCld() style="FONT-SIZE: 9pt">

【实训步骤】


JavaScript 代码在 Menu组件中动态添加下拉菜单（月）：<SCRIPT language="JavaScript">

for(i=1;i<13;i++) document.write('<option>'+i);

</SCRIPT>

在表格中添加单元格并设置单元格文本大小的 HTML 代码如下：</SELECT> 月 </FONT> <FONT color=#ffffff face= 宋体 id=GZ

style="FONT-SIZE: 12pt"></FONT><BR></TD>

</TR>

<TR align=middle bgColor=#e0e0e0>

<TD width=54 style="font-size:9pt; padding:5pt;"> 日 </TD>

<TD width=54 style="font-size:9pt "> 一 </TD>

<TD width=54 style="font-size:9pt "> 二 </TD>

<TD width=54 style="font-size:9pt "> 三 </TD>

<TD width=54 style="font-size:9pt "> 四 </TD>

<TD width=54 style="font-size:9pt "> 五 </TD>

<TD width=54 style="font-size:9pt "> 六 </TD></TR>

【实训步骤】


JavaScript 代码在表格中添加 6 行 7 列的单元格。代码如下： <SCRIPT language="JavaScript"> var gNum; for(i=0;i<6;i++) { document.write('<tr align=center>'); for(j=0;j<7;j++) { gNum = i*7+j; document.write('<td id="GD' + gNum +'"><font id="SD' + gNum +'" size=2 face="Arial Black"'); if(j == 0) document.write(' color=red'); if(j == 6) document.write(' color=#000080'); document.write(' TITLE=""> </font><br><font id="LD' + gNum + '" size=2 style="font-size:9pt"> </font></td>'); } document.write('</tr>'); } </SCRIPT>HTML 代码的相关结束标记。代码如下： </TABLE> </TD> </TR></TABLE></FORM></CENTER>

【实训步骤】


（ 4 ）编辑用于实现公历日历与农历日历的 JavaScript 代码。用数组记录日历中的相关信息。<SCRIPT language="JavaScript">var lunarInfo=new Array(0x04bd8,0x04ae0,0x0a570,0x054d5,0x0d260,0x0d950,0x16554,0x056a0,0x09ad0,0x055d2,0x04ae0,0x0a5b6,0x0a4d0,0x0d250,0x1d255,0x0b540,0x0d6a0,0x0ada2,0x095b0,0x14977,0x04970,0x0a4b0,0x0b4b5,0x06a50,0x06d40,0x1ab54,0x02b60,0x09570,0x052f2,0x04970,0x06566,0x0d4a0,0x0ea50,0x06e95,0x05ad0,0x02b60,0x186e3,0x092e0,0x1c8d7,0x0c950,0x0d4a0,0x1d8a6,0x0b550,0x056a0,0x1a5b4,0x025d0,0x092d0,0x0d2b2,0x0a950,0x0b557,0x06ca0,0x0b550,0x15355,0x04da0,0x0a5d0,0x14573,0x052d0,0x0a9a8,0x0e950,0x06aa0,0x0aea6,0x0ab50,0x04b60,0x0aae4,0x0a570,0x05260,0x0f263,0x0d950,0x05b57,0x056a0,0x096d0,0x04dd5,0x04ad0,0x0a4d0,0x0d4d4,0x0d250,0x0d558,0x0b540,0x0b5a0,0x195a6,0x095b0,0x049b0,0x0a974,0x0a4b0,0x0b27a,0x06a50,0x06d40,0x0af46,0x0ab60,0x09570,0x04af5,0x04970,0x064b0,0x074a3,0x0ea50,0x06b58,0x055c0,0x0ab60,0x096d5,0x092e0,0x0c960,0x0d954,0x0d4a0,0x0da50,0x07552,0x056a0,0x0abb7,0x025d0,0x092d0,0x0cab5,0x0a950,0x0b4a0,0x0baa4,0x0ad50,0x055d9,0x04ba0,0x0a5b0,0x15176,0x052b0,0x0a930,0x07954,0x06aa0,0x0ad50,0x05b52,0x04b60,0x0a6e6,0x0a4e0,0x0d260,0x0ea65,0x0d530,0x05aa0,0x076a3,0x096d0,0x04bd7,0x04ad0,0x0a4d0,0x1d0b6,0x0d250,0x0d520,0x0dd45,0x0b5a0,0x056d0,0x055b2,0x049b0,0x0a577,0x0a4b0,0x0aa50,0x1b255,0x06d20,0x0ada0)var solarMonth=new Array(31,28,31,30,31,30,31,31,30,31,30,31);var Animals=new Array(" 鼠 "," 牛 "," 虎 "," 兔 "," 龙 "," 蛇 "," 马 "," 羊 "," 猴 "," 鸡 "," 狗 "," 猪 ");var solarTerm = new Array(" 小寒 "," 大寒 "," 立春 "," 雨水 "," 惊蛰 "," 春分 "," 清明 "," 谷雨 "," 立夏 "," 小满 "," 芒种 "," 夏至 "," 小暑 "," 大暑 "," 立秋 "," 处暑 "," 白露 "," 秋分 "," 寒露 "," 霜降 "," 立冬 "," 小雪 "," 大雪 "," 冬至 ");

// 农历的节气var sTermInfo = new Array(0,21208,42467,63836,85337,107014,128867,150921,173149,195551,218072,240693,263343,285989,308563,331033,353350,375494,397447,419210,440795,462224,483532,504758);var nStr1 = new Array(' 日 ',' 一 ',' 二 ',' 三 ',' 四 ',' 五 ',' 六 ',' 七 ',' 八 ',' 九 ',' 十 ');var nStr2 = new Array(' 初 ',' 十 ',' 廿 ',' 卅 ');

【实训步骤】


用数组保存公历的节日。var sFtv = new Array("0101 元旦 ","0214 情人节 ","0308 妇女节 ","0312 植树节 ","0315 消费者权益日 ","0401 愚人节 ","0501 劳动节 ","0504 青年节 ","0512 护士节 ","0601 儿童节 ","0701 建党节 ","0801 建军节 ","0910 教师节 ","0928 孔子诞辰 ","1001 国庆节 ","1006 老人节 ","1024 联合国日 ","1224 平安夜 ","1225 圣诞节 ")

【实训步骤】


用数组保存农历的节日。var lFtv = new Array("0101 春节 ","0115 元宵节 ","0505 端午节 ","0707 七夕情人节 ","0715 中元节 ","0815 中秋节 ","0909 重阳节 ","1208 腊八节 ","1223 小年 ")自定义函数 lYearDays(y) ，用于返回农历 y年的总天数。function lYearDays(y) { var i, sum = 348; for(i=0x8000; i>0x8; i>>=1)sum+=(lunarInfo[y-1900]&i)?1:0; return(sum+leapDays(y));}自定义函数 leapDays(y) ，用于返回农历 y年闰月的天数。function leapDays(y) { if(leapMonth(y)) return((lunarInfo[y-1900] & 0x10000)? 30: 29); else return(0);}自定义函数 leapMonth(y) ，用于判断 y年的农历中哪个月是闰月 , 不是闰月返回 0 。function leapMonth(y){ return(lunarInfo[y-1900]&0xf);}自定义函数 monthDays(y,m) ，用于返回农历 y年m月的总天数。function monthDays(y,m){ return((lunarInfo[y-1900]&(0x10000>>m))?30:29);}

【实训步骤】


自定义函数 Dianaday() ，用于算出当前月第一天的农历日期和当前农历日期下一个月农历的第一天日期。function Dianaday(objDate) { var i, leap=0, temp=0; var baseDate = new Date(1900,0,31); var offset = (objDate - baseDate)/86400000; this.dayCyl = offset+40; this.monCyl = 14; for(i=1900; i<2050 && offset>0; i++) { temp = lYearDays(i) offset -= temp; this.monCyl += 12; } if(offset<0) { offset += temp; i--; this.monCyl -= 12; } this.year = i; this.yearCyl=i-1864; leap = leapMonth(i); //闰哪个月 this.isLeap = false; for(i=1; i<13 && offset>0; i++) {

if(leap>0 && i==(leap+1) && this.isLeap==false){ //闰月 --i; this.isLeap = true; temp = leapDays(this.year);} else{ temp = monthDays(this.year, i);} if(this.isLeap==true && i==(leap+1)) this.isLeap = false; //解除闰月 offset -= temp; if(this.isLeap == false) this.monCyl++; } if(offset==0 && leap>0 && i==leap+1) if(this.isLeap){ this.isLeap = false;} else{this.isLeap=true;--i;--this.monCyl;} if(offset<0){offset+=temp;--i;--this.monCyl;} this.month=i; this.day=offset+1;}

【实训步骤】


自定义函数 solarDays(y,m) ，用于返回公历 y年m+1月的天数。function solarDays(y,m){ if(m==1) return(((y%4==0)&&(y%100!=0)||(y%400==0))?29:28); else return(solarMonth[m]);}

自定义函数 calElement() 用于记录公历和农历某天的日期。function calElement(sYear,sMonth,sDay,week,lYear,lMonth,lDay,isLeap) { this.isToday = false; // 公历 this.sYear = sYear; this.sMonth = sMonth; this.sDay = sDay; this.week = week; // 农历 this.lYear = lYear; this.lMonth = lMonth; this.lDay = lDay; this.isLeap = isLeap; // 节日记录 this.lunarFestival = ''; // 农历节日 this.solarFestival = ''; // 公历节日 this.solarTerms = ''; // 节气}

【实训步骤】


自定义函数 sTerm(y,n) 用于返回某年的第 n 个节气为几日（从小寒算起）。function sTerm(y,n) {

var offDate = new Date((31556925974.7*(y-1900)+sTermInfo[n]*60000)+Date.UTC

(1900,0,6,2,5));

return(offDate.getUTCDate())

}

自定义函数 calendar(y,m) 用于保存 y年m+1月的相关信息。var fat=mat=9;

var eve=0;

function calendar(y,m) {

fat=mat=0;

var sDObj,lDObj,lY,lM,lD=1,lL,lX=0,tmp1,tmp2;

var lDPOS = new Array(3);

var n = 0;

var firstLM = 0;

sDObj = new Date(y,m,1); //当月第一天的信息 this.length = solarDays(y,m); // 公历当月天数 this.firstWeek = sDObj.getDay(); // 公历当月 1 日星期几 if ((m+1)==5){fat=sDObj.getDay()}

if ((m+1)==6){mat=sDObj.getDay()}

【实训步骤】


for(var i=0;i<this.length;i++) { if(lD>lX) { sDObj = new Date(y,m,i+1); //当月第一天的信息 lDObj = new Dianaday(sDObj); // 农历 lY = lDObj.year; // 农历年 lM = lDObj.month; // 农历月 lD = lDObj.day; // 农历日 lL = lDObj.isLeap; // 农历是否闰月 lX = lL? leapDays(lY): monthDays(lY,lM); // 农历当月最后一天 if (lM==12){eve=lX} if(n==0) firstLM = lM; lDPOS[n++] = i-lD+1; } this[i] = new calElement(y,m+1,i+1,nStr1[(i+this.firstWeek)%7],lY,lM,lD++,lL); if((i+this.firstWeek)%7==0){ this[i].color = 'red'; //周日颜色 } } // 节气 tmp1=sTerm(y,m*2)-1; tmp2=sTerm(y,m*2+1)-1; this[tmp1].solarTerms = solarTerm[m*2]; this[tmp2].solarTerms = solarTerm[m*2+1]; if((this.firstWeek+12)%7==5) //黑色星期五 this[12].solarFestival += '黑色星期五 '; if(y==tY && m==tM) this[tD-1].isToday = true; // 今日}

【实训步骤】


自定义函数 cDay( ) ，用中文显示农历的日期。function cDay(d){

var s;

switch (d) {

case 10:

s = ' 初十 '; break;

case 20:

s = ' 二十 '; break;

break;

case 30:

s = ' 三十 '; break;

break;

default :

s = nStr2[Math.floor(d/10)];

s += nStr1[d%10];

}

return(s);

}

【实训步骤】


自定义函数 drawCld( ) ，在表格中显示公历和农历的日期以及相关节日。var cld;function drawCld(SY,SM) { var TF=true; var p1=p2=""; var i,sD,s,size; cld = new calendar(SY,SM); GZ.innerHTML = ' 【 '+Animals[(SY-4)%12]+'】 '; // 生肖 for(i=0;i<42;i++) { sObj=eval('SD'+ i); lObj=eval('LD'+ i); sObj.className = ''; sD = i - cld.firstWeek; if(sD>-1 && sD<cld.length) { // 日期内 sObj.innerHTML = sD+1; if(cld[sD].isToday){ sObj.style.color = '#9900FF';} // 今日颜色 else{sObj.style.color = '';} if(cld[sD].lDay==1){ //显示农历月 lObj.innerHTML='<b>'+(cld[sD].isLeap?' 闰 ':'')+cld[sD].lMonth+' 月 '+(monthDays(cld[sD].lYear,cld[sD].lMonth)==29?' 小 ':' 大 ')+'</b>'; } else{lObj.innerHTML = cDay(cld[sD].lDay);} //显示农历日 var Slfw=Ssfw=null; s=cld[sD].solarFestival;

【实训步骤】


for (var ipp=0;ipp<lFtv.length;ipp++){ // 农历节日 if (parseInt(lFtv[ipp].substr(0,2))==(cld[sD].lMonth)){

if (parseInt(lFtv[ipp].substr(2,4))==(cld[sD].lDay)){

lObj.innerHTML=lFtv[ipp].substr(5);

Slfw=lFtv[ipp].substr(5);

}

}

if (12==(cld[sD].lMonth)){ // 判断是否为除夕 if (eve==(cld[sD].lDay)){lObj.innerHTML="除夕 ";Slfw="除夕 ";}

}

}

for (var ipp=0;ipp<sFtv.length;ipp++){ // 公历节日 if (parseInt(sFtv[ipp].substr(0,2))==(SM+1)){

if (parseInt(sFtv[ipp].substr(2,4))==(sD+1)){

lObj.innerHTML=sFtv[ipp].substr(5);

Ssfw=sFtv[ipp].substr(5);

}

}

}

【实训步骤】


if ((SM+1)==5){ //母亲节

if (fat==0){ if ((sD+1)==7){Ssfw="母亲节 ";lObj.innerHTML="母亲节 "} } else if (fat<9){ if ((sD+1)==((7-fat)+8)){Ssfw="母亲节 ";lObj.innerHTML="母亲节 "} } } if ((SM+1)==6){ //父亲节 if (mat==0){ if ((sD+1)==14){Ssfw="父亲节 ";lObj.innerHTML="父亲节 "} } else if (mat<9){ if ((sD+1)==((7-mat)+15)){Ssfw="父亲节 ";lObj.innerHTML="父亲节 "} } } if (s.length<=0){ // 设置节气的颜色 s=cld[sD].solarTerms; if(s.length>0) s = s.fontcolor('limegreen'); } if(s.length>0) {lObj.innerHTML=s;Slfw=s;} // 节气 if ((Slfw!=null)&&(Ssfw!=null)){ lObj.innerHTML=Slfw+"/"+Ssfw; } } else { //非日期 sObj.innerHTML = ''; lObj.innerHTML = ''; } }}

【实训步骤】


自定义函数 changeCld() ，在下拉列表中选择年或月时，调用自定义函数 drawCld() ，显示公历和农历的相关信息。function changeCld() { var y,m; y=CLD.SY.selectedIndex+1900; m=CLD.SM.selectedIndex; drawCld(y,m);}

用自定义变量保存当前系统中的年、月、日。var Today = new Date();var tY = Today.getFullYear();var tM = Today.getMonth();var tD = Today.getDate();

自定义函数 initial() ，打开页时，在下拉列表中显示当前年月，并调用自定义函数 drawCld() ，显示公历和农历的相关信息。function initial() { CLD.SY.selectedIndex=tY-1900; CLD.SM.selectedIndex=tM; drawCld(tY,tM);}</SCRIPT>

（ 5 ）在 <body> 标记的窗体载入（ onLoad ）事件中调用自定义函数 initial() 。<BODY onload=initial()>

（ 6 ）选择“文件” /“ 在浏览器中预览” /“IExplore 6.0” ，预览网页，选择相应的年份和月份即可获取指定年月的日历相关信息。

【实训步骤】

实训 7 事件处理的操作

（ 1 ）熟练掌握调用事件的方法。（ 2 ）熟悉掌握鼠标事件中移入移出事件的应用。

【实训目的】


编写一个 JavaScript 程序，实现导航条的动画效果。当用户将鼠标移动到任意一个导航按钮上时，该按钮都会突出显示，鼠标移走后，又恢复为原来位置，效果如图 11.9 、图 11.10 所示。

【实训内容】


（ 1 ）打开 Dreamweaver ，在“创建新项目”列中选择“ HTML” 。（ 2 ）自动创建 HTML 模板，将 <title>…</title> 标记间的内容改为“应用鼠标事件实现导航条的动画效果”，将文件保存为 index.html 。（ 3 ）准备 14张图片， 7张鼠标移出时显示的图片，图片的名称为“ menu_0”+1至 7 的数字 +“.

gif” ， 7张鼠标移入时显示的图片，图片的名称为“ menu_0”+1至 7 的数字 +“_over.gif” 。（ 4 ）将过程（ 3 ）所准备的 7张鼠标移出时显示的图片按顺序插入到页面中的适当位置，并设置其鼠标事件 onMouseMove 和 onMouseout执行的操作，这里分别调用两个不同的自定义 JavaS

crip 函数。在 <body>…</body> 标记间添加的 HTML 完整代码如下。<table width="871" height="339" border="0" align="center" cellpadding="0" cellspacing="0" backgroun

d="Images/top/bg.GIF">

<tr>

<td valign="top"><table width="100%" height="26" border="0" cellpadding="0" cellspacing="0">

<tr>

<td><div align="right" style="color:#FFFFFF "> 设为首页 | 收藏本站 | &n

bsp;</div></td>

</tr>

</table>

【实训步骤】


<table width="100%" height="119" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="183"><table width="100%" height="119" border="0" cellpadding="0" cellspacing="0"> <tr height="28"> <td height="29"></td> </tr> <tr> <td height="90" background="Images/logo_bg.gif"><div align="center"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="162" height="89"> <param name="movie" value="Flash/logo.swf"> <param name="quality" value="high"> <param name="wmode" value="transparent"> <embed src="Flash/logo.swf" width="162" height="89" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed> </object> </div></td> </tr> </table></td> <td width="95" align="center"><img src="Images/top/menu_01.gif" id="image1" width="95" height="119" border="0" onMouseMove="move(this,'1')" onMouseout="out(this,'1')"></td> <td width="95" align="center"><img src="Images/top/menu_02.gif" id="image2" width="95" height="119" border="0" onMouseMove="move(this,'2')" onMouseout="out(this,'2')"></td>

【实训步骤】


<td width="94" align="center"><img src="Images/top/menu_03.gif" name="image3" width="95" height="119" border="0" onMouseMove="move(this,'3')" onMouseout="out(this,'3')"></td> <td width="94" align="center"><img src="Images/top/menu_04.gif" name="image4" width="94" height="119" border="0" onMouseMove="move(this,'4')" onMouseout="out(this,'4')"></td> <td width="94" align="center"><img src="Images/top/menu_05.gif" name="image5" width="95" height="119" border="0" onMouseMove="move(this,'5')" onMouseout="out(this,'5')"></td> <td width="94" align="center"><img src="Images/top/menu_06.gif" name="image6" width="94" height="119" border="0" onMouseMove="move(this,'6')" onMouseout="out(this,'6')"></td> <td width="95" align="center"><img src="Images/top/menu_07.gif" width="95" name="image7" height="119" border="0" onMouseMove="move(this,'7')" onMouseout="out(this,'7')"></td> <td> </td> </tr> </table> </td> </tr></table>

【实训步骤】


（ 5 ）在 <head>…</head> 标记间编写自定义的 JavaScript 函数 move() 和 out() 。 move() 用于设置鼠标移入导航按钮上时显示的图片， out() 用于设置鼠标移出导航按钮上时显示的图片，代码如下。<script language="javascript">

// 鼠标移动效果var A_Img=new Image();

function move(image,num){

image.src='Images/top/menu_0'+num+'_over.gif';

}

function out(image,num){

image.src='Images/top/menu_0'+num+'.gif';

}

</script>


【实训步骤】

实训 8 浏览器对象的应用

熟练应用 JavaScript 脚本中的窗口对象和文档对象。

【实训目的】


编写一个 JavaScript 程序，应用 JavaScript 脚本中的窗口对象实现在网站首页右下角弹出渐显的广告窗口，效果如图 11.11 所示。

【实训内容】


（ 1 ）打开 Dreamweaver ，在“创建新项目”列中选择“ HTML” 。（ 2 ）自动创建 HTML 模板，将 <title>…</title> 标记间的内容改为“在首页右下角弹出渐显的广告窗口”，将文件保存为 index.html 。（ 3 ）在 index.html 文件的 <body>…</body> 标记间编写 HTML 代码和 JavaScript 脚本。应用HTML 的表格标记显示网站首页内容。应用 window 对象的 open 方法在网站首页调用打开一个广告窗口，设置广告窗口文件名称为“ advertise.html” ，并指定该广告窗口的宽度和高度、上边距和左边距，以确定打开的广告窗口页的大小和显示位置，代码如下。<table width="881" height="342" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td background="images/image_01.JPG"> </td> </tr></table><script language="javascript">var newformW=300;var newformH=180;function pp(){

var T=window.screen.width-newformW;var L=window.screen.height+newformH;var name=window.open("advertise.html","","width="+newformW+",

height="+newformH+",top="+T+",left="+L);}pp();</script>

【实训步骤】


（ 4 ）在“创建新项目”列中选择“ HTML” 。自动创建 HTML 模板，将 <title>…</title> 标记间的内容改为“最新软件推荐”，将文件保存为“ advertise.html” ，该文件用来显示广告信息。（ 5 ）在 advertise.html 文件中，应用 document 文档对象计算窗口的宽度和高度值。应用 Window窗口对象计算广告窗口左边距和上边距，以确定广告窗口的当前位置。最后应用 window 对象的 moveTo 方法指定广告窗口的位置。自定义一个函数 drop ，实现窗口的在首页右下角渐显效果。在 <body>…</body> 标记间添加如下代码。<img src="images/advertise.gif" width="300" height="180"><script language="javascript">var W=document.body.clientWidth;var H=document.body.clientHeight;var L=window.screen.width-W;var T=window.screen.height;self.moveTo(L,T);function drop(n) {

if (n>(T-H-60)){self.moveTo(L-12,--n);var tim=setTimeout("drop("+n+")",1);

}else{clearTimeout(tim)}

}drop(T);</script>（ 6 ）选择“文件” /“ 在浏览器中预览” /“IExplore 6.0” ，预览网页。

【实训步骤】

实训 9 CSS+DIV技术的应用

（ 1 ）熟练掌握样式的定义及使用。（ 2 ）熟练掌握 <link> 标记链接 CSS 样式文件。（ 3 ）熟练应用 CSS+DIV 美化与布局页面。

【实训目的】


对于一个页面风格清新自然的网站来说，如果弹出的窗口带有不适合页面风格的灰色边框及固定样式的标题栏，不但不能体现其个性化，而且势必会影响网站的整体效果。下面向读者介绍一种应用 CSS+DIV 实现的无边框窗口。当用户单击“用户登录”超链接即可弹出无边框的用户登录窗口，效果如图 11.12 所示。

【实训内容】

（ 1 ）打开 Dreamweaver ，在“创建新项目”列中选择“ HTML” 。（ 2 ）自动创建 HTML 模板，将 <title>…</title> 标记间的内容改为“应用 CSS+DIV 实现无边框窗口”，将文件保存为 index.html 。（ 3 ）在“创建新项目”列中选择“ CSS” ，将文件保存在“ css” 文件夹下的“ style.css” ，定义的 CSS 样式如下。<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

【实训步骤】

（ 4 ）在 HEAD 标记里应用 <link> 标记链接 CSS 样式文件，代码如下。<LINK href="css/style.css" rel=stylesheet>（ 5 ）在要弹出无边框窗口的页面的最底部加入一个 div层，其 name属性的值为“ User” ，并通过其 style属性控制层的大小和层的隐藏，该层中的内容为无边框窗口要显示的内容。在 <body>…</body> 标记间添加的完整代码如下。<table width="750" height="529" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td valign="top" background="images/images_1.jpg"><table width="750" height="437" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="707" height="83"> </td> <td width="43"> </td> </tr> <tr> <td height="30" align="right"><a href="#" onClick="Myopen(User)"><img src="images/email.gif" width="12" height="12" border="0"> 用户登录 </a> </td> <td> </td> </tr> <tr> <td height="324" align="center"> <div id="User" style="position:absolute;width:240px; height:139px;display:none;"> <table width="240" height="139" border="0" align="center" cellpadding="0" cellspacing="0">

【实训步骤】


<tr> <td height="139" align="center"><form name="form_U" method="post"> <table width="220" height="115" bgcolor="#FFFFFF" border="0" align="center" cellpadding="0" cellspacing="0" class="tableBorder"> <tr align="center" valign="middle"> <td height="24" colspan="2" background="Images/bg_Login.GIF"><font color="#505875">=== 用户登录 === </font> </td> </tr> <tr> <td width="61" height="27" align="right" valign="middle"> 用户名： </td> <td width="157" valign="middle"><input name="UID" type="text" maxlength="20"></td> </tr> <tr> <td height="27" align="right" valign="middle"> 密码： </td> <td valign="middle"><input name="PWD" type="password" maxlength="20"></td> </tr><tr align="center" valign="middle"> <td height="27" colspan="2"><input name="Submit" type="button" class="btn_grey" value="登录 " > <input name="Submit2" type="button" class="btn_grey" value="关闭 " onClick="javascript:User.style.display='none';"></td> </tr> </table>

【实训步骤】

</form></td> </tr> </table> </div>  </td> </tr> </table></td> </tr></table>（ 6 ）在页面中添加“用户登录”超链接，该超链接执行的操作是调用自定义 JavaScript 函数 Myopen() 显示 User层。关键代码如下：<a href="#" onClick="Myopen(User)"> 用户登录 </a>（ 7 ）在 <head>…</head> 标记间编写自定义的 JavaScript 函数 Myopen() ，用于控制 DIV层的居中显示，代码如下。<script language="javascript">function Myopen(divID){

//根据传递的参数确定显示的层divID.style.display='';divID.style.left=(screen.width-240)/2;divID.style.top=(screen.height-590)/2;}</script>（ 8 ）选择“文件” /“ 在浏览器中预览” /“IExplore 6.0” ，预览网页。

【实训步骤】

实训 10 Ajax技术的应用

熟练掌握 Ajax无刷新技术。

【实训目的】


下面应用 Ajax 技术实现不刷新页面检测用户名是否被注册，在“用户名”文本框中输入 “纯净水”，单击“ [检测用户名 ]” 超级链接，即可在不刷新页面的情况下弹出“祝贺您 ! 用户名 [纯净水 ]没有被注册 !” 的提示对话框，效果如图 11.13 所示。

【实训内容】


（ 1 ）首先，需要创建 MySQL 数据库，命名为 db_user ，数据表名称为 tb_user ，并按照图 11.1

4 创建表结构。

【实训步骤】

（ 2 ）打开 Dreamweaver ，在“创建新项目”列中选择“动态页” /“PHP” 。（ 3 ）自动创建 PHP 模板，将 <title>…</title> 标记间的内容改为“应用 Ajax 技术实现不刷新页面检索用户名是否被注册”，将文件保存为 index.php 。


（ 4 ）在 index.php 文件的 <body>…</body> 标记间添加 HTML 表单元素，主要实现用户注册表单，代码如下。<form name="form1" method="post" action=""> <table width="1003" height="628" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td valign="top" background="images/bg.JPG"><table width="1003" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="242" height="346"> </td> <td width="532" height="30" align="center" valign="bottom" class="style5"><span class="style2"> 用户注册 </span></td> <td width="229"> </td> </tr> <tr> <td> </td> <td align="center"><table width="92%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="29%" height="30" align="center"> 用户名： </td> <td width="71%" height="24"><input name="username" type="text" id="username" size="20"> <a href="#" onClick="checkName();">[检测用户名 ]</a> </td> </tr>

【实训步骤】


<tr> <td height="24" align="center">真实姓名： </td> <td height="24"><input name="truename" type="text" id="truename" size="20"> *</td> </tr> <tr> <td height="24" align="center"> 密码：</td> <td height="24"><input name="pwd1" type="password" id="pwd1" size="20"> *</td> </tr> <tr> <td height="24" align="center">确认密码： </td> <td height="24"><input name="pwd2" type="password" id="pwd2" size="20"> * </td> </tr> <tr> <td height="24" align="center">性别：</td> <td height="24"><input name="sex" type="radio" value="男 " checked>男 <input type="radio" name="sex" value=" 女 "> 女</td> </tr>

【实训步骤】


<tr> <td height="24" align="center" style="padding-left:10px">Email ： </td> <td height="24" class="word_grey"><input name="email" type="text" id="email" size="28"> *</td> </tr> <tr> <td height="24" align="center"> 个人主页： </td> <td height="24" class="word_grey"><input name="homepage" type="text" id="homepage" size="28"></td> </tr> <tr> <td height="40" colspan="2"> <input name="imageField" type="image" src="images/submit.gif" width="64" height="20" border="0"> <input name="imageField2" type="image" src="images/reset.gif" width="64" height="20" border="0"></td> </tr> </table></td> <td> </td> </tr> </table></td> </tr> </table></form>

【实训步骤】


（ 5 ）在 <head>…</head> 标记间搭建 AJAX 开发框架，代码如下。<script language="javascript">

var http_request = false;

function createRequest(url) { // 初始化对象并发出 XM

LHttpRequest 请求http_request = false;

if (window.XMLHttpRequest) { // Moz

illa……

http_request = new XMLHttpRequest();

if (http_request.overrideMimeType) {

http_request.overrideMimeType("text/xml");

}

} else if (window.ActiveXObject) { //IE浏览器try {

http_request = new ActiveXObject("Msxml2.X

MLHTTP");

} catch (e) {

try {

http_request = new ActiveXObje

ct("Microsoft.XMLHTTP");

} catch (e) {}

}

}

【实训步骤】


if (!http_request) {

alert(" 不能创建 XMLHTTP实例 !");

return false;

}

http_request.onreadystatechange = alertContents; // 指定响应方法// 发出 HTTP 请求http_request.open("GET", url, true);

http_request.send(null);

}

function alertContents() {

// 处理服务器返回的信息if (http_request.readyState == 4) {

if (http_request.status == 200) {

alert(http_request.responseText);

} else {

alert(' 您请求的页面发现错误 ');

}

}

}

</script>

【实训步骤】


（ 6 ）在 <head>…</head> 标记间编写 JavaScript 的自定义函数 checkName() ，用于检测用户名是否为空，当用户名不为空时，调用 createRequest() 函数发送请求检测用户名是否存在，代码如下。<script language="javascript">

function checkName() {

var username = form1.username.value;

if(username=="") {

window.alert(" 请添写用户名 !");

form1.username.focus();

return false;

}

else {

createRequest('checkname.php?username='+username+'&noc

ache='+new Date().getTime());

}

}

</script>

（ 7 ）在页面的适当位置添加“ [检测用户名 ]” 超链接，在该超级链接的 onClick 事件中调用 che

ckName() 方法，弹出显示检测结果的对话框，代码如下。<a href="#" onClick="checkName();">[检测用户名 ]</a>

【实训步骤】


（ 8 ）在“创建新项目”列中选择“动态页” /“PHP” 。自动创建 PHP 模板，将文件保存为“ ch

eckname.php” 。编写检测用户名是否惟一的 PHP 处理页 checkname.php ，在该页面中连接 MyS

ql 数据库，并应用 PHP 的 echo 语句输出检测结果，完整代码如下。<?php

$link=mysql_connect("localhost","root","root");

mysql_select_db("db_database24",$link);

//Ajax 中先用 encodeURIComponent对要提交的中文进行编码$GB2312string=iconv( 'UTF-8', 'gb2312//IGNORE' , $RequestAjaxStrin

g);

mysql_query("set names gb2312");

$username=$_GET[username];

$sql=mysql_query("select * from tb_user where name='".$usernam

e."'");

$info=mysql_fetch_array($sql);

// 指定发送数据的编码格式为 GB2312

header('Content-type: text/html;charset=GB2312');

if ($info){

echo "很报歉 ! 用户名 [".$username."]已经被注册 !";

}else{

echo " 祝贺您 ! 用户名 [".$username."] 没有被注册 !";

}

?>

（ 9 ）运行本程序需要搭建 PHP 开发环境，在 IE 浏览器中预览 PHP 动态页。

【实训步骤】

第 11 章综合实训

Documents

Transcript of 第 11 章综合实训

第 11 章 综合实训

Documents

Transcript of 第 11 章 综合实训

第 11 章综合实训

Transcript of 第 11 章综合实训