JavaScript　超入門(1) “Hello World”

現在のWebアプリケーションを作るうえで欠かせない技術の一つがJavaScriptです。
しかし、それを使って様々なことが出来ることとある意味で自由度の高い書き方ができることから多くの情報があふれ、ビギナーにとっては戸惑いの多いプログラミング言語な印象を受けます。
Javascriptを学んでみようという人をターゲットに、JavaScriptの基本を解説していきたいと思います。

概要

JavaScriptはプログラミング言語のひとつで、オブジェクト指向型のスクリプト言語です。
主にユーザのWebブラウザ上で動作し、動的なであったり、インタラクティブなWebページの作成を可能とします。
近年では、Node,jsというJavaScrpitプラットフォームの登場によりサーバサイドでの活用も広がっています。

ちなみにJavaとJavaScriptは名前が似ていますがまったく別のプログラミング言語です。注意しましょう。

Hello World

ではさっそくですが簡単なJavaScriptを書いてみます。

次をコピペしてhello.htmlというhtmlファイルを作成し、ブラウザで開いてみましょう。

hello.html<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
        <pre>
            <script>
                <!--
                document.writeln('Hello World!');
                -->
            </script>
            <noscript>JavaScriptが利用できません</noscript>
        </pre>
    </body>
</html>

hello.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17	`<!DOCTYPE` `html>` `<html>` `<head>` `<meta` `charset="utf-8">` `<title>Hello World</title>` `</head>` `<body>` `<pre>` `<script>` `<!--` `document.writeln('Hello World!');` `-->` `</script>` `<noscript>JavaScriptが利用できません</noscript>` `</pre>` `</body>` `</html>`

document.writeln()は指定した文字列を表示するスクリプトです。
JavaScriptのコードをhtml内に埋め込むには<script>タグを用います。資料によってはタグ内にtype=”text/javascript”なる属性が書かれていることがありますが、HTML5の場合は必要ありません。

外部ファイルとして定義

上記のような非常に短いコードであればHTML上に埋め込むんでも問題ないですが、複雑な処理の場合はJavaScriptを別ファイルに書きそのファイルを読み込むほうがいいです。別ファイルに書いておくことで再利用性や修正の容易さも高まります。

hello.js
1	`document.writeln('Hello World!');`

JavaScriptは拡張子jsで保存します。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello World</title>
    </head>
    <body>
        <pre>
            <script src="hello.js"></script>
            <noscript>JavaScriptが利用できません</noscript>
        </pre>
    </body>
</html>