1.新建1-1.html文件,在<head></head>中插入JavaScript脚本,输出相应内容,具体如下: (1)弹出一个对话框,显示“欢迎进入JavaScript的奇妙世界!” alert(‘欢迎进入JavaScript的奇妙世界!’); 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> alert('欢迎进入JavaScript的奇妙世界!'); </script> </body> </html>
(2)在网页中输出“这是我的第一个JavaScript页面” document.write(‘这是我的第一个JavaScript页面’); 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> document.write('这是我的第一个JavaScript页面'); </script> </body> </html>
(3)在页面中换行显示当前的日期和时间 document.write(‘<br/>’); var now=new Date(); document.write(now); 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> document.write('<br/>'); var now=new Date(); document.write(now); </script> </body> </html>
请描述注释有几种类别,各是什么: 1)单行代码注释 2)多行代码注释
2.新建1-2.html文件,在文件中插入JavaScript脚本,分别定义数值型、字符型、布尔型和数组类型变量,并进行基本运算,观察和掌握各种数据类型的特点。 (1)数值型:定义变量r=10,定义常量pi=3.14,计算s=pi*r*r 的值,并显示。 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var r=10,pi=3.14,s; s=pi*r*r; console.log('s='+s); </script> </body> </html>
(2)字符串型:将用户的family_name(自己的姓—以拼音形式)和given_name(自己的名字—以拼音形式)通过字符串连接后整体输出,并截取用户的身份证号码(自己的身份证号码)中的出生日期信息,输出用户的出生年月。 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var family_name='she'; var given_name='wen'; console.log(''+family_name+given_name); var id="420922200110027848"; alert(id.substring(6,12)) </script> </body> </html>
(3)布尔型:输出今年的年份,并判断今年是否是闰年,并将判断结果显示在网页中。/*闰年是指:普通年(不能被100整除的年份)能被4整除的为闰年。(如2004年就是闰年普通年(不能被100整除的年份)能被4整除的为闰年。(如2004年就是闰年,1999年不是闰年); 世纪年(能被100整除的年份)能被400整除的是闰年(如2000年是闰年,1900年不是闰年)。*/ 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var year=2022; var yes=true,no=false; document.write('2022是否为闰年?是返回true,不是返回false'); document.write('<br/>'); if(year%400==0||(year%4==0&&year%100!=0)) document.write(yes); else document.write(no); </script> </body> </html>
(4)空值型和未定义类型:定义一个空值型和未定义类型的变量,通过typeof观察它们的数据类型。定义name="WangFeng ";。定义sex;(不赋值)。定义age=null;。分别输出三个变量,并通过typeof输出类型。 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var name='WangFeng'; var sex; var age=null; console.log('%s',name,typeof name); console.log('%s',sex,typeof sex); console.log('%s',age,typeof null); </script> </body> </html>
(5)数组对象:将常用的汽车品牌存储在数组对象中,并输出在网页上。cars[0]="Audi";cars[1]="BMW";cars[2]="Benz";cars[3]="Volkswagen";cars[4]="Volvo"; cars[5]="Chery"; 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> var cars=['Audi','BMW','Benz','Volkswagen','Volvo']; document.write(cars); </script> </body> </html>
|
1. if...else语句的使用。新建3-1.html文件,在<head></head>中插入JavaScript脚本,要求在用户进行输入的对话框中输入数字,输出其绝对值。 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var n=prompt('输入一个数字:'); if(n>=0) document.write(n); else document.write(-n); </script> </head> <body> </body> </html> 2.嵌套if...else语句。新建3-2.html文件,在<head></head>中插入JavaScript脚本,要求将百分制成绩转化成等级输出。规则如下: score>=90 输出:”你的成绩是:A,你真棒!”; score>=80 输出:”你的成绩是:B,也不错!”; score>=70 输出:”你的成绩是:C,再努努力就更好了!”; score>=60 输出:”你的成绩是:D,刚及格,要继续加油啊!”; 其他 输出:”你的成绩是:E,要努力啦,不然就掉队了!”; 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var score=prompt('输入你的分数:'); if(score>100) document.write('你的输入有误!'); else if(score>=90) document.write('你的成绩是:A,你真棒!'); else if(score>=80) document.write('你的成绩是:B,也不错!'); else if(score>=70) document.write('你的成绩是:C,再努努力就更好了!'); else if(score>=60) document.write('你的成绩是:D,刚及格,要继续加油啊!');
else document.write('你的成绩是:E,要努力啦,不然就掉队了!') </script> </head> <body> </body> </html>
3.switch语句的使用。新建3-3.html文件,在<head></head>中插入JavaScript脚本,要求将百分制成绩转化成等级输出。规则如下: score>=90 输出:”你的成绩是:A,你真棒!”; score>=80 输出:”你的成绩是:B,也不错!”; score>=70 输出:”你的成绩是:C,再努努力就更好了!”; score>=60 输出:”你的成绩是:D,刚及格,要继续加油啊!”; 其他 输出:”你的成绩是:E,要努力啦,不然就掉队了!”; 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var score=prompt('输入你的分数:'); var n=parseInt(score/10);//取整 switch(n){ case 10: case 9: document.write('你的成绩是:A,你真棒!');break; case 8: document.write('你的成绩是:B,也不错!');break; case 7: document.write('你的成绩是:C,再努努力就更好了!');break; case 6: document.write('你的成绩是:D,刚及格,要继续加油啊!');break; default: document.write('你的成绩是:E,要努力啦,不然就掉队了!'); } </script> </head> <body> </body> </html>
|
4.while语句的使用。新建3-4.html文件,在<head></head>中插入JavaScript脚本,要求使用while循环按次序输出行号。 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> <script> var i=0; while(i<50){ document.write(i+'<br/>'); i++; } </script> </html>
5. do...while语句的使用。新建3-5.html文件,在<head></head>中插入JavaScript脚本,要求使用do...while循环按求1到10的阶乘。 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var i=1,n=1; do{ n=n*i; document.write(i+'!'+'='+n+'<br />'); i++; }while (i<=10); </script> </head> <body> </body> </html>
6.for语句的使用。新建3-6.html文件,在<head></head>中插入JavaScript脚本,要求使用for循环按求1到10的阶乘。 1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var i,n=1; for(i=1;i<=10;i++) { n=n*i; document.write(i+'!'+'='+n+'<br />'); } </script> </head> <body> </body> </html>
7. 打印如下图所示金字塔图案。要求使用循环结构完成。
1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var i,j; for(i=1;i<=9;i++) { for(j=1;j<=9-i;j++) document.write(' '); for(j=1;j<=2*i-1;j++) document.write('*'); document.write('<br />'); } </script> </head> <body> </body> </html>
8. 打印如下图所示九九乘法口诀表。要求使用循环结构完成。
1)源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var i,j,sum; for(i=1;i<=9;i++) { for(j=1;j<=i;j++) { sum=i*j; document.write(i+'*'+j+'='+sum+' '); } document.write('<br/>'); } </script> </head> <body> </body> </html>
|
实验四实验四实验四啊!
本文介绍了JavaScript在HTML中的基本应用,包括弹窗提示、页面输出、日期显示,以及数值型、字符串型、布尔型和数组类型的变量定义与运算。同时,展示了if...else、嵌套if...else、switch语句和不同循环结构(while、do...while、for)的使用示例,用于处理条件判断和计算阶乘。此外,还提供了打印金字塔图案和九九乘法口诀表的代码实现,强调了循环结构的重要性。
摘要由CSDN通过智能技术生成