文章配套视频
1.什么是代码块
简介
程序是由一条一条语句构成的,
语句是按照自上向下的顺序一条一条执行的,
在JS中可以使用{}来为语句进行分组
同一个{}中的语句我们称为是一组语句，
它们要么都执行，要么都不执行。
使用
JS中的代码块，
只具有分组的的作用，
没有其他的用途,
代码块里面的内容，
在外部是完全可见的。
列如:
javascript
{
var name = '撩课学院';
console.log("itlike.com");
document.write("喜欢IT, 就上撩课!");
}
javascript
console.log("name = " + name);
2. 流程控制语句
基本概念
默认情况下，
程序的运行流程是这样的：
运行程序后，
系统会按书写从上至下顺序
执行程序中的每一行代码,
但是这并不能满足
我们所有的开发需求
如下图:
实际开发中,
我们需要根据
不同的条件执行
不同的代码或者
重复执行某一段代码
为了方便我们控制程序的运行流程，
JavaScript提供3种流程结构，
不同的流程结构可以实现不同的运行流程。
这3种流程结构分别是
顺序、选择、循环:
三种基本控制结构构造.
顺序结构
默认的流程结构。按照书写顺序从上至下执行每一条语句
选择结构
对给定的条件进行判断，再根据判断结果来决定执行哪一段代码
循环结构
在给定条件成立的情况下，反复执行某一段代码
if语句
如果条件表达式为真,执行语句块1,否则不执行
if(条件表达式) { 语句块1 } 后续语句;
if(age > 18)
{
console.log("可以上网");
}
````
如果条件表达式为真,则执行语句块1,否则执行语句块2
if(条件表达式)
{
语句块1
}else{
语句块2
}
if(age > 18)
{
console.log("可以上网");
}else{
console.log("你妈妈喊你吃饭");
}
特点
if和else后面的代码块({})只有一个会被执行
如果条件表达式1为真,则执行语句块1,
否则判断条件表达式2,
如果为真执行语句块2,
否则再判断条件表达式3,
如果真执行语句块3,
当表达式1、2、3都不满足,会执行最后一个else语句
代码如下:
if(条件表达式1)
{
语句块1
}else if(条件表达式2){
语句块2
}else if(条件表达式3){
语句块3
}else{
语句块4
if(age>40)
{
console.log("老年人");
}else if(age>25){
console.log("中年人");
}else if(age>18){
console.log("成年人");
}else{
console.log("未成年");
}
特点
这么多大括号中只有一个大括号中的内容会被执行
当执行到后面条件的时候证明前面的条件不满足
else if可以只有一个, 也可以有多个, 但是都必须添加在if和else之间
注意事项
如果只有一条语句时if后面的大括号可以省略
if(age > 18)
console.log("成年人");
注意:受到if管制的只有紧跟其后的那条语句
开发中尽量不要省略大括号
if(false)
console.log("语句1");
console.log("语句2"); // 语句2会被输出
分号“;”也是一条语句, 空语句
if(4 > 6);
{
console.log("4 > 6");
}
// 输出结果: 4 > 6, if管制的紧跟其后的那个分号
// {}在JS中仅仅代表告诉系统里面的语句是一个整体, 没有别的用途,不会影响代码的执行
if else是一个整体， else匹配if的时候匹配离它最近的一个if
if(0)
if(1)
console.log("A");
else
console.log("B");
else
if (1)
console.log("C");
else
console.log("D");
对于非Boolean类型的值,会先转换为Boolean类型后再判断
if (0) {
console.log("itlike\n"); // 不会被执行
}
```
判断变量与常量问题
但凡遇到比较一个变量等于或者不等于某一个常量的时候，把常量写在前面
// if(a = 0) // 错误写法, 但不会报错
if (0 == a) {
console.log("a的值是0\n");
}else{
console.log("a的值不是0\n");
}
/*
本来是先判断变量a存储的值是否等于0,
但是如果不小心写成a=0,代表把0存储到a中.
为了避免这种问题判断是否相等时把常量写前面,
因为等号左边只能是变量, 所以如果少写一个等号会报错
*/
if语句可以嵌套使用
var num = 20;
if (num >= 10)
{
if(num <= 30)
{
console.log("一个10~30之间的数")
}
}
习题训练
从键盘输入一个整数，判断其是否是偶数，如果是偶数就输出YES，否则输出NO
// 1.定义一个变量保存用户输入的整数
var temp;
// 2.利用window.prompt()接收用户输入数据
// window.prompt返回给我们的是一个字符串, 需要转换为Number
temp = +(window.prompt("请输入一个整数"));
// 3.对用户输入的数据进行安全校验
if(isNaN(temp)){
alert("你是SB吗?");
}else{
// 3.判断用户输入的数据是否是偶数, 然后根据判断结果输出YES/NO
/*
if(temp % 2 == 0){
alert("YES");
}else{
alert("NO");
}
*/
(temp % 2 == 0) ? alert("YES") : alert("NO");
}
接收用户输入的1～7的整数，根据用户输入的整数，输出对应的星期几?
// 1.定义变量保存用户输入的数据
var day;
// 2.利用window.prompt()接收用户输入数据
day = +(window.prompt("输入的1～7的整数"));
// 3.判断当前是星期几
if(day == 1){
console.log("星期一");
}else if(day == 2){
console.log("星期二");
}else if(day == 3){
console.log("星三");
}else if(day == 4){
console.log("星期四");
}else if(day == 5){
console.log("星期五");
}else if(day == 6){
console.log("星期六");
}else if(day == 7){
console.log("星期日");
}else{
console.log("滚犊子");
}.
接收用户输入的一个整数month代表月份，根据月份输出对应的季节?
第一种:
// 1.定义变量保存用户输入的数据
var month;
// 2.利用window.prompt()接收用户输入数据
month = +(window.prompt("请输入一个1-12的月份"));
// 3.数据安全校验
if(isNaN(month)){
alert("火星SB?");
}else{
// 4.根据输入的数据判断输出对应的月份即可
if(month >= 3 && month <= 5){
alert("春季 ");
}else if(month >=6 && month <= 8){
alert("夏季");
}else if(month >=9 && month <= 11){
alert("秋季");
}else if(month == 12 || month == 1 || month == 2){
alert("冬季");
}else{
alert("火星季节");
}
}
第二种:
// 1.定义变量保存用户输入的数据
var month;
// 2.利用window.prompt()接收用户输入数据
month = +(window.prompt("请输入一个1-12的月份"));
// 3.数据安全校验
if(isNaN(month)){
alert("火星SB?");
}else{
// 4.根据输入的数据判断输出对应的月份即可
if(month < 1 || month > 12){
alert("火星季节");
}else if(month >= 3 && month <= 5){
alert("春季 ");
}else if(month >=6 && month <= 8){
alert("夏季");
}else if(month >=9 && month <= 11){
alert("秋季");
}else{
alert("冬季");
}
}
第三种:
// 1.定义变量保存用户输入的数据
var month;
// 2.利用window.prompt()接收用户输入数据
month = +(window.prompt("请输入一个1-12的月份"));
// 3.数据安全校验
if(isNaN(month)){
alert("火星SB?");
}else{
// 4.根据输入的数据判断输出对应的月份即可
if(month == 12 || month == 1 || month == 2){
alert("冬季"); // 没有进入, 剩下的必然是3-11
}else if(month >=9){
alert("秋季"); // 没有进入, 剩下的必然 3-8
}else if(month >=6){
alert("夏季"); // 没有进入, 剩下的必然 3-5
}else if(month >= 3){
alert("春季 ");
}else{ // 12 1 2
alert("火星季节");
}
}
从键盘输入2个整数，判断大小后输出较大的那个数?
// 1.定义变量保存三个整数
var a, b;
// 2.利用window.prompt接收用户输入的数据
a = +(window.prompt("请输入内容"));
b = +(window.prompt("请输入内容"));
// 3.利用if进行两两比较
if(a > b){
console.log(a);
}else{
console.log(b);
}
/*
三元运算符好处：可以简化if else代码
弊端 ：因为是一个运算符所以运算完必要要有一个结果。
简单用三元 复杂用if(阅读性好)
*/
console.log(a > b? a: b);
从键盘输入3个整数，排序后输出?
常规写法
// 1.定义变量保存三个整数
var a, b, c;
// 2.利用window.prompt接收用户输入的数据
a = +(window.prompt("请输入内容"));
b = +(window.prompt("请输入内容"));
c = +(window.prompt("请输入内容"));
// 方式1 写出所有方式
if (a >= b && b >=c) {
console.log(a, b, c);
}else if (a >= c && c >= b) {
console.log(a, c, b);
}else if (b >= a && a >= c) {
console.log(b, a, c);
}else if (b >= c && c >= a) {
console.log(b, c, a);
}else if (c >= a && a >= b) {
console.log(c, a, b);
}else if (c >= b && b >= a) {
console.log(c, b, a);
}
选择排序
// 1.定义变量保存三个整数
var a, b, c;
// 2.利用window.prompt接收用户输入的数据
a = +(window.prompt("请输入内容"));
b = +(window.prompt("请输入内容"));
c = +(window.prompt("请输入内容"));
// 方式2 选择排序
var temp;
if (a > b) {
temp = a;
a = b;
b = temp;
}
if (a > c) {
temp = a;
a = c;
c = temp;
}
if ( b > c) {
temp = b;
b = c;
c = temp;
}
console.log(a, b, c);
冒泡排序
// 1.定义变量保存三个整数
var a, b, c;
// 2.利用window.prompt接收用户输入的数据
a = +(window.prompt("请输入内容"));
b = +(window.prompt("请输入内容"));
c = +(window.prompt("请输入内容"));
// 方式3 冒泡排序
var temp;
if (a > b) {
temp = a;
a = b;
b = temp;
}
if (b > c) {
temp = b;
b = c;
c = temp;
}
if ( a > b) {
temp = a;
a = b;
b = temp;
}
console.log(a, b, c);
石头剪子布实现?
// 定义 0.剪刀 1.石头 2.布
// 1、定义变量 玩家和电脑
var player,computer = 0;
// 2、让电脑先出拳
var temp = Math.random() * 3;
// 3、用户出拳
var player = window.prompt("请出拳:0.剪刀 1.石头 2.布");
// 数据合法性的校验
if (player<0||player>2) {
window.prompt("请重新出拳:0.剪刀 1.石头 2.布");
}else{
// 4、判断比较 //先判断用户赢的情况
if((player==0&&computer==2)||
(player==1&&computer==0)||
(player==2&&computer==1)){
window.alert("我靠,你赢了!\n");
}else if((computer==0&&player==2)||
(computer==1&&player==0)||
(computer==2&&player==1)){
window.alert("很遗憾,你输了!\n");
}else{
window.alert("平局\n");
}
}
3. 循环
循环结构是程序中一种很重要的结构。其特点是,在给定条件成立时,反复执行某程序段, 直到条件不成立为止。
给定的条件称为循环条件,反复执行的程序段称为循环体
循环结构简单来说就是:一次又一次的执行相同的代码块
现实生活中的循坏
JavaScript中的循坏
while语句
do-while语句
for语句
while循环
格式
while ( 条件表达式 ) {
语句1;
语句2;
....
}
执行流程
判断条件表达式是否为真, 如果为真执行后面大括号中的内容
执行完毕再次判断条件表达式是否还为真,如果为真执行后面大括号中的内容
重复上述过程,直到条件不成立就结束while循环
var num = 0;
while (num < 10){
console.log(num);
num++;
}
构成循环结构的几个条件
循环控制条件(条件表达式)
循环退出的主要依据,来控制循环到底什么时候退出
循环体(while后面的大括号{})
循环的过程中重复执行的代码段
循环结束语句(递增,递减,break等)
能够让循环条件为假的依据,否则退出循环
while循环特点
如果while中的条件一开始就不成立,那么循环体中的语句永远不会被执行
var num = 10;
while (num < 10){
alert(num); // 什么都不弹
num++;
}
while循坏注意点
死循环
条件表达式永远为真, 循坏永远无法结束,我们称之为死循环
while (true){
alert("itlike.com");
}
任何值都有真假性
对于非Boolean类型的值, 会先转换为Boolean类型再判断
while (1){ // 先把1转换为Boolean, 然后再判断真假
alert("itlike.com");
}
while 后如果只有一条语句它可以省略大括号
如果省略大括号, while只会管制紧跟其后的那条语句
while (0)
alert("会执行我么?"); // 不会执行
alert("itlike.com");
分号问题
分号(;)也是一条语句, 代表空语句
while (0);
{
alert("123"); // 会被执行, 因为while管制的是分号(;)
}
最简单的死循环
开发中慎用死循环, 会导致程序阻塞
while (1);
while循坏练习
提示用户输入一个正整数n， 计算1 + 2 + 3 + ...n的和
// 1.定义变量保存上一次的和
var sum = 0;
// 2.定义变量保存递增的数
var number = 1;
while (number <= 5) {
console.log("sum = "+ sum +" + number = "+ number);
sum = sum + number;
number++;
}
console.log("sum = " + sum);
获取1～100之间 7的倍数的个数并打印，并统计个数
var count = 1;
var num = 0;
while (count <= 100) {
if (count % 7 == 0) {
console.log("count = " + count);
num++;//计数器
}
count++;
}
console.log("number = "+ num);
break关键字
作用
跳出Switch语句
var num = 1;
switch(num){
case 1:
console.log("壹");// 输出壹
break; // 跳出switch语句, 后面代码不会执行
case 2:
console.log("贰");
break;
default:
console.log("非法数字");
break;
}
跳出循环语句
var num = 0;
while(true){
console.log(num);
if(3 == num){
break; // 当num等于3时跳出循环
}
num++
}
注意点
break关键字只能用于循环语句和switch语句, 在其它地方没有意义
break; // 浏览器会报错
alert("我会输出么?");
if(true){
break; // 浏览器会报错
alert("我会输出么?");
}
```
在多层循环中,一个break语句只向外跳一层
while (1){
while (2){
console.log("我是while2"); // 会被输出多次
break; // 跳出while2,但是不会跳出while1
}
console.log("我是while1");
}
break后面的语句永远不会被执行
while (1){
break;
alert("会弹出来么?"); // 不会弹出
}
continue关键字
作用
跳过当前循环体中剩余的语句而继续下一次
var num = 0;
while (num < 10){
num++;
if(num % 2 == 0){
continue;
}
console.log(num); // 1, 3, 5, 7, 9
}
注意点
只能用于循环结构, 在其它地方没有意义
continue后面的语句永远不会被执行
while (1){
continue;
alert("会弹出来么?"); // 不会弹出
}
do-while循环
格式
do {
语句1;
语句2;
....
} while ( 条件 );
执行流程
首先会执行一次循环体中的语句
接着判断while中的条件表达式是否为真，如果为真再次执行循环体中的语句
重复上述过程，直到条件不成立就结束while循环
特点
不管while中的条件是否成立，循环体中的语句至少会被执行一遍
应用场景
口令校验
for循环
JavaScript中的for语句使用最为灵活,
不仅可以用于循环次数已经确定的情况,
而且可以用于循环次数不确定而只给出循环结束条件的情况,
它完全可以代替while语句。
格式
for(①初始化表达式；②循环条件表达式；④循环后操作表达式)
{
③执行语句；
}
for循环执行流程
for循环开始时，会先执行初始化表达式，而且在整个循环过程中只执行一次初始化表达式
接着判断循环条件表达式是否为真，如果条件为真，就会执行循环体中的语句
循环体执行完毕后，接下来会执行循环后的操作表达式
执行完循环后操作表达式, 然后再次判断循环条件表达式是否为真，如果条件为真，就会执行循环体中的语句
重复上述过程，直到条件不成立就结束for循环
for(var i = 0; i < 10; i++){
alert(i); // 输出0-9
}
for循环和while循环如何选择?
一般情况下while和for可以互换, 但是如果循环执行完毕之后就不需要使用用于控制循环的增量, 那么用for更好
注意点
for循环中初始化表达式,循环条件表达式,
循环后操作表达式都可以不写
循环条件表达式默认为真
for(; ;) 语句相当于while(1), 都是死循环
其它注意点和while一样
循环嵌套练习
打印好友列表
好友列表1
好友1
好友2
好友3
好友列表2
好友1
好友2
好友3
for (var i = 1; i <= 2; i++) {
console.log("好友列表"+ i);
for (var j = 1; j <= 3; j++) {
console.log(" 好友"+ j);
}
}
for循环嵌套实现:打印99乘法表
<style>
span{
display: inline-block;
border: 1px solid #000;
padding: 10px;
}
</style>
<script>
/*
1.观察发现有很多行很多列--》循环嵌套
2.尖尖朝上，让内循环条件表达式随着外循环i改变
3.输出的结果等于 内循环的变量 * 外循环的变量
*/
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
document.write("<span>"+j+"*"+i+"="+i*j+"</span>");
}
window.document.write("<br/>");
}
</script>