web程序设计实验六_第1页
web程序设计实验六_第2页
web程序设计实验六_第3页
web程序设计实验六_第4页
web程序设计实验六_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《web开发基础》试验报告PAGE11实验六Javascript语法练习学号:092715206姓名:崔兆文1.1实验目的学习Javascript基本语法；学习Javascript变量定义及使用；学习Javascript流程控制方法if...else...,while，for，switch...case...；学习方法的定义functionmethodName(var1，,...){...}；学习document.write(),alert()的使用；学习document获取文本信息的方法。学习Javascript内置对象Date的使用。1.2实验要求请完成实验并将实验过程写在下面的实验内容部分，每题要求给出题目、源代码（带必要的注释）以及程序运行效果截图。1.3实验内容题1：在页面显示如下图形。源代码：<html> <head> <metacharset="UTF-8"> <title></title> </head> <body> </body></html><script>for(vari=0;i<3;i++){for(vark=0;k<=2-i;k++){document.write(" ");}for(varj=1;j<=i+1;j++){document.writeln("*");document.write(" ");}document.writeln("<br/>");}for(vari=0;i<2;i++){for(vark=0;k<=i+1;k++){document.write(" ");}for(varm=0;m<2-i;m++){document.writeln("*");document.write(" ");}document.writeln("<br/>");}</script>运行效果截图：题2：屏幕上给出文本框用于输入圆形半径，计算按钮用于弹出窗口显示计算的面积。提示：自己查阅javascript的prompt（）函数，并利用其完成该题。源代码：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head><body> <divid=""> 请输入圆的半径： <inputtype="text"id="rad"/> <buttononclick="getarea()">计算</button> </div> </body></html><scripttype="text/javascript"> functiongetarea(r){ varr=document.getElementById("rad").value; vararea=r*r*3.14; alert("圆的面积为："+area); }</script>运行效果截图：题3：使用去确认对话框提问“你是否来过重庆？”，如果点击“确认”，用警告对话框输出“你也认为重庆很美丽吧！”；如果点击“取消”，用警告对话框输出“欢迎你到重庆来旅游！”源代码：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <body> </body></html><scripttype="text/javascript"> varresult=confirm("你是否来过重庆？"); if(result){ alert("你也认为重庆很美丽吧！"); } else{ alert("欢迎你来重庆旅游！"); }</script>运行效果截图：图1.确认对话框图2.点击确认图3.点击取消题4：通过体提示消息框输入任意一个整数xxx，求该整数的阶乘，并将结果通过警告对话框显示出来。提示：对输入的数要进行判断。（可参考javascript完全手册中的函数parseInt）源代码：<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <body> </body></html><scripttype="text/javascript"> varx=prompt("输入任意一个整数"); if(/(^[1-9]\d*$)/.test(x)) { for(vari=x-1;i>1;i--){ x=x*i; } alert(x); } elsealert("你输入的不是正整数"); </script>运行效果截图：图1.提示框图2.输入整数“6”点击确定图3.输入不是整数图4.提示不是整数思考题：在文本框分别输入两个数，实现两个数的+、-、*、/运算，点击“=按钮将”结果显示在文本框中。界面设计可参考下图。注意对文本框输入的数据是否是数字要进行判断。运行界面设计参考如下：源代码：第一种方法：使用eval()函数（参考了网上教程）注：通过input中type类型为number限制输入必须为数字<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title></title></head><body><p>请输入两个数进行简单计算</p><inputtype="number"id="num1"><selectname=""id="symbol"><optionvalue="+">+</option><optionvalue="-">-</option><optionvalue="*">*</option><optionvalue="/">/</option></select><inputtype="number"id="num2"><inputtype="button"value="="id="result"><inputtype="text"id="showResult"><script>(function(){varn1=document.getElementById('num1'),n2=document.getElementById('num2'),s=document.getElementById('symbol'),rs=document.getElementById('result'),sr=document.getElementById('showResult');rs.onclick=function(ev){sr.value=eval(n1.value+s.value+n2.value);};})();</script></body></html>第二种方法：使用函数思想<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title></head><body><p>请输入两个数进行简单计算</p><inputplaceholder="数字1"id="num1"/><selectid="rule"><optionvalue="add">+</option><optionvalue="sub">-</option><optionvalue="multi">*</option><optionvalue="division">/</option></select><inputplaceholder="数字2"id="num2"/><buttonid="calcBtn"onclick="execute();">=</button><inputplaceholder="结果"disabled="disabled"id="result"/><script>functionexecute(){varnum1=document.getElementById("num1").value;varnum2=document.getElementById("num2").value;varrule=document.getElementById("rule").value;varrs=calc(num1,num2,rule);varresult=document.getElementById("result");result.value=rs;};functioncalc(num1,num2,rule){num1=parseFloat(num1);num2=parseFloat(num2);if(isNaN(num1)||isNaN(num2)){return"非法的操作数";}switch(rule){case"add":returnadd(num1,num2);case"sub":returnsub(num1,num2);case"multi":returnmulti(num1,num2);case"division":returndivision(num1,num2);default: return"不支持的运算符";}};functionadd(num1,num2){returnnum1+num2;};functionsub(num1,num2){returnnum1-num2;};functionmulti(num1,num2){returnnum1*num2;};functiondivision(num1,num2){if(num2==0){return"除数不能为零";}returnnum1/num2;};</script></body></html>运行效果截图：图1.方

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论