【JavaScript】Windows Webプログラミング入門（第2回）命令の順番

こんにちは、プログラマーのふみです。みなさんはコンピューターでプログラミングができますか？

日本の小学校では、2020年度からプログラミング教育の全面実施が始まります。
そこで、 JavaScript（ジャバスクリプト／JS）という言語を Windows 10 に標準搭載されているアクセサリの「メモ帳」に記述して使う、超簡単なプログラミングを4回に分けて紹介しています。

前回の記事はこちら：【JavaScript】Windows Webプログラミング入門（第1回）プログラムの作成と実行

CONTENTS

1 プログラムは上の行から順番に実行される（逐次処理）
2 コメントアウト
3 まとめ

プログラムは上の行から順番に実行される（逐次処理）

JavaScriptに限らず、コンピューターで使われるプログラムは、一番上の行から1行ずつ順番に命令が実行され、最下行のプログラムコードが実行されると終了します。
これは逐次処理（順次処理／シリアル処理）と呼ばれ、多くのプログラムに共通するルールの一つです。

メッセージが2回表示される「Hello world」

前回紹介した「Hello world」プログラムを少し変えたプログラムで説明します。
HTMLのコードは次のとおりです。

<script type="text/javascript">
window.alert('こんにちは、世界！');
window.alert('Hello, world！');
</script>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

当サイトの【JavaScript】Windows Webプログラミング入門（第1回）をご覧になったあなたは、簡単にプログラムを作れると思います。
上記のプログラムのHTMLファイルが完成したら、早速実行してみましょう。

このプログラムを実行すると、最初に日本語のメッセージ、次に英語のメッセージが表示されてプログラムが終了します。
プログラムコードが上の行から順番に命令が実行されているのがわかります。

リンクテキストで表示する「Hello world」

先ほどの説明で使った、メッセージが2回表示される「Hello world」は、リンクテキストをクリックしたときに動作させることもできます。
HTMLのコードは次のとおりです。

<a href="javascript:
window.alert('こんにちは、世界！');
window.alert('Hello, world！');
">メッセージを2回表示</a>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

上記はHTMLで記述した、アンカータグの href 属性に JavaScript を埋め込んでいます。
「Javascript:」～「”」（ダブルクォーテーション）の手前までが JavaScript の記述です。

HTMLファイルを作成したら、ダブルクリックでブラウザを開いてみましょう。
ブラウザに「メッセージを2回表示」のリンクテキストが表示されます。文字をクリックしてメッセージが表示されることを確認してみましょう。

↓この記事に組み込んだ、メッセージが2回表示される「Hello world」のリンクテキストはこちらです。

メッセージを2回表示

ボタンで表示する「Hello world」

先ほどの説明で使った、メッセージが2回表示される「Hello world」は、ボタンをクリックしたときに動作させることもできます。
HTMLのコードは次のとおりです。

<p><input type="button" value="メッセージを2回表示" onclick="javascript:
window.alert('こんにちは、世界！');
window.alert('Hello, world！');
"></p>
<noscript>
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

上記はHTMLで記述した、input タグの onclick 属性に JavaScript を埋め込んでいます。（input に終了タグはありません。）
「Javascript:」～「”」の手前までが JavaScript の記述です。

HTMLファイルを作成したら、ダブルクリックでブラウザを開いてみましょう。
ブラウザに「メッセージを2回表示」ボタンが表示されます。ボタンをクリックしてメッセージが表示されることを確認してみましょう。

↓この記事に組み込んだ、ボタンでメッセージが2回表示される「Hello world」はこちらです。

コメントアウト

最後は次のコードのプログラムを作成して実行してみましょう。

<p><input type="button" value="メッセージを2回表示" onclick="javascript:
// ここから JavaScript
window.alert('こんにちは、世界！'); // 日本語のメッセージを表示
window.alert('Hello, world！'); // 英語のメッセージを表示
// ここまで JavaScript
"></p>
<noscript>
<!-- スクリプトがブロックされている時に表示 -->
このブラウザはスクリプトが実行しないように制限されています。
</noscript>

このプログラムを実行すると、一つ前のサンプルコードと同じ動作をします。
JavaScript のコードの行末に「/」（半角スラッシュ）を2つ連続で付け加えた後に入力した文字はプログラムとして処理されなくなります。
これはコメントアウトというもので、プログラムの動作説明等を入れたりする時に使います。

ちなみに、HTMLのコメントアウトは「<!–」と「–>」で囲まれた文字です。

プログラムの言語により、コメントアウトの記載方法が異なりますが、ほとんどのプログラムにある機能です。ぜひ活用しましょう。