メッセージを表示する

　簡単に役立つ JavaScript の使い方を紹介します。
　HTML と組み合わせてメッセージを扱う機能を紹介します。

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

戻る

  1. アラートの表示

    --- 実例 ---

    --- 例文 --- 

    <FORM><INPUT TYPE=button VALUE="ご挨拶" onClick="alt()"></FORM>

<SCRIPT LANGUAGE="JavaScript">
function alt() {
	alert("ようこそJavaScriptのページへ！\nこのサンプルは初心者でも簡単にJavaScriptが使えるように応援しています。");
}
</SCRIPT>

    --- 解説 ---

    　ボタンを押すと alt() というファンクション（プログラム）を呼び出すようになっています。
    　alert(文字列) と用意するだけで、簡単にダイアログを表示させることが出来ます。
    　文字列の中で改行をするときは「\n」を使用します。

    --- 応用 ---

    　alert の次の行に 前項の document.location の行を追加すれば、ダイアログを閉じた後、ページを切り替えることが出来るようになります。

    --- 応用 ---

    　alertを使った場合、スクリプトの動作が一時的に停止します。同じようにダイアログを表示して選択肢を表示する関数にcomfirmがあります。これは「フォームの送信前に確認する」で解説します。

    　スクリプトの動作を止めずに、画面に表示する方法もいくつかありますので、それらを簡単に紹介しておきます。別ウィンドウやフレームへの表示は別の項目で解説しています。

    例文 
    <form name="form_name"><input name="field_name" type="text"></form>
<span id="id_name"></span>

<script language="javascript">
    //その位置に表示：<script>の位置に出力
document.write("例文１");
//ウィンドウタイトルに表示
document.title = "例文２";
//ウィンドウステータスに表示：ブラウザの設定で制限している場合は不可
    window.status = "例文３";
//フォームに表示：<form>と<input>を使用
document.form_name.field_name.value = "例文４";
//HTML内に組み込んで表示：<div>または<span>を使用
document.getElementById("id_name").innerHTML = "例文５";
</script>

  2. リンク先の説明をウインドウステータスに表示

    【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;"
    　この部分は、マウスを外した時のメッセージを指定する部分で、この例では、空のメッセージ（シングルクオート「'」で囲った部分）を表示するという方法で、先に表示されたメッセージを消すことができます。
    　この部分を省略すれば、一度表示されたメッセージを表示されたままにすることができます。

  3. リンク先の説明をフォームに表示

    基本的な文字列の呼び出し方法

    --- 実例 ---

    トップへ／インデックスへ

    --- 例文 ---

    <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）

  4. メッセージをランダムに表示

    同じ確率で表示

    --- 実例 ---

    --- 例文 ---

    <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の場合、すべての条件に当てはまって行きますが、最終的には「大凶」となります。
    結果として、条件文を並べることで、条件を絞って行くことになり、それぞれに乱数を取る範囲ができあがり、これによって各条件の確率が異なる結果になっています。

  5. フォームの送信前に確認する

    --- 実例 ---

    掲示板の書込にこのようなフォームの送信が使われています。通常は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>

  6. メールを出す

    --- 実例 ---

    --- 例文 ---

    <SCRIPT LANGUAGE="JavaScript">
    acount = "user"; //アカウント
    domain = "domain.sample"; //ドメイン
    ma = acount + "@" + domain;
    document.write("<a href='javascript:sendmail()'>"+ma+"</a>"); //メールアドレス表示

    function sendmail() {
    this.location.href = "mailto:" + ma; //メールソフト起動
    }
    </SCRIPT>

    --- 解説 ---

    スクリプトを使って表示することで、メールアドレスを収集するクロウラーにメールアドレスを読み取られる危険性を減らしています。
    メールソフトを起動するリンクもスクリプトで処理しています。

    --- 応用 ---

    メールアドレスだけでなく、メールの表題や本文も指定することができます。

    mailtoのリンク設定はこちらを参照してください。

  7. 時間を計る（カウントを取る）

    --- 実例 ---

    --- 例文 ---

    <form name="form_count"><input name="counter" type="text" size="10"></form>

    <SCRIPT Language="JavaScript">
    <!--
    count = 0; //カウントの初期値
    timerID = setInterval('countup()',1000); //1秒毎にcountup()を呼び出し

    function countup() {
    count++;
    document.form_count.counter.value = count;
    }
    -->
    </SCRIPT>

    --- 解説 ---

    変数countを0に設定し、1秒毎にこれに１を足すことでカウントを増やして表示します。
    seIntervalは指定の時間（1/1000秒単位）毎に指定したユーザー関数を呼び出します。

    --- 応用 ---

    カウントダウンと、カウントの開始と停止をボタンで制御することができます。
    カウントの初期値はフォームから取っていますので、数値を変更することができます。
    開始ボタンを押すとカウントダウンが始まりますが、その際に開始ボタンを使用できないようにしています。これは、開始ボタンを何度も押してしまうと、二重三重にカウントダウンタイマーが起動してしまうので、これを防ぐためです。
    そのため、停止ボタンを押したときには、タイマーの停止と、開始ボタンの使用不可解除を行っています。

    ユーザー関数countdown内では、フォームに入力された数値（文字列扱い）をeval関数を使って数値化してから１を引いています。eval関数を省いてしまうと、全て文字列として扱われてしまいます。
    次のif文でカウントを０で止めています。

    実例
    例文 
    <form name="form_countdown">
    <input name="counter" type="text" value="60" size="10">
    <input name="start" type="button" value="開始" onClick="countstart()">
    <input name="stop" type="button" value="停止" onClick="countstop()">
    </form>

    <SCRIPT Language="JavaScript">
    <!--
    function countstart() {
    timerID = setInterval('countdown()',1000);
    document.form_countdown.start.disabled = true;
    }

    function countstop() {
    clearInterval(timerID);
    document.form_countdown.start.disabled = false;
    }

    function countdown() {
    count = eval(document.form_countdown.counter.value) - 1;
    if (count > -1) {document.form_countdown.counter.value = count;}
    }
    -->
    </SCRIPT>

  8. 現在の日時を表示する

    --- 実例 ---

    --- 例文 --- 

    <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で表されます。そのため何月と表示させたいときには、１を足す必要があります。

    　ちなみに、曜日も0〜6の数値で表され、0が日曜日になります。（getDay）

    --- 応用 ---

    　リアルタイムに時間を更新するようにします。 setIntervalを使って時間の表示を0.5秒毎に繰り返します。1秒ごとに繰り返しても良いのですが、誤差が生じたときに1秒の差で表示されるため、誤差の表示を0.5秒縮めるためです。
    　スクリプトは必ずフォームの後ろに記述してください。

    実例
    時計：
    例文 
    <FORM NAME="formwatch">
時計：<INPUT NAME="textwatch" TYPE="text" SIZE="50"></FORM>
<SCRIPT LANGUAGE="JavaScript">
timerID = setInterval('watch()',500); //0.5秒毎にwatch()を実行

    function watch() {
  //日付と時間の設定
  now = new Date();
  year = now.getYear();
  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
    }
</SCRIPT>

    *1
    　フォームとフィールドに事前に名前を付け、そこに関数の中身を表示させます。
    　valueが表示の内容を示していますので、formwatchという名前のオブジェクトであるフォームの中のtextwatchというフィールドの値（value）を関数msgに置き換えなさいという記述です。

    曜日を表示したい場合の簡単な例を紹介します。曜日はgetDay()で数値として取得できるので、0なら日曜日、6なら土曜日となります。

    実例
    例文 
    <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();
    you = now.getDay(); //曜日(0〜6=日〜土)

//曜日の選択肢
youbi = new Array("日","月","火","水","木","金","土");

//日付と時間をまとめる
msg = year + "年" + mon + "月" + day + "日 (" + youbi[you] + ")"; 

//画面に表示
document.write(msg);
</SCRIPT>

    月名を英語にしたい場合には上記の曜日の手順を応用します。以下はフランス語表記です。
    このとき、月の数値には１を足さないで、そのまま使うことに注意してください。（配列関数は最初が０番になるため）

    実例
    例文 
    <SCRIPT LANGUAGE="JavaScript">
//日付と時間の設定
now = new Date();
year = now.getYear();
if (year < 1900) year += 1900; //FireFox用
mon = now.getMonth(); //１を足さないこと
day = now.getDate();
hour = now.getHours();
you = now.getDay(); //曜日(0〜6=日〜土)

//曜日の選択肢
youbi = new Array("dimanche","lundi","mardi","mercredi","jeudi","vendredi","samdi");
//月名の選択肢
lune = new Array("janvier","f&#233;vrier","mars","avril","mai","juin","juillet","ao&#251;t","septembre","octobre","novembre","d&#233;cembre");

    //日付と時間をまとめる
    msg = youbi[you] +" "+ day + " " + lune[mon] + ", " + year;
//画面に表示
document.write(msg);
</SCRIPT>

  9. 「戻る」ボタンの表示・非表示

    --- 実例 ---

    --- 例文 --- 

    <script language="JavaScript">
//前ページ
var ref = document.referrer;
if (ref != "") {
  var n = ref.indexOf("//")+2;
  var m = ref.indexOf("/",n+1);
  if (m == -1) {m = ref.length;}
  //ドメイン名を抜き出す
  if (n > -1) {ref = ref.substring(n,m);}
}
//ドメイン名が同じ場合
if (document.domain == ref) {
  document.write("<a href='javascript:history.back()'>戻る</a>");
} else {
  document.write("<a href='javascript:this.close()'>閉じる</a>");
}
</script>

    --- 解説 ---

    リンク元と設置ページのドメイン名を比較して、同じサイトからページを開いた場合は「戻る」と表示し、そうでない場合は「閉じる」と表示します。
    自己サイト内でのリンクと、外部からの直接リンクを区別しているということになります。

    「閉じる」の代わりに自己サイトへのリンクを置くことで、直接リンクで来た来訪者を自己サイトに取り込むことが出来ます。

    JavaScriptを使ってリンク先に飛んだ場合、document.referrerにはリンク元が表示されません。また、ブックマークから開いた場合も同様です。

戻る