ゼロから始めるJavaScript講座Vol02 JavaScriptの基本文法


ゼロから始めるJavaScript講座Vol02 JavaScriptの基本文法
目次
  1. ゼロから始めるJavaScript講座JavaScriptの基本文法
  2. アラート
  3. 文字を表示
  4. コメント
  5. 課題

ゼロから始めるJavaScript講座JavaScriptの基本文法

アラート

お手本に従いJavaScriptの代表的な機能であるアラートにより「Hello World」と表示するプログラムを実際に作成してみましょう。

ファイル名: alert.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>アラート</title>
    <script>
        alert('Hello World');
    </script>
</head>
<body>
</body>
</html>

動作サンプル:alert.htmljavascript-alert-639

作成したファイルをブラウザで閲覧すると、ダイアログと呼ばれる枠が立ち上がり、この中にHello Worldという文字が表示されます。

JavaScriptはHTMLのscript要素の中に記述します。

javascript-alert-2

script要素はhead要素の中に記述することが多いですが、body要素の中に記述することも可能です。

JavaScriptには色々な機能が用意されており、今回はアラートを利用しました。

javascript-alert-3

script要素の中に記述しています。

javascript-alert-4-639

alert()は警告やメッセージを伝えるためのアラートダイアログを表示する命令文です。括弧内に記載した文字を表示します。このような命令文のことをメソッドと呼びます。

セミコロンは、処理(文)の終わりを意味します。alertメソッドは「ダイアログを表示する」という処理であり、「この処理はここまでです」とコンピュータに伝えてあげる役割を持ちます。よって命令の区切りとして「1つの処理に対して1つセミコロン」が必要になります。

また表示する文字は「'(シングルクォート)」又は「”(ダブルクォート)」で囲む必要があります。2つに違いはないため、好みでどちらかを利用しましょう。

文字を表示

今度はWebページ上に「Hello World」と表示するプログラムを作成してみましょう。

ファイル名: document_write.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>文字を表示</title>
</head>
<body>
    <script>
        document.write('Hello World');
    </script>
</body>
</html>

javascript-alert-5-639

WebブラウザにHello Worldと文字が表示されます。

先ほどと異なり、今回はbody要素の中にscript要素を記述しました。このようにhead要素とbody要素のどちらでも記述することは可能です。

今回利用したdocument.write()はHTMLに文字を書き出す命令文で、alert()と同じくメソッドの1つです。

javascript-alert-6-639

書き方もalert()と同じで、括弧内に表示したい文字を書き、処理の最後にセミコロンをつけます。

またdocument.write()はHTMLタグの出力も可能です。

javascript-alert-7-639

document.write()の詳しい説明については後に行います。現時点ではこれを利用すれば文字(HTML)の書き出しができるとだけ覚えておきましょう。

コメント

JavaScriptでのコメントは「//」(二重スラッシュ)から始まるものと「/」(スラッシュ・アスタリスク)「/」(アスタリスク・スラッシュ)で囲む2種類があります。

javascript-alert-8-639

「/」(スラッシュ)を2本続けると、以降の文字がコメントになり処理されなくなります。二重スラッシュは1行(行末)がコメントになります。

javascript-alert-9-639

「/」「/」で囲むと、囲んだ間にある全てがコメントになります。複数行にわたる長いコメントを使いたい場合、こちらを利用します。

課題

alert()で自分の名前を表示するプログラムを作成し、ブラウザで閲覧してください。

ファイル名: challenge_alert.html

NEXT LESSON ☛ 変数の使い方

PREV LESSON ☛ JavaScriptの基礎知識


CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp