5﹒3﹒2JavaScript应用许云玲.docVIP

课题：5.3.2 JavaScript 应用 教案编号 041 备课人 使用时间 三 维 目 标 进一步理解动态 Html，以简单的 JavaScript 特效为例，使学生加深对动态 Html 的理解，并能够把这些特效插入到个人网页的合适位置；要求学生了解动态 Html 的设计原则。 教学重点 了解动态 Html 的设计原则。 教学难点 掌握 JavaScript 的编写原则，并用来生成动态网页。 教学方法 任务驱动、讲授法 教 学 过 程 授课导入 为了提供给最终用户以使用方便、界面美观的感受，很多基于特定的客户端程序都转向趋向于采用浏览器客户端。而早期的静态的、缺乏交互的 HTML 页面文档适应不了这种要求。 JavaScript 是一种基于对象的脚本编程语言，是“浏览器”上的程序语言。当 Web 服务器输出内容（包括 JavaScript 的程序代码）到浏览器时， JavaScript 可以操纵浏览器上的一切内容，在浏览器上提供用户交互，界面美化，增加 Web 界面的“智能性”。 教师讲授 JavaScript 是一种脚本语言，它是同 HTML 文档一起使用的， Web 服务器产生输出 HTML 内容的同时，也输出一些 JavaScript 程序代码到浏览器客户端。 JavaScript 由浏览器解释执行，不同的浏览器，或者是同一浏览器的不同版本，对 JavaScript 的支持会有一些差异。本书不讨论这些问题，并假定用户采用 IE5．0 以上版本的浏览器。 JavaScript 是一种基于对象的语言，通过 JavaScript 代码来操作对象——访问或者设置对象的属性，编写对象的特定的事件（方法）代码。 教师演示 我们上网冲浪在浏览网页时经常会看到用 JavaScript 脚本实现的各种文字特效，除了用它做文字特效恐怕别的功能就很少见了。我们通过这个例子介绍用 JavaScript 技术为自己的网页制作充满动感和个性的鼠标指针。 将以下代码加入网页的 BODY 区中，同学们即可看到鼠标箭头周围几个不停运动的彩色小球，并且您的鼠标指到哪里，彩色小球就跟到哪里。 script language=JavaScript function YY_Layerfx(yyleft,yytop,yyfnx,yyfny,yydiv,yybilder,yyloop,yyto,yycnt,yystep) { //v1．2 // if ((document．layers)||(document．all)){ with (Math) {yynextx= eval(yyfnx)} with (Math) {yynexty= eval(yyfny)} yycnt=(yyloop yycnt=yystep*yybilder)？0:yycnt+yystep; if (document．layers){ eval(yydiv+．top=+(yynexty+yytop)) eval(yydiv+．left=+(yynextx+yyleft)) } if (document．all){ eval(yydiv=yydiv．replace(/．layers/gi, ．all)); eval(yydiv+．style．pixelTop=+(yynexty+yytop)); eval(yydiv+．style．pixelLeft=+(yynextx+yyleft)); } argStr=＇YY_Layerfx(＇+yyleft+＇,＇+yytop+＇,＇+yyfnx+＇,＇+yyfny+＇,＇+yydiv+＇,＇+yybilder+＇,＇+yylo op+＇,＇+yyto+＇,＇+yycnt+＇,＇+yystep+＇)＇; if (yycnt=yystep*yybilder){eval(yydiv+．yyto=setTimeout(argStr,yyto));} } } function YY_Mousetrace(evnt) { // if (yyns4) {if (evnt．pageX) {yy_ml=evnt．pageX; yy_mt=evnt．pageY;} } else{ yy_ml=(event.clientX + document．body．scrollLeft); yy_mt=(event.clientY + document．body．scrollTop); } if (yy_tracescript)eval(yy_tracescript) } /script div id=yyd0 style=BACKGROUND-COLOR: #19636