・タイマーの使用方法
JavaScriptでタイマーを使う場合、setTimeout関数を使用します。
setTimeout(関数名, スリープ時間);
第一引数は、呼び出したい関数名を文字列で指定します。
第二引数は、どのくらい後に呼び出すかをミリ秒で指定します。
以下にタイマーを使用した時計のサンプルを書きます。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function tokei()
{
setTimeout("tokei()",1000);
var kyou=new Date();
jikan=kyou.getHours();
hun=kyou.getMinutes();
byou=kyou.getSeconds();
msg=jikan+":"+hun+":"+byou;
document.all.test.innerText = msg;
}
//--></script>
<body onLoad="javascript:tokei();">
<span id="test"></span>
<br>
</body>
</html>
▲------------------------------------
これは、再帰的に同じ関数を呼び出すことによって、現在時刻を表示します。
setTimeoutの第二引数を1000とすると、1000ミリ秒 = 1秒となり、1秒おきに
時間を更新します。時計の場合は、1秒おきに更新すれば十分ですね。
次に、タイマーを止めたい時などが出てくるかと思います。
その場合は、clearTimeout関数で止めることができます。ただし、clearTimeoutの
引数にタイマーIDを指定する必要がありますので、setTimeout関数の戻り値を取って
おきます。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
var tid;
function tokei() {
tid = setTimeout("tokei()",1000);
var kyou=new Date();
jikan=kyou.getHours();
hun=kyou.getMinutes();
byou=kyou.getSeconds();
msg=jikan+":"+hun+":"+byou;
document.all.test.innerText = msg;
}
function start_tokei() {
}
function stop_tokei() {
clearTimeout(tid);
tid = null;
}
//--></script>
<body onLoad="javascript:tokei();">
<span id="test"></span>
<br>
<input type="button" value="動かす" onClick="start_tokei();">
<input type="button" value="止める" onClick="stop_tokei();">
</body>
</html>
▲------------------------------------
上のようにすると、止めるボタンで時計を止めることができます。
再開するときは、tokei()を直接コールしても良いのですが、すでにタイマーが
動いている場合、二重にタイマーが動いてしまいますので、すでにタイマーが
動いている場合は、何もしないようにします。
setTimeout関数の再帰的な使い方をご紹介しましたが、何秒か後に 1回だけ
動かしたいという場合も、もちろん可能です。
例えば、ページ読み込み後、5秒後に背景の色を変える場合は、以下のように
します。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function change_back() {
document.bgColor="#0000ff";
}
//--></script>
<body onLoad="javascript:setTimeout('change_back()',5000);">
</body>
</html>
▲------------------------------------
onLoadの中にsetTimeout関数を書くことで、一度だけ関数を呼んでいます。
タイマーを使用すれば、他にも、文字をスクロールさせたり、文字や背景の色を
徐々に変えていったりなど、いろいろなことができます。
・サブミットについて
JavaScriptからCGIなどのプログラムに対して、サブミットすると思いますが、
サブミットする時のテクを少しご紹介します。
○サブミットのキャンセル
サブミットする前に、入力チェックを行って、エラーがあれば送信、なければ
アラートを表示して終了したいということがあるかと思います。
しかし、サブミットボタンにしてしまうと、アラートを表示したとしても、OKを
押すと、サブミットされてしまいます。
このような時は、<FORM>タグのonSubmitで、falseをリターンするようにします。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function check_value(f)
{
if (f.nm.value == "")
{
alert("名前を入力してください。");
return false;
}
return true;
}
//--></script>
<body>
<form action="test.cgi" method="post" onSubmit="return
check_value(this);">
名前 <input type="text" name="nm" size="20">
<input type="submit" value="送信">
</form>
</body>
</html>
▲------------------------------------
こうすると、入力がなかった場合、check_value関数からfalseが返ってくるので、
サブミットされません。入力があった場合は、trueを返せばサブミットされます。
○サブミット先の変更
続いて、<FORM>タグの中で、同じデータをサブミットしたいが、送り先のページを
違う場所にしたい時があるかと思います。
そのようなときは、<FORM>のACTIONをJavaScriptで変えることで、サブミット先を
変えることができます。
また、<FORM>のMETHODをJavaScriptでGETかPOSTの変更もできます。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function change_submit()
{
document.f.action = "test2.cgi";
document.f.method = "get";
}
//--></script>
<body>
<form name="f" action="test.cgi" method="post">
名前 <input type="text" name="nm" size="20">
<input type="submit" value="送信">
<input type="submit" value="別のページへ送信" onClick="change_submit();">
</form>
</body>
</html>
▲------------------------------------
document.f.targetでターゲットフレームの指定をすることもできます。
○JavaScriptによるサブミット
次は、サブミットボタンを使用せず、JavaScriptでサブミットする方法をご紹介
します。
JavaScriptの関数で、submit()関数が用意されているので、これを呼ぶだけです。
例えば、<SELECT>タグを選択された時などによく使用します。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function select_submit()
{
}
//--></script>
<body>
<form name="f" action="test.cgi" method="post">
<select name="s1" onChange="select_submit();">
<option value="">選択してください。</option>
<option value="1">カテゴリー１</option>
<option value="2">カテゴリー２</option>
</select>
</form>
</body>
</html>
▲------------------------------------
これでいつでもサブミットできます。
また、reset()関数も用意されているので、リセットボタンを使用せずに
リセットすることもできます。
・フォーム入力チェック
アンケートや問い合わせなどのフォーム送信時に、JavaScriptで入力チェッ
クする方法をご紹介したいと思います。
入力チェックには、必須チェック、文字数チェック、数字チェック、メールアドレス
チェックなどがあります。
さっそく、サンプルを紹介したいと思います。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function check_form(f)
{
var error_message = "";
// 必須チェック
if (f.name.value == "") {
error_message += "名前を入力してください。\n";
}
// 文字数チェック
if (f.name.value.length > 20) {
error_message += "名前は20バイト以内で入力してください。\n";
}
// 数字チェック
if (f.age.value.match(/[^0-9]+/)) {
error_message += "年齢は半角数字のみで入力してください。\n";
}
// 電話番号チェック
if (f.tel.value.match(/[^0-9|-]+/)) {
error_message += "電話番号を正しく入力してください。\n";
}
// メールアドレスチェック
if (!f.email.value.match(/.+\@.+\.+/)) {
error_message += "メールアドレスを正しく入力してください。\n";
}
// エラー判定
if (error_message != "") {
error_message = "入力内容に誤りがあります。以下の内容を確認してください。\n\n" + error_message;
alert(error_message);
return false;
}
return true;
}
//--></script>
<body>
<form name="form1" action="post.cgi" method="post" onSubmit="return
check_form(this);">
氏名 <input type="text" name="name" size="20"><br>
年齢 <input type="text" name="age" size="20"><br>
電話番号 <input type="text" name="tel" size="10"><br>
メールアドレス <input type="text" name="email" size="20"><br>
<input type="submit" name="submit1" value="送信">
</form>
</body>
</html>
▲------------------------------------
<form>タグで、check_formを呼び、自分のフォームオブジェクトを引数で渡して
います。戻り値がfalseの場合は、submitされないようにします。
必須チェックは、テキストボックス内が空文字かどうかを判定するだけですね。
文字数チェックを行う時は、length関数を使用します。
数字のみかのチェックを行うには、match関数で、数字0〜9以外にマッチしているか
を検索します。
電話番号チェックの場合は、数字0〜9と、ハイフンを許可しています。これに文字数
チェックも行っても良いですね。
メールアドレスチェックは、match関数で、「任意の文字@任意の文字.任意の文字」
をチェックしています。
ただし、JavaScriptをオフにしているユーザには、このチェックは通らないので、
注意が必要です。
・画像のコントロール
画像の操作について、いろいろとご紹介したいと思います。
○画像の先読み
マウスオーバー時に画像を変える等の処理がある場合、マウスオーバー用の画像を
先にダウンロードさせておかないと、初回マウスオーバー時に、画像のダウンロード
に時間がかかり、スムーズに画像が切り替わらなくなるという問題が発生します。
そこで、画像を予めダウンロードさせておく必要があります。
ここでは、その方法をご紹介します。
まずは以下のサンプルをご参照ください。
▼サンプル----------------------------
<script language="javascript"><!--
var img1 = new Image();
img1.src = "images/01.gif";
var img2 = new Image();
img2.src = "images/02.gif";
//--></script>
▲------------------------------------
これで、「images」ディレクトリ内の「01.gif」と「02.gif」が予めダウンロード
されます。
あとは、この画像をマウスオーバー時などに画像を変更すれば、スムーズに切り替わ
ると思います。
画像の切り替えについては、次にご紹介します。
○スライドショー
画像をスライドショーのように表示させる方法をご紹介します。
以下のサンプルをご参照ください。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
var timerID = 0;
var iCnt = 0;
var iMax = 99;
function onButton() {
if (timerID) {
clearTimeout(timerID);
timerID = 0;
document.f1.sButton.value = "Play";
}
else {
loadImage();
document.f1.sButton.value = "Stop";
}
}
function loadImage() {
timerID = setTimeout("loadImage()", 5000);
iCnt++;
if (iCnt > 99) iCnt = 0;
var strSrc = "./images/";
if (iCnt < 10) strSrc += "0";
strSrc += iCnt;
strSrc += ".jpg";
document.sImage.src = strSrc;
}
//--></script>
<body>
<img src="./images/01.jpg" name="sImage" alt="" border="0">
<form name="f1">
<input type="button" name="sButton" value="Play" onClick="onButton()">
</form>
</body>
</html>
▲------------------------------------
ここでは、「Play」ボタンを押すとスライドショーを開始し、「Play」ボタンを
「Stop」ボタンに切り替え、「Stop」ボタンを押すとスライドショーが停止します。
ボタンが押されたら、タイマーが作動しているかどうかを判定し、作動していなけれ
ば、タイマーを起動します。タイマーがすでに起動している場合は、タイマーを
ストップします。
タイマーは、5秒ごとですが、setTimeoutの第二引数を変更すれば、間隔を変える
ことができます。
上記サンプルの場合、「00.jpg」〜「99.jpg」までを順番に表示し、100まで
カウントしたら、0に戻ります。
先ほどの、画像先読みと併用すると画像切り替えもスムーズになります。
○ランダム
ページを表示したときに、画像をランダムで表示したい場合の、処理方法をご紹介
します。
以下のサンプルをご参照ください。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function showImage() {
var imgCount = 99;
var imgNumber = Math.floor(Math.random()*imgCount);
var strNumber = "00";
if (imgNumber < 9)
{
strNumber = "0" + (++imgNumber);
}
else
{
}
document.sImage.src = "./images/" + strNumber + ".jpg";
}
//--></script>
<body onLoad="showImage()">
<img src="./images/spacer.gif" name="sImage" alt="" border="0">
</body>
</html>
▲------------------------------------
Mathクラスのrandom関数とfloor関数を使用します。
random関数は、0〜1までの乱数を発生させるので、画像の総数を掛け算して、
floor関数で整数部分のみを取り出して、1を足せば、01〜99の値を取り出す
ことができます。
これで、ページ読み込み時のonLoadで呼べば、画像をランダムに表示させることが
できます。
・JavaScriptでクッキーを扱う
クッキーとは、アクセスしてきたユーザのローカルマシンにテキストデータを保存
できる機能のことを言います。
JavaScriptでクッキーを扱う場合は、document.cookieで受け渡しが可能です。
しかし、決められたフォーマットで記述、取り出しを行わなければなりません。
以下のサンプルを参照してください。
▼サンプル----------------------------
<html>
<head>
<script language="javascript"><!--
function setCookie(key, value, atime) {
var aryDay = new Array("Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat");
var aryMonth = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
var ttime = new Date();
var setValue;
setValue = key + "=" + escape(value) + ";";
setValue += "expires=";
ttime.setTime(ttime.getTime() + atime);
setValue += aryDay[ttime.getDay()] + ", ";
setValue += ttime.getDate() + "-";
setValue += aryMonth[ttime.getMonth()] + "-";
setValue += ttime.getYear() + " ";
setValue += ttime.getHours() + ":";
setValue += ttime.getMinutes() + ":";
setValue += ttime.getSeconds() + ";";
document.cookie = setValue;
}
function getCookie(key) {
}
//--></script>
</head>
<body>
<script language="javascript"><!--
var cnt = getCookie("count");
if (cnt != null) {
document.write(cnt + "回目の訪問ありがとうございます。");
}
else {
}
cnt++;
setCookie("count", cnt, 24*60*60*1000);
//--></script>
</body>
</html>
▲------------------------------------
いろいろな処理をしていますが、これはユーザの訪問回数を表示するJavaScript
です。
setCookieという関数でクッキーに設定し、getCookieという関数でクッキーから
値を取り出すようにしています。
setCookieでは、クッキーのキーとなる文字列と、そこに格納する値と、クッキーの
有効期限を引数で受け取り、クッキー用のフォーマットに合わせるために、文字列を
加工します。
getCookieでは、クッキーのキーとなる文字列を引数で受け取り、setCookieで書き
込んだクッキーの文字列を取り出し、指定したキーの値を取り出し、戻り値で返し
ます。
呼び出し側は、クッキーに設定していれば、何回目の訪問かを表示し、クッキーに
設定されてなければ、初期値を設定し、カウントアップしてクッキーに書き込み
ます。
クッキーに書き込むフォーマットは、
count=1;expires=Mon, 2-Jul-2005 16:38:40;
のような形になります。
(キー)=(値);expires=(有効期限)
です。
有効期限は、日時で指定しますが、フォーマット作成が難しいので、setValueの
第三引数は、現在から何ミリ秒後かを指定するようにしました。
・ブラウザのコントロール
○お気に入りへ追加するボタン
ボタンでなくても可能ですが、ボタンを押したタイミングで、お気に入りにURLを
追加するダイアログを表示する方法をご紹介します。
ただし、IE4.0以上のみ有効ですので、ご注意ください。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function addButton()
{
if (window.external)
{
window.external.AddFavorite('http://www.searchai.jp/','Search A.I.')";
}
}
//--></script>
<body>
<form>
<input type="button" value="お気に入りに追加" onClick="addButton()">
</form>
</body>
</html>
▲------------------------------------
AddFavorite関数を使用します。第一引数にURL、第二引数にタイトルを渡します。
これだけで良いですが、IE以外の場合の処理もあると良いと思います。
また、<BODY>のonLoadでこれをやると、迷惑になってしまう場合があるので、避けた
方が良いでしょう。
○スタートページに追加するボタン
今度はボタン押下時に、スタートページにURLを追加するダイアログを表示する方法
をご紹介します。
ただし、IE5.0以上のみ有効ですので、ご注意ください。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function addButton()
{
if (window.external)
{
f1.b1.style.behavior = "url(#default#homepage)";
f1.b1.setHomePage("http://searchai.jp/");
}
}
//--></script>
<body>
<form name="f1">
<input name="b1" type="button" value="スタートページに追加" onClick="addButton()">
</form>
</body>
</html>
▲------------------------------------
setHomePage関数を使用しますが、上位のオブジェクトが必要ですので、フォームと
ボタンにnameを付けて、これを利用しています。
これだけで良いですが、IE以外の場合の処理もあると良いと思います。
また、<BODY>のonLoadでこれをやると、迷惑になってしまう場合があるので、避けた
方が良いでしょう。
○ページを印刷するボタン
表示しているページを、クライアントのプリンタから印刷するダイアログを表示する
方法をご紹介します。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function printPage()
{
if(document.getElementById || document.layers)
{
}
}
//--></script>
<body>
<form>
<input type="button" value="このページを印刷する" onClick="printPage()">
</form>
</body>
</html>
▲------------------------------------
print関数を呼ぶだけです。IE5.0以降、NN4.2以降で有効です。
・ページジャンプ
○JavaScriptでページジャンプ
JavaScriptでページジャンプするには、以下のようにします。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
location.href = "index2.html";
//--></script>
<body>
</body>
</html>
▲------------------------------------
上記のように書けば、すぐに実行されます。
何秒後かにジャンプしたい場合は、setTimeout関数を使用すればできます。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function pageJump() {
location.href = "index2.html";
}
//--></script>
<body onLoad="setTimeout('pageJump()', 5000);">
5秒後にジャンプします。。。
</body>
</html>
▲------------------------------------
○HTMLだけでページジャンプ
JavaScriptを使用せずに、HTMLの記述だけでページジャンプする方法があります。
▼サンプル----------------------------
<html>
<head>
<meta http-equiv="refresh" content="0;url=index2.html">
</head>
</html>
▲------------------------------------
上記のように、<head>〜</head>の間に、<meta>タグを記述し、http-equivにrefresh
を指定すると、更新されます。
また、contentの値の0は0秒後にジャンプすることを意味し、url=はジャンプ先の
URLとなります。
何秒後かにジャンプさせる場合は、
▼サンプル----------------------------
<html>
<head>
<meta http-equiv="refresh" content="5;url=index2.html">
</head>
<body>
5秒後にジャンプします。。。
</body>
</html>
▲------------------------------------
とcontentの秒数を変えるだけです。
よく簡易チャットなどで自動的にページを更新しているのは、60秒くらいで
同じファイルを読み込むようにしているのが多いようです。(当然、裏でサーバ
プログラムが動いていなくてはなりませんが・・)
○時間によって、表示するページを振り分ける
JavaScriptのページジャンプを応用すれば、ユーザがアクセスした時間帯によって、
表示するページを分けたり、ランダムに違うページを表示させることもできます。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function pageJump() {
var t = new Date();
if (t.getHours() < 6) {
location.href = "index1.html";
}
else if (6 <= t.getHours() && t.getHours() < 12) {
location.href = "index2.html";
}
else if (12 <= t.getHours() && t.getHours() < 18) {
location.href = "index3.html";
}
else if (18 <= t.getHours()) {
location.href = "index4.html";
}
}
//--></script>
<body onLoad="pageJump()">
</body>
</html>
▲------------------------------------
上記は、接続した時間帯によってページを切り分ける処理です。
他にも、ブラウザを判定してページを分ける処理や、クッキーを使用して
ページを分ける処理などが考えられますね。
・オブジェクトの配列について
フォームやオブジェクトの配列について、少しご説明いたします。
○フォーム配列について
フォームやオブジェクトなどは、配列で扱うことができます。例えば、
▼サンプル----------------------------
<html>
<body>
<form name="f1">
<input type="text" name="n1" value="TEST">
</form>
<form name="f2">
<input type="text" name="n2" value="TEST">
</form>
</body>
</html>
▲------------------------------------
というフォームがあるとき、
document.f1
は
document.forms[0]
でも取得できます。同様に、
document.f2
は
document.forms[1]
で扱えます。つまり、ページの上から<form>タグの出現する順番に[0]から配列に
格納されていきます。
無理に<form>にnameを付けなくても配列で扱えるわけです。
しかし、複雑なページになってくると、<form>タグの前にもう一つ<form>を追加
したりすると、JavaScriptの修正が面倒なので、基本的にはnameで扱った方が良い
と言えます。
しかし、フォームの名前で検索する場合などは、forms[]で探すことができます
ので、場合によって使い分けましょう。
○エレメント配列について
フォームの要素である、テキストボックスやチェックボックスなどは、elements
という配列で取得できます。
▼サンプル----------------------------
<html>
<body>
<form name="f1">
<input type="text" name="t1" value="TEST">
<input type="checkbox" name="c1" value="1">チェック
</form>
</body>
</html>
▲------------------------------------
上記のようなフォームがあるとき、
document.f1.t1
は
document.f1.elements[0]
で取得できます。同様に
document.f1.c1
は
document.f1.elements[1]
となります。<form>〜</form>の中のオブジェクトに[0]から順番に取得できます。
これも名前で検索する場合などに使用しましょう。
○オプション配列について
さらに、<select>タグので複数のエレメントがある場合、optionsという配列で
取得することができます。
▼サンプル----------------------------
<html>
<body>
<form name="f1">
<select name="s1">
<option value="1">オプション1</option>
<option value="2">オプション2</option>
</select>
</form>
</body>
</html>
▲------------------------------------
上記のようなフォームがある場合、
document.f1.s1.options[0]
document.f1.s1.options[1]
でそれぞれのエレメントを扱うことができます。
・オブジェクト取得方法
JavaScriptでフォームなどのオブジェクトを検索、取得する方法をご紹介
します。
○オブジェクト名からオブジェクトを取得する
オブジェクト名から、オブジェクトを取得することができます。以下のサンプルの
ようにします。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function get_obj(id_name) {
id = document.getElementById(id_name);
alert(id.value);
}
//--></script>
<body>
<form name="f1">
<input type="text" name="n1" value="TEST">
<input type="button" value="オブジェクト取得" onClick="get_obj('n1');">
</form>
</body>
</html>
▲------------------------------------
上記のように、getElementByIdで、オブジェクトそのものが取得できます。
これはIEでもNNでも動作します。
○オブジェクト名の一部から検索
オブジェクト名の文字列の一部から検索する場合は、以下のようにします。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function get_obj() {
for (i = 0; i < document.f1.elements.length; i++) {
if (document.f1.elements[i].name.substring(0,3) == 'chk') {
if (document.f1.elements[i].checked) {
alert(document.f1.elements[i].value);
}
}
}
}
//--></script>
<body>
<form name="f1">
<input type="checkbox" name="chk1" value="TEST1">TEST1<br>
<input type="checkbox" name="chk2" value="TEST2">TEST2<br>
<input type="checkbox" name="chk3" value="TEST3">TEST3<br>
<input type="checkbox" name="chk4" value="TEST4">TEST4<br>
<input type="checkbox" name="chk5" value="TEST5">TEST5<br>
<input type="button" value="オブジェクト取得" onClick="get_obj();">
</form>
</body>
</html>
▲------------------------------------
フォーム内のオブジェクトを順に検索し、substring関数で文字列を探しています。
文字の位置が決まっていない場合は、substringの代わりに、indexOfを使用します。
・全てのチェックボックスにチェックを付ける
JavaScriptを使用して、チェックボックスに全てチェックを付けたり、はずしたり
するボタンを付けたいときがあるかと思います。
ここでは、そのサンプルをご紹介します。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function check_all() {
for (i = 0; i < document.f1.elements.length; i++) {
if (document.f1.elements[i].name.substring(0,3) == 'chk') {
document.f1.elements[i].checked = true;
}
}
}
function release_all() {
for (i = 0; i < document.f1.elements.length; i++) {
if (document.f1.elements[i].name.substring(0,3) == 'chk') {
document.f1.elements[i].checked = false;
}
}
}
//--></script>
<body>
<form name="f1">
<input type="checkbox" name="chk1" value="TEST1">TEST1<br>
<input type="checkbox" name="chk2" value="TEST2">TEST2<br>
<input type="checkbox" name="chk3" value="TEST3">TEST3<br>
<input type="checkbox" name="chk4" value="TEST4">TEST4<br>
<input type="checkbox" name="chk5" value="TEST5">TEST5<br>
<input type="button" value="全てチェック" onClick="check_all();"><br>
<input type="button" value="全てはずす" onClick="release_all();">
</form>
</body>
</html>
▲------------------------------------
CGIなどの関係によって、複数のチェックボックスを一まとめにしている場合は、
以下のようにすれば良いです。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
function check_all() {
for (i = 0; i < document.f1.elements.length; i++) {
if (document.f1.elements[i].name == 'chk[]') {
document.f1.elements[i].checked = true;
}
}
}
function release_all() {
for (i = 0; i < document.f1.elements.length; i++) {
if (document.f1.elements[i].name == 'chk[]') {
document.f1.elements[i].checked = false;
}
}
}
//--></script>
<body>
<form name="f1">
<input type="checkbox" name="chk[]" value="TEST1">TEST1<br>
<input type="checkbox" name="chk[]" value="TEST2">TEST2<br>
<input type="checkbox" name="chk[]" value="TEST3">TEST3<br>
<input type="checkbox" name="chk[]" value="TEST4">TEST4<br>
<input type="checkbox" name="chk[]" value="TEST5">TEST5<br>
<input type="button" value="全てチェック" onClick="check_all();"><br>
<input type="button" value="全てはずす" onClick="release_all();">
</form>
</body>
</html>
▲------------------------------------
この方法は、フォーム内のnameで検索しているので、同じフォームないに他の
エレメントがあっても問題ありません。
ただし、substringやindexOfで文字列を検索する場合は、条件に合ってしまうと、
if文の中に入ってしまいますので、注意しましょう。
・複数のリストボックスの入れ替え
少し複雑ですが、2つのリストボックスの中身から、オプションを入れ替える方法を
ご紹介します。
▼サンプル----------------------------
<html>
<script language="javascript"><!--
//オプション要素入れ替え
function change_option(str1, str2) {
obj1 = document.getElementById(str1);
obj2 = document.getElementById(str2);
//入れ替え先の位置取得
var f2 = 0;
for (i = 0; i < obj2.length; i++) {
if (obj2.options[i].value == "") {
}
}
//入れ替え
cnt = 0;
for (i = 0; i < obj1.length; i++) {
if (obj1.options[i].selected) {
if (obj1.options[i].value == "") {
obj1.options[i].selected = false;
continue;
}
obj2.options[f2 + cnt].value = obj1.options[i].value;
obj2.options[f2 + cnt].text = obj1.options[i].text;
obj1.options[i].value = "";
obj1.options[i].text = "";
obj1.options[i].selected = false;
cnt++;
}
}
//空白を詰める
for (i = 0; i < obj1.length; i++) {
if (obj1.options[i].value == "") {
for (j = i + 1; j < obj1.length; j++) {
if (obj1.options[j].value) {
obj1.options[i].value = obj1.options[j].value;
obj1.options[i].text = obj1.options[j].text;
obj1.options[j].value = "";
obj1.options[j].text = "";
break;
}
}
}
}
}
//全入れ替え
function change_all(str1, str2) {
}
//--></script>
<body>
<form name="f1">
<select name="s1[]" style="width=100;" size="8" multiple>
<option value="o1">オプション1</option>
<option value="o2">オプション2</option>
<option value="o3">オプション3</option>
<option value="o4">オプション4</option>
<option value="o5">オプション5</option>
</select>
<input type="button" value="全移動" onClick="change_all('s2[]',
's1[]');">
<br>
<input type="button" value=" ↓ " onClick="change_option('s1[]',
's2[]');">
<input type="button" value=" ↑ " onClick="change_option('s2[]',
's1[]');">
<br>
<select name="s2[]" style="width=100;" size="8" multiple>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<input type="button" value="全移動" onClick="change_all('s1[]',
's2[]');">
</form>
</body>
</html>
▲------------------------------------
<select>タグのnameを"s1[]"のように配列にしていますが、CGIなどで必要なければ
"[]"をはずしても構いません。
getElementByIdでオブジェクトを取得し、選択されているオプションを検索します。
選択されているものを別のリストと入れ替え、さらに空白を詰めるという処理に
なります。
全移動の場合は、リストボックス内を全て選択してから、change_optionを呼べば
OKです。
あまり使う機会はないかもしれませんが、何かの参考になればと思います。
・親ウィンドウの操作
別ウィンドウを開いた時に、別ウィンドウから親ウィンドウを操作する方法
をご紹介します。
別ウィンドウで開いた後、そのウィンドウ内で親ウィンドウの操作をすることができ
ます。
以下のサンプルを参照してください。
▼HTMLサンプル(/index.html)-----------
<html>
<script language="javascript"><!--
function openWindow() {
window.open("index2.html","Window","width=400,height=150");
}
function printTest() {
document.form1.text1.value = "TEST";
}
//--></script>
<body>
<form name="form1">
<input type="text" name="text1" size="20"><br>
<input type="button" value="Window Open" onClick="openWindow();">
</form>
</body>
</html>
▲------------------------------------
これは親ウィンドウです。子ウィンドウを呼ぶ部分を書いています。
次に子ウィンドウです。
▼HTMLサンプル(/index2.html)----------
<html>
<script language="javascript"><!--
function printText() {
window.opener.document.form1.text1.value = document.form1.text1.value;
}
function printTest() {
window.opener.printTest();
}
//--></script>
<body>
<form name="form1">
<input type="text" name="text1" size="20"><br>
<input type="button" value="CLICK" onClick="printText();"><br>
<input type="button" value="TEST" onClick="printTest();"><br>
</form>
</body>
</html>
▲------------------------------------
CLICKボタンを押すと、親ウィンドウに、子ウィンドウのテキストに書いた値が反映
されます。
TESTボタンは、親ウィンドウのprintTest関数を呼んでいます。
このように、window.openerで親ウィンドウのフォームや変数、関数などを直接操作
することができます。
・子ウィンドウの操作
別ウィンドウを開いた時の、別ウィンドウの操作をご紹介します。
以下のサンプルを参照してください。
▼HTMLサンプル(/index.html)-----------
<html>
<script language="javascript"><!--
var windowID;
function openWindow() {
windowID = window.open("index2.html","Window","width=400,height=150");
}
function printText() {
windowID.document.form1.text1.value = document.form1.text1.value;
}
function printTest() {
}
function closeWindow() {
}
//--></script>
<body>
<form name="form1">
<input type="text" name="text1" size="20"><br>
<input type="button" value="Window Open" onClick="openWindow();"><br>
<input type="button" value="PRINT" onClick="printText();"><br>
<input type="button" value="TEST" onClick="printTest();"><br>
<input type="button" value="CLOSE" onClick="closeWindow();">
</form>
</body>
</html>
▲------------------------------------
これは親ウィンドウです。子ウィンドウを呼ぶ部分を書いています。
次に子ウィンドウです。
▼HTMLサンプル(/index2.html)----------
<html>
<script language="javascript"><!--
function printTest() {
document.form1.text1.value = "TEST";
}
//--></script>
<body>
<form name="form1">
<input type="text" name="text1" size="20"><br>
</form>
</body>
</html>
▲------------------------------------
親ウィンドウのPRINTをクリックすると、親ウィンドウのテキストが子ウィンドウの
テキストボックスに表示され、TESTをクリックすると、子ウィンドウに"TEST"が
表示されます。CLOSEは子ウィンドウをクローズします。
window.open時に戻り値を保存しておき、これに対して操作することで子ウィンドウ
のフォームや変数、関数を操作することができます。
・別フレームの操作
別フレームの操作をご紹介します。
まずは、以下のサンプルを参照してください。
▼HTMLサンプル(/index.html)-----------
<html>
<frameset cols="50%,*">
<frame name="frame1" src="frame1.html">
<frame name="frame2" src="frame2.html">
</frameset>
</html>
▲------------------------------------
これはトップのフレームです。2つのフレームを呼ぶ部分を書いています。
次に中身の2つのフレームです。
▼HTMLサンプル(/frame1.html)----------
<html>
<script language="javascript"><!--
function printText() {
top.frame2.document.form1.text1.value = document.form1.text1.value;
}
function printTest() {
top.frame2.document.form1.text1.value = "TEST";
}
function callTest() {
}
//--></script>
<body>
<form name="form1">
<input type="text" name="text1" size="20"><br>
<input type="button" value="PRINT" onClick="printText()"><br>
<input type="button" value="TEST" onClick="printTest()"><br>
<input type="button" value="CALL" onClick="callTest()"><br>
</form>
</body>
</html>
▲------------------------------------
▼HTMLサンプル(/frame2.html)----------
<html>
<script language="javascript"><!--
function callTest() {
document.form1.text1.value = "CALL";
}
//--></script>
<body>
<form name="form1">
<input type="text" name="text1" size="20"><br>
</form>
</body>
</html>
▲------------------------------------
左側のフレームのPRINTをクリックすると、左側に入力したテキストが、右側の
フレームのテキストに表示され、TESTをクリックすると、右側に"TEST"が表示され
ます。CALLをクリックすると、右側のフレームの関数を呼び出しています。
このように、topオブジェクトから、フレーム名のオブジェクトを直接操作する
ことができます。
フレームの階層が何重にもなっている場合、topオブジェクトは、トップのフレーム
からとなりますが、一階層上のフレームを指定する場合は、parentオブジェクトを
使用します。
また、
top.frame2.document.form1.text1.value
の部分を、配列で
top.frames[1].document.form1.text1.value
と書くこともできますので、用途に合わせて使い分けてください。配列の添え字は、
上から順番に0からになります。
・GETリクエストの取得
JavaScriptでGETのデータを取得することはできますが、少し処理を書かなければなり
ません。
今回は、GETリクエストの取得関数をご紹介します。
▼サンプル----------------------------
function get_param() {
var res = new Array();
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i = 0; i < parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0) {
var key = parms[i].substring(0, pos);
var val = parms[i].substring(pos + 1);
res[key] = val;
}
}
return res;
}
var query = get_param();
document.write(query['test']);
▲------------------------------------
get_param関数でGETパラメータを取得し、配列に格納した変数を返します。
配列はハッシュ配列となっていますので、パラメータ名をキーとして値を取り出す
ことができます。
上記のサンプルは、testというパラメータを取得して表示しています。
・JavaScriptメモ
JavaScriptで知っておくと便利なメモ的サンプルをいくつかご紹介します。
ご紹介するサンプルは以下のものです。
・数値変換処理
・文字列変換処理
・お気に入りダイアログ表示
・印刷ダイアログ表示
・確認ダイアログ表示
・別ウィンドウの表示
・ページジャンプする
・ブラウザの戻る
・<a>タグのリンクジャンプを無効化する
・現在の日付を表示
・現在時刻を取得
▼サンプル----------------------------
//文字列を整数に変換
num = parseInt("999");
//整数を文字列に変換
alert(1 + num.toString());
//ブラウザのお気に入り登録関数
//引数 : タイトル、URL
function addBookmark(title,url) {
if (window.sidebar) {
window.sidebar.addPanel(title, url,"");
} else if( document.all ) {
window.external.AddFavorite( url, title);
} else if( window.opera && window.print ) {
return true;
}
}
//お気に入りダイアログ表示
addBookmark('テスト', 'http://www.searchai.jp/');
//印刷ダイアログを表示
window.print();
//確認ダイアログ表示
res = confirm("Question?");
//結果をアラートで表示
alert(res);
//別ウィンドウの表示
window.open("http://www.searchai.jp/","");
//ページジャンプする
location.href = 'http://www.searchai.jp/';
//ブラウザの戻る
history.back();
//<a>タグのリンクジャンプを無効化
<a href="javascript:void(0);" onClick="">TEST</a>
//現在の日付を表示
myDate = new Date();
y = myDate.getFullYear() + "年";
m = myDate.getMonth() + 1 + "月";
d = myDate.getDate() + "日";
d2 = myDate.getDay();
weekday = new Array(7);
weekday[0]="日";
weekday[1]="月";
weekday[2]="火";
weekday[3]="水";
weekday[4]="木";
weekday[5]="金";
weekday[6]="土";
document.write(y + m + d + "（" + weekday[d2] + "）");
//現在時刻を取得
function getCurrentTime() {
myDate = new Date();
h = myDate.getHours();
min = myDate.getMinutes();
s = myDate.getSeconds();
if (h < 10) {h = "0" + h}
if (min < 10) {min = "0" + min}
if (s < 10) {s = "0" + s}
return h + ":" + min + ":" + s;
}
//現在時刻を表示
document.write(getCurrentTime());
▲------------------------------------
・クライアントPCの情報を取得方法
クライアントPCの情報をJavaScriptで取得する方法をご紹介します。
何でも取得できる訳ではありませんが、OS、ブラウザの種類とバージョン、画面サイ
ズや色数などは取得可能です。
では、サンプルをご紹介します。
▼サンプル----------------------------
//ブラウザエンジンのコードネーム
document.write("navigator.appCodeName : " + navigator.appCodeName + "<br />");
//ブラウザエンジンの名称
document.write("navigator.appName : " + navigator.appName + "<br />");
//ブラウザエンジンのバージョン
document.write("navigator.appVersion : " + navigator.appVersion + "<br />");
//ブラウザの情報
document.write("navigator.userAgent : " + navigator.userAgent + "<br />");
//ブラウザエンジンの言語
document.write("navigator.language : " + navigator.language + "<br />");
//プラットフォーム
document.write("navigator.platform : " + navigator.platform + "<br />");
//このページに来る前のURL
document.write("document.referrer : " + document.referrer + "<br />");
//モニター表示領域の横幅
document.write("screen.width : " + screen.width + "<br />");
//モニター表示領域の高さ
document.write("screen.height : " + screen.height + "<br />");
//画面の色数(ビット)
document.write("screen.colorDepth : " + screen.colorDepth + "<br />");
▲------------------------------------
ただし、ブラウザよっては、正しい値が返ってこなかったり、何も返さない場合が
あるので、注意してください。
また、OSやブラウザの情報を得るには、navigator.userAgentを解析する方法が最も
有効です。
document.referrerは、ブラウザの設定でオフにしているユーザーは、取得できない
ので、ご注意ください。
|
![]無料フォームメール送信サービス](/image/form.gif){kind=small}
