JS语句

什么是语句

  • ECMA-262 规定了一组流程控制语句。语句定义了 ECMAScript 中的主要语法,语句通常由一个或者多个关键字来完成给定的任务。诸如:判断、循环、退出等。
  • 语句主要分为：声明、分支控制、循环控制、流程控制、异常处理等。

声明语句

声明语句包含三种：声明变量、声明函数和声明标签

// 声明函数 使用function关键字
function f() {}

// 声明变量
var a = 1;//有声明提升  作用域按照函数计算
let b = 2;//无声明提升  作用域按照代码块计算
const MAX = 100;//无声明提升  常量  不能被修改或者重新赋值

// 声明标签Label:
// 声明语句一般都是配合continue和break来使用的，在后边流程控制语句中讲解
for1:
for (var i = 0;i<3;i++){

}

调试语句

  • debugger语句用于停止JS
  • debugger语句可以放在代码的任何位置用以脚本中止执行，但是不会关闭任何文件或者删除变量，类似在代码中设置断点
for (var i = 0; i < 5; i++) {
    debugger;
    console.log(1);
}

if语句

单分支if

  • 书写格式：if (判断式){代码块}
  • 如果判断式为真，则执行代码块。
  • 判断式不一定要书写各种操作符，无论传递什么进去，if都会把它转换成布尔值 然后执行if代码
  • 一般有 （ 当。。。。的时候 否则。。。。的时候 ）使用if语句
  • if判断语句的代码块是单句，我们可以省略大括号(但是js中不建议这样书写)

//【单分支if】声明变量 a、b，且赋值 a 和 b 都等于5；当 a 等于 b 时，重新对 b 赋值为10，并弹出 b 的新值
var a = 5 , b = 5 ;
// 如果a不等于b  那么整个if就不会执行  因为没有else
// js是允许只书写if  不书写else 的
if ( a == b ){
    b = 10;
    alert(b);
}

双分支 else语句

  • else语句仅在if或者else/if语句的条件表达式为假的时候执行。
  • if（判断式）{代码块1}else{代码块2}
  • 如果判断式为真，则执行语句1，否则将执行语句2

//【双分支】声明变量 a赋值为100；当 a 大于 50 时，弹出“a真大”，否则弹出“a真小”
var a = 100;
if (a > 50){
    alert("a真大");
}else{
    alert("a真小");
}

//【双分支】y值和x值相关。X大于等于3时，y值为2。X小于3时，y值为1
var y = 4,x = 2;
if (x >= 3){
    y = 2;
}else{
    y = 1;
}

//【双分支】如果x大于y成立，则x值为y值加1，否则x值为y值减1
var x = 3,y = 4;
if (x > y){
    x = y + 1;
}else{
    x = y - 1;
}

//【双分支】如果x大于y或者x小于z成立，则x值为z值，否则x值为y值
var x = 1,y = 2,z = 3;
if (x > y || x < z) {
    x = z;
}else{
    x = y;
}

else if语句

  • else if语句 可以构成多分支
  • if (条件表达式) {语句1;} else if (条件表达式) {语句2;} ... else {语句3;} 

// 【多分支】如果x值为3，y值为2，如果x值大于3，y值为1，如果x值小于3，y值为4
var x = 3,y = 4;
if (x == 3){
    y = 2;
}else{
    // x不等3的情况 进入else
    if (x >3){
        y = 1;
    } else{
        y = 4;
    }
}
//else if()是在上一次判断的基础上 在剩下的条件中继续判断
if (x == 3){
    y = 2;
}else if (x > 3){
    y = 1;
}else{
    y = 4;
}

//【多分支】x值为2，y值为1，如果x值比2小，y值为0，如果x值比10大，y值为10，如果x值小于4且大于3，y值为5，其他情况y为3
var x = 2, y = 1;
if (x < 2){
    y = 0;
}else if (x >10){
    y = 10;
}else if(x < 4 && x > 3){
    y = 5;
}else{
    y = 3;
}

if语句的练习

用户输入成绩 然后弹出成绩的等级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>if语句的练习</title>
</head>
<body>
请输入成绩（数字）：
<input type="text" id="ipt">
<p>等级：<span id="con"></span></p>
<script>
    /*
     * 用户输入成绩  然后弹出成绩的等级
     * 成绩是 >=90  A    >=80 <90  B  >=70 <80  C  >=60 <70  D     其他  Z
     */
    var oIpt = document.getElementById("ipt");
    var oCon = document.getElementById("con");
    oIpt.onchange = function () {
        // 获取表单的值，并转换成数值
        var userScroe = parseInt(this.value);
        if (userScroe >= 90){
            oCon.innerHTML = "A";
        }else if(userScroe >= 80){
            oCon.innerHTML = "B";
        }else if(userScroe >= 70){
            oCon.innerHTML = "C";
        }else if(userScroe >= 60){
            oCon.innerHTML = "D";
        }else{
            oCon.innerHTML = "Z";
        }
    }
</script>
</body>
</html>

switch语句

  • switch语句专门用来设计多分枝条件结构。与else/if多分支结构相比，switch结构更加简介，执行效率更高。

  • 语法如下：

    switch（表达式）｛

    case value1：语句1；break; case value2：语句2；break; ………… default：语句 }

    • switch语句根据表达式的支，一次与case后的表达式的value值进行比较。如果相等，则执行其后的语句段，只遇到break，或者switch语句结束才中止，如果不想等，则继续查找下一个case。
    • switch语句包含了一个可选的default语句(switch的异常处理)，如果前边的case没有找到相等的条件，则执行default语句，它与else语句类似。
    • switch语句是使用全等（===）来检测两个只的相等与否。所以会有一个值类型的比较
    • case后可以是一个空语句，把多个条件放在一起检测
    • 在switch语句中，case子句只是指明了执行的起点，但是没有指明终点，如果case后没有break语句，就会发生连续执行的情况，而忽略后边case的条件限制。
var a = 6;
    switch (a) {
        case 1:
            alert(1);
            // break;
        case 2:
            alert(2);
            // break;
        case 3:
            alert(3);
            // break;
        case 4:
            alert(4);
            break;
        case 5:
        case 6:
        case 7:
            alert(8);
            break;
        default:
            alert(10)
    }

  • 练习

    用户输入成绩 然后弹出成绩的等级

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>switch练习</title>
</head>
<body>
请输入成绩（数字）：
<input type="text" id="ipt">
<p>等级：<span id="con"></span></p>
<script>
  /*
   * 用户输入成绩  然后弹出成绩的等级
   * 成绩是   100-->S    >=90  A    >=80 <90  B  >=70 <80  C  >=60 <70  D     其他  Z
   */
  var oIpt = document.getElementById("ipt");
  var oCon = document.getElementById("con");
  oIpt.onchange = function(){
      //获取用户输入的成绩
      var userScore = this.value;
      // 因为switchdo都是相等判断 所有我们都取 分数的第一位 然后判断相等 比如所有的90分以上  都是9开头

      userScore = parseInt(userScore / 10);
      switch (userScore) {
          case 10:
              oCon.innerHTML = "S";
              break;
          case 9:
              oCon.innerHTML = "A";
              break;
          case 8:
              oCon.innerHTML = "B";
              break;
          case 7:
              oCon.innerHTML = "C";
              break;
          case 6:
              oCon.innerHTML = "D";
              break;
          default:
              oCon.innerHTML = "D";
      }
  }
</script>
</body>
</html>

循环语句

在程序开发中，存在大量的重复性操作或计算，这些任务必须依靠循环结构来完成。JS提供了 while  for do/while三种类型的循环语句。

while语句

  • while语句是最基本的循环结构。语法格式如下：

    while(判断式){

    ​ 语句

    }

  • 当判断式为真的时候，执行语句。执行结束之后再次进行判断，直到判断式为假，才跳出循环。 

// 用while()循环来计算1+2+3 ... +98+99+100的值。

var i = 1;
var num = 0;
while(i <= 100){
    num += i;
    i ++;
}
console.log(num);

// 也可以在循环语句中添加增量
var i = 1;
var num = 0;
while(i++ <= 100){
    num += i;
}

//每次执行时，要让条件发生变化，否则将进入死循环
var a = 4;
while(a < 7){
    console.log(a);
    a ++ ;
}

// 将1-100之间  3的倍数找出来 并打印
var i = 1;
while(i <= 100){
    if (i % 3 == 0){
        console.log(i);
    }
    i++;
}

do/while语句

  • do/while与while循环非常相似，区别在与表达式的值是每次循环结束后去检查，而不是开始去检查。

    do{

    ​ 语句

    }while(判断式子)

  • 因次do/while循环能够保证至少执行一次循环。而while就不一定了。

//基础使用
var a = 3;
do{
    console.log("hello");
}while(a < 1);

// 用do－while()循环来计算1+2+3 ... +98+99+100的值：
var i = 1;
var num = 0;
do{
    num += i;
    i ++;
}while(i <= 100);
console.log(num)

练习-计算年利率

用户输入一个钱数 年利率为1.05(去年的利息和本钱 是下一年的本金) 翻倍需要几年

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算年利率</title>
</head>
<body>
<input type="text" id="ipt">
<script>
    /*
    * 用户输入一个钱数  年利率为1.05(去年的利息和本钱 是下一年的本金)  翻倍需要几年
     */

    var oIpt = document.getElementById("ipt");
    var scale = 1.05;
    oIpt.onchange = function () {
        var userMoney = parseFloat(this.value);
        var fatalMoney = 2 * userMoney;
        var years = 0;

        //当用户的钱只要小于翻倍的钱，那么就让循环一直执行
        while(userMoney <= fatalMoney){
            // 循环体中，让本金每次执行都翻1.05倍，每一年循环一次
            userMoney *= scale;
            //每执行一次循环  让年数加1
            years ++;
        }
        alert("您的钱翻倍需要"+years+"年");

    }
</script>
</body>
</html>

练习-判断登录

用户输入的账号和密码,只要账号不是laowang ,密码不是 88888,我们就一直提示请重新输入,否则 提出输入成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断登录</title>
</head>
<body>
<script>
    // prompt是包含输入框  确认和取消的弹窗 用户输入的值就是这个prompt方法的返回值  如果用户没有输入或输入空  则返回null
    //prompt第一个参数 是提示用户的话

    //方法一
    //1、页面刚进入 先弹窗让用户输入账号名和密码
    var userName = prompt("请输入用户名");
    var passWord = prompt("请输入密码");
    //2、如果判断不正确 就一直让弹出输入账号名密码  所以可以考虑while循环
    while(userName != "laowang" || passWord != "88888"){
        // 3、密码输入错 或者  账号输入错误  就进入while执行 弹窗
        userName = prompt("请输入用户名");
        passWord = prompt("请输入密码");
    }
    alert("欢迎光临  老王")


    // 方法二： 递归调用
    var userName = prompt("请输入用户名");
    var passWord = prompt("请输入密码");
    //因为每次输入完都要判断  所以需要封装一个 函数
    function isLogin() {
        if (userName != "laowang" || passWord != "88888"){
            userName = prompt("请输入用户名");
            passWord = prompt("请输入密码");
            isLogin();//递归算法（在函数中调用自身）
        }else{
            alert("欢迎光临 老王 你是老王吧")
        }
    }
    isLogin();
</script>
</body>
</html>

for语句

  • for语句是一种更简洁的循环结构

    for（表达式1；表达式2；表达式3 )｛

    ​ 语句1；

    ​ 语句2……；

    ｝

    语句3

  • 表达式1在循环开始前无条件的求值一次，而表达式2在每次循环开始前求值。如果表达式2的值为真，则执行循环语句，否则终止循环。表达式3在每次循环后被求值，然后再次判断。

/*
    for循环执行顺序
    1、首先执行语句1
    2、执行判断式2 如果成立（返回true）则执行代码块  如果不成立（返回false） 整个循环结束
    3、如果判断式成立去执行了代码块，执行完代码块 会去执行语句3
    4、语句3执行完成后  再次去执行判断式2
    5、重复第二个步骤
*/

// 假设 弹出你好 总共弹出5次
for (var i = 0; i < 5; i++) {
    console.log("nei hao a");
}

// 练习：定义一个变量a=5,让a执行5次，每次a加3。然后弹出a最终的值。
var a = 5;
for (var i = 0; i <5 ; i++) {
    a += 3;
}
console.log(a);

for循环的练习

  • 求1到9的和
  • 求1到100的和
  • 求1-99中的单数的和
  • 求1-99中是3的倍数的数字和
  • 定义一个v，当v等于0时，v进行3次自加1。否则v进行4次自加2
  • 定义v＝3；对变量i由0到3进行遍历；当i 等于2时，v自加2；否则v自加3
    //1、求1到9的和
    // 1+2+3+4+5+6+7+8+9
    // 定义一个变量保存和  默认是0
    var num = 0;
    for (var i = 1; i < 10; i++) {
        num += i;
    }
    console.log(num);


    // 2、求1到100的和
    var num = 0;
    for (var i = 1; i < 101; i++) {
        num += i;
    }
    console.log(num);


    // 3、求1-99中的单数的和
    var num = 0;
    for (var i = 1; i < 100; i+=2) {
        num += i;
    }
    console.log(num)


    // 4、求1-99中是3的倍数的数字和
    var num = 0;
    for (var i = 3; i < 100; i+=3) {
        num += i;
    }
    console.log(num)

    var num = 0;
    for (var i = 0; i < 100; i++) {
        if (i % 3 == 0){
            num += i;
        }
    }
    console.log(num)


    // 5、定义一个v，当v等于0时，v进行3次自加1。否则v进行4次自加2
    var v = 3;
    if(v == 0){
        for (var i = 0; i <3 ; i++) {
            v++;
        }
    }else{
        for (var i = 0; i <4 ; i++) {
            v += 2;
        }
    }

    // 6、定义v＝3；对变量i由0到3进行遍历；当i 等于2时，v自加2；否则v自加3
    var v = 3;
    for (var i = 0; i < 4; i++) {
        if (i == 2){
            v += 2;
        }else{
            v += 3;
        }
    }

for循环的应用

对所有的li绑定点击事件 点击谁 让谁的背景颜色变成红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for循环应用</title>
</head>
<body>
    <ul id="box">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        /*
         * 效果 对所有的li绑定点击事件  点击谁 让谁的背景颜色变成红色
         * 1、获取标签
         */

        // 1、获取标签
        var oBox = document.getElementById("box");
        var oLis = oBox.getElementsByTagName("li");

        /*oLis[0].onclick = function () {
            this.style.backgroundColor = "red";
        }
        oLis[1].onclick = function () {
            this.style.backgroundColor = "red";
        }
        oLis[2].onclick = function () {
            this.style.backgroundColor = "red";
        }
        oLis[3].onclick = function () {
            this.style.backgroundColor = "red";
        }
        oLis[4].onclick = function () {
            this.style.backgroundColor = "red";sd 
        }*/

       /* for (var i = 0; i < oLis.length; i++) {
            oLis[i].onclick = function () {
                this.style.backgroundColor = "red";
            }
        }*/


        /*
         * 效果 对偶数个数的（0 2 4 6 8 10）li绑定点击事件  点击谁 让谁的背景颜色变成红色
         * 1、获取标签
         */
        var oBox = document.getElementById("box");
        var oLis = oBox.getElementsByTagName("li");

        for (var i = 0; i < oLis.length; i += 2) {
            oLis[i].onclick = function () {
                this.style.backgroundColor = "red";
            }
        }
    </script>
</body>
</html>

九九乘法算表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法算表</title>
</head>
<body>
<div id="box">

</div>
<script>
    var oBox = document.getElementById("box");
    for (var i = 1; i < 10; i++) {
        // 第一个for控制行的
        for (var j = 1; j <= i; j++) {
            // 第二个for 执行这一行的  签的乘数
            var math = j + "*" + i + "=" + j*i+" ";
            console.log(math)
            oBox.innerHTML = oBox.innerHTML + math;
        }
        // 在每一行执行结束后，添加一个换行
        oBox.innerHTML += "<br>";
    }


</script>
</body>
</html>

流程控制

使用break、label、continue、return语句可以中途改变分支结构、循环结构的流程方向，以提升程序的执行效率。return在函数中会做详细讲解。

label语句

  • 在JS中，label语句可以为一行语句添加标签，以方便在复杂的结构中设置跳转目标。
  • 语法如下：label:语句
  • label可以是任意合法的标识符，然后使用冒号分割标签名与标签语句。
  • label和break语句配合使用，主要应用在循环结构、多分枝结构中，以便与跳出内层嵌套体。
var num=0;
outermost:
for(var i=0; i<10;i++){
    for(var j=0; j<10; j++){
        if(i==5 && j==5){
            break outermost;
        }
        num++;
    }
}
console.log(num);

break语句

  • break语句能够结束当前for、for/in、while、do/while或者switch语句的执行。同时break可以接受一个可选的标签名，来决定跳出的结构语句。
  • 如果没有设置标签名，则跳出当前最内层结构。
//break 是立即退出循环 或 退出switch语句  执行循环后边的代码
var  num =0 ;
for ( var i=0 ; i<5 ; i++ ) {
    if ( i == 3 ) {
        break;
    }
    num++;
}
alert( num );



var num=0;
outermost:
for(var i=0; i<10;i++){
    for(var j=0; j<10; j++){
        if(i==5 && j==5){
            break outermost;
        }
        num++;
    }
}
console.log(num);

continue语句

  • continue语句用在循环结构内，用于跳出本次循环中剩余的代码，并在表达式的值为真的时候，继续执行下一次循环。
  • 可以接受一个可选的标签名，来决定跳出的循环语句。
var  num =0 ;
for ( var i=0 ; i<5 ; i++ ) {
    if ( i == 3 ) {
        continue;
    }
    num++;
}
alert( num );


var num=0;
outermost:
for(var i=0; i<10;i++){
    for(var j=0; j<10; j++){
        if(i==5 && j==5){
            continue outermost;
        }
        num++;
    }
}
console.log(num);

练习

  • 求整数1～100的累加值，但要求碰到个位为3的数则停止累加
  • 求整数1～100的累加值，但要求跳过所有个位为3的数
  • 求1-100之间不能被7整除的整数的和（用continue）
  • 求200-300之间所有的奇数的和（用continue）
  • 求200-300之间第一个能被7整数的数（break）

异常处理

ECMA-262规范了7种错误类型。其中Error是基类，其他6种错误类型是子类，都继承了基类。Error类型的主要作用是自定义错误对象。

  • Error：普通异常 。与thorw语句和try/catch语句一起使用，属性name可以读写异常类型，message属性可以读写详细的错误信息。
  • EvalError：不正确使用eval()方法时抛出
  • SyntaxError：出现语法错误时抛出
  • RangeError：数字超出合法范围之抛出
  • ReferenceError：读取不存在的变量时抛出
  • TypeError：值的类型发生错误的时候抛出
  • URIError：URI编码和解码错误时抛出

try/catch/finally语句

  • try/catch/finally语句是异常处理语句

    try{

    ​ 调试代码块

    }

    catch(e){

    ​ 捕获异常，并进行异常处理的代码块

    }

    finally{

    ​ 后期清理代码块

    }

  • 正常情况下，JS按顺序执行try子句中的代码，如果没有异常发生，将会忽略catch跳转到finally子句继续执行。

  • 如果在try子句运行错误，或者使用throw语句主动抛出异常，则执行catch子句中的代码，同时传入一个参数，引用Error对象

// try catch 案例
try{
    console.log(a);//当try中出现错误的时候，会直接进入catch执行
    console.log("我是try");
}catch (e) {
    console.log("catch");
    console.log(e);//referenceError:a is not defined
    console.log(e.name);//referenceError
    console.log(e.message);//a is not defined
}


try{
    console.log("try");
    throw new Error("你是不是没有定义变量");
}catch (e) {
    console.log("catch")
    console.log(e);
    console.log(e.name);
    console.log(e.message);
}



try{
    console.log("try");
    // throw new Error("你是不是没有定义变量");
}catch (e) {
    console.log("catch")
    console.log(e);
    console.log(e.name);
    console.log(e.message);
}finally {
    console.log('finally')
}

alert(1);

// throw是抛出错误
var a = 10;
if(a > 4){
    // throw "你错啦吗？";
    // throw new TypeError("你的类型错误");
    var userError = "你今天犯错了，错误如下。。。。。。。。";
    throw new SyntaxError(userError);
}

语句练习

收银程序

输入单价和数量，计算总价。如果总价大于500 则打八折。然后用户输入付钱，最终弹出找零。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收银程序</title>
</head>
<body>
<script>
    

    //输入商品的单价和数量
    var price = prompt("请输入单价");
    var count = prompt("请输入数量");

    //计算总价
    var sumPrice = price * count;

    //判断是否打折
    if (sumPrice >= 500){
        sumPrice *= 0.8;
    }

    //给用户说需要付多少钱
    var money = prompt("您本次消费"+sumPrice+"元，请付款(输入付钱的面额即可，稍等给您找零)");

    // 判断用户缴费是否足够，并找零
    if (money > sumPrice) {
        // 计算找零
        var reduceMoney = money - sumPrice;
        alert("找零" + reduceMoney + "元，请收好")
    }else{
        alert("钱不够！！！！")
         //此时可以重新递归调用，代码省略
    }

    alert("欢迎下次光临");
</script>
</body>
</html>

ATM按键

输入相应数字，执行相应功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ATM按键</title>
</head>
<body>
<script>
    var userPress = prompt("欢迎光临银行，请输入数字选择功能（1.查询余额，2.取钱，3.转账，4.退出）");
    switch (parseInt(userPress)) {
        case 1:
            search();
            break;
        case 2:
            drag();
            break;
        case 3:
            change();
            break;
        case 4:
            exit();
            break;
        default:
            alert("你丫看不懂提示么");
    }
    
    function search() {
        alert("正在查询余额");
    }
    function drag(){
        alert("正在取钱啊");
    }
    function change() {
        alert("正在转账")
    }
    function exit() {
        alert("正在退出")
    }
</script>
</body>
</html>

买保险

公司给员工买保险（用户通过此程序查询自己是否符合条件）：1.只要结婚的都买;2.没有结婚的男人 25岁以下不买;3.没有结婚的姑娘 22岁以下不买.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>买保险</title>
</head>
<body>
<script>
    /*
    * 公司给员工买保险（用户通过此程序查询自己是否符合条件）：
    * 只要结婚的都买
    * 没有结婚的男人 25岁以下不买
    * 没有结婚的姑娘 22岁以下不买
     */
    //输入是否结婚
    var isMarry = prompt("你结婚了吗？请输入yes和no");
    var age = prompt("您今年高寿啊");
    var sex = prompt("您性别是什么(man or woman)");
    if (isMarry === "yes"){
        alert("您放心做吧，公司给您提供免费的保险");
    }else if ((sex === "man" && age < 25) || (sex === "woman" && age < 22)){
        alert("自己回家买去吧");
    }else{
        alert("公司也给您买");
    }

</script>
</body>
</html>
posted @ 2023-01-12 21:28  z_bky  阅读(46)  评论(0)    收藏  举报