1.定义变量 三种输出方式
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<!--内部js-->
<script type="text/javascript">
//定义js变量
/*
这是一行注释
这是另外一行
*/
var name = '张三';
var sex = "男";
var age = 20;
var tall = 1.234;
//用消息框的方式，显示信息
//alert(name+" "+sex+" "+age+" "+tall)
//使用js内置对象document输出内容到页面上
//document.write(name+" "+sex+" "+age+" "+tall);
//使用调试输出对象console将信息输出到浏览器的控制台中
console.log(name,sex,age,tall);
</script>
</head>
<body>
</body>
</html>
运行结果如下：
补充：
alert() 弹出个提示框 （确定）
confirm() 弹出个确认框 （确定，取消）
prompt() 弹出个输入框 让你输入东西
使用消息框
使用警告、提示和确认
可以使用警告、确认和提示消息框来获得用户的输入。这些消息框是 window 对象的接口方法。由于 window 对象位于对象层次的顶层，因此实际应用中不必使用这些消息框的全名（例如 “window.alert()”），不过采用全名是一个好注意，这样有助于您记住这些消息框属于哪个对象。
警告消息框
alert 方法有一个参数，即希望对用户显示的文本字符串。该字符串不是 HTML 格式。该消息框提供了一个“确定”按钮让用户关闭该消息框，并且该消息框是模式对话框，也就是说，用户必须先关闭该消息框然后才能继续进行操作。
window.alert(“欢迎！请按“确定”继续。”);
确认消息框
使用确认消息框可向用户问一个“是-或-否”问题，并且用户可以选择单击“确定”按钮或者单击“取消”按钮。confirm 方法的返回值为 true 或 false。该消息框也是模式对话框：用户必须在响应该对话框（单击一个按钮）将其关闭后，才能进行下一步操作。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script type="text/javascript">
var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。");
if (truthBeTold) {
window.alert("欢迎访问我们的 Web 页！");
} else {
window.alert("再见啦！");
}
</script>
</head>
<body>
</body>
</html>
提示消息框
提示消息框提供了一个文本字段，用户可以在此字段输入一个答案来响应您的提示。该消息框有一个“确定”按钮和一个“取消”按钮。如果您提供了一个辅助字符串参数，则提示消息框将在文本字段显示该辅助字符串作为默认响应。否则，默认文本为 “”。
与alert( ) 和 confirm( ) 方法类似，prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框
var theResponse = window.prompt(“欢迎？”,“请在此输入您的姓名。”);
window.confirm 参数就只有一个.显示提示框的信息.
按确定,返回true; 按取消返回false.
window.alert参数,只有一个,显示警告框的信息;
无返回值.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script type="text/javascript">
var bln = window.confirm("确定吗?");
alert(bln);
</script>
</head>
<body>
</body>
</html>
window.prompt参数,有两个,
第一个参数,显示提示输入框的信息.
第二个参数,用于显示输入框的默认值.
返回,用户输入的值.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script type="text/javascript">
var str = window.prompt("请输入密码","password")
alert(str);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script type="text/javascript">
var yanzhengma = window.prompt("输入验证码", "")
if( yanzhengma == 123 ){
alert("ok");
}
else {
alert("false");
}
</script>
</head>
<body>
</body>
</html>
2.引入外部js代码 行内js
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<!--引入外部js代码-->
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
<!--行内js-->
<a href="javascript:alert('hello,js')">来点一下</a>
</body>
</html>
js代码如下：
var n1 = 10;
var n2 = 20;
document.write(n1+n2);
运行结果如下：
3.输入和输出
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<script type="text/javascript">
//输入和输出
//弹出输入框，接受用户输入，并将输入的内容存储到name中
//var name = prompt("请输入你喜欢的明星:","");
//document.write("你喜欢的明星是:"+name)
var num = 200;
var s1 = "100";
var s2 = 100;
//document.write(s1+num);
//document.write("<hr/>");
//document.write(s2+num);
//var xxx;
//alert(xxx);
var d = new Date();
alert(d.getFullYear());
</script>
</head>
<body>
</body>
</html>
运行结果如下：
4.数据模型 typeof
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<script type="text/javascript">
//js数据类型
var v;
//typeof:用于输出变量中的数据类型
document.write(v+" "+(typeof v)+"<br/>");
v = "张三";
document.write(v+" "+(typeof v)+"<br/>");
v = 200;
document.write(v+" "+(typeof v)+"<br/>");
v = 1.234;
document.write(v+" "+(typeof v)+"<br/>");
v = true;
document.write(v+" "+(typeof v)+"<br/>");
v = new Date();
document.write(v+" "+(typeof v)+"<br/>");
v = null;
document.write(v+" "+(typeof v)+"<br/>");
</script>
</head>
<body>
</body>
</html>
运行结果如下：
5.算术运算符 自加 ++
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<script type="text/javascript">
//算术运算符:+,-,*,/,%,++,-- 运算结果:数值
//自增(自己加1)/自减(自己减1)
//var n = 10;
//++n; //当只有一步运算的时候，自增在前/在后效果都一样
//var m = n++; //当有多步运算的时候，自增在前/在后结果不一样
//1.自增在前,则先做自增运算，再做其他运算
//2.自增在后,则先做其他运算，再做自增运算
//document.write(n+" "+m);
var x = 10
document.write(++x);
document.write("<br/>");
document.write(x);
//+具有二义性: 1.如果两边都是数值则做加法运算
// 2.如果连接的操作数有一个是字符串则做拼接
/*var s1 = "10";
var s2 = 20;
document.write(s1+s2)*/
/*
var n1 = 10;
var n2 = 3;
document.write(n1+n2);
document.write("<br/>");
document.write(n1-n2);
document.write("<br/>");
document.write(n1*n2);
document.write("<br/>");
document.write(n1/n2);
document.write("<br/>");
document.write(n1%n2);
document.write("<br/>");
*/
</script>
</head>
<body>
</body>
</html>
运行结果如下：
6.关系运算符
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<script type="text/javascript">
//关系运算:>,>=,<,<=,==(等值判断),!=,===(等值等型判断) 运算结果：布尔
var n = "10";
var m = 10;
document.write(n==m);
document.write("<br>");
document.write(n===m);//同时判断值和类型
/*
var n = 10;
var m = 5;
document.write(n>m);
document.write("<br/>");
document.write(n>=m);
document.write("<br/>");
document.write(n<m);
document.write("<br/>");
document.write(n<=m);
document.write("<br/>");
document.write(n==m);
document.write("<br/>");
document.write(n!=m);
document.write("<br/>");
document.write(n===m);
document.write("<br/>");
*/
</script>
</head>
<body>
</body>
</html>
运行结果如下：
7.逻辑运算符 与 && 或 || 非 ！
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<script type="text/javascript">
//逻辑运算:&&(逻辑与) ||(逻辑或) !(逻辑非) 运算结果：布尔
//逻辑运算用于连接多个关系运算(条件)
//&&(逻辑与):连接的多个关系运算有一个为假，则结果为假，否则为真
//||(逻辑或):连接的多个关系运算有一个为真，则结果为真，否则为假
//!(逻辑非):对关系运算结果取反
document.write(3>5 || 1<2);
document.write("<br/>");
document.write(3>5 && 1<2);
document.write("<br/>");
document.write(!(3>5))
</script>
</head>
<body>
</body>
</html>
运行结果如下：
8.赋值运算符 增强运算 += -=
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<script type="text/javascript">
//赋值运算
var n = 10;
//增强赋值
n += 3; // n+=3 ===> n = n+3; 先运算再赋值
document.write(n+"<br/>");
n -= 5;
document.write(n+"<br/>");
n *=8;
document.write(n+"<br/>");
n /=2;
document.write(n+"<br/>");
n %=10;
document.write(n+"<br/>");
</script>
</head>
<body>
</body>
</html>
运行结果如下：
9.三目运算符(? : 表达式)
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<script type="text/javascript">
//三目运算符(? : 表达式)
var money = 100;
var res = money>=100?"富豪":"穷人";
alert(res);
</script>
</head>
<body>
</body>
</html>
运行结果如下：
10. 优先级
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<script type="text/javascript">
//3+5*2-8/4+(9-2)*3
//alert(!true)
//算术运算,关系运算,逻辑运算,赋值运算
// ()-> !,++,-- ->算术运算(*/+-)->关系运算(>,>=,<,<=,==,!=)->逻辑运算(&& ||)->赋值
var flag = 3+5>9 && 5*(2-3)<-12 || 7/2==10 && 34/5!=18 || (!(1==5));
</script>
</head>
<body>
</body>
</html>
11.数据类型转换 parseInt parseFloat parseNumber NaN
代码如下：
<!DOCTYPE html >
<html>
<head>
<title> New Document </title>
<meta charset="utf-8">
<script type="text/javascript">
var n1 = prompt("请输入第一个数:","");
var n2 = prompt("请输入第二个数:","");
//默认通过输入框输入的都是字符串类型的数据,所以要进行转型
//parseInt:将字符串转为整形,如果有小数内容，则直接舍弃
//parseFloat:将字符串转为小数
//Number:将字符串(整数/小数)转为数值
//NaN:not a number 不是数字。可以使用isNaN(n1)进行判断 返回true/false
n1 = Number(n1);
n2 = Number(n2);
document.write(n1+" "+typeof(n1)+"<br/>");
document.write(n2+" "+typeof(n2)+"<br/>");
if(isNaN(n1) || isNaN(n2)){
alert("输入的不是数字，无法运算")
}else{
var res = n1+n2;
document.write("结果:"+res);
}
</script>
</head>
<body>
</body>
</html>
运行结果如下：
练习部分：
1.水仙花数
输入一个数字，判断是不是水仙花数 自恋数 ,自幂数（个位的3次方+十位的3次方+百位的3次方=数本身 153）——true false即可。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script type="text/javascript">
var num=prompt("请输入一个三位数的整数：","");
num=parseInt(num);
if(999 >= num && num >= 100 ){
var bai,shi,ge,num1;
bai=parseInt(num/100);
shi=parseInt((num-bai*100)/10);
ge=parseInt(num-bai*100-shi*10);
num1=bai**3+shi**3+ge**3;
alert(num==num1);
<!-- alert(); -->
}
</script>
</head>
<body>
</body>
</html>
运行结果如下：
2.鸡兔同笼
一个笼子里有鸡和兔子，头有35，腿有94；输入两个数字，分别代表鸡和兔子的个数,输出是否是答案。——输出true false即可。
鸡x 兔y x+y=35 && 2x+4y=94 满足的条件var x = prompt();var y = prompt();if
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script type="text/javascript">
var x=prompt("请输入鸡的个数："," ");
var y=prompt("请输入兔的个数："," ");
x=parseInt(x);
y=parseInt(y);
/* if(x+y==35){
if(2*x+4*y==94){ // 注意：2x+4y=94 不对 2*x+4*y=94 正确 需要加*
alert(2*x+4*y==94);
}
else{
alert(2*x+4*y==94);
}
}
else{
alert(x+y==35);
} */
if(x+y==35 && 2*x+4*y==94){
alert(x+y==35 && 2*x+4*y==94);
}
else{
alert(x+y==35 && 2*x+4*y==94);
}
</script>
</head>
<body>
</body>
</html>
运行结果如下：
3.计算价格
同学聚会，进行点菜，点了大盘鸡 水煮鱼 大虾 以及4个凉菜 1箱啤酒 分别录入各个单价，并计算总价，录入总学生数，计算人均多少钱。
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script type="text/javascript">
var daj=prompt("请输入大盘鸡的单价","");
var szy=prompt("请输入水煮鱼的单价","");
var dx=prompt("请输入大虾的单价","");
var lc=prompt("请输入凉菜的单价","");
var pj=prompt("请输入啤酒的单价","");
var zongjia,zj,rj;
zongjia=Number(daj)+Number(szy)+Number(dx)+Number(lc)*4+Number(pj);
alert(zongjia);
var rs=prompt("请输入学生总人数：","");
rj=zongjia/rs;
alert(rj);
</script>
</head>
<body>
</body>
</html>
运行结果如下：
4.回文数
输入一个3/4/5/6位数，判断这个数是不是回文数（正看==反看）。
121 12321 1234321
代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<script type="text/javascript">
/* 输入一个3/4/5/6位数，判断这个数是不是回文数（正看==反看）。
1. 121 12321 1234321 */
var num=prompt("输入一个3/4/5/6位数","");
num=parseInt(num);
var shiwan,wan,qian,bai,shi,ge;
if(num>=100 && 999>=num){ /* 三位*/
bai=parseInt(num/100);
shi=parseInt((num-bai*100)/10); /* 注意：不能用中括号[] */
ge=parseInt(num-bai*100-shi*10);
/* alert(bai==ge); */
if(bai==ge){
alert(num+"是回文数！");
}
else{
alert(num+"不是回文数！");
}
}else if(num>=1000 && 9999>=num){ /* 四位*/
qian=parseInt(num/1000);
bai=parseInt((num-qian*1000)/100);
shi=parseInt((num-qian*1000-bai*100)/10);
ge=parseInt(num-qian*1000-bai*100-shi*10);
if(qian==ge && bai==shi){
alert(num+"是回文数！");
}
else{
alert(num+"不是回文数！");
}
}else if(num>=10000 && 99999>=num){ /* 五位*/
wan=parseInt(num/10000);
qian=parseInt((num-wan*10000)/1000);
bai=parseInt((num-wan*10000-qian*1000)/100);
shi=parseInt((num-wan*10000-qian*1000-bai*100)/10);
ge=parseInt(num-wan*10000-qian*1000-bai*100-shi*10);
if(wan==ge && qian==shi){
alert(num+"是回文数！");
}
else{
alert(num+"不是回文数！");
}
}else if(num>=10000 && 99999>=num){ /* 六位*/
shiwan=parseInt(num/100000);
wan=parseInt((num-shiwan*100000)/10000);
qian=parseInt((num-shiwan*100000-wan*10000)/1000);
bai=parseInt((num-shiwan*100000-wan*10000-qian*1000)/100);
shi=parseInt((num-shiwan*100000-wan*10000-qian*1000-bai*100)/10);
ge=parseInt(num-shiwan*100000-wan*10000-qian*1000-bai*100-shi*10);
if(shiwan==be && wan==shi && qian==bai){
alert(num+"是回文数！");
}
else{
alert(num+"不是回文数！");
}
}
</script>
</head>
<body>
</body>
</html>
运行结果如下：
5.最大成绩 最小成绩 平均成绩
连续录入五个人的成绩，计算最大成绩 最小成绩和平均成绩。
代码如下：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title> New Document </title>
<script type="text/javascript">
var num;
var max;
var min;
var s1 = prompt("输入成绩1：");
s1=parseInt(s1);
num = max = min =s1;
var s2 = prompt("输入成绩2：");
s2=parseInt(s2);
if(max<s2){
max=s2;
}else{
min=s2;
}
var s3 = prompt("输入成绩3：");
s3=parseInt(s3);
if(max<s3){
max=s3;
}else if(min>s3){
min=s3;
}
var s4 = prompt("输入成绩4：");
s4=parseInt(s4);
if(max<s4){
max=s4;
}else if(min>s4){
min=s4;
}
var s5 = prompt("输入成绩5：");
s5=parseInt(s5);
if(max<s5){
max=s5;
}else if(min>s5){
min=s5;
}
num=s1+s2+s3+s4+s5;
alert("最大成绩："+max+" "+"最小成绩："+min+" "+"平均成绩："+num/5)
</script>
</head>
<body>
</body>
</html>
运行结果如下：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/118175.html
