さくさく理解する JavaScript 入門

準備

hello, world.

なにはともあれ、下図の様に画面に「hello, world.」と表示するプログラムを書いてみよう。

コードは下記の様になる。

"hello.html":

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>hello, world</title>
</head>
<body>
    <script type="text/javascript">
        document.write("hello, world.");
    </script>
</body>
</html>

body タグの中身以外は必要最小限のHTMLしか記述していない。

JavaScript 部分は script 開始・終了タグで囲み、ソースを記述する。
script タブの記述位置は、かなり自由度がある。ほとんどどこに書いてもよい。header の中や、body の前後、またはbody の中に記述出来る。

ここでは document オブジェクトの witer() メソッドをコールすることで、画面に「hello, world.」と表示している。

画面に直接表示するのではなく、コンソールに文字列を出力することも可能だ。

コンソールは通常表示されないが、google Chrome であれば、その他ツール＞JavaScript コンソールで表示できる。

    <script type="text/javascript">
        console.log("hello, world.");
    </script>

JavaScript が無効になっている場合に、スクリプト部分が表示されないようにするには、以下のようにコメントを書いておくとよい。

    <script type="text/javascript">
    <!--
        console.log("hello, world.");
    //-->
    </script>

JavaScript が無効になっている場合に、代対メッセージを表示するには、下記のように noscript タグを使用する。

    <script type="text/javascript">
    <!--
        console.log("hello, world.");
    //-->
    </script>
    <noscript>
    	JavaScript が無効です。
    </noscript>

上記までは、「hello, world.」をコンソールに出力していたが、下記の様に alert() を使って、ダイアログに表示することも出来る。

    <script type="text/javascript">
        alert("hello, world.");
    </script>

目次

関連ページ

準備

hello, world.