JavaScript上机练习

2024年1月9日发(作者：)

第一章 JavaScript基本语法

1：打印数字金字塔

训练技能点

➢ 变量的声明与赋值

➢ 使用for循环

需求说明

打印数字金字塔，效果如下图1.2.1所示。

图1.2.1 打印指定高度为6层的数字金字塔

实现思路

（1） 定义一个变量，赋值为数字金字塔的高度。

（2） 使用嵌套for循环打印数字金字塔。

（3） 声明i控制外重循环的层数。

（4） 声明j控制内层循环，分别打印空格、递增的数字和递减的数字。

（5） 空格使用” ”来打印。

关键代码

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"/TR/xhtml1/DTD/">

for(var j=height-i; j>=1; j--){

}

for(var j=1; j<=i; j++){

}

for(var j=i-1; j>=1; j--){

}

("
");

(j + "  ")

(j + "  ");

("    ");

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的时候，再次输出正三角形，否则不再输出。

关键代码

for(var i=0; i

}

for(var j=height-i-1; j>0; j--){

}

for(var j=0; j<=i; j++){

}

("
");

("*      ");

("    ");

for(var j=0; j

}

for(var j=0; j

}

("
");

("*      ");

("    ");

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事件，当网页加载时候被触发，调用其关联的函数。

关键代码

"/TR/xhtml1/DTD/">

// 根据time的不同取值，弹出提示窗口

if(time>=9 && time<=17){

}

alert("你好，请用饱满的精神开始工作!");

alert("现在是下班后的自由时间，是继续充电呢还是娱乐一会儿？");

alert("辛勤劳作了一天了，该休息了!");

alert("一日之计在于晨，清新的早晨来临了，早上好!");

}else if(time>17 && time<23){

}else if(time>=23 || time<6){

}else if(time>=6 && time<9){

// 将time赋值为工作时间

var time = 10;

// 将time赋值为清晨的时间段

// var time = 8;

// 为时间变量赋值

4：parseInt和parseFloat的应用-1

训练技能点

➢ 自定义函数的定义与使用

➢ 使用parseInt和parseFloat函数将字符串转化为数值

需求说明

制作根据商品数量和单价计算价格的简易购物车，如图1.2.6所示。

图1.2.6简易购物车

实现思路

（1） 使用“.元素名称.value”获得文本框中的单价和购买数量。.元素名称.value可以设置和获得表单域中表单的value值的内容。

（2） 使用parseFloat和parseInt函数分别将单价和购买数量转化为数字格式。

（3） 将转换后的商品价格和单价的乘积结果作为总价显示在指定位置。

关键代码

"/TR/xhtml1/DTD/">

简易购物车

var strPrice = ;

var price = parseFloat(strPrice);

var strQuantity = ;

var quantity = parseInt(strQuantity);

var totalPrice = quantity * price;

= totalPrice;

5：parseInt和parseFloat的应用-2

训练技能点

➢ 自定义函数的定义与调用

➢ 使用parseInt和parseFloat函数将字符串转化为数值

需求说明

扩展实训任务4中的购物车，使得一次能够购买多件物品，并计算出价格小计和总售价。效果如下图1.2.7所示。

图1.2.7扩展购物车

实现思路

（1） 使用.元素名称.value获得文本框中的单价和购买数量。

（2） 使用parseFloat和parseInt函数分别将单价和购买数量转化为数字格式。

（3） 将转换后的商品价格和单价的乘积结果作为小计，并计算总计。

（4） 将计算完成的小计和总计显示在页面中的合适位置。

第二章 BOM编程

1：open常见应用

训练技能点

➢ 窗口开启( )方法

➢ 窗口关闭close( )方法

➢ 页面提示alert( )方法

➢ 信息确认对话框confirm( )方法

需求说明

根据要求，在页面上设置事件触发按钮，开启不同类型的窗口。页面按钮效果如下图2.2.1所示。

图2.2.1 打开窗口

实现思路

（1） 通过设置( )方法的参数，确定新窗口打开的类型。

（2） 使用showModalDialog( )方法调用模式窗口。在模式窗口页面的

2：模式窗口和主窗口之间的信息传递

训练技能点

➢ showModalDialog( )方法的调用

➢ 模式窗口和主窗口的信息交互

➢ JavaScript中定义对象和对象的属性

需求说明

模拟购物车信息提交页面，实现送货地址确认页面，如图2.2.2~2.2.5所示。

图2.2.2 点击订单提交页面填写邮寄地址的链接

图2.2.3 在弹出的模式对话框中进行送货地址确认

图2.2.4 送货地址信息成功反馈

图2.2.5 点击提交订单后系统显示的确认信息

实现思路

（1） 定义好送货地址确认窗口的页面内容，如图2.2.3所示。

（2） 使用dalDialog()方法开启送货地址确认模式窗口。

（3） 在模式窗口的页面中，定义一个对象result。

（4） 将模式窗口的表单域填写的值分别作为属性赋值给对象result。

（5） 将result对象赋值给模式窗口的Value。

（6） 在主窗口中获得模式窗口传过来的参数并计算完整的地址信息写到主窗口的表单中。

（7） 在主窗口点击提交订单，提示订单信息。

关键代码

下面是模式窗口中的

下面是主窗口中的

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 = ();

var day;

var period;

switch(dayInWeek){

}

if(hour>12){

}

hour = hour-12;

period = "PM";

period = "AM";

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;

}else{

// 略过的代码，可参考核心技能部分的介绍

var timeStr = "今天是："+year+"年"+month+"月"+dayInMonth+

"日"+day+"    "+hour+":"+

minute+":"+second+period;

mentById("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） ( )打开病毒界面。

（3） setTimeout( )设置循环开启病毒页面。

（4） 定义一个计数器作为开启页面数量控制。

第三章 DOM高级编程

1：制作可以关闭的浮动广告

训练技能点

➢ 使用mentById( )方法获取层对象

➢ 使用样式属性之display的不同取值实现层的隐藏和重新显示

需求说明

要求根据所给素材制作浮动广告，当点击广告中的关闭图标现效果如图3.2.1所示。

时，浮动广告隐藏。实

图3.2.1 可以关闭的浮动广告

实现步骤

（1） 设置广告层和关闭层，且二者拥有CSS属性position:absolute。

（2） 定义JavaScript函数float( )，实现漂浮广告的浮动。

（3） 定义JavaScript函数closePoster( )，实现点击关闭图标时，隐藏浮动广告层和关闭图标本身。

关键代码

"/TR/xhtml1/DTD/">

2：制作可以关闭的对联广告

训练技能点

➢ 使用mentById( )方法获取层对象

➢ 使用样式属性之display的不同取值实现层的隐藏和重新显示

需求说明

要求根据所给素材制作对联广告，当点击广告中的关闭图标时，对联广告隐藏。对联广告是浮动广告的一种，广告层对称分布在页面左右两侧。实现的对联广告效果如下图3.2.2所示。

图3.2.2 可以关闭的对联广告效果

图3.2.3 关闭掉右侧对联广告后的效果

实现步骤

（1） 设置广告层和关闭层，均拥有CSS属性position:absolute。

（2） 定义JavaScript函数float( )，实现浮动广告的浮动。

（3） 定义JavaScript函数closePoster(obj)，实现点击关闭图标时，隐藏浮动广告层和关闭图标本身。

（4） 在closePoster(obj)方法中，使用y获得关闭图标本身的显示属性；使用y设置对联广告的显示属性。

关键代码

标签内的页面代码设计如下所示。

3：树形菜单的动态添加和删除

训练技能点

➢ document对象的getElementById( )方法

➢ 使用CSS的display属性控制层的显示和隐藏

➢ 使用JavaScript动态地改变CSS属性

➢ innerHTML属性的使用

➢ 访问节点信息的方法

需求说明

使用给定的项目图片素材，用项目列表制作一个完整的树形菜单，可通过单击一级菜单来显示和隐藏二级菜单，并且可以动态添加和删除一级菜单项。实现效果如下列图示3.2.4-3.2.7所示。

图3.2.4 二级菜单收起的情况

图3.2.5 二级菜单展开的情况

图3.2.6 添加一个一级菜单项

图3.2.7 删除最末位的一级菜单项

实现步骤

（1） 设计HTML页面的列表形式，并且设置列表的样式list-style:none;。

（2） 当点击一级菜单时，使用样式表的display属性控制二级菜单的显示和收起。

（3） 使用访问节点信息的方法控制一级菜单的添加和删除。

关键代码

"/TR/xhtml1/DTD/">

节点内容：

4：根据所给信息动态追加表格的一行

训练技能点

➢ 在JavaScript中使用document对象访问页面元素的常用方式

➢ 动态添加节点信息的方法

需求说明

要求使用文本域收集信息，并将收集到的信息经过处理后作为表格的一行追加到表格的最后。实现效果如下图所示。

图3.2.8 动态添加节点信息

实现步骤

（1） 按照图片要求编写标签部分的网页内容，包括一个拥有2行信息的表格和一个拥有按钮和4个文本框的表单。

（2） 按照文本框的提示输入商品的信息，并且根据商品数量、商品单价和商品的运费计算商品价格合计，然后将获得的信息作为表格的一行追加到现有表格的末尾。

5：制作全选、全不选效果

训练技能点

➢ mentsByName( )方法

➢ 复选框的checked属性

➢ 数组的遍历

需求说明

实现全选和全不选功能，效果如下图3.2.9所示。

图3.2.9 页面加载后的结果

图3.2.10 全选/全不选效果

实现步骤

（1） 通过mentsByName( )方法获取复选框集合。

（2） 判断按钮的值应该是“都喜欢”还是“都不喜欢”。

（3） 根据判断的条件循环设置每一个checkbox的checked属性，如果按钮当前值是“都喜欢”，则将checked设置为true，同时改变按钮的值为“都不喜欢”；否则将checked设置为false，同时改变按钮的值为“都喜欢”。

关键代码

请自行编写页面标签部分的内容，注意所有checkbox的name都设为“favorite”。

6：函数的定义与调用练习部分

训练技能点

（1） DIV+CSS样式控制

（2） 函数的定义

（3） onclick事件

需求说明

制作淘宝商品的详细介绍页面。根据用户的选择，显示不同商品颜色，效果如下图3.2.11和图3.2.12所示。

图3.2.11 选中黄色后的效果

图3.2.12 选中黑色后的效果

实现思路

（1） 使用CSS+DIV搭建程序界面。

（2） 定义函数showColor(obj)，当点击不同颜色的选框的时候，在“已经选择”字体后面打印出相应的颜色，并改变选中的那个颜色的选框的样式。

（3） 使用onclick事件调用showColor函数。

关键代码

第一部分：搭建标签的内容

第二部分：撰写CSS+DIV的样式

color:red;

background-position: -280px 0px;

height:35px;

background-image:url("images/buy_");

height:35px;

width:140px;

overflow:auto;

display:inline-block;

第三部分：定义showColor(obj)函数

function showColor(obj){

var spanArray = mentById("firstline")

}

= "1px solid red";

ight = "bold";

oundColor = "pink";

mentById("result").innerHTML = TML;

.getElementsByTagName("span");

for(var i=0; i<; i++){

spanArray[i]. = "1px solid gray";

spanArray[i].oundColor = "white";

spanArray[i].ight = "normal";

第四章 String对象及其应用

1：表单验证

训练技能点

➢ 表单验证的原理和基本流程

➢ 字符串处理的各种方法

需求说明

通过表单验证用户实名、邮件地址和邮政编码。要求当验证不通过的时候，系统弹出对话框提示验证不通过的原因。当验证通过并确认提交表单信息后，系统会转向验证成功页面。验证条件如下：

➢ 用户实名必须由2-5个汉字组成。

➢ 邮件地址必须包含“@”和“.”符号。

➢ 邮政编码是6位数字。

实现步骤

（1） 根据要求编写部分的表单，要求以表格的形式显示。

（2） 编写表单处理函数，分别验证用户实名、邮件地址和邮政编码格式的正确性。

（3） 在表单的onsubmit事件中调用表单处理函数。

（4） 当满足条件(c>'u4e00' && c<'u9fa5')时，字符c表示的是汉字；当满足条件(c>'0' &&

c<'9')时，字符c表示的是数字。

2：高亮显示关键字

训练技能点

➢ 使用String对象的replace方法实现字符串替换

➢ 使用RegExp对象实现全局检索

➢ 使用innerHTML获取和设置对象内部HTML文本

需求说明

使用正则表达式将一段文字中的关键字以红色高亮显示。效果如图4.2.1所示。

图4.2.1 高亮显示关键字

实现步骤

（1） 使用CSS+DIV定义页面元素样式。

（2） 使用mentById( )获取段落中文字内容。

（3） 定义正则表达式对象实现全局检索。

（4） 使用String对象的fontcolor( )方法设置关键字的颜色，并使用String对象的replace( )方法替换关键字。

关键代码

注意，代码中使用mentById("content").innerHTML获取的是文字部分