![]無料フォームメール送信サービス](/image/form.gif)
|
|
・ブラウザを判別する
ブラウザをIEかNNかを判別するためには、以下のようにします。
例：
<script language=JavaScript><//--
if (navigator.appName.indexOf( "Netscape" ) < 0)
{
//IEの場合の処理
document.write("あなたが使用しているブラウザはInternet Explorerですね？");
}
else
{
//NNの場合の処理
document.write("あなたが使用しているブラウザはNetscape Navigatorですね？");
}
//--></script>
出力結果：
・時計を表示する
時計を表示させるために、
<body onLoad=tokei()>
<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.write(msg);
}
//--></script>
として、関数内でdocument.writeを使うと、この関数が呼ばれるたびにページが更新され、時計以外は消えてしまいます。かと言って、テキストボックスに表示させるのもあまりスマートではありません。そこで、<span>タグを用いて、時計を通常のHTML文に表示する例を記述します。ただし、NNでは表示できません。
例：
<body onLoad=tokei()>
<script language=JavaScript><//--
function tokei()
{
if (navigator.appName.indexOf( "Netscape" ) < 0)
{
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>
<span id=test></span>
出力結果：
・流れる文字を表示する
テキストボックスに流れる文字を表示する例です。
例：
<script language=JavaScript><!--
var str = "JavaScript Test ";
function scrollString()
{
document.scrollForm.scrollText.value = str;
str = str.substring(2,str.length)+str.substring(0,2);
setTimeout("scrollString()", 500);
}
//---></script>
<form name="scrollForm">
<input type=text size=20 name="scrollText">
</form>
出力結果：
・ステータスバーに文字列を表示する
ステータスバーに文字列を表示するには以下のようにします。
例：
<script language=JavaScript><!--
window.status = "JavaScript Test";
//--></script>
出力結果：
このページのステータスバーに表示されます。
・JavaScriptの二次元配列
JavaScriptでは二次元配列は扱えませんが、以下のように一次元配列に対して、一次元配列を作成すれば、仮想的に二次元配列にすることができます。
例：
<script language=JavaScript><!--
var test = new Array();
for (i = 0; i < 3; i++)
{
test[i] = new Array();
for (j = 0; j < 3; j++)
{
test[i][j] = i + ":" + j;
}
}
for (i = 0; i < 3; i++)
{
for (j = 0; j < 3; j++)
{
document.write(test[i][j]);
if (j != 2)
}
document.write("<br>");
}
//--></script>
出力結果：
・サブミットを中断する
サブミットボタンを押した後に、処理によって、サーバへのデータの送信を中断したい場合があると思います。その場合は、<form>タグのonSubmitでfalseを返すようにすると、送信を中断します。
例：
<form action=test.cgi method=POST onSubmit="return test()">
<input type=submit value=SUBMIT>
</form>
<script language=JavaScript><!--
//--></script>
・複数のサブミットボタンで処理を分ける
サブミットボタンが複数あって、送信先を変えたり、ターゲットフレームを変えたりしたい場合は、以下のようにします。
例：
<form name=form1>
<input type=submit value=SUBMIT1 onClick=test1()>
<input type=submit value=SUBMIT2 onClick=test2()>
</form>
<script language=JavaScript><!--
function test1()
{
form1.action="http://www05.u-page.so-net.ne.jp/sa2/juntaka/test1.cgi";
form1.target="Frame1";
}
function test2()
{
form1.action="http://www05.u-page.so-net.ne.jp/sa2/juntaka/test2.cgi";
form1.target="Frame2";
}
//--></script>
・非表示のフィールド引数
サーバにデータを送信するときに、表示されていないデータも送信したいときがあると思います。このような場合は、HIDDENのフィールドを使います。
例：
<form name=form1 action=test method=POST>
<input type=hidden value=TEST>
<input type=submit value=SUBMIT>
</form>
・リストボックスの選択１
JavaScriptからリストボックスを選択する方法を記述します。
例：
<body onLoad=test()>
<form name=form1>
<select name=select1>
<option>TEST1
<option>TEST2
<option>TEST3
</select>
</form>
<script language=JavaScript><!--
function test()
{
document.form1.select1[2].selected = true;
}
//--></script>
出力結果：
・リストボックスの選択２
JavaScriptからリストボックスを選択する別の方法を記述します。
例：
<body onLoad=test()>
<form name=form1>
<select name=select1>
<option value=1>TEST1
<option value=2>TEST2
<option value=3>TEST3
</select>
</form>
<script language=JavaScript><!--
function test()
{
for (i = 0;i < document.form1.select1.length; i++) {
if(document.form1.select1[i].value == "2") {
document.form1.select1.selectedIndex = i;
break;
}
}
}
//--></script>
出力結果：
・リストボックスの値の変更
リストボックスの値を変更するには、valueではなく、textを変更します。
例：
<body onLoad=test()>
<form name=form1>
<select name=select1>
<option>TEST1
<option>TEST2
<option>TEST3
</select>
</form>
<script language=JavaScript><!--
function test()
{
document.form1.select1[0].text = "CHANGE";
}
//--></script>
出力結果：
・リストボックスのサイズ
リストボックスのサイズを指定しても有効にはなりませんが、リストボックスが空のときにサイズが0になってしまうときは、全角スペースを入れることでサイズを維持することができます。
例：
<body onLoad=test()>
<form name=form1>
<select name=select1>
</select>
</form>
<script language=JavaScript><!--
function test()
{
if(document.form1.select1.length==0)
{
document.form1.select1.length = 1;
document.form1.select1[0].text=" ";
}
}
//--></script>
出力結果：
・チェックボックスの選択
JavaScriptでチェックボックスを選択状態にするには、以下のようにします。
例：
<body onLoad=test()>
<form name=form1>
<input type=checkbox name=check1>テスト
</form>
<script language=JavaScript><!--
function test()
{
document.form1.check1.checked = true;
}
//--></script>
出力結果：
・入力不可のテキストボックス
テキストボックスの入力をさせたくない時は、フォーカスがあたった時に、フォーカスをはずすメソッドを呼ぶようにすることでできます。
例：
<form name=form1>
<input type=text value=TEST onFocus=blur()>
</form>
出力結果：
・文字列を整数に変換する
文字列として扱われている変数を整数に変換するには、int parseInt(String)を使用すればできます。
例：
・OCXのプロパティ値を変更する
HTMLにActiveXを貼りつければ、JavaScriptでいろいろ制御できます。OCXのプロパティの値を変えるには、以下のようにします。ただし、下の例のNNの場合の部分は、OCX用のプラグインが入っていることが前提となります。
例：
<object id="MediaPlayer1" width=287 height=225
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<embed type="application/x-mplayer2" name="WMPlay1" width=320 height=240>
</embed>
</object>
<script language="JavaScript"><!--
function changeShowDisplay()
{
if (navigator.appName.indexOf( "Netscape" ) < 0)
{
//IEの場合
document.MediaPlayer1.ShowDisplay = false;
}
else
{
//NNの場合
document.WMPlay1.SetShowDisplay(false);
}
}
//--></script>
・OCXのメソッドを呼ぶ
OCXのメソッドを呼ぶには、以下のようにします。ただし、下の例のNNの場合の部分は、OCX用のプラグインが入っていることが前提となります。
例：
<object id="MediaPlayer1" width=287 height=225
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<embed type="application/x-mplayer2" name="WMPlay1" width=320 height=240>
</embed>
</object>
<script language="JavaScript"><!--
function Play()
{
if (navigator.appName.indexOf( "Netscape" ) < 0)
{
//IEの場合
document.MediaPlayer1.Play();
}
else
{
//NNの場合
document.WMPlay1.Play();
}
}
//--></script>
・OCXのイベントを取得する
OCXのイベントを取得するには、以下のようにします。ただし、下の例のNNの場合の部分は、OCX用のプラグインの他にイベントを通知するためのクラスファイルが必要になります。
例：
<object id="MediaPlayer1" width=287 height=225
classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<embed type="application/x-mplayer2" name="WMPlay1" width=320 height=240>
</embed>
</object>
<script language="JavaScript" for="MediaPlayer1" event="MouseDown(nButton, nShiftState, x, y)"><!--
//IEの場合
alert("MouseDown");
//--></script>
<script language="JavaScript"><!--
function MouseDown(nButton, nShiftState, x, y)
{
//NNの場合
alert("MouseDown");
}
//--></script>
|
