《JavaScript前端开发程序设计教程》-实训教案(实训指导书)

实验报告姓名：__________学号：______班级：___________实验成绩：_______ 实验HTML基础一、实验目的了解HTML网页的基本结构学习设置网页背景和颜色学习设置字体属性学习定义超链接学习插入图片学习定义表格学习定义框架学习使用divbrprelispan等标签熟练使用DW编写HTML文件熟练使用CSS技术二、实验内容1、制作如下图所示的页面：要求：标题字体设置为“宋体”，大小设置为“36”，颜色设置为“#FF0000”正文大小设置为“18”，颜色设置为“#003399”“特点”等文本，将其颜色设置为“#FF0000”，加粗2、制作如下图所示的页面：要求：“背景颜色”设置为“#99CCFF”标题“业务范围”文本，将其文本格式设置为“字体-宋体、大小-特大、颜色“#660000”除标题文本以外的所有文本段落，将其文本颜色设置为“#003300”3、（选做）制作如下图所示的页面：要求：输入网页中需要的文本，进行分段处理，并在第2段文本前面插入8个不换行空格。在第一段文本下面插入水平线，并设置其宽度为“1000”、高度为“3”。选择最后4段文本，将其创建为项目列表，并更改项目符号的样式为正方形。设置标题文本的格式为“字体-宋体、大小-80、居中对齐、颜色-#990033”。设置其他文本的格式为“大小-80、加粗、颜色-#9900334、制作如下图所示的页面：要求：使用定义列表设置定义列表中各级文本的格式，其中“听”、“读”和“看”的格式为“字体-幼圆、大小70、加粗、倾斜”，颜色依次设置为“#009900”、“#993300”和“#003366”；3个英语单词的格式为“字体-幼圆、大小-70、加粗、颜色-#990000”；其余文本的格式为“字体-黑体、颜色-#990000”。三、实验要求上机实践，按照要求写出实验步骤，完成实验报告。实验JavaScript语法基础1一、实验目的1、熟练掌握HTML文件中编写JavaScript程序的基本操作。2、掌握JavaScript的基本数据类型。3、掌握JavaScript常量的声明和使用。二、实验仪器：微机（台）三、实验内容1、输入以下代码：思考：最后的显示结果是什么？后面两行为什么没有显示？如何修改将其显示出来？2、定义一个未赋值的变量a和一个进行重复赋值的变量b，并输出这两个变量的值。3、设计一个程序，返回true的数据类型。4、尝试输出1/0，-1/0，0/0的结果，并分别指出他们是什么数据类型5、输出如下的显示结果：6、分别输出数字456不同进制的输出结果（选做）编写一个JavaScript程序，效果如图所示。按要求输入以下代码：补齐techy的赋值，输出如上图所示的结果。四、实验要求 认真上机，按照实验内容完成实验报告。实验JavaScript语法基础2一、实验目的1、熟练掌握HTML文件中编写JavaScript程序的基本操作。2、掌握JavaScript变量的声明和使用。3、熟练掌握运算符和表达式的使用二、实验仪器：微机（台）三、实验内容1、按要求实现如下界面：其中vara=1;varb=2;varc=3;（alert弹出对话框）2、按要求输入以下代码：3、设计一个程序，小高今年22岁，应用条件判断语句，大于18岁就是成年人，否则为未成年人，并输出结果。4、按要求实现如下界面：（alert弹出对话框）其中a=1+2*3，b=(1+2)*35、输入一个四位年份，判断是否为闰年能够被4整除但不能被100整除，或者能够被400整除year%4==0&&year%100!=0||year%400==06、将多个字符串进行连接，并将自己的个人信息结果显示在页面中四、实验要求 认真上机，按照实验内容完成实验报告。实验JavaScript流程控制一、实验目的1、熟练掌握ifelse选择语句2、使用case语句简化嵌套的if选择语句3、熟练掌握for、while、do……while三种循环语句的使用方法二、实验仪器：微机（台）三、实验内容1、检验一个四位数的年份，判断其是否为闰年。条件选择分支能够被4整除不能被100整除或者是能被400整除2、编写一个程序，要求能在网页上自动根据时间显示不同问候语的程序，要求：0-4点显示深夜了，注意身体，该休息了！4-7点清晨好，这么早就上网呀？！7-12点早上好，一天之际在于晨，又是美好的一天！12-13点该吃午饭啦！有什么好吃的？13-17点外面的天气很热吧，心静自然凉17-18点太阳落山了！快看看夕阳吧!18-19点吃过晚饭了吗？19-23点一天过的真快！今天过得好吗？提示：day=newDate();//获取当前日期hr=day.getHours();//获取当前时间的小时数显示全部使用弹出提示窗口方式实现。3（选做）判断今天是星期几提示：1）varnow=newDate(); //获取系统日期varday=now.getDay(); //获取星期2）使用switchcase语句显示今天是星期几4、将1-10之间的奇偶数分开，页面呈现方式如下：5（选做）实时显示1到100内的偶数相加过程6、编写一个程序，在页面上输出1-1000之间所有能同时被3,5,7整除的整数，并要求每行显示6个这样的数。7（选做）在页面上输出如下图案：四、实验要求 认真上机，按照实验内容完成实验报告。实验5JavaScript内置函数一、实验目的1、熟练掌握预定义函数的使用二、实验仪器：微机（台）三、实验内容1、使用预定义函数在界面上显示如下结果：2、判断用户输入的是不是数字，如果是，分别将其转换成浮点数和整数，并显示到网页上。3、设计密码检测程序，密码输入正确，用警示对话框显示“欢迎访问”，不正确用警示对话框显示“密码不正确，请重新输入”。4、练习eval函数的使用，输入如下代码，总结出该函数的作用。显示效果图如下：选做：计算个人所得税（ifelse练习）纳税起点=5000元月应纳税所得额=个人月收入-社会保险-纳税起点元月应纳税额=月应纳税所得额×适用税率-速算扣除数个人所得税税率表工资、薪金所得适用级数全月应纳税所得额税率速算扣除数元1不超过3000元的302超过3000元至12000元的部分102103超过12000元至25000元的部分2014104超过25000元至35000元的部分2526605超过35000元至55000元的部分3044106超过55000元至80000元的部分3571607超过80000元的部分4515160举例说明：速算扣除数是为了方便进行计算而事先计算好的数值，例如纳税所得额为4000元，在3000至12000元的区间范围使用10%的税率，另外3000元使用3%的税率这样总的纳税额的计算方法应该是(4000-3000)*10%+3000*3%=4000*10%-3000*7%=4000*10%-210 再比如，我们的纳税所得额是17000元，它的计算方法是（17000-12000）*20%+(12000-3000)*10%+3000*3%=17000*20%-12000*10%-300+90=17000*20%-1410可以知道，可以直接用月纳税所得额乘以当前税率然后减去一个常数获得纳税额。这个常数就是速算扣除数。要求：输入参数采用prompt输入框输出结果通常有两种办法一种是用document.write方法输出到文档中，还有一种是用alert方法弹出窗口。四、实验要求 认真上机，按照实验内容完成实验报告。实验JavaScript自定义函数一、实验目的1、掌握函数的定义和调用2、学会使用函数返回值3、掌握函数的嵌套调用二、实验仪器：微机（台）三、实验内容1、补全代码，实现如下的简单购物计算器：2、改变新闻网页中字号1）山东省人民政府网站中“要闻动态”，选择某一新闻，打开页面，如图1所示。选择字号选择字号图1山东省人民政府网站2）设计如图1所示的界面，要求当网络访问者选择字号中的【大、中、小】时能实现页面字号大小变化，选择“中”时，页面效果如图2所示。图2单击前初始状态页面图3单击“中”链接后页面3）`表1Text部分属性表属性描述属性描述Color设置文本的颜色fontWeight设置字体的粗细Font在一行设置所有的字体属性letterSpacing设置字符间距fontFamily设置元素的字体系列。lineHeight设置行间距fontSize设置元素的字体大小。textAlign排列文本fontStyle设置元素的字体样式textIndent缩紧首行的文本fontVariant用小型大写字母字体来显示文本textTransform对文本设置大写效果给定2.html，补充代码实现如图所示的效果3、页面上输出一些字体大小不一的文字（选做）计算任意区间内连续自然数的累加和1）完成计算任意区间内连续自然数的累加和sum(n1,n2)、显示累加和show()等函数的定义，实现页面布局如图1所示。图1计算累加和页面效果图2）未应用样式时页面效果如图2所示。图2未应用样式时页面效果3）编写的样式要求如下：4）未输入数据时提醒如下图3所示图3未输入区间数据页面效果图出错时，弹出则弹出告警消息框，如图4所示。图4起始数大于等于终止数时页面效果图四、实验要求 认真上机，按照实验内容完成实验报告。实验对象编程一、实验目的1、熟练掌握对象的创建和引用2、掌握String对象、Math对象和Number对象的使用二、实验仪器：微机（台）三、实验内容1、将用户输入的字符串反向输出到页面上，并且要求将其中的小写字母转换为大写字母。2、计算输入的字符串的长度。3、编写程序，根据用户输入的数据，计算其平方、平方根和自然对数，然后用这个数作为半径，求圆的周长和面积(最后的结果均保留三位小数)。4、生成指定位数的随机数。四、实验要求 认真上机，按照实验内容完成实验报告。实验对象编程一、实验目的1、熟练掌握对象的创建和引用2、掌握常用的内置对象Date对象、Array对象二、实验仪器：微机（台）三、实验内容1、显示如图格式所示的时间：要求：显示“现在是xxxx年xx月xx日xx：xx:xx（星期x）,欢迎您的访问！”注意时间是两位数，星期几是大写2、输入自己的出生日期，然后计算从出生到现在的天数。Date的方法getTime得到的是毫秒数，需要进行转换成天。3、计算求1+2+3+…100000之和所需要的运行时间（毫秒数）4、设计一个程序，使用一个数组接收7门课程的成绩，然后在页面上将这七门课的成绩排序（假定成绩都大于10分），显示其总成绩和平均分，并列出小于60的成绩。四、实验要求 认真上机，按照实验内容完成实验报告。实验访问HTMLDOM对象一、实验目的1、掌握访问HTMLDOM对象的方法二、实验仪器：微机（台） 三、实验内容1、在姓名后面输入自己的姓名，当点击“欢迎您”按钮时弹出如下提示。2、点击确认按钮，判断密码和确认密码是否输入一致。（选做）编写JavaScript脚本来实现页面中的复选框全选或全不选效果。实现思路：使用document对象的getElementsByName（）方法获得一组复选框的集合，其前提条件是：页面上的多个复选框名称必须相同。根据获得的复选框的个数，循环判断获得的每一个复选框的checked属性，从而实现页面中的复选框全选或全不选的效果。(选做)自选五张图片，实现图片轮播。四、实验要求 认真上机，按照实验内容完成实验报告。实验操纵HTMLDOM对象一、实验目的1、掌握操纵HTMLDOM对象的方法二、实验仪器：微机（台）三、实验内容1、实现1.html中两个按钮的作用，删除所有的水平线，替换所有的水平线为图片2、3、点击按钮将第二个列表的内容添加上第一个列表中四、实验要求 认真上机，按照实验内容完成实验报告。实验浏览器对象1一、实验目的1、熟练掌握BOM对象二、实验仪器：微机（台）三、实验内容1、请点击上面的“开始计数”按钮来启动计数器。输入框会一直进行计时，从0开始。点击“停止计数”按钮可以终止计数。2、设置时间提醒器 1）要求每隔5秒在页面上弹出实时时间的提醒对话框 2）页面上同时设置取消定时器的链接3、2秒钟后关闭本窗口。4、页面显示实时变化的时钟，格式自定。四、实验要求 认真上机，按照实验内容完成实验报告。实验浏览器对象二一、实验目的1、熟练掌握frame对象，history对象，location对象，navigator对象二、实验仪器：微机（台）三、实验内容1、编写代码显示你的浏览器的如下信息：2、实现如下所示的静态页面，然后利用location对象编写脚本，点击按钮，弹出第一题的页面3、在第二题上加一个超链接，链接到第三题，第三题上如图2所示，点击后退按钮，能够退到第二题的页面上。4、用户登陆后，制作跳转页面，登录到之前的页面5、写出实现页面跳转的几种方法。四、实验要求 认真上机，按照实验内容完成实验报告。实验事件驱动编程一、实验目的1、熟练掌握事件绑定2、学会使用事件对象二、实验仪器：微机（台）三、实验内容1、采用事件监听的形式，实现点击输入框弹出“请正确输入您要输入的内容”。2、设计一个页面，在该页面上有一个“发送”按钮，当单击这个按钮时将显示一个警示对话框显示“发送完毕”（尝试使用多种方式来实现这一效果）。3、尝试用几种方式完成，页面加载完成自动弹出“欢迎您”。4、输入如下的程序，解释一下为什么不执行？怎样修改就可以了四、实验要求 认真上机，按照实验内容完成实验报告。实验处理鼠标、键盘事件一、实验目的1、学会处理鼠标事件、键盘事件二、实验仪器：微机（台）三、实验内容1、编写脚本，当鼠标在