読者が「説明より実践派」とのご意見だったので、とりあえず、ひとつか二つ書いてみてもらうことにしました。
お使いのパソコンがMS Windowsなので、それに合わせて解説していきます。
JavaScriptとは
JavaScriptとは、インターネットを観るためのプログラム「Webブラウザー」の画面を表示したときに動作するプログラムです。プログラムはWebブラウザーがWebコンテンツと一緒に読み込み、パソコンの上でWebブラウザーがプログラムを実行します。Webブラウザーという実行プログラムが読み込んだJavaScriptプログラムを実行するので、一般的にはJavaScriptはインタープリター言語です。(JITコンパイラーと呼ばれる機構でコンパイルされることがありますが、ここでは解説しません)
JavaScriptにはサーバーやクラウドで実行するタイプのものもありますが、これもここでは解説しません。
なぜここでJavaScriptを選択するかというと、Windowsを持っていれば書いてすぐ実行できるからです。なにも追加でインストールする必要がありません。
プログラミングの準備
なにもいらないとはいえ、プログラミングするのにWindowsはディフォルト設定では使いにくいので少し設定します。
- 「エクスプローラー」を開いてください。
- メニューから「表示」タブを選択してください。
- 「ファイル名拡張子」にチェックを入れてください。
プログラムファイルを作りましょう
エクスプローラーで、自分の好きな場所にファイルを作ります。たとえば「デスクトップ」でもかまいません。
- エクスプローラーでそのフォルダーを開いてください。
- 背景を右クリックし、「新規作成」→「テキストドキュメント」を選んでください。
- ファイル名が「新しいテキストファイル.txt」などとなり名前が編集状態になりますので、「programming1.html」などと変更します。
「txt」という部分(拡張子といいます)も変更するのを忘れないように!
中身を編集しましょう
ファイルを右クリックし、「プログラムから開く」→「メモ帳」でオープンします。初めてのときは「メモ帳」が表示されないかもしれません。その際は「プログラムから開く」→「別のプログラムを選択」を選び、一覧を一番下までスクロールして「その他のアプリ」を選び、「メモ帳」を選びます。2回目からは最初から選択できるようになっています。
メモ帳が開いたら、以下のような内容を書き込んでください。
<html>
<body>
<h1>Hello</h1>
world!
</body>
</html>
Ctl+Sを押して保存します。
エクスプローラーに戻り、このファイル(ここではprogramming1.html)をダブルクリックします。すると(通常であれば)、Webブラウザーが立ち上がり「Hello World!」と表示されます。
Hello
world!
これで、このファイルがWebブラウザーで表示されたことが確認できます。この部分までは「ページが表示された」という状態で、まだプログラムは書かれていません。
プログラムを書き込みましょう
メモ帳に戻り、以下のように書き換えます。
<html>
<script type="text/javascript">
alert("Hello, world!");
</script>
<body>
<h1>Hello</h1>
world!
</body>
</html>
Webブラウザーに戻り、Ctl+Rを押してリロードします。
すると小さなウィンドウ(警告ウィンドウといいます)が開き、「Hello, world! [OK]」が表示されます。これで、プログラムが動いたことになります。
ちょっと解説
後半で追加したのは以下の部分です。
<script type="text/javascript">
alert("Hello, world!");
</script>
このファイルはHTML(Hyper Text Markup language)ファイルと呼ばれ、インターネットの画面を作っているファイルの形式です。
<xxxx>
形式で書かれているものは「開始タグ」といい、
</xxxx>
形式で書かれている部分を終了タグといいます。これで、テキストファイルを構造的に書いていくのがhtmlです。
scriptの開始・終了タグで囲まれた部分がJavaScriptが書かれている部分です。今回のコードは「alert(“Hello, world!”);」という部分です。scriptで書かれているJavaScriptは、通常、htmlファイルを読み込んだときに一回だけ上から順番に実行されます。
alert( … ) のように、カッコを従えた記述を「関数呼び出し(function call)」と呼びます。alert 関数は、警告ウィンドウを表示するための関数です。関数とは、一般的には別のところに書かれているプログラムの一節です。関数は、その「別の場所に書かれているプログラムを呼び出す」という方法です。呼び出しなので、戻ってきます。
カッコの中には「Hello, world!」という文字列が書かれていますが、これを「関数の引数(function argument)」といいます。
つまり、このプログラムは「”Hello, world!”」という引数で alert関数を呼び出し、警告ウィンドウを表示した、ということになります。