プログラミング入門-4 JavaScriptを書いてみよう

読者が「説明より実践派」とのご意見だったので、とりあえず、ひとつか二つ書いてみてもらうことにしました。

お使いのパソコンがMS Windowsなので、それに合わせて解説していきます。

JavaScriptとは

JavaScriptとは、インターネットを観るためのプログラム「Webブラウザー」の画面を表示したときに動作するプログラムです。プログラムはWebブラウザーがWebコンテンツと一緒に読み込み、パソコンの上でWebブラウザーがプログラムを実行します。Webブラウザーという実行プログラムが読み込んだJavaScriptプログラムを実行するので、一般的にはJavaScriptはインタープリター言語です。(JITコンパイラーと呼ばれる機構でコンパイルされることがありますが、ここでは解説しません)

JavaScriptにはサーバーやクラウドで実行するタイプのものもありますが、これもここでは解説しません。

なぜここでJavaScriptを選択するかというと、Windowsを持っていれば書いてすぐ実行できるからです。なにも追加でインストールする必要がありません。

プログラミングの準備

なにもいらないとはいえ、プログラミングするのにWindowsはディフォルト設定では使いにくいので少し設定します。

  1. 「エクスプローラー」を開いてください。
  2. メニューから「表示」タブを選択してください。
  3. 「ファイル名拡張子」にチェックを入れてください。

プログラムファイルを作りましょう

エクスプローラーで、自分の好きな場所にファイルを作ります。たとえば「デスクトップ」でもかまいません。

  1. エクスプローラーでそのフォルダーを開いてください。
  2. 背景を右クリックし、「新規作成」→「テキストドキュメント」を選んでください。
  3. ファイル名が「新しいテキストファイル.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関数を呼び出し、警告ウィンドウを表示した、ということになります。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中