大牌坊棋牌官网

書名： HTML5權威指南
作者名： (美)Adam Freeman
本章字數： 2367字
更新時間： 2020-01-10 15:29:18

5.4 使用變量和類型

定義變量要使用var關鍵字，在定義的同時還可以像在一條單獨的語句中那樣為其賦值。定義在函數中的變量稱為局部變量，只能在該函數范圍內使用。直接在script元素中定義的變量稱為全局變量，可以在任何地方使用——包括在其他腳本中。代碼清單5-6示范了局部變量和全局變量的用法。

代碼清單5-6 使用局部變量和全局變量

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
var myGlobalVar = "apples";
                  function myFunc(name) {
var myLocalVar = "sunny";
                      return ("Hello " + name + ". Today is " +myLocalVar+ ".");
                  };
                  document.writeln(myFunc("Adam"));
              </script>
              <script type="text/javascript">
                  document.writeln("I like " +myGlobalVar);
              </script>
            </body>
        </html>

JavaScript是一種弱類型語言，但這不代表它沒有類型，而是指不用明確聲明變量的類型以及可隨心所欲地用同一變量表示不同類型的值。JavaScript根據賦給變量的值確定其類型，還可以根據使用場景在類型間自由轉換。代碼清單5-6的輸出結果如下：

        Hello Adam. Today is sunny. I like apples

5.4.1 使用基本類型

JavaScript定義了一小批基本類型（primitive type），它們包括字符串類型（string）、數值類型（number）和布爾類型（boolean）。這看起來可能有點少，但JavaScript的這三種類型具有很大的靈活性。

1．字符串類型

string類型的值可以用夾在一對雙引號或單引號之間的一串字符表示，如代碼清單5-7所示。

代碼清單5-7 定義字符串變量

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
var firstString = "This is a string";
var secondString = 'And so is this';
              </script>
            </body>
        </html>

表示字符串時使用的引號要匹配。例如，字符串前端用單引號而后端用雙引號是不行的。

2．布爾類型

boolean類型有兩個值：true和false。代碼清單5-8中這兩個值都用到了，這個類型最重要的使用場合是本章稍后將要講到的條件語句。

代碼清單5-8 定義布爾變量

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var firstBool = true;
                  var secondBool = false;
              </script>
            </body>
        </html>

3．數值類型

整數和浮點數（也稱實數）都用number類型表示，代碼清單5-9示范了其用法。

代碼清單5-9 定義數值變量

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
var daysInWeek = 7;
var pi = 3.14;
var hexValue = 0xFFFF;
              </script>
            </body>
        </html>

定義number類型變量時不必言明所用的是哪種數值，只消寫出需要的值即可，JavaScript會酌情處理。上例先后使用了一個整數、一個浮點數和一個以0x開頭的十六進制數。

5.4.2 創建對象

JavaScript支持對象的概念。有多種方法可以用來創建對象，代碼清單5-10是一個簡單的例子。

代碼清單5-10 創建對象

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
var myData = new Object();
myData.name = "Adam";
myData.weather = "sunny";
                  document.writeln("Hello " + myData.name + ". ");
                  document.writeln("Today is " + myData.weather + ".");
              </script>
            </body>
        </html>

此例通過調用new Object()的方式創建了一個對象，然后將其賦給一個名為myData的變量。在此之后，即可像這樣通過賦值的方式定義其屬性：

        myData.name = "Adam";

在這條語句之前，對象并沒有一個名為name的屬性。這條語句執行之后就有了這個屬性，而且其值已被設置為Adam。像這樣用變量名后加一句點再加屬性名的方式就能獲取該屬性的值：

          document.writeln("Hello " +myData.name+ ". ");

1．使用對象字面量

用對象字面量的方式可以一口氣定義一個對象及其屬性，代碼清單5-11示范了其做法。

代碼清單5-11 使用對象字面量

          <! DOCTYPE HTML>
          <html>
              <head>
                <title>Example</title>
              </head>
              <body>
                <script type="text/javascript">
var myData = {
name: "Adam",
weather: "sunny"
};
                    document.writeln("Hello " + myData.name + ". ");
                    document.writeln("Today is " + myData.weather + ".");
                </script>
              </body>
          </html>

從代碼清單中可以看到，屬性的名稱和值之間以冒號（:）分隔，而各個屬性之間又以逗號（,）分隔。

2．將函數用做方法

對象可以添加屬性，也能添加函數。屬于一個對象的函數稱為其方法。這是我最喜歡的一大JavaScript特性。我也不知道為什么，反正就是覺得這個特性很優雅，總是那么招人喜愛。代碼清單5-12示范了如何以這種方式添加方法。

代碼清單5-12 為對象添加方法

          <! DOCTYPE HTML>
          <html>
              <head>
                <title>Example</title>
              </head>
              <body>
                <script type="text/javascript">
                    var myData = {
                        name: "Adam",
                        weather: "sunny",
printMessages: function() {
   document.writeln("Hello " + this.name + ". ");
   document.writeln("Today is " + this.weather + ".");
}
                    };
                    myData.printMessages();
              </script>
          </body>
        </html>

此例將一個函數變成了一個名為printMessages的方法。注意，在方法內部使用對象屬性時要用到this關鍵字。函數作為方法使用時，其所屬對象會以關鍵字this的形式作為一個參數被傳給它。上述代碼清單的輸出結果如下所示：

        Hello Adam. Today is sunny.

提示

在創造和管理對象方面JavaScript還有許多招數可用，不過在討論HTML5的時候還用不著這些特性。有意深入鉆研這門語言的讀者可以去讀一下本章開頭推薦的書。

5.4.3 使用對象

創建對象之后，可以用來做許多事。本節將介紹一些本書后面經常會用到的方法。

1．讀取和修改屬性值

對象最顯而易見的操作是讀取或修改屬性值。這些操作有兩種不同的語法形式，如代碼清單5-13所示。

代碼清單5-13 讀取和修改對象屬性值

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var myData = {
                      name: "Adam",
                      weather: "sunny",
                  };
myData.name = "Joe";
myData["weather"] = "raining";
                  document.writeln("Hello " +myData.name+ ".");
                  document.writeln("It is " +myData["weather"]);
              </script>
            </body>
        </html>

第一種形式大多數程序員都很熟悉，前面的例子用的也是這種形式。其做法是像這樣用句點將對象名和屬性名連接在一起：

        myData.name = "Joe";

第二種形式類似數組索引，如下所示：

        myData["weather"] = "raining";

在這種形式中，屬性名作為一個字符串放在一對方括號之間。這種存取屬性值的辦法非常方便，這是因為此法可用變量表示屬性名。如下所示：

        var myData = {
            name: "Adam",
            weather: "sunny",
        };
        var propName = "weather";
        myData["propName"] = "raining";

在此基礎上才能枚舉對象屬性，下面就來談這個話題。

2．枚舉對象屬性

要枚舉對象屬性可以使用for...in語句。代碼清單5-14示范了其用法。

代碼清單5-14 枚舉對象屬性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var myData = {
                      name: "Adam",
                      weather: "sunny",
                      printMessages: function() {
                          document.writeln("Hello " + this.name + ". ");
                          document.writeln("Today is " + this.weather + ".");
                      }
                  };
for (var prop in myData) {
document.writeln("Name: " + prop + " Value: " + myData[prop]);
                  }
              </script>
            </body>
        </html>

for...in循環代碼塊中的語句會對myData對象的每一個屬性執行一次。在每一次迭代過程中，所要處理的屬性名會被賦給prop變量。例中使用類數組索引語法（即使用方括號[和]）獲取對象的屬性值。代碼清單的輸出結果如下所示（格式上已做調整，以便閱讀）：

        Name: name Value: Adam
        Name: weather Value: sunny
        Name: printMessages Value: function () { document.writeln("Hello " + this.name + ". ");
        document.writeln("Today is " + this.weather + "."); }

從中可以看到，作為方法定義的那個函數也被枚舉出來了。JavaScript在處理函數方面非常靈活，方法本身也被視為對象的屬性，這就是其結果。

3．增刪屬性和方法

就算是用對象字面量生成的對象，也可以為其定義新屬性。代碼清單5-15即為一例。

代碼清單5-15 為對象添加新屬性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var myData = {
                      name: "Adam",
                      weather: "sunny",
                  };
myData.dayOfWeek = "Monday";
              </script>
            </body>
        </html>

上例中為對象添加了一個名為dayOfWeek的新屬性。這里使用的是圓點表示法（用句點將對象和屬性的名稱連接在一起），不過用類數組索引表示法也沒什么不可以。

讀者看到此處可能會猜到：通過將屬性值設置為一個函數也能為對象添加新方法。代碼清單5-16即是一例。

代碼清單5-16 為對象添加新方法

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var myData = {
                      name: "Adam",
                      weather: "sunny",
                  };
myData.sayHello = function() {
document.writeln("Hello");
                  };
              </script>
          </body>
        </html>

對象的屬性和方法可以用delete關鍵字刪除，如代碼清單5-17所示。

代碼清單5-17 刪除對象的屬性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var myData = {
                      name: "Adam",
                      weather: "sunny",
                  };
myData.sayHello = function() {
document.writeln("Hello");
};
delete myData.name;
delete myData["weather"];
delete myData.sayHello;
              </script>
            </body>
        </html>

4．判斷對象是否具有某個屬性

可以用in表達式判斷對象是否具有某個屬性，如代碼清單5-18所示。

代碼清單5-18 檢查對象是否具有某個屬性

        <! DOCTYPE HTML>
        <html>
            <head>
              <title>Example</title>
            </head>
            <body>
              <script type="text/javascript">
                  var myData = {
                      name: "Adam",
                      weather: "sunny",
                  };
var hasName = "name" in myData;
var hasDate = "date" in myData;
                  document.writeln("HasName: " + hasName);
                  document.writeln("HasDate: " + hasDate);
              </script>
            </body>
        </html>

此例分別用一個已有的和一個沒有的屬性進行測試。hasName變量的值會是true，而hasDate變量的值會是false。

官术网_书友最值得收藏!

HTML5權威指南

5.4 使用變量和類型

5.4.1 使用基本類型

5.4.2 創建對象

5.4.3 使用對象