1.编写一个打印乘法口诀表的脚本程序。提示:使用嵌套循环来实现。
2.在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名、性别、年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。
学生信息如下:
('小A','女',21,'大一'), ('小B','男',23,'大三'),
('小C','男',24,'大四'), ('小D','女',21,'大一'),
('小E','女',22,'大四'), ('小F','男',21,'大一'),
('小G','女',22,'大二'), ('小H','女',20,'大三'),
('小I','女',20,'大一'), ('小J','男',20,'大三')
1.打印9*9乘法表
知识点:运算符,双重循环
分析:打印乘法表因为在以前学习其他语言的时候也经常作为入门语法的练习题。
需要考虑的是1.乘法由2个变量决定,而乘法表刚好9行乘法式子,设置一个变量i控制行,同时也是式子的第一个乘数;
2.式子的第二个乘数刚好是式子所在的列的位置,设置为变量j,并且还发现j的特点是j<=i。
代码:
var i,j;
for(i=1;i<=9;i++)
{
for(j=1;j<=i;j++)
document.write(i+'*'+j+'='+i*j+' ');
document.write('<br />') ;
}
进一步:
要求:将以上乘法表用表格形式在网页中呈现
知识点:
用JavaScript输出html文档
分析:
网页中的内容呈现与控制台中呈现的效果是不一样的,所以要以html的角度分析,如果乘法表是以表格的方式呈现,在网页中输入的不仅仅只有乘法式子,
还应该包括表格的标签。最简单的方式是试着做用表格呈现的乘法表,采用倒推的方法分析在脚本中需要执行得到的结果。
做好以后用f12查看,分析<table></table><tr><td>这些标签所在的位置。得到以下代码:
var i,j;//i表示行,第一个乘数; j表示列也是第二个乘数
document.write('<table border="1">')
for(i=1;i<=9;i++)
{
document.write('<tr>')
for(j=1;j<=i;j++)
document.write('<td>'+i+'*'+j+'='+i*j+'</td>');
document.write('</tr>');
}
2.表格显示学生信息
在一个大学的编程选修课班里,我们得到了一组参加该班级的学生数据,分别是姓名、性别、年龄和年级,接下来呢,我们要利用JavaScript的知识挑出其中所有是大一的女生的的名字哦。
学生信息如下:
('小A','女',21,'大一'), ('小B','男',23,'大三'),
('小C','男',24,'大四'), ('小D','女',21,'大一'),
('小E','女',22,'大四'), ('小F','男',21,'大一'),
('小G','女',22,'大二'), ('小H','女',20,'大三'),
('小I','女',20,'大一'), ('小J','男',20,'大三')
知识点:
数组,循环,判断
分析:
学生信息中包含了姓名、性别、年龄和年级,根据JavaScript数组中每个元素的类型不要求一致,因此一个学生信息可以用一个数组student存储。多个相同学生的数组对象再存入到一个数组stus中形成二维数组。
大一女生则是对student[1]和student[3]进行判断,因此需要对二维数组stus进行遍历。
代码:
var stus = [
['小A', '女', 21, '大一'],
['小B', '男', 23, '大三'],
['小C', '男', 24, '大四'],
['小D', '女', 21, '大一'],
['小E', '女', 22, '大四'],
['小F', '男', 21, '大一'],
['小G', '女', 22, '大二'],
['小H', '女', 20, '大三'],
['小I', '女', 20, '大一'],
['小J', '男', 20, '大三']
];
var i, j;
document.write('大一女生的姓名是:')
for(i in stus)
{ if(stus[i][1]=='女'&&stus[i][3]=='大一')
document.write(stus[i][0]+" ");
}
进一步:
1)用对象构造函数构造Student对象,以上10个学生都转换成10个student对象,并用stus存储为数组。
2)将以上构建的stus数组用表格在网页中展示,包括五列,序号,姓名,性别,年龄,年级。
把学生大一的女生的信息加粗并且加上背景色突出显示出来,
其余学生的信息默认效果显示就可以了
序号 姓名 性别 年龄 年级
1 小A 女 21 大一
2 .. .. .. .. */
代码:
var student=new Object();
var stus = new Array(10);
function Student(name,gender,age,grade){
this.name=name;
this.age=age;
this.gender=gender;
this.grade=grade;
}
stus[0]=new Student('小A', '女', 21, '大一');
stus[1]=new Student('小B', '男', 23, '大三');
stus[2]=new Student('小C', '男', 21, '大四');
stus[3]=new Student('小D', '女', 21, '大一');
stus[4]=new Student('小E', '女', 22, '大四');
stus[5]=new Student('小F', '男', 21, '大一');
stus[6]=new Student('小G', '女', 22, '大二');
stus[7]=new Student('小H', '女', 20, '大三');
stus[8]=new Student('小I', '女', 20, '大一');
stus[9]=new Student('小J', '男', 20, '大三');
function show(){
var i;
document.write('<table border = "1" width="400dp">');
document.write('<tr><td>序号</td><td>姓名</td><td>性别</td><td>年龄</td><td>年级</td></tr>');
for(i = 0;i<10;i++){
if(stus[i].gender=='女'&&stus[i].grade=='大一'){
document.write('<tr bgcolor="#3C6Fee"><th>'+(i+1)+'</th><th>'+stus[i].name+'</th><th>'+stus[i].gender+'</th><th>'+stus[i].age+'</th><th>'+stus[i].grade+'</th></tr>');
}else{
document.write('<tr><td>'+(i+1)+'</td><td>'+stus[i].name+'</td><td>'+stus[i].gender+'</td><td>'+stus[i].age+'</td><td>'+stus[i].grade+'</td></tr>');
}
}
document.write('</table>');
}
show();