网页编程教学第7章.ppt
上传人:qw****27 上传时间:2024-09-12 格式:PPT 页数:42 大小:1.2MB 金币:15 举报 版权申诉
预览加载中,请您耐心等待几秒...

网页编程教学第7章.ppt

网页编程教学第7章.ppt

预览

免费试读已结束,剩余 32 页请下载文档后查看

15 金币

下载此文档

如果您无法下载资料,请参考说明:

1、部分资料下载需要金币,请确保您的账户上有足够的金币

2、已购买过的文档,再次下载不重复扣费

3、资料包下载后请先用软件解压,在使用对应软件打开

第7章JavaScript与DHTML技术7.1使用客户端脚本7.2JavaScript简介7.3DHTML技术7.1使用客户端脚本7.1.1使用SCRIPT标记符7.1.1.1什么是客户端脚本<HTML><HEAD><TITLE>JavaScript示例</TITLE><SCRIPTlanguage="JavaScript"type="text/javascript"><!--functionshowmsg(){alert("欢迎来到JavaScript世界")}//--></SCRIPT></HEAD><BODY><FORM><INPUTtype="Button"onClick="showmsg();"value="点点我试试"></FORM></BODY></HTML>图7-1JavaScript示例7.1.2直接添加脚本对于上一小节的示例,以下是直接添加JavaScript脚本的HTML代码。<HTML><HEAD><TITLE>JavaScript示例</TITLE></HEAD><BODY><FORM><INPUTtype="Button"onClick="Javascript:alert('欢迎来到JavaScript世界');"value="点点我试试"></FORM></BODY></HTML>7.1.3链接脚本文件以下HTML显示了如何使用链接脚本文件。------------------------网页源文件--------------------------------<HTML><HEAD><TITLE>JavaScript示例</TITLE><SCRIPTtype="text/javascript"src="test.js"></SCRIPT></HEAD><BODY><FORM><INPUTtype="Button"onClick="showmsg();"value="点点我试试"></FORM></BODY></HTML>-------------------与网页源文件同目录下的test.js文件-------------------------------functionshowmsg(){alert("欢迎来到JavaScript世界")}7.2JavaScript简介7.2.1JavaScript语言基础7.2.1.1JavaScript变量7.2.1.2JavaScript运算符与表达式7.2.1.3JavaScript语句7.2.1.4JavaScript函数7.2.2使用JavaScript对象7.2.2.1什么是对象7.2.2.2Array对象数组元素不但可以是其他数据类型,而且可以是其他数组或对象。例如,以下示例构造出了一个二维数组并将其元素在表格中显示,效果如图7-2所示。<HTML><HEAD><TITLE>创建数组</TITLE><HEAD><BODY><SCRIPTlanguage="JavaScript"type="text/javascript"><!--varorder=newArray();order[0]=newArray("背心","30","¥80");order[1]=newArray("鞋","50","¥200");order[2]=newArray("袜子","100","¥10");document.write("<tableborderalign=center>")document.write("<th>产品</th><th>数目</th><th>单价</th>")for(i=0;i<order.length;i++)//length属性表示数组的长度,也就是数组元素的个数{document.write("<tr>")for(j=0;j<order[0].length;j++){document.write("<td>"+order[i][j]+"</td>")}document.write("</tr>")}document.write("</table>")//--></SCRIPT></BODY></HTML>图7-2创建二维数组7.2.2.3Date对象以下实例显示了如何使用Date对象,效果如图7-3所示。<HTML><HEAD><TITLE>显示欢迎信息</TITLE></HEAD><BODY><SCRIPTlanguage="JavaScript"type="text/javascript"><!--myDate=newDate();//创建一个日期对