メインコンテンツまでスキップ

JavaScript ことはじめ

JavaScript​

HTML がウェブサイトの構造を表す言語だとすれば、JavaScript はウェブサイトに振る舞いを与える言語といえます。ブラウザさえあれば環境に関係なく同じように実行可能な、強力なプログラミング言語です。

Web 開発で用いられる言語

JavaScript で Hello World!​

プログラミングの世界では、まず画面に Hello World! と表示させることが慣例になっています。JavaScript を用いて画面に Hello World! を表示してみましょう。

まずは、index.html を次のように書き換えます。

index.html
<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>Title</title>
  </head>
  <body>
    <script src="./script.js"></script>
  </body>
</html>

続いて、script.js を作成し、内容として次の通りに保存します。

script.js
document.write("Hello World!");

index.html をダブルクリックして開いてください。Hello World! と表示されましたか？開くのは、script.js ではなく index.html なので、気をつけてください。

JavaScript が動く仕組み​

HTML ファイルの中に、以下のような記述があります。

index.html
<script src="./script.js"></script>

まず、この記述によって、script.js ファイルがブラウザによって読み込まれます。この script.js に記述されているのが JavaScript です。

備考

この講座の中では、script 要素を常に body 要素の末尾に記述するようにします。これは、JavaScript が読み込まれるタイミングで他のすべての HTML 要素がすでに表示されていることを保証するためです。

JavaScript の基本文法​

JavaScript のプログラムで、セミコロンで区切られた部分を文と呼びます。 JavaScript の実行環境は、プログラム中に含まれる文を上から下に向けて順番に実行していきます。 document.write はブラウザの画面に出力するための命令です。

script.js
document.write("Hello World1");
document.write("Hello World2");
document.write("Hello World3");
ヒント

改行が表示されず困っていますか？document.write で出力したテキストは、HTML として解釈されます。br 要素や p 要素を使いましょう。

コメント​

// から行末までの部分や、/* から */ で囲まれた部分はコメントとみなされ、プログラムの実行に影響を与えません。この講座内でもプログラムの意味を説明するのに利用していきます。

script.js
// この部分はコメントです
document.write("Hello World"); // この部分もコメントです
/* この部分も
やはりコメントです。 */