switch选择结构(重点)
语法:
switch( 判断条件 ){
case expr1:
// 处理代码块
break;
case expr2:
// 处理代码块
break;
default:
// 处理代码块
}
1、switch、case、default、break都是系统关键字
2、switch中没加break会把所有的case判断一遍
3、switc是不可以写判断一定范围内的数据（前提：当exp不为true）
根据输入的成绩,判断出属于A,B,C,D那个级别
var sum=parseInt(prompt("请输入成绩"));
var str="";
if(isNaN(sum) || sum>100 || sum<0){
str="输入错误";
}else{
switch (parseInt(sum/10)){
case 10:
str="S";
break;
case 9:
str="A";
break;
case 8:
str="B";
break;
case 7:
str="C";
break;
case 6:
str="D";
break;
default:
str="E";
}
}
console.log(str);
break的使用
如果:case后面不使用break终止代码,他就会继续往下走.最终输出错误的结果
<script>
var str = prompt('请输入ABCD中的任意一个');
switch(str){
case 'A':
console.log('你输入的是A');
break;
case 'B':
console.log('你输入的是B');
break;
case 'C':
console.log('你输入的是C');
break;
case 'D':
console.log('你输入的是A');
break;
}
// 总结:break是防止穿越的,匹配到一个case则,停止向下执行
</script>
脚下留心
使用switch就一定要用break
switch和if判断的区别
判断的用途
if常用语判断一定范围内的数据 a>10 b<5
switch常用语判断固定的数据
案例：判断星期几；判断成绩；
80-90 70-80
例:比如判断输入的是男是女var sex = ‘男’;（switch）
switch(sex){
case ‘男’:
document.write(‘性别男’);
break;
case ‘女’:
document.write(‘性别女’);
break;
default:
document.write(‘人妖’);
}
脚下留心：如果数据是一个固定的值，用switch效率会比if判断更高
判断类型区别
if 判断是看运算符号，两个等于则判断值是否相等，三个等于则判断是否全等
switch 默认判断全等
例1: var str=1;使用if和switch的判断区别
// 判断类型的比较
var num = '2';
// if(num==2){
// alert('男儿何不带吴钩');
// }
// // 值和类型都要相等
// if(num===2){
// alert('收取关山五十州');
// }
// switch进行匹配的时候,是完全匹配,相当于 '==='
switch(num){
case 2:
alert('有意栽花花不发');
break;
case '2':
alert('无心插柳柳成荫');
break;
default:
alert('自古多情空余恨,此恨绵绵无绝期');
}
练习1：用switch另一种方法书写成绩判断：
100 s、90-99 a、80-89 b、70-79 c、60-69 d、0-59 回家挨揍
练习2：课堂练习写完(一个月多少天)
练习3：尝试输出1-100之间的所有整数；（进阶：偶数）
循环结构
问题
如果输出一句hello world,可以document.write(“hello world”);.
思考:现在要输出10次,应该怎么办?
写10次,…
分析:
对于我们来说这样费时费力，同时也会有很多的代码冗余，那么这个时候我们应该使用的就是js中的循环。
如果不用循环，但是我们要是打印100次hello world呢？
while循环语句(掌握)
示意图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MpklHg64-1662124662720)(/1563872056403.png)]
while循环只要条件为真，就会一直不断重复执行循环体内的代码
语法:
语法
//当循环条件为true时，执行循环体，
//当循环条件为false时，结束循环。
while(循环条件){
//循环体：需要循环执行的语句
}
注意: while循环只要条件为真，就会一直不断重复执行循环体内的代
例题
例1:输出十个hello
// 输出十个Hello
// 1 声明变量
var i = 0;
// 2条件为真,则向下执行
while(i<10){
console.log(i);
document.write('Hello world'+'<br />');
// 3 每循环一次i自加1
i++;
}
例2:输出1-10之间所有的数
/ 循环变量初始化
var num = 1;
// while循环
while(num <= 10){
document.write(num);
num++;
}
例3:循环表白,你爱我吗?
//1. 输入你爱我吗? y/n
var res = prompt('爱我吗? y/n');
//2. n y
// 条件的角度
while (res != 'y') {
res = prompt('再说一遍,你爱我吗? y/n')
}
例4:使用while输出1-100
var num = 0;
while (++num <= 100) {
console.log(num);
}
do…while循环(掌握)
示意图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c8gfBngD-1662124662721)(/1563872011430.png)]
do…while和while循环差不多，只是do…while会先无条件执行一次再判断
语法
【①循环变量初始化】
do{
// 循环体内执行的代码
【③循环变量更新】
}while(【②循环变量判断条件】);
例题
验证: do…while会先无条件执行一次，然后再判断
<script>
var num = 1;
while(num > 1)
{
document.write("while 哈哈，妹妹进来了！");
}
do{
document.write("do.while 哈哈，妹妹进来了！");
}while(num > 1);
</script>
循环表白你爱我吗?
// 循环表白的案例 do...while()
do {
var res = prompt('爱我吗');
} while(res != 'y')
for循环语句(重点)
示意图
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pEcUOTVI-1662124662723)(/1563871982897.png)]
for循环语法：
//1. for循环使用分号分隔
//2. for循环有2个分号，两个分号不能少
for(初始化变量1;判断语句2;变量更新3){
//4循环体
}
执行顺序：1243 ---- 243 -----243(直到循环条件变成false)
- 初始化语句
- 判断语句
- 自增或者自减
- 循环体
详细思路分析
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oZ3d2qmn-1662124662723)(/1567566226027.png)]
使用案例
例1: 输出1-10之间的所有数
<script>
/*
for(变量初始化; 判断条件; 变量更新)
{
// 循环体内执行的代码
}
*/
for(var num = 1; num <=10; num++)
{
document.write(num + "<br />");
}
</script>
例2 入职薪水10K，每年涨幅5%，50年后工资多少？
var a = 10;
var i=0;
while(i<50){
a = a + a * 0.05;
i++;
}
console.log(a)
// 使用for的写法
// var salary = 10;
// for(var i=1;i<=50;i++){
// // 涨幅5%,就是明年的工资是今年的1.05倍
// salary= salary*1.05;
// }
// console.log(salary);
例3 打印100以内 7的倍数
for(var i=1;i<=100;i++){
if(i%7==0){
console.log(i);
}
}
例4:求出最大公约数
公约数：两个数字都能够整除的数字叫做公约数。
最大公约数：公约数中的最大值，就是最大公约数
//提示：两个数值的公约数不会大于较小的数字；
1是任何数字的公约数；
var n = 8
var m = 5
// 提前准备一个变量当作最大公约数
var gys = 1
for (var i = m; i > 1; i--) {
// 判断它是不是最大公约数
if (n % i === 0 && m % i === 0) {
// 表示 i 就是两个数字得最大公约数
gys = i
// 因为是倒着循环, 那么找到一个就是最大得
// 直接结束循环
break
}
}
i–的使用
for(var i=10;i>0;i--){
循环体；
}
// // 倒着输出1-10之间的数
// for(var i=10;i>=1;i--){
// console.log(i);
// }
练习
1.打印100以内所有偶数的和
2.提升：分别求出100以内奇数和偶数的和
3.打印出1000-2000年中所有的闰年，并以每行四个数的形式输出(扩展)
// var num=0; // 用于累计闰年输出的次数
// for(var i=1000;i<=2000;i++){
// if((i%4==0 && i%100!=0) || (i%400==0)){
// num++; // 有闰年就自加1
// document.write(i+' ');
// console.log(num);
// if(num==4){ // 等于4就输出换行
// num=0; // 闰年输出的次数,重新归0
// document.write('<br />');
// }
// }
// }
差别
break和continue(掌握)
break:
结束/中止for循环
立即跳出当前整个循环，即循环结束，开始执行循环后面的内容（直接跳传出大括号）
一般写在打印之后
continue:
结束本次循环,进行下一个循环
立即跳出当前循环，继续下一次循环（跳到i++的地方） (放打印代码前面)
一般写在打印之前
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8MGdUjdy-1662124662724)(/1560391125362.png)]
双重for循环(重点)
for循环嵌套时，注意各个循环的计数器变量名不能重复，否则会变成死循环
例1:五行五列星星的打印
第一步:输出5x5的*形状
document.write('*****<br />');
document.write('*****<br />');
document.write('*****<br />');
document.write('*****<br />');
document.write('*****<br />');
第二步:使用for重复输出5行*
for (var i = 1; i <= 5; i++) {
document.write('*****<br />');
}
第三步:让使用for为每行输出五个*
for (var i = 1; i <= 5; i++) { // 输出行数的
//输出列数的
for (var j = 1; j <= 5; j++) {
document.write('*');
}
document.write('<br />');
}
例2:直角三角形的打印
// ＊
// ＊＊
// ＊＊＊
// ＊＊＊＊
// ＊＊＊＊＊
// 输出行数
for (var i = 1; i <= 5; i++) {
// 控制列数的
for (var j = 1; j <= i; j++) {
document.write('*'); //输出每一行的星星
}
document.write('<br />'); // 每一行输出一个换行
}
例3:等腰三角形的打印
for (var i = 1; i <= 9; i++) {
if (i % 2) {
// 空格
for (var k = i; k <= 9; k++) {
document.write(' ')
}
// 星号, 每一个星号后面带一个空格
for (var j = 1; j <= i; j++) {
document.write('* ')
}
// 换行
document.write('<br>')
}
}
例4:九九乘法表的打印
第一步:输出九行
第二步:每行输出九列
第三步:让列数和行数相等
第四步:实现数字的替换
// 打印九九乘法表
// 1*1=1
// 1*2=2 2*2=4
// 1*3=3 2*3=6 3*3=9
for(var i=1;i<=9;i++){
// 外层的for循环一次,内次的for就执行i次
// 设置j<=i;让内层的for随着外层的i变动循环的次数
for(var j=1;j<=i;j++){
document.write(j+'x'+i+'='+i*j+' ');
}
document.write('<br />');
}
一百个铜钱买了一百只鸡，其中公鸡一只5钱、母鸡一只3钱，小鸡一钱3只，问一百只鸡中公鸡、母鸡、小鸡各多少.
for、while、do…while的区别
1、同一个功能三种循环都可以实现
2、如果知道循环次数用for循环，不知道循环次数用while或者do…while循环
3、如果需要无条件先执行一次用do…while，否则用while
死循环
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3K1uqswE-1662124662725)(/1560394484935.png)]
无法靠自身控制结束的循环，称为死循环
但是可以利用死循环的原理，解决一些问题：
案例：篮球从5米高的地方掉下来，每次弹起的高度是原来的30%，经过几次弹起，篮球的高度是0.1米。
不知道要循环几次的问题，利用死循环，每次判断一个条件，直到满足条件，利用break跳出循环
例1:给定条件永远成立,就一直执行
//死循环 ： 条件永远成立
var i = 1;
while(i<=100){
document.write(i);
}
例2:表达式指定不合适
var n=0;
for(var i=1;i>n;i++){
document.write('哈哈,死循环');
}
例3:缺少自增条件
for(var i=0;i<10;){
document.write('哈哈,死循环');
}
Debug工具的使用
概念:
断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。
使用步骤
浏览器中按F12-->sources-->找到需要调试的文件-->在程序的某一行设置断点
例1:查看while中debugger的使用
var num = 1;
var sum = 0;
while (num <= 3) {
sum += num;
num ++;
}
例2:比较大小时的使用
var age = 10;
if(age>=18){
console.log('这是大的')
}else{
console.log('这是小的')
}
练习
例 1 打印100–200之间所有能被3或者7整除的数
例2．计算20的阶乘
n!=1×2×3×…×20
//求20的阶乘
// n! = 1*2*3....*n
var num = 1;
for(var i=1;i<=20;i++){
num = num*i;
}
document.write(num);
例3．求100-999之间的水仙花数。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ElLp5jXf-1662124662727)(/1560395420643.png)]
提示
水仙花数是一种特殊的三位数，它的特点就是，每个数位的立方相加的和，等于它本身。
比如 153 就是水仙花数。因为：
1*1*1+5*5*5 +3*3*3 = 153
Math.pow(4,3); 返回 4 的 3 次幂
<script>
/*
100~999 之内，只有 4 个水仙花数，请找出来
* */
//判断任意一个三位数是不是水仙花数
//思路 ： 得到个位 十位 百位 求三个数的立方和
// 判断立方和 == 该数本身
for( var num = 100 ; num <= 999 ; num++ ){
var digit = num%10;
var ten = parseInt(num/10)%10;
var hund = parseInt(num/100);
var sum = Math.pow(digit,3) + Math.pow(ten,3) + Math.pow(hund,3);
if( sum == num ){
document.write( num + "是水仙花数<br>" );
}
}
</script>
作业
1.完成一个等腰三角形打印功能
<script>
// 1.完成一个三角形打印功能
// 外层for用于控制,显示几行
// 内层for用于控制一行显示几个*
for(var i=1;i<=10;i++){
// 输出一个倒三角的空格
// 用于控制星星与边上的距离
for(var k=10;k>=i;k--){
document.write(' ');
}
// 输出的是星星
for(var j=1;j<=i;j++){
document.write('*');
}
// 实现换行的功能
document.write('<br />');
}
</script>
2.九九乘法表
3 篮球从5米高的地方掉下来，每次弹起的高度是原来的30%，经过几次弹起，篮球的高度是0.1米。
// var count =0;
// var he = 5;
// while(true){
// he*=0.3;
// count++;
// if(he<0.1){
// // 跳出循环
// break;
// }
// }
// document.write(count);
4.有一个64个格子的盘子，第一个格子放1个芝麻，第二个格子放两个芝麻，第三个格子放4个芝麻，求64个格子一共有多少芝麻？
5.求1到20之间所有阶乘的和；
提高题
:实现隔行变色的效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.red {background: red;}
</style>
</head>
<body>
<script>
document.write('<table width="600" border="1" cellspacing="0">');
document.write('<tr style="background: #808080;">');
document.write('<th>编号</th>');
document.write('<th>新闻标题</th>');
document.write('<th>发布时间</th>');
document.write('</tr>');
for(var num = 1; num <= 10; num++)
{
/*
if(num % 2 == 0)
{
// 偶数变色
document.write('<tr style="background: red;">');
}else {
document.write('<tr>');
}
*/
if(num % 2 == 0)
{
// 偶数变色
document.write('<tr class="red">');
}else {
document.write('<tr>');
}
document.write('<td>111</td>');
document.write('<td>111</td>');
document.write('<td>111</td>');
document.write('</tr>');
}
document.write('</table>');
</script>
</body>
</html>
vscode的配置
{ // vscode默认启用了根据文件类型自动设置tabsize的选项
"editor.detectIndentation": false,
// 重新设定tabsize
"editor.tabSize": 2,
"editor.fontSize": 22
,
// #每次保存的时候自动格式化
"editor.formatOnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
"eslint.autoFixOnSave": true,
// 添加 vue 支持
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "vue",
"autoFix": true
}
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": false,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
"explorer.confirmDragAndDrop": false,
"window.zoomLevel": 1,
"files.autoSave": "off"
}
OnSave": true,
// #每次保存的时候将代码按eslint格式进行修复
“eslint.autoFixOnSave”: true,
// 添加 vue 支持
“eslint.validate”: [
“javascript”,
“javascriptreact”,
{
“language”: “vue”,
“autoFix”: true
}
],
// #让prettier使用eslint的代码格式进行校验
“prettier.eslintIntegration”: true,
// #去掉代码结尾的分号
“prettier.semi”: false,
// #使用带引号替代双引号
“prettier.singleQuote”: true,
// #让函数(名)和后面的括号之间加个空格
“javascript.format.insertSpaceBeforeFunctionParenthesis”: true,
// #这个按用户自身习惯选择
“vetur.format.defaultFormatter.html”: “js-beautify-html”,
// #让vue中的js按编辑器自带的ts格式进行格式化
“vetur.format.defaultFormatter.js”: “vscode-typescript”,
“vetur.format.defaultFormatterOptions”: {
“js-beautify-html”: {
“wrap_attributes”: “force-aligned”
// #vue组件中html代码格式化样式
}
},
“explorer.confirmDragAndDrop”: false,
“window.zoomLevel”: 1,
“files.autoSave”: “off”
}
729
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
