WEBBASE篇： 第九篇， JavaScript知识4
JavaScript 4
练习1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//1、从弹框中录入一个字符
var c = prompt("请输入一个字符:");
//2、判断是否为数字
var isNum = c >= '0' && c <= '9';
//3、判断是否为英文
//3.1 判断是否为小写英文
var isSmall = c >= 'a' && c <= 'z';
//3.2 判断是否为大写英文
var isCaps = c >= 'A' && c <= 'Z';
//3.3 用一个变量保存是否为英文
var isENG = isSmall || isCaps;
//4、判断是否为汉字
var isCHN = c >= '\u4e00' && c <= '\u9fa5';
//5、根据判断结果打印输出
if(isNum){
console.log(c+"是一个数字");
}else if(isENG){
console.log(c+"是一个英文字符");
}else if(isCHN){
console.log(c+"是一个汉字");
}else{
console.log(c+"是其他字符");
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var input = prompt("欢迎来到中国移动\n1、查话费请按1\n2、了解宽带请按2\n3、For English press 3\n4、人工服务请按 0");
switch(input){
case "1":
alert("话费查询中，请稍后...");
break;
case "2":
alert("宽带业务尚未开通...");
break;
case "3":
alert("Sorry,我不懂英语...");
break;
case "0":
alert("人工坐席忙，请稍后...");
break;
default:
alert("输入有误!!!");
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var input = prompt("请输入一个数字(0-7):");
switch(input){
case "1":
console.log("今天吃红烧肉");
break;
case "2":
console.log("今天吃红烧鱼");
break;
case "3":
console.log("今天吃红烧王八");
break;
case "6":
case "7":
console.log("今天休息");
break;
default:
console.log("输入有误!!!");
break;
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
var year = Number(prompt('Year:'));
var month = Number(prompt('Month:'));
var day = Number(prompt('Day:'));
var totalDays = 0;
var isRun=year%4==0&&year%100!=0||year%400==0;
switch(month-1){
case 11:
totalDays += 30;
case 10:
totalDays += 31;
case 9:
totalDays += 30;
case 8:
totalDays += 31;
case 7:
totalDays += 31;
case 6:
totalDays += 30;
case 5:
totalDays += 31;
case 4:
totalDays += 30;
case 3:
totalDays += 31;
case 2:
totalDays += 28;
if(isRun){
totalDays += 1;
}
case 1:
totalDays += 31;
}
totalDays += day;
console.log("是第"+totalDays+"天");
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//1、声明循环条件，赋值为 1
var i = 1;
//2、循环结构 ：条件 当 i 小于等于 100的时候，执行操作
while(i <= 100){
console.log("Hello World");
//更新循环条件
i++;//i=i+1;i+=1;
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <script>
//条件：从1开始到100结束
//操作：打印循环条件的值
var i = 1;
while(i <= 100){
console.log(i);
//更新循环条件
i++;
}
</script> -->
<!-- <script>
//条件：从1开始，到100结束
//操作：累加 循环条件 的值
var i=1,sum=0;
while(i <= 100){
sum += i;//sum = sum + i;
i ++;
}
console.log("1-100之间的和为:"+sum);
</script> -->
<!-- <script>
//条件：从1开始到100结束
//操作：判断循环条件是否为 3 的倍数
var i=1;
while(i <= 100){
if(i % 3 == 0){
console.log(i);
}
i++;
}
</script> -->
<!-- <script>
//条件：从 2000 开始 到 2050 结束
//操作：判断条件是否满足闰年的要求
var i = 2000;
while(i <= 2050){
if(i%4==0&&i%100!=0||i%400==0){
console.log(i);
}
i++;
}
</script> -->
<script>
var year = Number(prompt('Year:'));
var month = Number(prompt('Month:'));
var day = Number(prompt('Day:'));
var totalDays = 0;
var isRun=year%4==0&&year%100!=0||year%400==0;
//条件：从1月开始，到month-1月为止
//操作：将这些月份的天数进行累加
var i = 1;
while(i < month){
switch(i){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
totalDays += 31;
break;
case 4:
case 6:
case 9:
case 11:
totalDays += 30;
break;
case 2:
totalDays += 28;
if(isRun){
totalDays += 1;
}
}
i++;
}
totalDays += day;
console.log("共"+totalDays+"天");
</script>
</body>
</html>
分支结构
1，if 结构（略）
2，switch 结构
作用： 等值判断；
语法：switch(变量){
case 值1：
语句块1；
//break；//跳出switch 结构， 可选
case 值1：
语句块1；
//break；//跳出switch 结构， 可选
。。。。。。。
default：
语句块n；
/*所有case都未匹配上时，才执行default*/
}
注意：1， 变量和case后的值的判断，采用 === 来判断的；
2，break ，如果省略break的话，则从匹配的case块开始，依次向下执行(执行下面所有case块的内容 或 default的内容),直到碰见break或执行结束为止；
练习：
从弹框中录入1-7任意一个数字表示星期1~星期日
输入1：今天吃红烧肉
输入2：今天吃红烧鱼
输入3：今天吃红烧王八
输入4：今天吃红烧皮皮虾
输入5：今天吃红烧排骨
输入6：今天休息
输入7：今天休息
其他：输入有误!
循环结构
作用： 重复的执行相同或相似的代码；
循环的二要素：
（1）循环条件： 循环从什么时候开始，到什么时候结束；
（2）循环操作： 循环中要做的事情（要执行的代码）；
ex:
1、控制台中输出100遍Hello World
条件：从第1遍开始 到 第100遍结束
操作：输出 Hello World
2、打印 1-100 之间所有的数字
条件：从第1遍开始 到 第100遍结束
操作：输出 条件 的值
while 循环
语法： while(循环条件){
循环操作
}
流程：
1、判断循环条件(boolean值/表达式)
2、如果条件为真，则执行循环操作
2.1 执行完操作后，再回来判断条件...
3、如果条件为假，则退出循环
ex:
1、打印 100 遍 Hello World
条件：从 1 开始 ，到 100 结束
操作：打印 Hello World
练习：
1、打印 1-100 之间所有的数字
2、计算 1-100 之间所有数字的和并打印输出
3、打印 1-100 之间所有3的倍数的数字
4、打印 2000 - 2050 之间所有的闰年
5、将日期计算器更改为循环版本
do ...while 循环：
语法：do{
循环操作
}while (循环条件)；
流程：1，先执行循环操作； 2，再判断循环条件； 3，如果条件为真，则继续执行循环操作，否则退出循环；
猜数字游戏：
1、声明一个1-100之间的随机整数
随机数:Math.random() 得到一个0-1之间的小数
var r=parseInt(Math.random()*100)+1
2、允许用户循环的录入数据，与随机数进行比较
如果输入的数据比随机数大，提示猜大了
如果输入的数据闭随机数小，提示猜小了
否则：提示猜对了，退出游戏
或者，用户输入 exit 也可以退出游戏
循环的流程控制：
（1） break 跳出循环结构；
（2）continue 结束本次循环，继续执行下次循环；
for循环：
（1）
while
打印 1-100 之间所有的数字
var i=1;//循环条件的初始化
while(i <= 100){ //循环条件的判断
console.log(i);//循环操作
i++;//更新循环条件
}
（2）for循环：
语法： for (表达式1;表达式2;表达式3){
循环条件；
}
说明：表达式1：循环条件的初始化；
表达式2： 循环条件的判断；
表达式3： 更新循环条件；
流程： （1）先执行表达式1，即循环条件初始化（执行1次）；
（2） 再判断表达式2的值，true 或false ；
（3）如果为true ,则执行循环操作； 如果为false，则退出循环条件；
（4）执行完循环操作后，再执行表达式3；
（5）再判断表达式2，同步骤2....
练习：
1、从弹框中随意输入一个数字，判断其是否为素数(质数)
素数：只能被1和他自己整除的数字
2、打印九九乘法表中的一行数据
从弹框中随意输入一个数字，输入几，则打印第几行
ex : 输入 3
1*3=3 2*3=6 3*3=9
console.log();
循环嵌套：
允许在一个循环中再出现另一个循环；
for (var i=1;i<=10;i++){ // 外层循环
for(var j=1;j<=10;j++){ //内层循环
}
外层循环走一次，内层循环走一轮;
函数 -function
1，函数的声明：
function 函数名（参数）{
函数体；
}
注：
（1）、参数
参数列表，允许声明0或多个参数，多个参数的话，使用 , 隔开即可；无默认参数；
（2）、返回值
返回值是可选的，如果需要返回值的话，通过 return 值 ; 进行返回
2，函数的调用；
在 任意JS的合法位置处，都允许做函数调用；
函数名（参数列表）；
作业：
使用函数完成以下内容，通过一个按钮点击调用
在函数内：
1、分三次录入年，月，日
2、计算该日是星期?
前提：1900.1.1 是星期1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
do{
//1、录入数据
var input = prompt("请输入一句话：");
//2、将数据打印在控制台上
console.log(input);
}while(input != "exit");
</script>
</body>
</html>
+++++++++++++++++++++++
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//1、生成一个1-100的随机数
var r = parseInt(Math.random()*100)+1;
//2、循环完成数据的录入和比较
do{
//1、循环录入数据
var input = prompt("请输入一个数字(exit退出):");
//2、比较大小
if(input > r){
alert("您猜大了！");
}else if(input < r){
alert("您猜小了!");
}else if(input == r){
alert("恭喜您，蒙对了！");
}else if(input == "exit"){
alert("拜拜!!!!");
}
}while(input != r && input != 'exit');
//1、没猜对 并且 不是 exit 则继续玩游戏
</script>
</body>
</html>
+++++++++++++++++++++++++++++
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
while(true){
var input = prompt("请输入数据:");
if(input == "exit"){
break;
}
console.log(input);
}
</script>
</body>
</html>
++++++++++++++++++++++++++
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
for(var i=1;i<=100;i++){
console.log(i);
}
</script>
</body>
</html>
+++++++++++++++++++++++++++++
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <script>
var num = Number(prompt("请输入一个数字："));
for(var i=2;i<num;i++){
if(num % i == 0){
console.log("不是素数!");
break;
}
}
if(num == i){
console.log("是素数!");
}
</script> -->
<!-- <script>
var num = Number(prompt("请输入一个数字："));
var isSu = true;
for(var i=2;i<num/2;i++){
if(num % i == 0){
isSu = false;
break;
}
}
if(isSu){
console.log(num+"是素数");
}else{
console.log(num+"不是素数");
}
</script> -->
<script>
var line = Number(prompt("请输入要打印的行数:"));
var msg = "";
for(var i=1;i<=line;i++){
msg += i+"*"+line+"="+i*line+"\t";
}
console.log(msg);
</script>
</body>
</html>
++++++++++++++++++++++++
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <script>
for(var i=1;i<=9;i++){
var msg = "";
for(var j=1;j<=i;j++){
msg += j+"*"+i+"="+j*i+"\t";
}
console.log(msg);
}
</script> -->
<script>
for(var line=1;line<=5;line++){
var msg = "";
//内层循环1：循环追加空格
for(var space=1;space <= 5-line ; space++){
msg += " ";
}
//内层循环2：循环追加**
for(var star=1;star <= 2*line-1;star++){
msg += "*";
}
console.log(msg);
}
</script>
</body>
</html>
++++++++++++++++++++++
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//声明函数
function printMsg(){
alert("Hello World");
}
/**
* 计算两个数字的和，并打印输出
* num1 : 表示第一个数字
* num2 : 表示第二个数字
*/
function add(num1,num2){
console.log(num1+num2);
}
//调用函数
//printMsg();
</script>
<button onclick="printMsg()">调用函数</button>
<button onclick="add(15,18)">调用带参数函数</button>
</body>
</html>
