Dartをセットアップしよう (5/6)
作成:2018-03-03 09:24
更新:2018-03-03 09:24
更新:2018-03-03 09:24
■DartのWebページを実行する
では、Dartのもう１つの利用場所である「Webページ」での利用についても触れておきましょう。WebページでのDartの利用は、JavaScriptの代りにスクリプトを利用するようなイメージになります。
HTMLファイルと、Dartのスクリプトファイルを用意します。まずHTMLファイルですが、これは下に掲載されているような感じで記述しておけばいいでしょう。ここでは、適当な場所に「hello.html」というファイル名で保存しておくことにします。
Dartのスクリプトは、<body>の下にある<script src="hello.js"></script>で読み込んでいます。「あれ？ Dartなのに、jsファイル？」と思った人。Dartのスクリプトは、Webでは使えません。
当たり前ですが、Webページの中で実行できるのはJavaScriptだけです。ということは、このhello.jsは、作成したDartのスクリプトをJavaScriptのスクリプトにトランスコンパイル（他の言語のソースコードに変換する処理）したものなのです。
Dartは、トランスコンパイルして生成されたJavaScriptを<body>タグの読み込みが完了した後に実行することで動作します。
HTMLファイルと、Dartのスクリプトファイルを用意します。まずHTMLファイルですが、これは下に掲載されているような感じで記述しておけばいいでしょう。ここでは、適当な場所に「hello.html」というファイル名で保存しておくことにします。
Dartのスクリプトは、<body>の下にある<script src="hello.js"></script>で読み込んでいます。「あれ？ Dartなのに、jsファイル？」と思った人。Dartのスクリプトは、Webでは使えません。
当たり前ですが、Webページの中で実行できるのはJavaScriptだけです。ということは、このhello.jsは、作成したDartのスクリプトをJavaScriptのスクリプトにトランスコンパイル（他の言語のソースコードに変換する処理）したものなのです。
Dartは、トランスコンパイルして生成されたJavaScriptを<body>タグの読み込みが完了した後に実行することで動作します。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<html>
<head>
……略……
</head>
<body>
<h1>Hello</h1>
<p id="msg"></p>
</body>
<script src="hello.js"></script>
</html>
※関連コンテンツ