第一章JavaScript基本语法
1：打印数字金字塔
训练技能点
变量的声明与赋值
使用for循环
需求说明
打印数字金字塔，效果如下图1.2.1所示。
图1.2.1 打印指定高度为6层的数字金字塔
实现思路
（1）定义一个变量，赋值为数字金字塔的高度。
（2）使用嵌套for循环打印数字金字塔。
（3）声明i控制外重循环的层数。
（4）声明j控制内层循环，分别打印空格、递增的数字和递减的数字。
（5）空格使用” ”来打印。
关键代码
"https://www.doczj.com/doc/739440662.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2：打印三角形
训练技能点
嵌套for循环语句
if条件语句的使用
需求说明
编写JavaScript脚本实现输出图1.2.2和图1.2.3的图形。
图1.2.2输入数字为6的时候只需打印出倒三角形
图1.2.3输入数字为5的时候需要打印出倒三角形和正三角形具体的要求如下：
指定一个变量并赋值。当输入的数字大于5的时候，输出图1.2.2所示的倒三角形，三角形的层数等于输入的数字值；当输入的数字小于或等于5的时候，输出图1.2.3所示的倒三角形和正三角形，倒三角形和正三角形的层数均等于输入的数字值。
实现思路
（1）指定一个变量并赋值。
（2）输出倒三角形。
（3）判断层数要求，当数字小于等于5的时候，再次输出正三角形，否则不再输出。
关键代码
3：函数的定义与调用
训练技能点
使用function关键字自定义函数
多重if语句
onload事件
需求说明
根据时间段显示不同的提示信息。参考的提示信息如下：
上午9点至下午5点，显示：你好，请用饱满的精神开始工作！
下午5点至晚上10点，显示：现在是下班后的自由时间，是继续充电呢还是娱乐一会儿？
晚上10点至次日5点，显示：辛勤劳作了一天了，该休息了！
次日早上6点至8点，显示：一日之计在于晨，清新的早晨来临了，早上好！
系统的提示信息如下图1.2.4和图1.2.5所示。
图1.2.4根据当前时间显示提示信息-1
图1.2.5根据当前时间显示提示信息-2
实现思路
（1）使用function关键字自定义函数welcome()。
（2）定义一个变量，表示当前的时间。
（3）使用多重if判断不同时间，通过alert()输出提示信息。
（4）使用window的onload事件调用welcome()函数。window的onload事件，当网页加载时候被触发，调用其关联的函数。
4：parseInt和parseFloat的应用-1
训练技能点
自定义函数的定义与使用
使用parseInt和parseFloat函数将字符串转化为数值
制作根据商品数量和单价计算价格的简易购物车，如图1.2.6所示。
图1.2.6简易购物车
实现思路
（1）使用“document.all.元素名称.value”获得文本框中的单价和购买数量。document.all.
元素名称.value可以设置和获得表单域中表单的value值的内容。
（2）使用parseFloat和parseInt函数分别将单价和购买数量转化为数字格式。
（3）将转换后的商品价格和单价的乘积结果作为总价显示在指定位置。
关键代码
| 编号 | 名称 | 单价（元） | 数量 | 总价 | |
|---|---|---|---|---|---|
| A-01 | ThinkPad SL300 | readonly="readonly"/> | value="计算价格" onclick="cal()"/> |
5：parseInt和parseFloat的应用-2
训练技能点
自定义函数的定义与调用
使用parseInt和parseFloat函数将字符串转化为数值
需求说明
扩展实训任务4中的购物车，使得一次能够购买多件物品，并计算出价格小计和总售价。效果如下图1.2.7所示。
图1.2.7扩展购物车
实现思路
（1）使用document.all.元素名称.value获得文本框中的单价和购买数量。
（2）使用parseFloat和parseInt函数分别将单价和购买数量转化为数字格式。
（3）将转换后的商品价格和单价的乘积结果作为小计，并计算总计。
（4）将计算完成的小计和总计显示在页面中的合适位置。
第二章BOM编程
1：open常见应用
训练技能点
窗口开启window.open( )方法
窗口关闭close( )方法
页面提示alert( )方法
信息确认对话框confirm( )方法
需求说明
根据要求，在页面上设置事件触发按钮，开启不同类型的窗口。页面按钮效果如下图2.2.1所示。
图2.2.1 打开窗口
实现思路
（1）通过设置window.open( )方法的参数，确定新窗口打开的类型。
（2）使用showModalDialog( )方法调用模式窗口。在模式窗口页面的
2：模式窗口和主窗口之间的信息传递
训练技能点
showModalDialog( )方法的调用
模式窗口和主窗口的信息交互
JavaScript中定义对象和对象的属性
需求说明
模拟购物车信息提交页面，实现送货地址确认页面，如图2.2.2~2.2.5所示。
图2.2.2 点击订单提交页面填写邮寄地址的链接
图2.2.3 在弹出的模式对话框中进行送货地址确认
图2.2.4 送货地址信息成功反馈
图2.2.5 点击提交订单后系统显示的确认信息
实现思路
（1）定义好送货地址确认窗口的页面内容address.html，如图2.2.3所示。
（2）使用window.showModalDialog()方法开启送货地址确认模式窗口。
（3）在模式窗口的页面中，定义一个对象result。
（4）将模式窗口的表单域填写的值分别作为属性赋值给对象result。
（5）将result对象赋值给模式窗口的window.returnValue。
（6）在主窗口中获得模式窗口传过来的参数并计算完整的地址信息写到主窗口的表单中。（7）在主窗口点击提交订单，提示订单信息。
关键代码
下面是模式窗口address.html中的
下面是主窗口中的
3：Date对象调用获得当前系统日期
训练技能点
Date对象的方法
获得系统日期的方法
各种根据日期字段处理信息的方法
需求说明
在JavaScript代码中使用Date对象获取当前时间的完整信息，包括星期几、上下午（AM or PM）等，并按照12小时制制作一个实时显示时间信息的时钟。效果如下图2.2.6所示。
图2.2.6信息完全的时钟
实现思路
（1）获得一个Date对象。
（2）通过Date对象的getYear( )方法获得年份；getMonth( )方法获得月份（0-11）；getDate( )方法获得日期；getDay( )方法获得一个星期中的第几天（0-6）。
（3）使用getHours( )获得当前小时，getMinutes( )获得当前分钟，getSeconds( )获得当前秒。
（4）使用switch语句将0-6的星期几转化为类似“星期一”的汉字表述方式。
（5）判断当前小时，如果大于12则减去12并在日期字符串后加上PM字样，否则加上AM字样。
（6）使用setTimeout( )方法每隔1000毫秒调用一次时间计算和显示函数，实现时钟动态显示。
关键代码
var date = new Date();
// 略过的代码，可参考核心技能部分的介绍
var dayInWeek = date.getDay();
var day;
var period;
switch(dayInWeek){
case 0: day = "星期日";break;
case 1: day = "星期一";break;
case 2: day = "星期二";break;
case 3: day = "星期三";break;
case 4: day = "星期四";break;
case 5: day = "星期五";break;
case 6: day = "星期六";break;
}
if(hour>12){
hour = hour-12;
period = "PM";
}else{
period = "AM";
}
// 略过的代码，可参考核心技能部分的介绍
var timeStr = "今天是："+year+"年"+month+"月"+dayInMonth+
"日"+day+" "+hour+":"+
minute+":"+second+period;
document.getElementById("timmer").innerHTML = timeStr; 4：淘宝网宝贝交易倒计时
训练技能点
根据秒数换算时间
setTimeout( )函数实现时钟倒计时
parseInt( )函数的使用
需求说明
制作淘宝网宝贝交易时间，效果如图2.2.7右下角所示。
图2.2.7淘宝网宝贝交易倒计时
实现思路
（1）定义全局变量seconds为交易时间，初始时间定为93600秒（1天零2小时整）。（2）定义更新交易时间的函数，将剩余时间转化为小时、分钟、秒的格式。
（3）使用setTimeout( )每隔一秒更新一次时间；或者使用setInterval( )函数每隔1秒调用一次时间计算函数。
关键代码
时间的转换方式如下：
var day = parseInt(seconds/86400);
var hourLeft = seconds % 86400;
var hour = parseInt(hourLeft / 3600);
var minuteLeft = hourLeft % 3600;
var minute = parseInt(minuteLeft / 60);
var secondLeft = minuteLeft % 60;
5：setTimeout方法的应用
训练技能点
open函数打开窗口
setTimeout函数的应用
需求说明
模拟电脑病毒效果，效果如图2.2.8所示。
图2.2.8电脑病毒效果实现思路
（1）使用给定图片制作病毒界面。
（2）window.open( )打开病毒界面。
（3）setTimeout( )设置循环开启病毒页面。
（4）定义一个计数器作为开启页面数量控制。
第三章DOM高级编程
1：制作可以关闭的浮动广告
训练技能点
使用document.getElementById( )方法获取层对象
使用样式属性之display的不同取值实现层的隐藏和重新显示
需求说明
要求根据所给素材制作浮动广告，当点击广告中的关闭图标时，浮动广告隐藏。实现效果如图3.2.1所示。
图3.2.1 可以关闭的浮动广告
实现步骤
（1）设置广告层和关闭层，且二者拥有CSS属性position:absolute。
（2）定义JavaScript函数float( )，实现漂浮广告的浮动。
（3）定义JavaScript函数closePoster( )，实现点击关闭图标时，隐藏浮动广告层和关闭图标本身。
关键代码
"https://www.doczj.com/doc/739440662.html,/TR/xhtml1/DTD/xhtml1-transitional.dtd">
潍坊科技学院 JavaScript课程设计 报告书 设计题目基于javascript的电子商务网站开发 专业班级11软件一 学生姓名江京翔 学号201101080002 指导教师陈凤萍 日期2012.12.24~2012.1.11 成绩
课程设计任务书 院系：软件学院专业：软件技术班级：11软1 学号：201101080002 一、课程设计时间 2012年12月24日至2013年1月11日，共计3周。 二、课程设计内容 使用html+javascript+css 完成以下任务： 1、能够熟练使用css结合html实现网页布局。 2、熟练使用文档对象模型和事件驱动，能够很好的实现web表单的交互式操作。 3、熟练使用javascrip中的对象，实现网页的动态效果。 三、课程设计要求 1. 课程设计质量： ?贯彻事件驱动的程序设计思想，熟练使用javascript中的对象，实现网页特效。 ?网页设计布局合理，色彩搭配合理，网页操作方便。 ?设计过程中充分考虑浏览器兼容等问题，并做适当处理。 ?代码应适当缩进，并给出必要的注释，以增强程序的可读性。 2. 课程设计说明书： 课程结束后，上交课程设计报告书和相关的网页。课程设计报告书的格式和内容参见提供的模板。 四、指导教师和学生签字 指导教师：学生签名：江京翔 五、教师评语：
基于javascript的电子商务网站开发 摘要 JavaScript是开发WEB应用程序不可或缺的一种语言，无论是为web页面增加交互性还是创建整个应用程序，如果没有Javascript，今天的web就不是现在这个样子了。JavaScript是具有正式规范的基于标准语言；然而，正如任何一个web开发人员所告诉你的那样，几乎每个web浏览器对这个规范的解释都不同。 本网站充分的结合了HTML与CSS的结合充分显示了网站的动态效果，是客户与网站能够充分的结合，进行信息的交换信息不断的进行更新。 基于新闻管理网站，国外新闻页面更具有代表性，是网站最标准型之一，通过Javascript 脚本的交互式该页面更好与其他的页面相互结合。 同时通常页面的下载是按照代码的排列顺序，而表格布局代码的排列代表从上向下，从左到右，无法改变。而通过CSS控制，您可以任意改变代码的排列顺序，比如将重要的右边内容先加载出来。 关键字：节假日、日历、Javascript脚本
西安欧亚学院2013－2014学年第一学期期末大作业 专业：软件技术 课程：JavaScript 程序设计 年级：12 一、作业题目： 题目：利用JavaScript 中特效编码，实现网页的动态效果。 从以下课程设计项目中选择一个作为自己的设计开发主题，如果自己有新的选题构想，要取得授课教师的批准方可进行设计，否则不计成绩。 网页主题参考（自己任选） 1、鼠标特效设计，如：跟随鼠标的小尾巴、鼠标跟踪动画、跟随鼠标的弹性文字等; 2、菜单特效设计，如：动画菜单、树形菜单、下拉菜单、右键菜单等; 3、图片特效设计，如：横向的相册效果，纵向的相册效果，滤镜图片轮播等; 4、背景特效设计，如：渐变背景、定时切换等; 5、时间特效设计，如：日期时间星期农历，动态时钟，时间倒计时等; 6、其它：如文字特效、密码验证特效等。 二、作业要求及评分标准： 1、作业要求 （1）涵盖知识点：贯彻事件驱动的程序设计思想，熟练使用JavaScript 中的对象，实现网页特效。 （2）网页要求 ? 主题突出，内容充实、健康向上，布局合理、结构清晰、规范； ? 色彩搭配合理、美观，设计新颖，有创意；页面布局尽可能平衡，色彩应用注意谐调，文本注意格式化 ? 技术运用全面，技术含量高；链接测试正确，跳转流畅； ? 代码应适当缩进，并给出必要的注释，以增强程序的可读性； ? 网页中涉及的所有“路径”必须使用“相对路径”； ? 设计过程中充分考虑浏览器兼容等问题，并做适当处理。 学号_____________ 班级___________ 姓名________ 座位号____ - - - - - - - - - - - - - - - - - - - - - - - - - -- - - -密 ○ - - - - - - - - - - - - - - - - - - - - - - - - 封 ○ - - - - - - - - - - - - - - - - - - - - - - - - 线 ○ - - - - - - - - - - -- - - - -- - - - -- - - -- - - --
《Javascript程序设计》实验指导书 一、课程性质和教学目的 JavaScrip是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。 学习Javascript必须理论联系实际，多做上机练习。只有在上机实验过程中才能真正学会程序设计。本实验报告主要包括学期内各个实验的实验目的、实验内容、实验记录、实验总结等，供学生学习记录，以提高学习效率。参加实验的学生应参照本报告手册的要求，认真实验，如实填写实验数据，并对实验结果进行分析，阐述实验中所遇到的问题，提出解决问题的方法。 二、实验目的 上机实验的目的不仅是为了验证教材和讲课的内容，或者验证自己所编写的程序正确与否。学习程序设计上机实验的目的是： 1.加深对讲授内容的理解，尤其是一些语法规定，课堂讲授既枯燥无味又难以记忆，但它们都很重要。能过多次上机就能自然地、熟练地掌握。通过上机掌握语法是行之有效的方法。 2.学会上机调试程序。即善于发现程序中的错误，并且能很快排除这些错误，使程序能正确运行。要真正掌握这门课程，不仅应当了解和熟悉有关理论和方法，还要求自己动手实现即会编程并上机调试通过。故应给予充分重视。调试程序固然可以借鉴他人的现成经验，但更重要的是通过自己的直接实践来累积经验，而且有些经验是只能意会难以言传。调试程序的能力是每个程序设计人员应当掌握的一项基本功。 3.做实验时不要在程序通过后就认为搞定、完成任务了，而应当在己通过的程序甚而上作一些改动（例如修改一些参数、增加程序一些功能、改变输入数据的方法等），以观察和分析所出现的情况。 三、上机实验前的准备工作 实验前应做好准备工作，以充分利用有限的上机时间。准备工作至少包括： 1.复习和掌握本实验有关的教学内容。 2.准备好上机所需的程序。初学者切忌不编写程序或抄别人的程序去上机，应从一开始就养成严谨的科学作风。 3.对运行上可能出现的问题应事先作出估计；对程序中自己有疑问的地方，应作上记号，以便在上机时给予注意。 4.根据实验内容认真准备实验程序及调试时所需的输入数据。 5.在上实验课之前必须写好预习报告（编程题源程序用纸写好或画好程序流程图） 6.填空与改错题等题要预先做好，上机时的工作只能是输入源程序和调试修改。
JavaScript上机作业 作业1： 使用循环语句，计算从1到100个数相加的结果并将其输出在Web页面上。
习题2： 让用户输入一个名字的列表，并将名字保存在数组中。在程序中循环地提示用户输入一个名字，直到用户输入为空。然后按升序顺序排列名字，并把名字输出在页面上，每个名字占一行。 实验内容二： JavaScript 对话框 4 、思考题： 设计密码检测程序，密码输入正确，显示“ 欢迎访问” ，不正确显示“ 密码不正确，好好想哟” 。实验内容三： JavaScript 函数的定义及调用 教师演示 JavaScript 函数的定义及调用的程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 1 、程序案例 1 －素数判断 实验内容四： JavaScript 分支结构程序设计 1 、分支结构程序案例 1 －两个数排序 2 、程序案例 2 －税额计算 3 、思考题： 设计JavaScript 程序，在网页上输出半径为 3 的圆的面积和周长。 实验容二：JavaScript 对话框 教师演示JavaScript 对话框的程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 1 、警示对话框程序案例 2 、确认对话框程序案例 3 、提示对话框程序案例 实验内容二：JavaScript 对话框 4 、思考题： 设计密码检测程序，密码输入正确，显示“ 欢迎访问” ，不正确显示“ 密码不正确，好好想哟” 。 实验内容三：JavaScript 函数的定义及调用 教师演示JavaScript 函数的定义及调用的程序案例，学生按照教师的操作步骤，自己动手编写该程序，并完成教师布置的思考题。 1 、程序案例 1 －素数判断
2013-2014学年第一学期期末考试 JavaScript程序设计试卷 班级姓名学号成绩 注意：请将答案填在最后一页的答题卡上，否则不予评分。 一、选择题：（本大题共25小题，每小题2分，共50分，在每小题给出的四个选项中，只有唯一正确选项）。 1、写“Hello World”的正确javascript语法是？（） A、document.write("Hello World") B、"Hello World" C、response.write("Hello World") D、("Hello World") 2、JavaScript使用（）来分隔两条语句。 A、分号 B、逗号 C、括号 D、句号 3、下列JavaScript的判断语句中（）是正确的。 A、if(i==0) B、if(i=0) C、if i==0 then D、f i=0 then 4、下列JavaScript的循环语句中（）是正确的。 A、if(i<10;i++) B、for(i=0;i<10) C、for i=1 to 10 D、for(i=0;i<=10;i++) 5、下列的哪一个表达式将返回假（）。 A、!(3<1) B、(4>=4) C、(“c”!=”d”) D、(2<3)&&(3<2) 6、以下不属于鼠标事件的是（）。 A、onclick B、onmouseover C、onload D、onmouseout 7、Math.abs(52)的结果是：（）。 A、51 B、52 C、-52 D、50 8、以下JavaScript语句 var a1=10; var a2=20; alert(“a1+a2=”+a1+a2) 将显示（）结果。 A、a1+a2=30 B、a1+a2=1020 C、a1+a2=a1+a2 D、a1+a2=+10+20 9、将字串s中的所有字母变为小写字母的方法是（）。 A、s.toSmallCase() B、s.toLowerCase() C、s.toUpperCase() D、s.toUpperChars() 10、以下（）表达式产生一个0~7之间(含0,7)的随机整数。 A、Math.floor(Math.random()*6) B、Math.floor(Math.random()*7) C、Math. floor(Math.random()*8) D、Math.ceil(Math.random()*8) 11、不能使用在标签“