JavaScript简单程序设计
J avaScript 简单程序
设计
By Sufer
目录
一、JavaScript 变量、表达式和运算符 (1)
1 .显示年龄 (1)
2.税额计算 (1)
3 .思考题 (2)
二、JavaScript 对话框 (3)
1 .警示对话框程序案例 (3)
2 .确认对话框程序案例 (3)
3 .提示对话框程序案例 (4)
4 .思考题 (5)
三、JavaScript 函数的定义及调用 (6)
1 .素数判断 (6)
2.局部变量和全局变量 (7)
3. 思考题:设计检测手机号码的程序 (9)
四、JavaScript 分支结构程序设计 (11)
1.两个数排序 (11)
2.常识问答 (12)
3.思考题 (13)
五、JavaScript 循环结构程序设计 (14)
1.求1+2+3+...+100 的累计和. (14)
2.二位整数相加的测试程序 (15)
3.累加用户输入的整数 (16)
4.思考题 (17)
六、制作一个网页:计算两点间距离 (18)
1.代码 (18)
2.实现效果 (19)
一、JavaScript 变量、表达式和运算符
1 .显示年龄
var name;
var age;
name="张三";
age=20;
document.write(name);
document.write(" 的年龄是:");
document.write(age);
在网页中显示"张三的年龄是:20"。
2.税额计算
var list,rate=0.05,paid=105,tax;
list=paid/(1+rate);
tax=paid-list;
document.writeln(" 标价 ="+list);
document.writeln(" 税额 ="+tax);
付款105,税率0.05,在网页中显示标价和税额的计算结果。
3 .思考题
设计JavaScript 程序,在网页上输出半径为 3 的圆的面积和周长。
var r=3;
var pi=3.1415;
document.writeln(" 圆的半径为:"+r);
document.writeln(" 圆的面积为:"+pi*r*r);
document.writeln(" 圆的周长为:"+2*pi*r);
半径为3,在网页中显示圆的半径,面积和周长。
二、JavaScript 对话框
1 .警示对话框程序案例
alert(" 欢迎浏览本页面!");
打开网页,弹出“欢迎浏览本页面”的警示对话框。
2 .确认对话框程序案例
var visited,show_text;
visited=confirm(" 您来过湖北职院吗? ");
show_text=visited?" 您也认为湖北职院很美吧!":"欢迎您有机会来湖北职院参观!";
document.write(show_text);
打开网页,弹出" 您来过湖北职院吗? "的确认对话框,点击确定,在网页中显示" 您也认为湖北职院很美吧!",点击取消,在网页中显示"欢迎您有机会来湖北职院参观!"。
3 .提示对话框程序案例
打开网页,弹出" 请输入您的姓名:"的提示对话框,输入“yhf”,点击确定,在网页中显示" 尊敬的yhf:欢迎您进入我的主页!"。
4 .思考题
设计密码检测程序,密码输入正确,显示“欢迎访问”,不正确显示“密码不正确,好好想哦”。
var password="123456";
var answer=prompt(" 请输入您的密码 ","");
alert((answer == password)?" 欢迎访问":" 密码不正确,好好想想哦!");
打开网页,弹出" 请输入您的密码 "的提示对话框。在警示对话框中有一个判断,输入“123456”,点击确定,弹出警示对话框" 欢迎访问"。输入其他的密码,点击确定,弹出警示对话框" 密码不正确,好好想想哦!"。
三、JavaScript 函数的定义及调用
1 .素数判断
function IsPrime(p)
{
if(p<1) return false;
var i;
for(i=2;i
}
var x;
x=parseInt(prompt(" 请输入 1-100之间的数字 ","1"));
alert(" 该数是否为素数:"+IsPrime(x));
打开网页,弹出" 请输入 1-100之间的数字 "的提示对话框,默认数字是“1”。在警示对话框中有一个素数判断函数,输入一个非素数,如“6”,点击确定,弹出警示对话框" 该数是否为素数:false"。输入一个素数,如“11”,点击确定,弹出警示对话框" 该数是否为素数:true"。
2.局部变量和全局变量
function first(p,q){
p=p*2;
b=b+1;
var c=100;
document.writeln("P 的值为:",p,"
");
document.writeln("a 的值为:",a,"
");
document.writeln("b 的值为:",b,"
");
document.writeln("c 的值为:",c,"
");
}
var a=1,b=2,c=3;
first(a,b);
document.writeln("a 的值为:",a,"
");
document.writeln("b 的值为:",b,"
");
document.writeln("c 的值为:",c,"
");
打开网页,定义变量a=1,b=2,c=3,执行函数first,a和b的值传递给p和q,p=p*2=2(p是局部变量),b=b+1=3(这里的b是全局变量里的b),c=100(这里的c是函数内的局部变量),
在网页中显示
P 的值为:2
a 的值为:1
b 的值为:3
c 的值为:100
a 的值为:1
b 的值为:3
c 的值为:3
3. 思考题:设计检测手机号码的程序
function test(obj){
if(obj.length!=11) alert(" 手机号码应该是11位数字");
else if(obj.substring(0,2)!="13") alert(" 手机号码应该以13开头");
else if(isNaN(obj)) alert("手机号码应该是11位数字");
else alert(" 你填的是正确的手机号码");
}
检查手机号码:
在网页中显示“检查手机号码:”+回车。显示表单,表单中有“示例:”,输入文本框,“提交”按钮。再输入文本框里输入手机号,点击提交按钮,执行test 函数,将输入文本框的值作为函数的参数,进行判断输入的手机号码的长度,前两位数字是“13”,是否是非法数字等。显示相应的警示对话框。
四、JavaScript 分支结构程序设计
1.两个数排序
var x,y,temp;
x= parseFloat(prompt(" 请输入x的值:","0"));
y= parseFloat(prompt(" 请输入y的值:","0"));
if(x>y)
{
temp=x;
x=y;
y=temp;
}
document.writeln(" 排序后,x="+x+";y="+y);
打开网页,弹出提示对话框,输入x,y的值,默认是“0”,点击确定后(parseFloat 函数将字符串参数解析成浮点数并返回),判断x>y,如果是,交换x和y。在网页中显示排序后的结果。
2.常识问答
var answer;
answer=prompt(" 中国的首都在哪个城市?\nA.香港 \tB.广州 \tC.北京 \tD.上海","E");
switch(answer)
{
case "a":
case "A":
alert(" 错!香港是中国的特别行政区 ");
break;
case "b":
case "B":
alert(" 错!广州是中国南部的大城市 ");
break;
case "c":
case "C":
alert(" 对!北京是中国的首都,在中国北方 ");
break;
case "d":
case "D":
alert(" 错!上海是中国东部的大都市 ");
break;
default:
alert(" 选择错误!只能选填字母A、B、C或D");
break;
}
打开网页,弹出提示对话框,
“中国的首都在哪个城市?
A.香港
B.广州
C.北京
D.上海”
默认“E”。
填写答案(大小写均可),单击确定后。执行switch函数,弹出相应警示对话框。
3.思考题
根据成绩给出学生的考评:如果成绩>=85, 考评“优”,否则如果成绩>=60 ,
考评“及格”, 否则考评为“不及格”。
var score,grade;
score =parseFloat(prompt("请输入学生的成绩:",""));
if(score>=85)
grade="优";
else if(score>=75)
grade="中";
else if(score>=60)
grade="及格";
else
grade="不及格";
alert(" 根据学生成绩:"+score+",评定为:"+grade);
打开网页,弹出提示对话框"请输入学生的成绩:",执行多个if和else if函数,判断分数区间,显示相应的成绩考评。
五、JavaScript 循环结构程序设计
1.求1+2+3+…+100 的累计和
var i,sum=0;
for(i=1;i<=100;i++)
{
sum+=i;
}
document.write("1+2+3+……+100="+sum);
打开网页,显示"1+2+3+……+100=5050"。
2.二位整数相加的测试程序
var go_on,x,y,result,answer
do{
x=Math.floor(Math.random()*90)+10;
y=Math.floor(Math.random()*90)+10;
result=x+y;
answer=parseFloat(prompt(x+ "+" +y+"=","0"));
go_on=confirm((answer==result)?"答对":"答错"+"! \t继续测试吗?") }while(go_on)
打开网页,弹出提示对话框,显示两个随机数相加,要求填入正确答案,默认“0”。点击确定,弹出确认对话框,显示“答对”和"答错! 继续测试吗?",点
击确定,继续答题,点击取消,退出答题。
3.累加用户输入的整数
var input,input_number,sum;
for(sum=0;;){
input=prompt("sum="+sum+"\n请输入新的累加数(输入Q结束):","0");
if(input==null||input=="Q"||input=="q")break;
if(isNaN(input))continue;
input_number=parseFloat(input);
if(input_number<=0)continue;
sum+=input_number;
}
alert("sum="+sum);
打开网页,弹出提示对话框,显示"sum=0请输入新的累加数(输入Q结束):"默认“0”。一开始sum=0,之后显示计算结果。输入Q(大小写均可)或者不输入值则退出,输入非法值或数字则继续。退出后显示提示对话框"sum= "。
4.思考题
在页面上显示一个“9 ×9 乘法表”。
var i,j;
document.write("
");");for(i=1;i<=9;i++)
{
for(j=1;j<=i;j++)
{
if(j>1) document.write("\t");
document.write(j+"*"+i+"="+j*i);
}
document.writeln();
}
document.write("
文件按照原始的排列方式显示,允许保留原始码中输入的空白及回车换行。writeln将在所提供的任何字符串后添加一个换行符,在 HTML 中,这通常只会在后面产生一个空格;不过如果使用了和标识,这个换行符会被解释,且在浏览器中显示。因此会形成乘法表的显示效果。 六、制作一个网页:计算两点间距离
1.代码
function test(x1,y1,x2,y2){
d1=x1-x2;
d2=y1-y2;
d=Math.sqrt(d1*d1+d2*d2);
document.form1.dis.value=d;
}
输入两个点的坐标