式
プログラミング言語には様々な種類の式があります。例えば、前節でコンソールに入力した「1 + 1」は算術式です。算術式は + や - といった演算子と呼ばれる記号を使い、加算や減算などの演算を行います。
上記は数学の式と同じで、10に20を加算しています。
コンソールで確認しよう
10 + 20
出力結果
30
代入式
次に紹介するのは代入式です。代入式は代入演算子( = )を使い、左辺の変数に右辺の値を代入します。
上の式を実行すると、valの値は10になります。
コンソールで確認しよう
val = 10
出力結果
10
代入式は文字列も使えます。
コンソールで確認しよう
s1 = "Hello world"
式は代入の際に計算することもできます。次の式では、xに5を代入し、100にxを足し、その結果をyに代入しています。xは5になっているので、yには「100 + 5」の結果の値105が代入されます。
コンソールで確認しよう
x = 5
y = 100 + x
出力結果
105
文
プログラミング言語は、日本語や英語のような自然言語と同じように文法があります。ここではJavaScriptの基本的な文法を説明します。
プログラミング言語での文は処理を行うための単位で、文の終端を表すセミコロン( ; )までが一つの文です。特別な操作をしない限り、文は上から順番に処理されます。先に紹介した式は論理式や代入式など値を返すもので、主に文の一部として使われます。
今までの例のように、1行に1文のみの時は終端のセミコロンを省略できます。ただし、文の終了として明示的にセミコロンを入れることをお勧めします。
セミコロンで区切れば、次のように1行に複数の文を記述できます。
コンソールで確認しよう
a = 1; b = 2;
命令文は単一行に記述することがほとんどですが、改行を使って複数行にすることもできます。長い文になる際などに有効です。
コンソールで確認しよう
console.log(
"There is nothing either good or bad, but thinking makes it so."
);
var text =
"A fool thinks himself to be wise, but a wise man knows himself to be a fool.";
コード行の分割
文字列を複数行にしたい場合、バックスラッシュ( \ )を末尾に追加します。バックスラッシュ( \ )の後は改行以外の文字があると構文エラーになります。
コンソールで確認しよう
console.log("Hello \
World!");
出力結果
Hello World!
if文
後の章で詳しく説明しますが、条件を満たす場合に実行する、というif文を紹介します。if文は、カッコ( () )で囲んだ条件式を評価し、式の値が真なら if ブロック内の命令を実行します。
if ( 条件式 ) {
1つ目のifブロック内の命令
}
条件式が真の場合、if ブロックが処理されてブロック内のコードが実行されます。
// 条件式の値が true の場合
if ( true ){
console.log("true");
}
コメントアウト
コードを無効にしたい場合や、コードの説明などを書きたい場合、コメントアウトを使います。コメントアウトしたコードは無視され、実行されません。JavaScript には一行コメントアウトと複数行コメントアウトの2種類が用意されています。
一行コメントアウト
一行コメントアウトは、コメントアウトしたい文字の前にスラッシュ2つ( // )を挿入します。次の行はコメントアウトされているので、実行されません。
コンソールで確認しよう
// console.log("test");
命令文の後にコメントアウトを追加することもできます。次のコードはセミコロンまでの命令文が実行され、// 以降の文字列はコメントアウトとして扱われます。
コンソールで確認しよう
console.log("test"); // コメント
複数行コメントアウト
複数行のコメントは /* で始まり */ で終ります。この /* */ の間に何行あっても問題ありません。
コンソールで確認しよう
/*
console.log("test");
console.log("test");
*/
複数行コメント内に複数行コメントがあると、構文エラーが発生するので注意してください。埋め込まれた複数行コメントの終わりを示す */ が、複数行コメント全体の終わりとして解釈されてしまうからです。
次のコメントアウトは構文エラーになります。
コンソールで確認しよう
/*
console.log("hello");
/*console.log("world");*/
*/
SCRIPTタグ
JavaScriptを実行するには、SCRIPTタグを使います。SCRIPTタグには2つの使い方があります。ひとつはHTMLの中にスクリプトを書く方法で、もうひとつは外部のJavaScriptファイルを読み込むという方法です。
まずはHTMLの中に直接スクリプトを書く方法を紹介します。次のように、SCRIPTタグの開始タグと終了タグの間にJavaScriptのコードを記述直接記述します。
SCRIPT要素内にスクリプトを記述する例
<script>
// ここにスクリプトを記述する
</script>
次に外部スクリプトファイルを読み込む方法です。SCRIPTタグのSRCに属性に読み込みたいJavaScriptファイルのURLを指定します。
外部スクリプトを読み込む例
<script src="ここに外部スクリプトのURLを記述する"></script>
SCRIPTタグを記述
それでは早速、JavaScriptを実行するHTMLを作成してみましょう。HTMLを保存したら、ブラウザで表示確認してみてください。「Hello World」という文字が表示されれば成功です。
BODY要素内にJavaScriptを宣言する方法
<html>
<body>
<script>
document.write("Hello World");
</script>
</body>
</html>
複数の SCRIPTタグを記述
SCRIPT タグは書かれている順番に実行されます。変数もSCRIPTタグ内にとどまらず、別のSCRIPTタグからも参照可能です。
1つ目のSCRIPTタグで変数 x の値を設定し、2つ目のSCRIPTタグから変数 x を参照しています。変数はSCRIPTタグを超えて参照可能なので、document.write() により変数 x の値の 10 がブラウザに表示されます。
<html>
<body>
<script>
var x = 10;
</script>
<script>
document.write( x );
</script>
</body>
</html>
外部スクリプトファイル
それでは、SCRIPTタグのもう一つの機能、外部のJavaScriptファイルを実行する方法を紹介しましょう。まず、拡張子が .js のファイルを作成し、そのファイルにスクリプトを記述します。ここでは、JavaScriptのファイル名を print_msg.js とします。JavaScriptファイルを作成する際は拡張子を「.js」にしてください。
作成したJavaScriptファイルに下記のコードをコピー&ペーストしてください。外部ファイルに記述する場合はSCRIPTタグで囲む必要はありません。
function printMsg() {
alert("Hello!");
}
次はHTMLファイルを用意します。ファイル名は何でも良いですが、JavaScriptと同じファイル名のprint_msg.htmlとしましょう。下記のHTMLファイルを作成し、ブラウザで表示してみてください。HTMLファイルと同階層に print_msg.js ファイルがあれば、アラートが表示されるはずです。[OK]ボタンを押してもアラートが表示されます。
<html>
<body>
<script src="print_msg.js"></script>
<input type="button" value="OK" onclick="printMsg()">
</body>
</html>
このように、SCRIPTタグから外部のJavaScriptファイルを読み込むには、SRC属性にJavaScriptファイルのURLを指定します。もしjsという下層のフォルダにJavaScriptがある場合、次のようにフォルダ名も記載します。
<script src="js/print_msg.js"></script>