JavaScrip基礎：乱数他

１２．その他

１２－１．乱数

ＪａｖａSｃriｐt	記事
<HTML><HEAD><TITLE>乱数)</TITLE> <SCRIPT Language="JavaScript"> <!-- function rndat(){ for(i=0; i<15; i++) document.write(Math.random()+ "<br>"); } //--> </SCRIPT> </HEAD> <BODY> <SCRIPT Language="JavaScript"> <!-- rndat(); //--> </SCRIPT> </BODY> </HTML>	Math.random()で乱数の発生 12-1実行

１２－２．乱数(数字範囲指定）

ＪａｖａSｃriｐt	記事
<HTML><HEAD><TITLE>乱数)</TITLE> <SCRIPT Language="JavaScript"> <!-- Myrand=Math.floor(Math.random()*500); alert(Myrand); } //--> </SCRIPT> </HEAD> <BODY> <FORM NAME="Myfn"> <INPUT TYPE="button" VALUE="ランダム数字表示" onClick="rndat()"> </FORM> </BODY> </HTML>	random()*500で0～500の乱数の発生 Math.floor　→　値を切り下げて整数で表示 Math.ceil　→　値を切り上げて整数で表示 12-2実行

１２－３．URL変更１

ＪａｖａSｃriｐt	記事
<HTML><HEAD><TITLE>URL変更</TITLE> <SCRIPT Language="JavaScript"> <!-- function ev2(){ location.href="http://members.jcom.home.ne.jp/iryo/";} //--> </SCRIPT> </HEAD> <BODY onload="ev2()"> ページを読み終了でジャンプします。 </BODY></HTML>	location.replaceで指定したURLへジャンプする 12-3実行

１２－４．URL変更２

ＪａｖａSｃriｐt	記事
<HTML><HEAD><TITLE>URL変更</TITLE> <SCRIPT Language="JavaScript"> <!-- function ev2(){ location.replace("http://members.jcom.home.ne.jp/iryo/");} //--> </SCRIPT> </HEAD> <BODY onload="ev2()"> ページを読み終了でジャンプします。 </BODY></HTML>	location.replaceで指定したURLへジャンプする（replaceでは現在のＵＲＬが残らず「戻る」の使用不可） 12-4実行

１２－５．他フレームへデータを渡す1

ＪａｖａSｃriｐt	記事
<HTML><HEAD><TITLE>他フレームへデータを渡す1</TITLE> </HEAD> <FRAMESET ROWS="40%,*"> <FRAME SRC="12_5a.html" name="No1"> <FRAME SRC="12_5b.html" name="No2"> </FRAMESET> </HTML>	本例は、フレームを2個表示し、1方のフレームに入力したデータを他方のフレームに表示します。 12-5実行
<HTML><HEAD><TITLE>他フレームへデータを渡す1</TITLE> <SCRIPT Language="JavaScript"> <!-- function sendText(a) { parent.No2.document.No2Text.getText.value=a; } // --> </SCRIPT> </HEAD> <BODY BGCOLOR=#E8FFD0> <B><CENTER>他フレームへデータを渡す1</B></CENTER> 文字を入れて下さい： <FORM METHOD="POST"> <INPUT TYPE="TEXT" onChange="sendText(this.value)"> </FORM> </BODY></HTML>	デ-タ送出側のソース
<HTML><HEAD><TITLE>他フレームのデータを受ける</TITLE> </HEAD> <BODY BGCOLOR=#C1E1F8> <B><CENTER>他フレームのデータを受ける</B></CENTER> 上のフレームのテキストボックス内容を表示： <FORM name="No2Text"> <INPUT TYPE="TEXT" name="getText"></FORM> </BODY></HTML>	デ-タ受信側のソース

１２－６．他フレームへデータを渡す2

ＪａｖａSｃriｐt	記事
<HTML><HEAD><TITLE>他フレームへデータを渡す2</TITLE> </HEAD> <FRAMESET ROWS="50%,*"> <FRAME SRC="12_6a.html" name="No1"> <FRAME SRC="12_6b.html" name="No2"> </FRAMESET> </HTML>	本例は、フレームを2個表示し、1方の引数データを他方のフレームに表示します。（javascript:check(*)で*を引数として送る例) 12-6実行
<HTML><HEAD><TITLE>他フレームへデータを渡す</TITLE> </HEAD> <BODY BGCOLOR=#E8FFD0> <B><CENTER>他フレームへデータを渡す2</B> <font size=2> （本例では送ったデータを追加して行きます：前回データを変数に残した例）</font><br><br> </CENTER> <a href="javascript:check(1234)" target="No2"> ここをクリックで</a>[1234]の数字を送ります。<br><br> <a href="javascript:check(5678)" target="No2"> ここをクリックで</a>[5678]の数字を送ります。<br><br> <font size=2> 上記は、javascript:check(*)で*を引数として他のフレ-ムへ送っています。単純ですが覚えると利用価値は多い。 </font> </BODY></HTML>	デ-タ送出側のソース（関数、check(*)として送る） (*は数字以外はエラーになる）このjavascript:はエクスプローラ風リンク表で使用し私の HPで掲載していたが、Mac-PCで表示できないと言う貴重なクレームが来た。デバッグしたところMacではjavascript：での他フレームの関数呼び出しが実行できなかった（自分のフレームはOK）
<HTML><HEAD><TITLE>他フレームのデータを受ける</TITLE> </HEAD> <BODY BGCOLOR=#C1E1F8> <SCRIPT Language="JavaScript"> <!-- var Mydata = "" function check(n) { Mydata += ""+n document.No2Text.getText.value=Mydata; } // --> </SCRIPT> <B><CENTER>送られてきた数字を表示します</B></CENTER> (残念ながら数字以外はエラーになる） <FORM name="No2Text" SIZE=40> <INPUT TYPE="TEXT" name="getText"></FORM> </BODY></HTML>	デ-タ受信側のソース (引数は関数定義の、function check(n)で受信) 数字を文字変換は、「""+n」でできる。→eval(n) と同じ

１２－７．別ページへデータを渡す

ＪａｖａSｃriｐt	記事
<HTML><HEAD> <TITLE>別ページへデータを渡す</TITLE> <SCRIPT Language="JavaScript"> <!-- shtml = "12_7a.html"; function kensaku() { sdat = document.en1.data1.value; location.href = shtml + "?"+sdat; } //--> </SCRIPT> </HEAD> <BODY> <form name="en1"> <input type=text name=data1> <input type=button value="表示" onclick="kensaku()"><br> 入力した文字を、別のページ送ります。 </form> </BODY></HTML>	CGIに文字を渡す場合、URLの後ろに[？+文字]で行います。これは、location.searchで読み取ることが出来るので、別ページへデータを送るのに利用することも出来る。注意：「別ページへデータを送る」と言う意味は、正確には別ページのHTMLファイルを自分のPCへ表示し、そのファイルに本例のように、データ受けのスプリクトが記述してあれば送ったデータを表示できる。と言う意味です。 12-7実行
<HTML><HEAD> <TITLE>データ受け取り</TITLE> </HEAD> <BODY BGCOLOR=#E8FFD0> <SCRIPT Language="JavaScript"> <!-- cstr = location.search; cstr =cstr.substr(1,100); document.write("入力された文字は｢"+cstr+"｣です"); // --> </SCRIPT> </BODY></HTML>	デ-タ受信側のソース substr(1,100)で頭の1文字(?)を削除

１２－８．印刷

ＪａｖａSｃriｐt

記事

<HTML><HEAD><TITLE>印刷</TITLE></HEAD>

<BODY>
<FORM NAME="Myfn">
<INPUT TYPE="button"
VALUE="印刷スタート" onClick=window.print()>
</FORM>
ああああああああああ<br>
いいいいいいいいいい<br>
AAAAAAAAAAAAAAAAAAAA<br>
</BODY></HTML>

本サンプルは、2001年12月4日 K.Sさんから
下記メールがきたので作成。

拝啓、ホームページにボタンを置いて、そのボタンを
クリックしてそのページを印刷したいのですが、
JavaScriptで出来るのでしょうか？出来る様でしたら、
サンプルソースをお教え戴けましたら幸甚です。敬具

12_8実行

（NN4.7では問題なし。IE5はエラーになると思ったが動いた）

１２－９．ロード中表示

ＪａｖａSｃriｐt

記事

<HTML><HEAD>
<TITLE>ロード中表示</TITLE>
<SCRIPT Language="JavaScript">

</SCRIPT>
</HEAD>
<BODY BGCOLOR=#F0FFF0 onload='endload()'>
<FORM NAME='myform'>
<INPUT TYPE='button' name='botan' VALUE='データロード中'
onClick='check()'>
</FORM>
</BODY></HTML>

データベース検索をJavaScriptで作成したが、データが
300ＫＢ以上と大きな場合、「検索スタート」ボタンは
直ぐ表示されるが、データロード前にそのボタンを
クリックするとエラーになった為、ロード中は別表示に
して、ロード完了後「検索スタート」を表示した例

12_9実行

（本例では大きなデータロードがなく上記は見えない）
　　　↓
　　　↓

１２－10．Windows上のクリック場所取得

ＪａｖａSｃriｐt

記事

<HTML><HEAD><TITLE>クリック場所</TITLE>
<SCRIPT Language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<br><br>
<b>Window上の座標を取得</b>
<br>1<br>2<br>3<br>4<br>5<br>
<FORM NAME="Myfn">
横の位置：
<INPUT TYPE="text" NAME="txt1" SIZE=10><BR>
縦の位置：
<INPUT TYPE="text" NAME="txt2" SIZE=10><BR>
</FORM>
<SCRIPT Language="JavaScript">
for(i=6; i< 40; i++) {
document.write(i +'<br>')
}
</SCRIPT>
</BODY></HTML>

・IE５とNN４では取得方法が異なります
・NN4はcaptureEventsでどのイベントを取得するか指定
・IE5では、「event．プロパティ」で取得
・NN4では、関数にイベント情報が入っている

12_10実行

NNの識別は、if(document.layers)　が簡単でよいが、
これは、NN6、NN7では判別できない。

本例はWindowｓ上の、目に見えている場所の所得で
あり、スクロールバーで行を移動した場合も、Window
上のクリックした場所の座標を示します。

var bname=navigator.appName.charAt(0);
１２－11．ページ上のクリック場所取得

ＪａｖａSｃriｐt

記事

<HTML><HEAD><TITLE>クリック場所</TITLE>
<SCRIPT Language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<br><br>
<b>Window上の座標を取得</b>
<br>1<br>2<br>3<br>4<br>5<br>
<FORM NAME="Myfn">
横の位置：
<INPUT TYPE="text" NAME="txt1" SIZE=10><BR>
縦の位置：
<INPUT TYPE="text" NAME="txt2" SIZE=10><BR>
</FORM>
<SCRIPT Language="JavaScript">
for(i=6; i< 40; i++) {
document.write(i +'<br>')
}
</SCRIPT>
</BODY></HTML>

前項の例は、Windows上の座標ですが、ページ上の
座標を取得したい場合は本例で出来る。

・IE5の場合、ページを取得するプロパティがないので
　本例のように、スクロール位置をWindow上の位置を
　加えることにより取得できる。
　（なお、ページ座標はevent.clientX　でも取得不可）

・NN4の場合は、pageYで容易に取得できる。

12_11実行

１２－12．スクロールバー制御

ＪａｖａSｃriｐt

記事

<HTML><HEAD><TITLE>スクロールバー制御</TITLE>
<SCRIPT Language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="Myfn">
縦の位置：
<INPUT TYPE="text" NAME="txt1" SIZE=10><BR>
<INPUT TYPE="button" VALUE="スクロールバー移動"
onClick="ev2()"
<br>
</FORM>
<SCRIPT Language="JavaScript">
for(i=1; i< 50; i++) {
document.write(i +'<br>')
}
</SCRIPT>
</BODY></HTML>

スクロールバーを移動させて、ある特定行の文書を
表示したい場合本例が使用できます。

なお、スクロールバーが表示されていない場合座標
を指定しても、何も動作しません（エラーにもならない）

12_12実行

【HOME】　【基礎編へ戻る】