Javascript程序设计 实训指导书+课程整体设计 实训项目1--7：JavaScript环境搭建---验证登陆悠闲网.doc

PAGE3

实训指导书

课程名称：Javascript程序设计

开课单位：

教师姓名：

——学年第一学期

目录

TOC\o1-3\h\u30395实训项目一：JavaScript环境搭建 1

9098实训项目二：打印三角形 2

9275实训项目三：简易计算器 4

23293实训项目四：文字环绕图片效果 6

24996实训项目五：盒模型的应用 8

3226实训项目六：动态修改页面图片 10

20455实训项目七：验证登陆悠闲网 12

PAGE8

实训项目一：JavaScript环境搭建

一、实训目的

1、Javascript开发环境的搭建

2、javascript代码小体验

二、实训准备

1、教师准备：EditPlus安装源文件及IE安装源文件

2、学生准备：PC机

3、环境设备准备：PC机

三、实训注意事项

1、软件安装在桌面上

四、实训要点

1、安装EditPlus

2、安装IE浏览器

五、实施步骤

1、运行EditPlus软件，完成安装

2、运行IE浏览器软件，完成安装

3、新建第一个javascript源程序并输出Helloworld!

4.scriptlanguage=JavaScript

!--

alert(HelloWorld!)

//--

/script

六、评价标准

能独立完成软件的安装并新建html页面文件，输入代码运行后，有相应的输出结果。

实训项目二：打印三角形

一、实训目的

1、打印正三角形

二、实训准备

1、教师准备：

2、学生准备：PC机

3、环境设备准备：PC机

三、实训注意事项

1、双重循环的应用

2.空格字符的打印

3.文本居中的应用

四、实训要点

1、for循环内容的掌握，空格字符的打印

2、双重循环的应用

五、实施步骤

1、运行EditPlus软件，新建html标准网页文件

2、scripttype=text/javascript

vark=prompt(请输入打印的行数：,);

for(vari=1;i=k;i++)

{

//alert(当前循环到第+i+行);

for(varj=0;ji;j++)

{

document.write(*nbsp;nbsp;nbsp;);

}

document.write(br);

}

/script

六、评价标准

能独立新建html页面文件，输入代码运行后，有相应的输出结果。

实训项目三：简易计算器

一、实训目的

1、实现一个简单计算器，能进行加减乘除四则运算

二、实训准备

1、教师准备：

2、学生准备：PC机

3、环境设备准备：PC机

三、实训注意事项

1、函数的参数及返回值都不需要指定数据类型

四、实训要点

1、运算符号的应用

2、函数的定义及调用

五、实施步骤

1、运行EditPlus软件，新建html标准网页文件

2、formaction=method=postid=myform

tableborder=0

tr

tdimgsrc=images/shop.gifwidth=54height=54/td

tdcolspan=3H3购物简易计算器/H3/td

/tr

tr

td第一个数/td

tdcolspan=3INPUTname=txtNum1type=textid=txtNum1size=25/td

/tr

tr

td第二个数/td

tdcolspan=3INPUTname=txtNum2type=textid=txtNum2size=25/td

/tr

tr

tdINPUTname=addButton2type=buttonid=addButton2value=＋/td

tdINPUTname=subButton2type=buttonid=subButton2value=－/td

tdINPUTname=mulButton2type=buttonid=mulButton2value=×/td

tdINPUTname=divButton2type=buttonid=divButton2value=÷/td

/tr

tr

td计算结果/td

tdcolspan=3INPUTname=txtresulttype=textid=txtresultsize=25/td

/tr

/table

/form

六、评价标准

能独立完