JavaScript案例讲解
交换两个变量值案例
<script>
//案例需要:自定义2个变量,要求让他们两个变量进行互换
//幻想成现实生活:张三和李四都拿了一个箱子,并且不能放在地上
//需要完成箱子的交换.
//做法:喊第三个人帮忙.把张三的箱子给第三个人,然后张三拿李四的箱子.,李四就拿第三个人箱子.
var a1 = 100;
var a2 = "张三";
var a3 = a1;
a1 = a2;
a2 = a3;
console.log(a1);
console.log(a2);
</script>
猜数字游戏案例
<script>
//猜数字游戏:由管理员声明一个数字(1~100);
//用户通过prompt输入进行猜测.根据猜测结果进行反馈,是大了还是小了.,
//直至猜对.
//游戏规则如下:
//4个人参加.,每人都加2分, 猜对的那个人，指定另外三个人中的一个玩一把课堂惩罚小游戏.
var num = Math.random() * 100+1;//(0,100)
num = parseInt(num);
var begin = 1;
var end = 100;
while(true){
var n = prompt("请输入你要猜的数字。取值范围为" + begin + "~" + end);//string
n = Number(n);//此时的n才是number类型
if(n>num){
alert("你猜大了");
end = n;
}else if(n<num){
alert("你猜小了");
begin = n;
}else{
alert("你猜对了");
break;
}
}
</script>
实现随机数
<script>
// 根据弹窗，用户输入的数据完成求和运算，能够利用运算符计算用户输入的两数之和
// 为了避免JavaScript的精度问题，将结果保留两位小数。
var num1 = prompt("请输入第一个数字");
var num2 = prompt("请输入第二个数字");
//注意:下面写法是错误的.原因: 因为toFieed方法只能给数字使用
//但是prompt方法返回的一定是字符串,所以num1+num2的结果就是字符串.无法调用toFixed方法.
// alert( (num1 + num2).toFixed(2) );
//思考: 是一个一个将Num1和num2转成数字 还是为了节省代码将（num1+num2）看成一个整体然后进行转型
//答案:这里不能为了节省代码. 因为string+string是字符串的拼接
num1 = Number(num1);
num2 = Number(num2);
//这里注意:可以改进,如果结果是NAN 我们应该给用户提示一个"请输入合法的数据"
//思路:将NAN的值弄清楚是什么类型 通过typeof 得知 NAN 是一个String类型
if ( (num1 + num2).toFixed(2) == "NaN") {
alert("请输入合法的数据");
}else{
alert( (num1 + num2).toFixed(2) );
}
</script>
// 根据弹窗，用户输入的数据完成求和运算，能够利用运算符计算用户输入的两数之和
// 为了避免JavaScript的精度问题，将结果保留两位小数。
var num1 = prompt("请输入第一个数字");
var num2 = prompt("请输入第二个数字");
//注意:下面写法是错误的.原因: 因为toFieed方法只能给数字使用
//但是prompt方法返回的一定是字符串,所以num1+num2的结果就是字符串.无法调用toFixed方法.
// alert( (num1 + num2).toFixed(2) );
//思考: 是一个一个将Num1和num2转成数字 还是为了节省代码将（num1+num2）看成一个整体然后进行转型
//答案:这里不能为了节省代码. 因为string+string是字符串的拼接
num1 = Number(num1);
num2 = Number(num2);
//这里注意:可以改进,如果结果是NAN 我们应该给用户提示一个"请输入合法的数据"
//思路:将NAN的值弄清楚是什么类型 通过typeof 得知 NAN 是一个String类型
if ( (num1 + num2).toFixed(2) == "NaN") {
alert("请输入合法的数据");
}else{
alert( (num1 + num2).toFixed(2) );
}
</script>
赋值运算符案例以及讲解
<script>
//赋值运算符:最常见的就是 = 将右边的式子赋给左边.
// var a = 2 ;
//不常见的有如下:
// += *= -= /= %=
//例如
// a = a + 1; 等同于 a+=1;
//习题:
var a = 3;
a += 2;
console.log(a);//5
a -= 2;
console.log(a);//3
a *= 2;
console.log(a);//6
a /= 2;
console.log(a); //3
a %= 2;
console.log(a); //1
a **= 2;
console.log(a); //1
</script>
比较运算符案例以及讲解
<script>
//比较运算符 用来比较两个值 怎么样 返回结果为boolean类型.
//例如常见的有以下: > < >= <= != ==
//了解一下的 === 表示全等于
//==仅仅是判断值是否相等 ===不仅要值相等而且要类型相等
console.log("1" == 1);//true
console.log("1" === 1);//false
</script>
逻辑运算符讲解以及案例
//逻辑运算符的用法主要分为以下4类:
// && 短路与 & 逻辑与
// || 短路或 |逻辑或
//用法完全一致 区别如下:
// 例如 a && b
//如果a和b都为真,返回值才为真. 那么当a为false 将不会执行b
// 例如 a & b
//如果a和b都为真,返回值才为真. 当a为false 将会执行b
// 例如 a || b
//如果a和b只要有一个为真,返回值才为真. 那么当a为true 将不会执行b
// 例如 a | b
//如果a和b只要有一个为真,返回值才为真. 当a为true 将会执行b
var num = 1;
false && num++;
console.log(num);//1
true || num++;
console.log(num);//1
var num = 1;
false & num++;
console.log(num);//2
true | num++;
console.log(num);//3
</script>
三元运算符案例以及讲解
<script>
/*
三元运算符也称为三元表达式
语法如下：
条件表达式 ? 表达式1 : 表达式2
如果条件表达式的值为true，则返回表达式1的执行结果。
如果条件表达式的值为false，则返回表达式2的执行结果。
常用于替代简单的if-else语句
*/
var age = 18;
// if (age>18) {
// alert("成年了");
// } else{
// alert("未成年");
// }
alert( age>18?"成年了":"未成年" );
</script>
流程运算符案例以及讲解
<script>
//流程控制.如果没有流程控制,JS的代码将会从上至下依次执行
//有了流程控制,可以根据需求来进行代码的执行顺序
//JS中的流程控制:无非就是 if 和 switch
//其中if分为 简单的if if-else if else if
// 使用if语句实现只有当年龄（age变量值）大于等于18周岁时，才输出“已成年”，
// 否则无输出。
// var age = 18;
// if (age>=18) {
// alert("已成年");
// }
// 使用if…else语句实现当年龄（age变量值）大于等于18周岁时，输出“已成年”，
// 否则输出“未成年”，示例代码如下。
// var age = 18;
// if (age>=18) {
// alert("已成年");
// }else{
// alert("未成年");
// }
// 使用if…else if…else语句实现对一个学生的考试成绩按分数进行等级的划分：
// 90~100分为优秀，80~90分为良好，70~80分为中等，60~70分为及格，分数小于60则为不及格。
// var score = 75;
// if (score > 90) {
// alert("优秀")
// } else if(score>80) {
// alert("良好");
// }else if(score>60){
// alert("及格");
// }else{
// alert("不及格");
// }
//如果可能性较少 就有2-4种,使用if即可 如果可能很多就推荐使用switch
// switch语句也是多分支语句，相比if…else if…else语句，
// switch语句可以使代码更加清晰简洁、便于阅读，其语法格式如下。
/*
switch ( 表达式 ) {
case 值1:
代码段1;
break;
case 值2
代码段2;
break;
...
default:
代码段n;
}
*/
// 使用switch语句判断变量week的值，若week变量的值为1~6时输出“星期一”~“星期六”，
// 为0时输出“星期日”，若没有与week变量的值相等的case值时输出“错误”。
var week = 2;
switch (week){
case 1:
alert("周1");
break;
case 2:
alert("周2");
break;
case 3:
alert("周3");
break;
case 4:
alert("周4");
break;
case 5:
alert("周5");
break;
case 6:
alert("周6");
break;
case 0:
alert("周日");
break;
default:
alert("没有这个日期");
break;
}
// 注意事项1：break的重要性
//如果case中没有break,那么进入case之后,将不会跳出,而是会直接进入后续的case,并且是无条件进入,直到被break或执行完毕
// 注意事项2：如果存在多个case有相同的结果，怎么节省代码量。
var week = 2;
switch (week){
case 1:
case 2:
case 3:
case 4:
case 5:
alert("工作日");
break;
case 6:
case 0:
alert("节假日");
break;
default:
alert("没有这个日期");
break;
}
</script>
循环结构
<script>
// for (var i = 1; i <= 100; i++) {
// console.log(i); // 输出1、2、3、4、5、6……100
// }
// var i = 1;
// while (i <= 100) {
// console.log(i);
// i++;
// }
// var i = 1;
// do {
// console.log(i);
// i++;
// } while (i <= 100)
//常用的跳转语句如下。
// continue : 跳过本次循环,执行下一次
// break: 直接跳出循环.
//习题: 输出1-100 如果是3的倍数就不输出.如果输出了61就停止输出
for(var i = 1; i<=100;i++){
if(i%3==0){
continue;
}
if (i==61) {
break;
}
console.log(i);
}
>嵌套循环的案例以及讲解
<script>
// 下面以9层金字塔为例，案例效果如下，分别在页面和或控制台输出：
/*
*
***
*****
*******
*********
***********
*************
***************
*****************
*/
//页面输出的方法:
//因为是9层 所有直接定义1-9的循环
// for(var i = 1 ; i<=9;i++){
// //开始思考:每一行由什么组成:
// //答案:空格和星星
// //所以:控制行数的for循环内部：先打印空格,然后打印**
// //找规律: 第一行:8个空格+1个星星 第二行:7个空格+3个星星 第三行:6个空+ 5个星星:
// //结论：第几行的空格数: 空格的个数 = 9-i
// //结论：第几行的星星数: 2*i-1
// for(var j = 1 ; j<=9-i;j++){
// document.write(" ");
// }
// for(var k = 1 ; k<=2*i-1;k++){
// document.write("*");
// }
// //控制行数的for循环的最后一行肯定是换行:
// document.write("<br>"); //注意:页面的换行指的是<br> 控制台的换行才是 \n
// }
// var str = "";
// for(var i = 1 ; i<=9;i++){
// //开始思考:每一行由什么组成:
// //答案:空格和星星
// //所以:控制行数的for循环内部：先打印空格,然后打印**
// //找规律: 第一行:8个空格+1个星星 第二行:7个空格+3个星星 第三行:6个空+ 5个星星:
// //结论：第几行的空格数: 空格的个数 = 9-i
// //结论：第几行的星星数: 2*i-1
// for(var j = 1 ; j<=9-i;j++){
// str = str + " ";
// }
// for(var k = 1 ; k<=2*i-1;k++){
// str = str + "*";
// }
// //控制行数的for循环的最后一行肯定是换行:
// str = str + "\n";//注意:页面的换行指的是<br> 控制台的换行才是 \n
// }
// console.log(str);
//console.log类似于Java中System.out.println();打印就自动换行
//但是JS没有类似于System.out.print();的方法
//所以如果想要在控制台实现类似的效果,应该将所有的内容放在一个字符串内.
//然后通过console.log打印这个一个字符串
// //将99乘法表输出在页面上
// for(var i = 1 ; i<=9;i++){//不仅是行数 而且还是被乘数
// for(var j = 1;j<=i;j++){
// document.write(j + "*" + i + "=" + (i*j) + " " );
// }
// document.write("<hr>");
// }
//将99乘法表输出在控制台上
var str = "";
for(var i = 1 ; i<=9;i++){//不仅是行数 而且还是被乘数
for(var j = 1;j<=i;j++){
str = str + j + "*" + i + "=" + (i*j) + " ";
}
str = str + "\n";
}
console.log(str);
</script>
17万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
