赤字:JavaScriptの命令や重要なタグ/青字:用途に応じて変更する部分/緑字:変更可能な変数名やユーザー関数名
変数はユーザーが必要に応じて作ることができる入れ物です。
計算結果の数値や文字列を入れておき、後で使うために残しておくことができます。変数を使えば、同じ値を何度も繰り返し使うことができますから、同じ計算を何度もさせる必要がなくなります。また、指示内容を覚えさせて、後で使うということもあります。
変数には、任意の英文字と数字が使えますが、数字を先頭に置くことはできません。記号では「_」が使えます。
重要な注意点として、英文字の大文字と小文字を判別するので間違いのないようにしなければなりません。例えば、「Abc」という変数と「aBc」という変数は同じものではないということです。
<form> <input name="ボタン" type="button" value="クリック" onClick="message()"> </form> <script type="text/javascript"> <!-- function message() { var me = "わたし"; alert("ようこそ" + me + "のページへ"); }
//--> </script>
上記の例では、ボタンをクリックするとmessageが呼び出されます。このようにfunctionの後に呼び出し名が書かれた物を「ユーザー関数」と呼びます。
ユーザー関数messageでは、2つのことが実行されています。
1つ目が、変数meに対して「わたし」という文字列を入れているということです。変数の頭に付いている「var」は、その変数がこのユーザー関数の中だけで有効だということを示しています。(後記「ローカル変数」を参照)
次に、関数alertを使って命令をしています。ここでは、テキストと変数meを組み合わせて、ダイアログ(アラート)を表示します。
命令群をひとまとめにして、呼び出して使えるようにしたもの。
ユーザー関数の中だけで有効な変数のこと。これに対し、ページ内の全ての場所で有効な変数をグローバル変数と呼びます。
ローカル変数には「var」を頭に付けることで、ローカル変数宣言を行います。
グローバル変数はユーザー関数の内外で使用可能ですが、ローカル変数に同じ名前がある場合、その後に登場する同名の変数は全てローカル変数として扱われます。もちろん、そのユーザー関数内だけで有効です。
グローバル変数には宣言はありません。命令用の関数と違う文字列を使えば、自動的に変数として認識されます。
スクリプトの命令を実行する様々な定型語句が関数です。様々な役割があるので、これを組み合わせることでプログラミングを行います。
ボタンを複数用意して下記のような使い方もできます。
<form> <input type="button" value="クリック" onClick="message('私')"> <input type="button" value="クリック" onClick="message('僕')"> </form> <script type="text/javascript">
<!--
function message(me) { alert("ようこ" + me + "のページへ"); } //--> </script>
今度はユーザー関数messageの呼び出し方も受け方も違います。
呼び出すときに「私」とか「僕」という文字列を引数(ひきすう)として与えています。ユーザー関数はこれを変数meで受け取っています。このとき、変数meは自動的にローカル変数となります。
引数には、数値と文字列、変数などが使われますが、数値や変数の場合はそのまま記述できますが、文字列の場合は「"」や「'」で両側を囲うことになっています。
この文字列の囲いはスクリプト内でも同じです。
囲い文字には「"」と「'」がありますが、囲いの両端は同じものを使います。そして、囲い文字の中に囲い文字を使いたいときに、この2つを使い分けます。「"」の内には「'」を、「'」の内には「"」を使います。