语句

表达式和语句的区别（了解即可）

区别1：表达式是用来计算一个数值的，是语句中的某一部分，是一组代码的集合

区别2：语句是一个完整结构，可以用来自行以使某件事发生

三大流程控制语句

一、顺序结构

定义：按照顺序从上往下执行的代码

二、分支结构-if分支语句

定义：要根据条件来选择性执行我们想要的代码

单分支

使用语法

if （条件）{

满足条件要执行的代码

}

代码如下

 <script>
    // 根据用户输入的分数做判断，如果大于700,就恭喜他
    let score = +prompt('请输入您的高考分数')
    if( score > 700) {
      alert('恭喜你,大学欢迎你')
    }
  </script>

注意点

括号内的条件为true时，才会进入大括号里执行代码

双分支

使用语法

if （条件）{

满足条件要执行的代码

} else {

不满足条件要执行的代码

}

代码如下

  <script>
      // 根据用户输入的分数做判断，如果大于700,就恭喜他考试大学，否则只能上社会大学
      let score = +prompt("请输入你的高考分数");
      if (score > 700) {
        alert("欢迎你进入大学阶段");
      } else {
        alert("提前进社会大学");
      }
    </script>

多分支

使用语法

if （条件1）{

满足条件1执行代码1

} else if （条件2） {

满足条件2执行代码2

} else if （条件3） {

满足条件3执行代码3

} else {

不满足以上条件执行的代码

}

意思是，先判断条件1，如果满足条件1就执行代码1，其他不执行

如果不满足则向下判断条件2，满足条件2就执行代码2，其他不执行

如果依然不满足就继续往下判断，依次类推

如果以上的条件都不满足，就执行else里面的代码

代码如下

  <script>
      // 需求：根据输入不同星期，输出不同的菜单
      let day = prompt("请输入今天星期几");
      if (day === '一') {
        console.log("扬州炒饭");
      }else if (day === '二') {
        console.log("酸菜鱼");
      }else if (day === '三') {
        console.log("肉夹馍");
      }else if (day === '四') {
        console.log("肯德基");
      }else if (day === '五') {
        console.log("煎饼果子");
      }else {
        console.log("白粥");
      }
    </script>

分支结构-三元运算符 (也叫三元表达式)

使用语法

条件 ? 满足条件就执行的代码 ： 不满足条件就执行的代码

代码案例如下

<script>
      // 需求：用户输入1个数，如果数字小于10，则前面进行补0， 比如 09   03 等

      // 1.创建输入框
      let num = +prompt("请输入一个正整数");
      // 小于10就前面补0 想要在数字8前面显示个0，字符串0拼接就可以了 num<10= "0"+num
      // 反之就输出现在的数值 num
      //             条件 ?     满足条件执行的代码 : 不满足条件 执行的代码
      let strNum = num < 10 ? console.log("0" + num) : console.log(num);

      // if双分支语句写法
      let num1 = +prompt("请输入一个正整数");
      if (num1 < 10) {
        strNum1 = "0" + num1;
      } else {
        strNum1 = num1;
      }
    </script>

一般用来取值

其实是比if双分支更简单的写法

小试牛刀案例

需求：用户输入2个数字，然后输入 + - * / 任何一个，可以计算结果

代码案例如下

 <script>
      // 1.先搭建三个输入框
      let num1 = +prompt("请输入第一个数字");
      let num2 = +prompt("请输入第二个数字");
      let operation = prompt("请输入+ - * / 任何一个");
        /*  2.判断当前的运算符是什么
        如果运算符是+  那就输出num1+num2
         如果运算符是-  那就输出num1-num2
         如果运算符是*  那就输出num1*num2
         如果运算符是/  那就输出num1/num2 */
      if (operation === "+") {
        console.log(num1 + num2);
      } else if (operation === "-") {
        console.log(num1 - num2);
      } else if (operation === "*") {
        console.log(num1 * num2);
      } else if (operation === "/") {
        console.log(num1 / num2);
      }
    </script>

三、循环结构

1.定义

要重复执行的某段代码

2.循环的本质

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

3.循环具备的三要素

4.while循环 ：在....期间循环

4.1基本语法

while（循环条件）{

要重复执行的代码（循环体）

}

注意点

while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，如果满足又执行大括号里面的代码，然后再回到小括号判断条件

直到括号内条件不满足，就跳出

   <script>
      // 1.接受用户的第一个输入循环的次数
      let num = +prompt("请输入数值");

    //  2.变量的起始值
     let i = 1
        // 3.变量终止条件
      while (i <= num) {
        // 3.打印输出月薪过万
        document.write(`${i},月薪过万 <br>`);
        // 4.变量的变化量
        i++;
      }
    </script>

4.2 小试牛刀案例1

需求：计算1-100之间的所有偶数和

代码如下

 <script>
      /* 需求2+4+6+8+10+12+14+16.。。
    思路：1，偶数就是能被2整除，余数为0，判断这个数能不能2整除就要用取余 % 
          2.判断当前的i是不是偶数，如果是偶数，就去执行计算总和 sum=sum+i ，用if语句
    */
      // 1.变量的起始值
      let i = 1;
      // 单独定义一个变量总和sum ，sum=0，循环的时候，sum=sum+i
      let sum = 0;
      // 2.变量终止条件
      while (i <= 100) {
        if (i % 2 === 0) {
          // 3.变量的变化量
          /* 1次循环，i=1，sum=0，sum=0+1=1
             2次循环，i=2，sum=(上面的sum)1+2=3
             3次循环，i=3，sum=(上面的sum)3+3=6
          */
          sum = sum + i;
        }
        //无论当前的i是不是偶数还是奇数，都要执行必须进行下一轮的循环
        i++;
      }
      // 打印输出验证一下结果
      console.log('你要的1-100的偶数和',sum );
    </script>

4.3 小试牛刀案例2

需求：用户可以选择存钱、取钱、查看余额和退出功能

 <script>
      /* 需求：1.打开页面的时候，出现一个弹框，
      弹框内容
      1.取款；
      2.存款；
      3.查看余额 
      4.退出
    2.用户就需要输入一些信息
      a，用户输入“1”
        还会继续弹出窗口，又问一遍以上 1 的内容
      b，用户输入“2”
        还会继续弹出窗口，又问一遍以上 1 的内容
      c，用户输入“3”
        还会继续弹出窗口，又问一遍以上 1 的内容
      d，用户输入“4”
        开始退出
    */
      //  声明一个变量用来存放用户的输入(1,2,3,4)
      let input;
      /*     let withdrawal = +prompt("请输入你的取款的金额");
      let deposit = +prompt("请输入你的存款的金额"); */
      //定义存取款的金额0
      let money = 0;

      //  判断终止条件,只要输入4就停止
      while (input !== 4) {
        input = +prompt(`
         请选择您的操作:
         1.取款 
         2.存款 
         3.查看余额 
         4.退出
    `);
        // 2，开始对用户的输入进行判断
        /*   if (input ===1 ){
          console.log('执行1的内容')
        }else if( input === 2){
          console.log('执行2的内容')
        }else if (input ===3) {
          console.log('执行3的内容')
        }else if(input ===4) {
          console.log('开始退出')
        } */
        /* 3.根据用户的输入去实现输出的内容，取款 存款 查询余额 
        取款 money =withdrawal
        存款 money =deposit */

        if (input === 1) {
          let withdrawal = +prompt("请输入你的取款的金额");
          money -= withdrawal;
        } else if (input === 2) {
          let deposit = +prompt("请输入你的存款的金额");
          money += deposit;
        } else if (input === 3) {
          alert(money);
        } else if (input === 4) {
          console.log("开始退出");
        }
      }
    </script>

5.for循环

好处：把声明起始值、循环条件、变化值写到一起，让人一目了然

5.1 for循环基本使用

语法

for (声明记录循环次数的变量；循环条件 ；变化值 ) {

循环体

}

代码如下

 <script>
      /* 声明记录循环次数的变量  let i =1 
          循环条件  i<=100
          变化值 i++ 
          循环体 i*/
      for (let i = 1; i <= 100; i++) {
        console.log(i);
      }
    </script>

小试牛刀案例

需求. 求1-100之间所有的偶数和

<script>
      /* 需求：1.求偶数和2+4+8+10+12+14.。。，能不能让一个数被整除就用取余 % .余数=0；被2整除 % 2 ===0
        不管i 是不是偶数还是奇数都要继续增加
       */
       let sum = 0
      for (let i =1 ; i<=100 ; i++ ) {
        /* if (i % 2 ===0) {
          sum = sum + i
        } */
        // 可以用短路逻辑运算符简化写成  (i % 2 ===0) &&(sum = sum + i)
        // 可以用赋值运算符再简化写
        (i % 2 ===0) &&(sum+=i)
      }
      console.log(sum)
    </script>

5.2 退出循环

for 控制循环结束

1.continue 跳过本次循环，继续开启下次循环

代码如下

<script>
      // 只显示偶数
      for (let index = 1; index <= 5; index++) {
        if (index % 2 === 0) {
          // 是偶数才输出
          console.log(index);
        }
      }
      for (let index = 1; index <= 5; index++) {
        if (index % 2 !== 0) {
          // 是奇数的时候就要跳过本次的循环
          continue;
        }
        console.log(index);
      }
    </script>

2.break：跳出所在的循环

代码如下

  <script>
      for (let index = 1; index <=5 ; index++) {
        if (index ===3) {
          // 如果等于3就要终止，跳出所在的循环，后面的不再执行循环
          break
        }
        console.log(index);
      }
    </script>

5.3 循环嵌套

一个循环里再套一个循环，一般用在for循环里

比如做一个三天背5个单词的小练习

代码如下

 <script>
        // 1,先实现背3天单词的循环
      for (let index1 = 1; index1 <= 3; index1++) {
        document.write(`第${index1}天单词 <br>`);
        // 2.再实现一天背5个单词的循环
        for (let index2 = 1; index2 <= 5; index2++) {
          document.write(`记住第${index2}个单词 <br>`);
        }
      }
    </script>

小试牛刀案例1

需求： 页面中打印出5行5列的星星

代码如下

 <script>
      /* 需求：   页面中打印出5行5列的星星
    1.联想之前的旧案例，这个打印星星和背单词有相似，用到双重循环
    2.拆解
    3.先完成主要功能再到次要功能
 */
      // 1,先实现一行一列循环 ，一行5个星星
      for (let index1 = 1; index1 <= 5; index1++) {
        // 2.再实现一列五个星星的循环
        for (let index2 = 1; index2 <= 5; index2++) {
          document.write(`⭐`);
        }
        document.write(`<br> `);
      }
    </script>

小试牛刀案例2

需求：打印倒三角形星星，如图所示

代码如下

<script>
    /* 需求：行数没有改变
             列数发生改变
             当第1次发生循环， 列数是1
             当第2次发生循环， 列数是2
             当第3次发生循环， 列数是3
             所以每次行数发生变化，列数就等于行数 */
    // 1,第一个循环控制的行数
    // 先实现一行一列循环 ，一行5个星星
    for (let index1 = 1; index1 <= 5; index1++) {
        // 2.第二个循环中，判断条件5变成了index1 （第一层循环的变量值）
        for (let index2 = 1; index2 <= index1; index2++) {
          document.write(`⭐`);
        }
        document.write(`<br> `);
      }
  </script>

小试牛刀案例3

需求：完成九九乘法表如图所示

代码如下

 <title>九九乘法表</title>
    <style>
      span {
        display: inline-block;
        width: 100px;
        border: 1px solid #000;
        text-align: center;
        padding: 10px 0;
      }
    </style>
  </head>
  <body>
    <script>
      // 第一个循环的index1 表示当前的行数
      for (let index1 = 1; index1 <= 9; index1++) {
        for (let index2 = 1; index2 <= index1; index2++) {
          let sum = index1 * index2;
          document.write(`<span>  ${index2} * ${index1} = ${sum}   </span>`);
        }
        document.write(`<br> `);
      }
    </script>
  </body>

断点调试

学会断点调试的好处是辅助我们去一个个检查代码，帮助更好的理解代码运行，工作时可以更快找到bug

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

操作步骤如下：

浏览器打开调试界面

1. 按F12打开开发者工具；
2. 点到sources一栏；
3. 选择代码文件；
4. 选择断点；
5. 运行代码；
6. 查看结果。