<html>
  <head>
    <meta charset="utf-8">
    <title>Pirate badge</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="piratebadge.css">
  </head>
  <body>
    <h1>Pirate badge</h1>

    <div class="widgets">
      TO DO: Put the UI widgets here.
    </div>
    <div class="badge">
      <div class="greeting">
        Arrr! Me name is
      </div>
      <div class="name">
        <span id="badgeName"> </span>
      </div>
    </div>

    <script type="application/dart" src="piratebadge.dart"></script>
    <script src="packages/browser/dart.js"></script>
  </body>
</html>

關(guān)鍵信息：

在這次代碼試驗中，你對 piratebadge.html 文件的所有更改都是在 class 為 widgets 的 <div> 標簽中進行的。
在后續(xù)步驟中, id 為 badgeName 的 <span> 標簽會被具有用戶輸入功能的Dart代碼升級。
第一個 <script> 標簽引入了一個主文件，piratebadge.dart 文件。
Dart 虛擬機可以原生地運行 Dart 代碼。 Dart 虛擬機會在 Dartium 中構(gòu)建－－一個特殊的，可以讓你運行Dart App的 Chromium 瀏覽器。
packages/browser/dart.js 腳本會檢查原生Dart支持，同時引導(dǎo)Dart虛擬機載入編譯JavaScript腳本。

piratebadge.dart

void main() {
  // 你的應(yīng)用從這里開始
}

關(guān)鍵信息：

這個文件包含一個程序的入口 main() 方法. 在 piratebadge.html 文件的 <script> 標簽會通過運行這個方法來開始應(yīng)用。
main() 方法是一個 top-level 的方法。
一個 top-level 的變量或者方法是在類外進行公開定義的

運行這個應(yīng)用

在Dart編輯器中運行一個應(yīng)用：右擊 piratebadge.html 文件然后選擇 Run in Dartium。

http://wiki.jikexueyuan.com/project/learn-dart-in-minutes/images/dart1-learn-dart-in-minutes-step-1-run-the-skeleton-app-pic1.png" alt="運行" />

Dart 編輯器啟動了 Dartium，在構(gòu)建之后，讀取到了 piratebadge.html 文件。 piratebadge.html 文件啟動了這個應(yīng)用并且調(diào)用了main()方法。

你應(yīng)該看到如下結(jié)果。

http://wiki.jikexueyuan.com/project/learn-dart-in-minutes/images/dart1-learn-dart-in-minutes-step-1-run-the-skeleton-app-pic2.png" alt="運行" />

上一篇：步驟 4：創(chuàng)建一個 PirateName 的類下一篇：下面要做什么？