JavaScript　超入門(1) “Hello World”

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

概要

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

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

Hello World

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

次をコピペしてhello.htmlという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>

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

外部ファイルとして定義

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

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>

script要素のsrc属性にjsファイルのパスを指定すればOKです。
<script>タグはjsを読み込みたい箇所で<body>タグ内に記述します。

ただしスクリプトファイルを読み込む間HTML要素の描画が中断されるため、
<script>タグはbodyの閉じタグ直前に書く場合が多いです。

また”関数”定義のjsの場合は、<head>タグの中に<script>タグを記述します。
関数？となっても今は大丈夫です。

以上が基本的なJavaScriptの記述、及びjsファイルの読み込みの方法になります。