• 《Head First HTML5 javascript》第4章判断&第5章循环

    知识点：

    1. switch 评估一个表达式，将表达式的值与case子句匹配，并执行与该情况相关联的语句。

      一个 switch 语句首先会计算其 expression。然后，它将从第一个 case 子句开始直到寻找到一个其表达式值与所输入的 expression 的值所相等的子句。

      1. switch (expression) {
      2.   case value1:
      3.     // 当 expression 的结果与 value1 匹配时，执行此处语句
      4.     [break;]
      5.   case value2:
      6.     // 当 expression 的结果与 value2 匹配时，执行此处语句
      7.     [break;]
      8.   ...
      9.   case valueN:
      10.     // 当 expression 的结果与 valueN 匹配时，执行此处语句
      11.     [break;]
      12.   [default:
      13.     // 如果 expression 与上面的 value 值都不匹配，执行此处语句
      14.     [break;]]
      15. }

      通常与 break 或 default 关键字一起使用。两者都是可选的:

      break 关键字用于跳出switch代码块。会终止switch代码块的执行。 如果忽略该关键字，swith 语句的下一个代码块会被执行。

      default 关键字 来规定匹配不存在时做的事情。 default 关键字在 switch 语句中只能出现一次。虽然是可选参数，但是建议都使用该参数，在不是我们期望的情况下，可以使用它输出信息。

    2. 数组Array 对象支持在单个变量名下存储多个元素，并具有执行常见数组操作的成员。

      1. 在 JavaScript 中，数组不是基本类型，而是具有以下核心特征的 Array 对象：

        • JavaScript 数组是可调整大小的，并且可以包含不同的数据类型。（当不需要这些特征时，可以使用类型化数组）
        • JavaScript 数组不是关联数组，因此，不能使用任意字符串作为索引访问数组元素，但必须使用非负整数（或它们各自的字符串形式）作为索引访问。
        • JavaScript 数组的索引从 0 开始：数组的第一个元素在索引 0 处，第二个在索引 1 处，以此类推，最后一个元素是数组的 [length]() 属性减去 1 的值。
        • JavaScript 数组复制操作创建浅拷贝。（所有 JavaScript 对象的标准内置复制操作都会创建浅拷贝，而不是深拷贝）。

      2. 处理数据

        [Array.prototype.pop()]从数组中移除最后一个元素并返回该元素。

        1. const fruits = ['Apple', 'Banana', 'Orange'];
        2. const removedItem = fruits.pop();
        3. console.log(fruits);
        4. // ["Apple", "Banana"]
        5. console.log(removedItem);
        6. // Orange

        [Array.prototype.push()]在数组末尾添加一个或多个元素，并返回数组新的 length。

        1. const fruits = ['Apple', 'Banana'];
        2. const newLength = fruits.push('Orange');
        3. console.log(fruits);
        4. // ["Apple", "Banana", "Orange"]
        5. console.log(newLength);
        6. // 3

        使用 [splice()]方法从 fruits数组中移除最后 3 个元素。

        1. const fruits = ['Apple', 'Banana', 'Strawberry', 'Mango', 'Cherry'];
        2. const start = -3;
        3. const removedItems = fruits.splice(start);
        4. console.log(fruits);
        5. // ["Apple", "Banana"]
        6. console.log(removedItems);
        7. // ["Strawberry", "Mango", "Cherry"]

        使用 [shift()]方法从 fruits数组中移除第一个元素。

        1. const fruits = ['Apple', 'Banana'];
        2. const removedItem = fruits.shift();
        3. console.log(fruits);
        4. // ["Banana"]
        5. console.log(removedItem);
        6. // Apple

        使用 [splice()]方法从 fruits数组中移除前 3 个元素。

        1. const fruits = ['Apple', 'Strawberry', 'Cherry', 'Banana', 'Mango'];
        2. const start = 0;
        3. const deleteCount = 3;
        4. const removedItems = fruits.splice(start, deleteCount);
        5. console.log(fruits);
        6. // ["Banana", "Mango"]
        7. console.log(removedItems);
        8. // ["Apple", "Strawberry", "Cherry"]

        使用 [splice()]方法将 fruits数组中的最后两个元素替换为新元素。

        1. const fruits = ['Apple', 'Banana', 'Strawberry'];
        2. const start = -2;
        3. const deleteCount = 2;
        4. const removedItems = fruits.splice(start, deleteCount, 'Mango', 'Cherry');
        5. console.log(fruits);
        6. // ["Apple", "Mango", "Cherry"]
        7. console.log(removedItems);
        8. // ["Banana", "Strawberry"]

        使用 [for...of]循环遍历 fruits数组，将每一个元素打印到控制台。

        1. const fruits = ['Apple', 'Mango', 'Cherry'];
        2. for (const fruit of fruits) {
        3.   console.log(fruit);
        4. }
        5. // Apple
        6. // Mango
        7. // Cherry

        但 for...of只是遍历任意数组的众多方法之一；更多方法，参见循环与迭代

      3. 多维数组：JavaScript它本身是没有多维数组的概念，因为在JavaScript中 数组元素的数据类型可以是任意数据类型。假设在一个数组中有一些数组元素的的类型还是数组 这个时候我们就将它称之为多维数组！

        var seats = new Array（new Array）；

        1. 赋值

          1. var seats = [[false,true,false,true,true],
          2.             [false,true,false,false,true];

        2. 二维数组的行数：arr.length；相应行的列数：arr[0].length //第一行的长度 以上例来算此值为2

          1. for (var i = 0; i < seats.length; i++){   
          2.       for (var j = 0; j < seats[i].length; j++ ){
          3. 		n = i*seats[i].length + j;
          4. 	}
          5. }

    3. confirm 显示一个具有一个可选消息和两个按钮 (确定和取消) 的模态对话框。

      • message 是要在对话框中显示的可选字符串。
      • result 是一个布尔值，表示是选择确定还是取消 (true 表示 OK)。
      1. if (window.confirm("Do you really want to leave?")) {
      2.   window.open("exit.html", "Thanks for Visiting!");
      3. }
      • The following text is shared between this article, DOM:window.prompt and DOM:window.alert 对话框是弹出式 (modal) 的 (也即 alert 样式，译者注). 直到这个对话框被点击后，后面的脚本才会运行。请勿滥用此功能，这里列出了很多个理由：请放弃使用对话框来确认信息。 Mozilla Chrome 的用户 (比如 Firefox 插件开发者) 应该使用nsIPromptService这个方法。

    4. boolean逻辑运算符

      1. 如果需要，作为第一个参数传递的值将转换为布尔值。如果省略该参数或参数值为 0、-0、[null]、false、[NaN]、[undefined]，或空字符串（""），则该对象具有的初始值为 false。所有其它值，包括任何对象，空数组（[]）或字符串 "false"，都会创建一个初始值为 true的对象。

      2. 注意不要将基本类型中的布尔值 true 和 false 与值为 true 和 false 的 Boolean 对象弄混了。其值不是 [undefined]或 [null]的任何对象（包括其值为 false 的布尔对象）在传递给条件语句时都将计算为 true。例如，以下 [if]语句中的条件评估为 true：

        1. const x = new Boolean(false);
        2. if (x) {
        3.   // 这里的代码会被执行
        4. }

        基本类型的布尔值不受此规则影响。例如下面的 [if]语句的条件为假：

        1. const x = false;
        2. if (x) {
        3.   // 这里的代码不会执行
        4. }

      3. 不要用创建 Boolean对象的方式将一个非布尔值转化成布尔值，直接将 Boolean  当做转换函数来使用即可，或者使用[双重非（!!）运算符]

        1. const x = Boolean(expression);     // use this...
        2. const x = !!(expression);          // ...or this
        3. const x = new Boolean(expression); // don't use this!

      4. 对于任何对象，即使是值为 false的 Boolean对象，当将其传给 Boolean函数时，生成的 Boolean对象的值都是 true。

        1. const myFalse = new Boolean(false);   // initial value of false
        2. const g = Boolean(myFalse);       // initial value of true
        3. const myString = new String('Hello'); // string object
        4. const s = Boolean(myString);      // initial value of true

      5. 当使用非严格相等（==）来比较一个对象和布尔原始值时，最重要的是需要弄明白最终比较的是什么。请看一下的示例：

        1. if ([]) { console.log("[] is truthy")}         // logs "[] is truthy"
        2. if ([] == false) { console.log("[] == false")} // logs "[] == false"

        []是真值而 [] == false也同时成立的原因是：非严格比较 [] == false会将 []的原始值和 false进行比较。而获取 []的原始值时，JavaScript 引擎会首先调用 [].toString()。其结果为 ""，也是最终和 false 一起比较的值。换句话说，[] == false等价于 "" == false，而 "" 是假值——这也解释了为什么会得到这一结果。

    5. while循环:只要指定条件为 true，循环就可以一直执行代码块。

      1. while (i<5)
      2. {
      3.     x=x + "The number is " + i + "
        "        ;
      4.     i++;
      5. }

    案例：

    1. <!DOCTYPE html>
    2. <html>
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <script type="text/javascript">
    6.  
    7.             var seats = [[false,true,false,true,true,true,false,true,false],
    8.                         [false,true,false,false,true,false,true,true,true],
    9.                         [true,true,true,true,true,true,false,true,false],
    10.                         [true,true,true,false,true,false,false,true,false]];
    11.             var n = -1;
    12.     
    13.             function initSeats(){
    14.                     for (var i = 0; i < seats.length; i++){   
    15.                         for (var j = 0; j < seats[i].length; j++ ){
    16.                             n = i*seats[i].length + j;
    17.                             if(seats[i][j]){
    18.                                 document.getElementById("seat" + n).src = "seat_avail.png";   
    19.                                 document.getElementById("seat" + n).alt = "available";        
    20.             
    21.                             }
    22.                             else{
    23.                                 document.getElementById("seat" + n).src = "seat_unavail.png";   
    24.                                 document.getElementById("seat" + n).alt = "unavailable"; 
    25.                             }     
    26.                         }
    27.                 }
    28.             }   
    29.  
    30.             function findSeat(){
    31.  
    32.                 if (n >= 0){
    33.                     n = -1;
    34.                     initSeats();
    35.                 }
    36.  
    37.                 var i = 0;
    38.                 var finished = false;
    39.                 while((i < seats.length) && !finished){
    40.                     for (var j = 0; j < seats[i].length; j++ ){
    41.                             n = i*seats[i].length + j;
    42.                             if (seats[i][j] && seats[i][j+1] && seats[i][j+2]){
    43.                                 var accept = confirm("do you want to sit in row" + (i+1) + " seat" + (j+1) + "through" + (j+3) + "?");
    44.                                 if (accept){
    45.                                     document.getElementById("seat" + n).src = "seat_select.png";   
    46.                                     document.getElementById("seat" + n).alt = "your seat"; 
    47.                                     document.getElementById("seat" + ( n + 1 )).src = "seat_select.png";   
    48.                                     document.getElementById("seat" + ( n + 1 )).alt = "your seat";
    49.                                     document.getElementById("seat" + ( n + 2 )).src = "seat_select.png";   
    50.                                     document.getElementById("seat" + ( n + 2 )).alt = "your seat";
    51.                                     finished=true;
    52.                                     break;   
    53.                                 }
    54.                                 else{
    55.                                     document.getElementById("seat" + n).src = "seat_avail.png";   
    56.                                     document.getElementById("seat" + n).alt = "available"; 
    57.                                     document.getElementById("seat" + ( n + 1 )).src = "seat_avail.png";   
    58.                                     document.getElementById("seat" + ( n + 1 )).alt = "available"; 
    59.                                     document.getElementById("seat" + ( n + 2 )).src = "seat_avail.png";   
    60.                                     document.getElementById("seat" + ( n + 2 )).alt = "available";
    61.                                 }
    62.                             }
    63.                         }
    64.                     i++;
    65.                 }    
    66.             }
    67.         </script>
    68.     </head>
    69.  
    70.     <body onload="initSeats();">
    71.         <div style="margin-top:100px; text-align:center">
    72.             <img id="seat0" src="" alt="" />
    73.             <img id="seat1">
    74.             <img id="seat2">
    75.             <img id="seat3">
    76.             <img id="seat4">
    77.             <img id="seat5">
    78.             <img id="seat6">
    79.             <img id="seat7">
    80.             <img id="seat8"><br>
    81.             <img id="seat9">
    82.             <img id="seat10">
    83.             <img id="seat11">
    84.             <img id="seat12">
    85.             <img id="seat13">
    86.             <img id="seat14">
    87.             <img id="seat15">
    88.             <img id="seat16">
    89.             <img id="seat17"><br>
    90.             <img id="seat18">
    91.             <img id="seat19">
    92.             <img id="seat20">
    93.             <img id="seat21">
    94.             <img id="seat22">
    95.             <img id="seat23">
    96.             <img id="seat24">
    97.             <img id="seat25">
    98.             <img id="seat26"><br>
    99.             <img id="seat27">
    100.             <img id="seat28">
    101.             <img id="seat29">
    102.             <img id="seat30">
    103.             <img id="seat31">
    104.             <img id="seat32">
    105.             <img id="seat33">
    106.             <img id="seat34">
    107.             <img id="seat35"><br>
    108.               <input type="button" id="seat" value="Find Seats" onclick="findSeat();">
    109.  
    110.         </div>
    111.  
    112.     </body>
    113. </html>

  • 相关阅读:
    Spring——IOC + DI功能实现（完全注解开发）
    svn服务器迁移包括日志
    windows系统jdk1.8下载及安装步骤，配置环境变量【非常详细】
    [BJDCTF2020]ZJCTF，不过如此
    BurpSuit官方实验室之命令注入
    virtualbox7 虚拟机与宿主机互传文件、共享u盘
    JS-谈谈你所理解的闭包
    Qt之显示PDF文件
    7. 核心功能（Core Features）
    探索Python中的装饰器
  • 原文地址：https://blog.csdn.net/hcud024/article/details/127774724