赤字：JavaScriptの部分／青字：自由に変更可能な部分／緑字：変更可能だがJavaScriptの動作に重要な部分（そのままの方が良い）
--- 実例 ---
--- 例文 ---
<FORM><INPUT TYPE=button VALUE="ご挨拶" onClick="alt()"></FORM> <SCRIPT LANGUAGE="JavaScript"> function alt() { alert("ようこそJavaScriptのページへ！\nこのサンプルは初心者でも簡単にJavaScriptが使えるように応援しています。"); } </SCRIPT>--- 解説 ---
ボタンを押すと alt() というファンクション（プログラム）を呼び出すようになっています。
alert(文字列) と用意するだけで、簡単にダイアログを表示させることが出来ます。
文字列の中で改行をするときは「\n」を使用します。--- 応用 ---
alert の次の行に 前項の document.location の行を追加すれば、ダイアログを閉じた後、ページを切り替えることが出来るようになります。
【IE7.0では設定の変更が必要です】
--- 実例 ---
--- 例文 ---
<A HREF="index.html" onMouseOver="window.status='JavaScriptのトップページへ'; return true;" onMouseOut="window.status=''; return true;">トップへ</A>--- 解説 ---
リンクの部分にマウスを持っていくと、ブラウザのウインドウステータス（下のところ）に文字列を表示します。
画面中にリンク先の説明をするスペースがとれないときには非常に便利です。onMouseOver="window.status='JavaScriptのトップページへ'; return true;"
この部分が、マウスを上に置いた時のメッセージを指定する部分です。onMouseOut="window.status=''; return true;"
この部分は、マウスを外した時のメッセージを指定する部分で、この例では、空のメッセージ（シングルクオート「'」で囲った部分）を表示するという方法で、先に表示されたメッセージを消すことができます。
この部分を省略すれば、一度表示されたメッセージを表示されたままにすることができます。
基本的な文字列の呼び出し方法
--- 実例 ---
トップへ／インデックスへ--- 例文 ---
<FORM NAME="FM"><INPUT NAME="TX" TYPE=text SIZE=30></FORM> <A HREF="index.html" onMouseOver="msg1()">トップへ</A>／<A HREF="index.html" onMouseOver="msg2()">サンプルインデックスへ</A> <SCRIPT LANGUAGE="JavaScript"> function msg1() { document.FM.TX.value = "JavaScriptのトップページへ"; } function msg2() { document.FM.TX.value = "サンプルのインデックスへ"; } </SCRIPT>--- 解説 ---
リンクの部分にマウスを持っていくと、フレームの文字枠にに文字列を表示します。
アンカーの中の onMouseOver で、msg() のファンクションを呼び出しています。リンクをいくつか用意するときはファンクションの名称を変えなくてはいけません。
呼び出しに必要なファンクションが異なりますので、function msg() { ... } の部分を必要数コピーして、msg の部分を変更し、対応するアンカーも変更しましょう。（注）ファンクションの呼び出し関数名（ユーザー関数）には他の関数名と同じものは使えません。うまく動かないときにはユーザー関数名を変更してみると直ることがあります。
ユーザー関数をまとめる
--- 実例 ---
トップへ／インデックスへ--- 例文 ---
<FORM NAME="FM"><INPUT NAME="TX" TYPE=text SIZE=30></FORM> <A HREF="index.html" onMouseOver="msg()">トップへ</A>／<A HREF="index.html" onMouseOver="msg()">サンプルインデックスへ</A> <SCRIPT LANGUAGE="JavaScript"> function msg(num) { //*1 if (num == 1) { //*2 document.FM.TX.value = "JavaScriptのトップページへ"; //*3 } if (num ==2) { document.FM.TX.value = "サンプルのインデックスへ"; } } </SCRIPT>--- 解説 ---
前スクリプトの function を１つにまとめました。
msg() が msg(num) となっています。更に onMouseOver の中でファンクションを呼び出すときに msg(1)、msg(2) というように数字を引き継ぐようになっています。流れはこうです。
マウスを「トップへ」の上に置くと、 onMouseOver="msg(1)" によって、ファンクション msg(num) が呼び出されます。
このとき num に 1 が引き継がれ（代入され）ます。（*1）
ファンクション msg(num) の中で if文 を使って num に入った数字によって動作を振り分けています。
if (num == 1) は num が 1 と等しい場合、{} 内を実行しなさいという命令です。（*2）
これにより文字列を呼び出す（*3）ことができるのです。このように配列関数を私用することで処理を簡便化することができます。
さてこのままではマウスをアンカーから外しても文字列が消えませんので、次はその方法を解説します。
文字列を消す方法と配列の利用
--- 実例 ---
--- 例文 ---
<FORM NAME="FM"><INPUT NAME="TX" TYPE=text SIZE=30></FORM> <A HREF="index.html" onMouseOver="msg(1)" onMouseOut="msg(0)">トップへ</A>／<A HREF="index.html" onMouseOver="msg(2)" onMouseOut="msg(0)">サンプルインデックスへ</A> <SCRIPT LANGUAGE="JavaScript"> function msg(num) { //*1 document.FM.TX.value = ""; //*2 if (num==1) document.FM.TX.value = "JavaScriptのトップページへ"; //*3 if (num==2) document.FM.TX.value = "サンプルのインデックスへ"; //*4 } </SCRIPT>--- 解説 ---
文字の消去に必要な部分は onMouseOut と ファンクション内の document...= ""; の部分です。
更にif文をコンパクトに表記しました。これは１つの行にまとめる場合には {} を外してこのように記述することができます。「トップへ」にマウスを載せると「１」を、「インデックスへ」にマウスを載せると「２」を、マウスを外すと「０」をファンクションに送ります。
受け取ったファンクション msg(num) は変数「num」に受け取った数字を入れます。（*1）
次に、空白（正確には何もないという情報、ヌルストリング）をフォームに入れます。（*2）
num = 1（*3）または num = 2（*4）のときにはそれぞれの文章が表示されます。
num = 0 の時は（*2）を前もって実行しているので、その後のif文が実行されないため文字列が消えるようになります。対応するリンクを増やしたいときは SCRIPTタグ内のif文の行を増やしていくだけで出来ます。
これを応用するとグラフィックを切り換えるスクリプトを作成できます。「グラフィックを切り換える」をご覧ください。
--- 応用 ---
メッセージを事前に変数に入れて置く方法でも同じ処理ができます。
例文 <SCRIPT LANGUAGE="JavaScript">
mt = new Array();mt[0] = ""; //*1
mt[1] = "JavaScriptのトップページへ"; //*2
mt[2] = "サンプルのインデックスへ";function msg(num) {
document.FM.TX.value = mt[num]; //*3
}
</SCRIPT>空白（メッセージの消去）も配列で用意しておきます。（*1）
メッセージを順に呼び出す番号に対応して用意します。（*2）
後は、function の中でメッセージの番号を呼び出して表示するだけです。（*3）
同じ確率で表示
--- 実例 ---
--- 例文 ---
<FORM><INPUT TYPE=button VALUE="おみくじ" onClick="omikuji()"></FORM>
<SCRIPT LANGUAGE="JavaScript"> function omikuji() { rand = Math.floor(Math.random()*5); if (rand == 0) msg = "大吉"; if (rand == 1) msg = "中吉"; if (rand == 2) msg = "吉"; if (rand == 3) msg = "凶"; if (rand == 4) msg = "大凶"; alert(msg); } </SCRIPT>--- 解説 ---
ボタンを押すと、乱数が決定され、0〜4番までの文章の１つが表示されます。
--- 応用 ---
ボタン無しで、HTMLの表示と同時にメッセージを表示する場合は以下のようになります。
例文 <SCRIPT LANGUAGE="JavaScript"> rand = Math.floor(Math.random()*5); if (rand == 0) msg = "大吉"; if (rand == 1) msg = "中吉"; if (rand == 2) msg = "吉"; if (rand == 3) msg = "凶"; if (rand == 4) msg = "大凶"; document.write(msg); </SCRIPT>メッセージを組み合わせて自由に作成してくれるものも簡単に作成できます。
下記リンクをクリックすると新しいウインドウでサンプルが実行されます。再読込をするとメッセージが変わります。詳細はInstantJoker.htmlのソースを表示してください。サンプル：InstantJoker.html
異なる確率で表示
--- 実例 ---
--- 例文 ---
<FORM><INPUT TYPE=button VALUE="おみくじ" onClick="omikuji()"></FORM> <SCRIPT LANGUAGE="JavaScript"> function omikuji() { rand = Math.floor(Math.random()*100); msg = "大吉"; //0〜9（10%） if (rand > 9) {msg = "中吉";} //10〜29（20%） if (rand > 29) {msg = "吉";} //30〜69（40%） if (rand > 69) {msg = "凶";} //70〜89（20%） if (rand > 89){msg = "大凶";} //90〜99（10%） alert(msg); } </SCRIPT>--- 解説 ---
ボタンを押すと、乱数が決定され、更に条件文で乱数の受け取る範囲をそれぞれに作って文章を決めています。
条件文は上から徐々に範囲を絞っています。
乱数が10ならmsg変数はまず「大吉」になり、次に「中吉」になり、以後の条件には外れますので、最終的に「中吉」となります。
乱数が90の場合、すべての条件に当てはまって行きますが、最終的には「大凶」となります。
結果として、条件文を並べることで、条件を絞って行くことになり、それぞれに乱数を取る範囲ができあがり、これによって各条件の確率が異なる結果になっています。
--- 実例 ---
掲示板の書込にこのようなフォームの送信が使われています。通常はCGIファイルにデータを送信し、受信したデータをサーバに保存したり、加工して表示させますが、ここでは、受信したデータを表示する機能をもたせたHTMLファイルに送信しています。
--- 例文 ---
<SCRIPT language="JavaScript"> <!--// function checkSubmit() { return confirm('送信しても良いですか？'); } //--> < /SCRIPT> <FORM method="post" action="../datareceive.html" onSubmit="return checkSubmit()"> <INPUT type="text" name="text1" value="データを送信します"> <INPUT type="submit" value="送信する"> <INPUT type="reset" value="クリア"> </FORM>--- 解説 ---
データを送信する前に、もういちど確認のためのダイアログを表示し、「ＯＫ」なら送信をします。
実例のフォームではエラー表示を回避するためにsample2.html（このページ）に対してGETでフォームを送信しています。（URLの変化で確認してください）
実際には例文の通りにCGIファイルを指定し、POSTでフォームを送信します。（GETでも送信はできますが、URLに送信内容が表示されます）--- 応用 ---
確認ダイアログの戻り値を取得して、それに応じた処理に分岐させることができます。
例えば、年齢を尋ねてそれに応じたページに導くことができます。
実例 例文 <SCRIPT language="JavaScript"> <!-- function checkAge() { result = confirm('あなたは１３才以上ですか？'); //確認メッセージに対する答えを取得 if (result) this.location.href = "http://www.yahoo.co.jp/";//OKならこのＨＰを表示 else this.location.href = "http://kids.yahoo.co.jp/";//キャンセルならこのＨＰを表示 } // --> < /SCRIPT>更に新しいウインドウを開いてからページを飛ばすこともできます。
実例 例文 <SCRIPT language="JavaScript"> <!-- function checkAge() { result = confirm('あなたは１３才以上ですか？'); //確認メッセージに対する答えを取得 if (result) wURL = "http://www.yahoo.co.jp/";//OKならこのURLを取得 else wURL = "http://kids.yahoo.co.jp/";//キャンセルならこのURLを取得 newWin = window.open(); //新規ウィンドウを開く newWin.location.href = wURL; //取得したURLを表示 } // --> < /SCRIPT>
--- 実例 ---
--- 例文 ---
<SCRIPT LANGUAGE="JavaScript"> //日付と時間の設定 now = new Date(); year = now.getYear(); if (year < 1900) year += 1900; //FireFox用 mon = now.getMonth()+1; //１を足すこと day = now.getDate(); hour = now.getHours(); min = now.getMinutes(); sec = now.getSeconds();
//日付と時間をまとめる msg = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒"; //画面に表示 document.write(msg); </SCRIPT>--- 解説 ---
New Date でコンピュータから日付と時間を取得し now 変数へ入れ、その後、日付と時間の各変数へ西暦などの数値を取り出しています。
FireFoxでは、yearに1900を加算しないと正しい表示になりません。
次にそれらを文字と組み合わせて１つの文章を作り、これをmsg変数へ入れ、最後にHTMLの文章として表示をしています。
getMonth は0〜11の１つ少ない数値で月を返すため使用するときは+1する必要がある。--- 応用 ---
リアルタイムに時間を更新するようにします。 setTimeOutを使って時間の表示を１秒毎に繰り返します。
スクリプトは必ずフォームの後ろに記述してください。
実例 例文 <FORM NAME="formwatch"> 時計：<INPUT NAME="textwatch" TYPE="text" SIZE="50"></FORM> <SCRIPT LANGUAGE="JavaScript"> watch(); //最初の実行 function watch() { //日付と時間の設定 now = new Date(); year = now.getYear();*1
if (year < 1900) year += 1900; //FireFox用 mon = now.getMonth()+1; //１を足すこと day = now.getDate(); hour = now.getHours(); if (hour< 10) {hour = "0" + hour} //１桁の場合に0を前に付ける min = now.getMinutes(); if (min< 10) {min = "0" + min} //１桁の場合に0を前に付ける sec = now.getSeconds(); if (sec< 10) {sec = "0" + sec} //１桁の場合に0を前に付ける //日付と時間をまとめる msg = year + "年" + mon + "月" + day + "日" + hour + "時" + min + "分" + sec + "秒"; //フォームに表示 formwatch.textwatch.value = msg; //*1 //更新タイマー setTimeout('watch()',1000); //１秒後にwatch()を実行 } </SCRIPT>
フォームとフィールドに事前に名前を付け、そこに関数の中身を表示させます。
valueが表示の内容を示していますので、formwatchという名前のオブジェクトであるフォームの中のtextwatchというフィールドの値（value）を関数msgに置き換えなさいという記述です。曜日を表示したい場合の簡単な例を紹介します。曜日はgetDay()で数値として取得できるので、0なら日曜日、6なら土曜日となります。
実例 例文
you = now.getDay(); //曜日(0〜6=日〜土) //曜日の選択肢
youbi = new Array("日","月","火","水","木","金","土");//日付と時間をまとめる msg = year + "年" + mon + "月" + day + "日 (" + youbi[you] + ")"; //画面に表示 document.write(msg); </SCRIPT>月名を英語にしたい場合には上記の曜日の手順を応用します。以下はフランス語表記です。
このとき、月の数値には１を足さないで、そのまま使うことに注意してください。（配列関数は最初が０番になるため）
実例 例文
you = now.getDay(); //曜日(0〜6=日〜土) //曜日の選択肢
youbi = new Array("日","月","火","水","木","金","土");
//月名の選択肢
lune = new Array("janvier","février","mars","avril","mai","juin","juillet","août","septembre","octobre","novembre","decembre");
//日付と時間をまとめる
msg = youbi[you] +" "+ day + " " + lune[mon] + ", " + year;
//画面に表示 document.write(msg); </SCRIPT>