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

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!");

ブラウザで実行してみましょう。Hello World! と表示されましたか？

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");

コメント​

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

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

改行が表示されず困っていますか？document.writeは HTML タグを出力できます。<br>を用いたり、pタグで囲んでみたりしてみましょう。