JavaScriptの基本

　赤字：JavaScriptの命令や重要なタグ／青字：用途に応じて変更する部分／緑字：変更可能な変数名やユーザー関数名

基本的な動作方法

  1. 読み込み時に動作

    2. 最も基本的な記述方法で、スクリプトを宣言するタグをHTML中に記述します。<BODY>の中やその前後に置きます。

    <SCRIPT LANGUAGE="JavaScript">
<!--
（ここにスクリプトを記述）
//-->
</SCRIPT>
      表示例 ソース
    例

    ここをクリック

    （新しいページを開きます） 

    <SCRIPT LANGUAGE="JavaScript">
<!--
    alert("ようこそ私のページへ");
//-->
</SCRIPT>
  2. リンクをクリック（直接）

    3. アンカータグにスクリプトを直接記述します。

    <A HREF="JavaScript:（ここにスクリプトを記述）">クリック</A>
      表示例 ソース
    例

    ここをクリック

    		 
    <A HREF="JavaScript:alert('ようこそ私のページへ')">クリック</A>
  3. リンクをクリック（呼出）

    4. リンクからスクリプトを呼び出して動作させます。

    <A HREF="JavaScript:（呼出名）">クリック</A>

<SCRIPT LANGUAGE="JavaScript">
<!--
function （呼出名）{
	（ここにスクリプトを記述）
}
//-->
</SCRIPT>

    呼出名には、値を送り出すために（）書きが必要で、「yobi()」（値なし）、「yobi(0)」（値=0）、「yobi("abc")」（値=abc）などと記述します。function では、それら値を受け取る関数を「yobi(uketori)」などとして指定し、スクリプト内で「uketori」から値を取り出します。

      表示例 ソース
    例

    ここをクリック

    ここをクリック

    		 
    <A HREF="JavaScript:message('私')">クリック</A>

<A HREF="JavaScript:message('僕')">クリック</A>

<SCRIPT LANGUAGE="JavaScript">
<!--
function message(me) {
	alert("ようこそ"+me+"のページへ");
}
//-->
</SCRIPT>
  4. ボタンをクリック

    5. ボタンからスクリプトを呼び出します。

    <FORM><INPUT TYPE="button" VALUE="クリック" onClick="（呼出名）"></FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--
function （呼出名）{
	（ここにスクリプトを記述）
}
//-->
</SCRIPT>
      表示例 ソース
    例 
    <FORM><INPUT TYPE="button" VALUE="クリック" onClick="message2()"></FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--
function message2() {
	alert("ようこそ私のページへ");
}
//-->
</SCRIPT>
  5. リンク上から呼出

    6. アンカータグ内にonMouseOver（マウスを上に載せた時）やonMouseOut（マウスを上から外した時）を使って、指定したユーザーの動作によってスクリプトを呼び出します。（イベント処理）

    <A HREF="（リンク）" onMouseOver="（呼出名）">クリック</A>

<SCRIPT LANGUAGE="JavaScript">
<!--
function （呼出名）{
	（ここにスクリプトを記述）
}
//-->
</SCRIPT>
      表示例 ソース
    例

    ここにマウスを載せます

    		 
    <A HREF="kihon1.html" onMouseOver="message2()">クリック</A>

<SCRIPT LANGUAGE="JavaScript">
<!--
function message2() {
	alert("ようこそ私のページへ");
}
//-->
</SCRIPT>

タグの記述方法

　１つのHTML内に複数のタグを設置することができます。また、１つのタグの中に複数のfunctionを設置することも可能です。
　下記例では、どちらも同じですので、動作する近くに記述したい場合と、ページ内にまとめて記述したい場合とで使い分けると良いでしょう。

  タグを分割 タグを統合
例 
<SCRIPT LANGUAGE="JavaScript">
<!--
function message(me) {
	alert("ようこそ"+me+"のページへ");
}
//-->
</SCRIPT>

<SCRIPT LANGUAGE="JavaScript">
<!--
function message2() {
	alert("ようこそ私のページへ");
}
//-->
</SCRIPT>
 
<SCRIPT LANGUAGE="JavaScript">
<!--
function message(me) {
	alert("ようこそ"+me+"のページへ");
}

function message2() {
	alert("ようこそ私のページへ");
}
//-->
</SCRIPT>

　functionを複数使う場合は、それぞれの呼出名が同じにならないように注意してください。同じだとどちらを呼び出して良いか判りません。また、タグを複数に分割していても同様で、HTML内で重複しない名前を使いましょう。変数についても同様です。

コメントアウトについて

　スクリプトのタグ内にある「<!--」と「//-->」はいったいなでしょうか？

　HTMLでは、タグと文字列を使って画面に情報を表示しています。しかし、中には表示したくない情報があります。
　製作者が後で見返したり、誰かがソースを見たときのために、注意書きや記録を残しておきたい場合があるのです。そういうときにコメントアウトを使います。

  1. HTMLでのコメントアウト

    2. 　HTMLの場合は、表示される情報以外はタグを使って表現しています。コメントアウトもタグと同様なものを使います。

      表示例 ソース
    例 
    <!-- この部分がコメントアウトです -->
    
<!--
このように
複数の行でも
対応しています。
-->


    　<script>タグ間にもこれと同じものがあるのは、スクリプトが実行できない環境でタグ間のスクリプトのソース部分が表示されないようにするためです。
    　これはブラウザがタグを理解できない場合に、タグ間の文字列が表示されてしまうことがあるためです。
    　例えば、携帯電話の標準ブラウザでスクリプトを含んだページを見たときに、スクリプトがそのまま表示されてしまいます。

  2. JavaScriptでのコメントアウト

    3. 次にスクリプト内でのコメントアウト方法を見てみましょう。

      実行例 ソース
    例 
    <SCRIPT>
//この行がコメントアウトになります。

    /*
    複数行ある場合は
    このようにします。
alert("OK");
    */
</SCRIPT>

    １つの行内では、「//」を使うと、それ以降がコメントアウトされます。それより前の部分はスクリプトとして実行されますので、スクリプトの後ろに補足説明を付けたりすることができます。

    複数の行にコメントアウトを指定する場合は「/*〜*/」を使います。
    上記例では、alertがコメントアウト内にあるため実行されないことになります。

    さて、最初の疑問に戻ります。どうしてスクリプトタグ間の最後が「//-->」になっているのか。
    「<!--」の方はそのままで問題ないのですが、「-->」の方はスクリプトとして認識されてしまうため、「//」を使ってJavaScriptからコメントアウトしているのです。

    これはおまじないとしてタグとセットで覚えて置いた方が良いでしょう。

  3. XHTMLの場合のおまじない

    4. XMLなどでは、おまじない部分が次のように変わります。

      ソース
    例 
    <SCRIPT>
    //<![CDATA[

スクリプト部分

//]]>
</SCRIPT>

変数について

　変数はユーザーが必要に応じて作ることができる入れ物です。計算結果の数値や文字列を入れておき、後で使うために残しておくことができます。変数を使えば、同じ値を何度も繰り返し使うのも楽ですし、計算を何度もさせる必要がありません。また、ユーザーからの指示を受け止め、条件判断を行うのにも必須です。

　変数には、適当な任意の英文字と数字が使えますが、数字を先頭に置くことはできません。記号では「_」が使えます。注意して欲しいのは英文字の大文字と小文字を判別することです。「Abc」という変数と「aBc」という変数は同じものではありません。

  表示例 ソース
例 
<SCRIPT LANGUAGE="JavaScript">
<!--
function message3() {
	me = "わたし";
	alert("ようこそ"+me+"のページへ");
}
//-->
</SCRIPT>

　上記の例では、ボタンをクリックするとmessage3が呼び出されます。変数meに「私」という文字列が代入（変数に値を入れること）され、次の行でアラートを表示するときに変数を呼び出して利用しています。ボタンを複数用意して下記のような使い方もできます。

  表示例 ソース
例 

<FORM>
<INPUT TYPE="button" VALUE="クリック" onClick="message('私')">
<INPUT TYPE="button" VALUE="クリック" onClick="message('僕')">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--
function message(me) {
	alert("ようこそ"+me+"のページへ");
}
//-->
</SCRIPT>

スクリプトが使えない場合

　JavaScriptが使えるかどうか、使える場合はスクリプトで判断し、使えない場合はタグで判別します。

  1. 使える場合
    2. 当然ですが、使えるということはスクリプトが動作しますので、あえて使える場合と使えない場合をスクリプトで切り換える必要はありません。
  2. 使えない場合

    3. <NOSCRIPT>タグを使います。

      表示例 ソース
    例 スクリプトが使えないときに表示されます 
    <NOSCRIPT>スクリプトが使えないときに表示されます</NOSCRIPT>
戻る