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

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"); // この部分もコメントです
/* この部分も
やはりコメントです。 */