ひろ坊がホームページで使っている
JavaScriptサンプル集

目次：
更新日の自動表示
乱数でたしざん
<Input Type="text">の繰り返し表示
文字をひとつづつ表示
画像をクリックしたら、次の写真を表示する
ボタンのクリックで新しいウインドウを開く(簡略JavaScript)
ボタンを押すと確認して、次の処理を行う
ちいさい写真にマウスが来たとき、大きな写真を表示する
ページを開いた後の秒をカウンターで表示
SampleX

JavaScriptへのこだわり：
『意味がない。どうでも良いではないか』との声もあるが、 作っている最中になにをやっているのか自分自身で分からなくなるから。 だが、例外だらけ。
関数は類似のJaveScriptをコピーして変更しているため、変数名がおかしいものもありますがご容赦ください。
  1. 表示に関係ないJavaScriptは<head></head>に入れる。
  2. 関数(function)は可能な限り一箇所の<Sript></Sript>に集める。
  3. ＨＴＭＬタグ内の引用符はダブル["]、JavaScriptの引用符はシングル[']。 ダブル["]の中の二重引用は[\']
  4. JavaScriptの記述は<Script language=JavaScript><!--　と　// --></Script>で囲む。
更新日の自動表示
ポイント：
  1. 変数の値が0から連番の整数は配列Array()の(　)の文字に対応する。
  2. 特別にvar等で配列Array()の宣言をしなくても値の宣言と同時にすることも問題ない。
  3. ファイルの保存日は document.lastModified で求める。
  4. 曜日はgetDay();で求め、日が0、土が6。
  5. getMonth()は１月が0、１２月が11。表示するとき、+1する。
  6. 二千年問題がある古いパソコンを使用している場合、getYear()は条件式を追加する。

表示例：

更新日：
  

表示例(応用)：
(上との違いはソースで確認してください)

ソース：
(ご利用の場合、下記をコピーしてください)
更新日：<BR>&nbsp;&nbsp;
<SCRIPT language=JavaScript><!--
saveDate = new Date(document.lastModified);
nowDay = saveDate.getDay();
nowWeekday = new Array("日","月","火","水","木","金","土");   // 曜日の表示を変える場合、漢字を変更する
document.write(saveDate.getYear()+"年"+(saveDate.getMonth()+1)+"月"+saveDate.getDate()+"日("+nowWeekday[nowDay]+")");
// --></SCRIPT>
目次へ
乱数でたしざん
ポイント：
  1. Math.random()で発生する乱数は0から0.99999...。
  2. 乱数が整数で範囲があるとき、Math.random()*nのnで範囲を決め、Math.floor()で切り下げた整数に変換する。
  3. 切り下げた整数に変換したあと、１からの整数への変換は+1する。
  4. eval()は数字の文字列を数値に変える。
  5. <Input type="text">に値を入れたり、出したりするときは、<Form name="xxx">と<Input name="yyy">の両方にname=""を宣言し、document.xxx.yyy.valueで値を入れる。
  6. HTMLタグで表示したInput Boxの文字サイズ等は <Input type="text" STYLE="color:blue;font-size:12pt;font-weight:bold;"> で変える。

表示例：

問題を表示する場合、「つぎのもんだい」ボタンを押してください。
＋ ＝ 　

ソース：
(ご利用の場合、下記をコピーしてください)
<script language="JavaScript"><!--
function Set1(){
document.Form.m1.value = Math.floor(Math.random()*9)+1;
document.Form.n1.value = Math.floor(Math.random()*9)+1;
document.Form.a1.value = "";
document.Form.aaa1.value= "";
}
function Check1(){
mm1 = eval(document.Form.m1.value);
nn1 = eval(document.Form.n1.value);
aa1 = eval(document.Form.a1.value);
Answer1 = mm1 + nn1;   // 他の計算の場合、ここの＋を変更する
if ( Answer1 == aa1 ){
document.Form.aaa1.value = "よくできました";
}else{
document.Form.aaa1.value = "もう一度";
}
}
// --></script>
<form name="Form"><font size=5>
<input type="text" size="2" name="m1" STYLE="color:blue;font-size:18pt"> ＋ <!-- 他の計算の場合、ここの＋を変更する -->
<input type="text" size="2" name="n1" STYLE="color:blue;font-size:18pt"> ＝
<input type="text" size="2" name="a1" STYLE="color:blue;font-size:18pt">　
<input type="button" value="たしかめ" onclick="Check1()" style="background-color:lightblue" onMouseover="this.style.backgroundColor='lime'" onMouseout="this.style.backgroundColor='lightblue'">
<input type="text" size="12" name="aaa1" STYLE="color:blue;font-size:18pt">
<input type="button" value="つぎのもんだい" onClick="Set1()" style="background-color:lightblue" onMouseover="this.style.backgroundColor='lime'" onMouseout="this.style.backgroundColor='lightblue'">
</font></form>

目次へ

<Input Type="text">の繰り返し表示(for, elements)
ポイント：
  1. <Input Type="button" onClick="function名">で規定したfunctionをページを開けたときに機能させるためには、<Body onLoad="function名">のonLoadで起動する。ただし、値が規定されていない変数がfunctionの中にある場合、エラーとなるため、ロジックに十分注意する。
  2. Scriptの中にHTMLタグを使用する場合、document.write("<Table>"+"</Table>")のようにして、使用できる。
  3. For ( i=1; i <= n; i++ ) { }で必要回数(n)表示する。
  4. テーブル(縦と横に)を表示する場合、繰り返しを入れ子にする。
  5. <Input Type=text >を<Form name="xxx"></Form>で囲み、<Input Type=text name=["yyy"+i]>のようにname=を規定し、表示する。
  6. text boxにdocument.xxx.elements["yyy"+i].value ="文字列または数値"で表示する。
  7. SCRIPTの中に使用するHTML終了タグ(例：</A>)を多用すると、誤認識が発生する可能性があるため、可能な限り\を/の前に付ける。例：<\/A>
  8. Scriptで表示したInput Boxの文字サイズは document.xxx.elements["yyy"+i].style.fontSize で変える。

表示例：
(問題を表示する場合、「次の問題」ボタンを押してください)
　　　　　　 　　　
　

ソース：
(ご利用の場合、下記をコピーしてください)
<script language="JavaScript"><!--
function boxPrepare() {
document.write("<table name='Table99'>")
document.write("<tr><td width='30'></td>");
for ( i = 1; i <=5; i++) {    //横方向に繰り返し
document.write("<td><font color='Green' size='4'><B>"+ i +"</B></font></td>");
}
document.write("</tr>")
for ( j = 1; j <=3; j++ ) {    //縦方向に繰り返し
document.write("<tr>"+"<td><font color='Green' size='4'><B>"+ j +"</B></font></td>");
for ( i = 1; i <=5; i++) {    //横方向に繰り返し
y = i*10 + j;
document.write("<td>"+"<input size=2 name="+('box'+y)+">"+"</td>");    // ( )は[ ]でも可
document.Form3.elements["box"+y].style.fontSize = "12pt";
}
document.write("</tr>");
}
document.write("</table>");
}

function cross99() {
document.Form3.box100.value = "";
for ( j = 1; j <= 3; j++) {
for ( i = 1; i <= 5; i++) {
y = i*10 + j;
jj = Math.floor(Math.random()*5)+1;
if ( jj == i ) {
document.Form3.elements["box"+y].value = "";
document.Form3.elements["box"+y].style.backgroundColor = "White";
} else {
document.Form3.elements["box"+y].value = i*j;
document.Form3.elements["box"+y].style.backgroundColor = "#e6ffff";
}
}
}
Confirm();
}

function Confirm() {
x = 0;
for ( j = 1; j <= 3; j++ ) {
for ( i = 1; i <= 5; i++) {
y = i*10 + j;
if ( document.Form3.elements["box"+y ].value != i*j )
{ x ++ ;
}
}
}
if ( x == 0 ) {
document.Form3.box100.value = "よくできました。";
} else {
document.Form3.box100.value = "残りは "+ x +" 問です。";
}
}
// --></script>

<form name="Form3">
<input type="button" value="次の問題" onClick="cross99()" style="background-color:lightblue" onMouseover="this.style.backgroundColor='lime'" onMouseout="this.style.backgroundColor='lightblue'">　
<input type="button" value="たしかめ" onClick="Confirm()" style="background-color:lightblue" onMouseover="this.style.backgroundColor='lime'" onMouseout="this.style.backgroundColor='lightblue'">
<input type="text" size=14 name="box100" STYLE="font-size:12pt;font-weight:bold"><br>

<Script Language="JavaScript"><!--
boxPrepare();
cross99();
// --></Script>
</form>

目次へ

文字をひとつづつ表示
ポイント：
  1. <DIV ID="xxx">で文字の挿入位置を決め、JavaScriptのxxx.innerHTML = "文字列"で表示する。
    改行しない場合は、<SPAN ID="xxx">を使用する。
  2. 文章の途中に入れるとき、<DIV></DIV>とxxx.innerHTML = "";をJavaScriptの最初に入れる組み合わせで、行の表示スペースを最初に確保し、配置が変わらないようにする。
    <SPAN><SPAN>で改行<BR>とxxx.innerHTML = "";の組み合わせは配置がずれる。
  3. 「もう一度」ボタンのJavaScript(ソース参照)にclearTimeout(timer);を入れ、再表示のスピードをリセットする。「更新」ボタンはclearTimeout(timer);がなくても、リセットされる。

表示例：
(デモンストレーションは「もう一度」ボタンを押してください)

ソース：
(ご利用の場合、下記をコピーしてください)
<Center>
<Font size=+2 color=green><B><Span ID="line1"></Span></B></Font><BR>
<Font size=+2 color=red><B><Span ID="line2"></Span></B></Font>
<Font size=+2 color=blue><B><DIV ID="line3"></DIV></B></Font>
</Center>
<SCRIPT Language="JavaScript"><!--
line1.innerHTML = ""; line2.innerHTML = ""; line3.innerHTML = "";// ページの途中に表示する場合、行を確保するため、挿入
letter1 = "＝　工　事　中　＝";
letter2 = "近　日　公　開";
letter3 = "乞　う　ご　期　待";

letterNum = letter1.length + letter2.length + letter3.length;
i = 1; j = 1; k =1; l = 1;
function timerSet() {
if ( i > letterNum ) {
clearTimeout(timer);
} else {
if ( j <= letter1.length ) {
line1.innerHTML = letter1.substring(0,j);
j++;
} else {
if ( k <= letter2.length ) {
line2.innerHTML = letter2.substring(0,k);
k++;
} else {
if ( l <= letter3.length ) {
line3.innerHTML = letter3.substring(0,l);
l++;
}
}
}
i++;
}
timer = setTimeout("timerSet()",300);
}
timer = setTimeout("timerSet()",300);
//--></SCRIPT>

目次へ

画像をクリックしたら、次の写真を表示する
ポイント：
  1. 急いでアップするため、このサンプルは”HTML＆JavaScript（上級テクニック集)”[入口の参考書欄に記載]とほとんど同じ。
  2. 追加しているところは、最後の写真に行ったら、最初の写真を表示するための条件式を入れた。
  3. JavaScriptに関係ないが、デジカメで撮った写真６９枚のファイルは合計２２．４MB。これではホームページ容量５MBを大幅に超過。デジカメ付録ソフトで320x240：標準画質に変更。２６分の一の８６２KBまで圧縮し、すべてが見られるようになった。

表示例：


番目の写真です。

ソース：
(ご利用の場合、下記をコピーしてください)
<IMG ID=img1 SRC="../wan_nyan_03/dog0368.jpg" onClick="picchange()" BORDER="1" WIDTH="320" HEIGHT="240"><BR>  //表示例はWIDTH=160、HEIGHT=120で幅と高さを小さくして、表示している。
<FONT SIZE="2" color=blue><B><Span ID="Num"></Span>番目</B>の写真です。</FONT>
<SCRIPT LANGUAGE="JavaScript"><!--
function startPhoto() {  //<Body onLoad="startPhoto()">で、ページを開いたときに写真番号を表示するためのfunction。
　 Num.innerHTML = 68;
}

var imgselect= 68;  //最初に表示する写真番号が初期値

function picchange(){
if ( imgselect == 69 ) {   //最後の写真に行ったら、最初の写真に戻る
imgselect = 1;
} else {
imgselect = imgselect + 1;
}
　 Num.innerHTML = imgselect;  //写真が変わるときに写真番号も変える
if ( imgselect <= 9 ) {
img1.src = "../wan_nyan_03/dog030"+imgselect+".jpg";
} else {
img1.src = "../wan_nyan_03/dog03"+imgselect+".jpg";
}
}
//--></SCRIPT>

目次へ

ボタンのクリックで新しいウインドウを開く(簡略JavaScript)
ポイント：
  1. onClick="JavaScript: "でJavaScriptを簡略化して使用できる。
  2. window.open('URL','name','Width=xx,Height=xx,その他のオプション')
    nameとオプションは省略可。オプションを設定するときは、nameは指定または空欄とする。
  3. オプション例：
    　項目　スタイル　備考
    　メニュバー表示　menubar=yes　noは非表示(以下同じ)
    　スクロールバー表示　Scrollbars=yes　
    　ツールバー表示　toolbar=yes　
    上記以外にもたくさんあります。詳細な説明は、とほほのJavaScriptリファレンスのページを開くが便利です。

表示例：

標準画質３２０ｘ２４０(ファイルサイズ：１２KB)

高画質６４０ｘ４８０(ファイルサイズ：４６KB)

ソース：
(ご利用の場合、下記をコピーしてください。ボタンの色の設定は別のソースを参照してください。)
標準画質３２０ｘ２４０(ファイルサイズ：１２KB)<BR>
<Input type=button value="写真をフルサイズで表示" onClick="javascript:window.open('dog0335s.jpg','','width=340,height=260')"> <!--サイズを指定し、大きさ等が変えられないウィンドウを表示する-->
<P>
高画質６４０ｘ４８０(ファイルサイズ：４６KB)<BR>
<Input type=button value="写真をフルサイズで表示" onClick="javascript:window.open('dog0335m.jpg')"> <!-- 最大化ボタン等すべての機能がある通常のウィンドウを表示する-->

目次へ

ボタンを押すと確認して、次の処理を行う
ポイント：
  1. "confirm"で処理の要否を確認する。
  2. ダイアログの種類：
    　項目　オブジェクト　備考
    　警告　alert("文字列")　[OK]のみ、onClick=alert("--")でも使用
    　確認　confirm("文字列")　[OK]と[キャンセル]をJavaScriptで判別
    　入力　prompt("文字列","default")　パスワードなどの入力を求める。
    JavaScriptで文字列を変数にできます。詳細な説明は、WEST MiRaのJavaScriptの基本操作のダイアログの基本と、とほほのJavaScriptリファレンスのダイアログ表示が便利です。

表示例：


ソース：
(ご利用の場合、下記をコピーしてください。ボタンの色の設定は別のソースを参照してください。)
<SCRIPT LANGUAGE="JavaScript"><!--
function photo() {
if ( confirm("くどいようですが\n本当に見ますか？")) {　　//ダイアログの文章の改行は　\n
img7.src = "dog0335s.jpg";
} else {　　//キャンセルで処理がない場合、else{---}は省略可
alert("見たくなりましたら、\n再度ボタンを押してください");
}
}
//--></SCRIPT>
<IMG ID=img7 BORDER="1" WIDTH="160" HEIGHT="120"><BR>　<!-- 配置が崩れないようにサイズを指定　-->
<Span Style="margin-left:35"><Input type=button value="写真を見る" onClick="photo()"></Span>

目次へ

ちいさい写真にマウスが来たとき、大きな写真を表示する
ポイント：
  1. <IMG name="ファイル名" onMouseover="---">でマウスがちいさい写真の上に来たら、"event.srcElement.name"でnameの値を得る。
  2. "onMouseover"でマウスが小さい写真の上に来たとき、"onClick"でクリックしたときに写真が変わる。
  3. "onMouseover"でマウスが上に来たとき、"onMouseout"でマウスが離れたときの処理をする。

表示例：

ソース：
(ご利用の場合、下記をコピーしてください)
<SCRIPT LANGUAGE="JavaScript"><!--
function openPhoto() {
thisPhoto = event.srcElement.name;  // マウスが上に来たイベントで、そのnameの値を得る
img.src = thisPhoto;
}

function closePhoto() {
img.src = "zoo0301.jpg";  // マウスが離れたときに表示する写真
}
//--></SCRIPT>

<table><TR>
<TD><IMG name="zoo0301.jpg" SRC="zoo0301s.jpg" onMouseover="openPhoto()" BORDER=0 WIDTH="60" HEIGHT="45"></TD>  <!-- "name"にファイル名を入れる。-->
<TD rowspan=2 colspan=1 align=center valign=middle><IMG ID=img BORDER=0 SRC="zoo0301.jpg" WIDTH="128" HEIGHT="95"></TD>
<TD><IMG name="image001.gif" SRC="zoo0314s.jpg" onMouseover="openPhoto()" onMouseout="closePhoto()" BORDER=0 WIDTH="60" HEIGHT="45"></TD>  <!-- マウスが上に来たときと離れたときの両方で処理 -->
</TR><TR>
<TD><IMG name="zoo0311.jpg" SRC="zoo0311s.jpg" onMouseover="openPhoto()" BORDER=0 WIDTH="60" HEIGHT="45"></TD>  <!-- 写真が多い場合、最初に表示するファイルは圧縮 -->
</TR></table>

目次へ

ページを開いた後の秒をカウンターで表示
ポイント：
  1. setTimeout()で1000ミリ秒を１秒として、functionを繰り返す。
  2. 規定時間を過ぎたら他のページにジャンプする場合、条件式に「例：location.href='http://www.adress.co.jp/'」を入れます。
  3. 初期値をジャンプするまでの秒数に場合、secondPass = 0の値を変え、secondPass++をsecondPass--に変えます。
  4. 変数の表示は、「<Span id='xxxx'>」で表示位置を決めます。
  5. カウントダウンの秒数を表示しないときは<META HTTP-EQUIV="Refresh" CONTENT="秒数;URL=アドレス">でジャンプできます。
  6. 複数の関数(function)にsetTimeoutを作るとTimerが狂うため、timerIDとclearTimeout()を追加します。
  7. setTimeout()のミリ秒単位での設定はPCの性能により遅れが生じることがあります。
  8. 正確な時間を計測するためには内部クロックの値を求めるDate()を使った表示が必要です。

表示例：

setTimeoutで表示　(PCの性能で遅れることがあります)：
ページを開いてから 0秒経過しました。
 内部クロックで表示　(内蔵時計に合わせています)：
ページを開いてから 0分 0秒経過しました。

ソース：
(ご利用の場合、下記をコピーしてください)
setTimeoutで表示　(PCの性能で遅れることがある)：
<FONT SIZE=+2 color=green> ページを開いてから<Span id="timeRemain" Style="Font-size:30pt;color:blue">0</Span>秒経過しました。</FONT>

<SCRIPT LANGUAGE="JavaScript"><!--
secondPass = 0;
timerID = setTimeout("passSecond();",1000);　　// 初期値　0秒は<Sapn -->で表示し、１秒経過後に関数passSecond()で１からカウントを開始

function passSecond() {
clearTimeout(timerID);

secondPass++;　　// １秒づつ加算
timeRemain.innerText = secondPass;
/*
if ( secondPass >= 20 ) {　　// ジャンプさせる場合、/*と*/をはずし、ジャンプするまでの秒数(20)とURLを変える
location.href='http://www2.ttcn.ne.jp/~hirobou/index.htm';
}
*/
timerID = setTimeout("passSecond();",1000);　　// カウントを１秒ごとに繰り返し
}
//--></SCRIPT>

内部クロックで表示：
<FONT SIZE=+2 color=green> <Span id="resetButton2">ページを開いて</Span>から<Span id="minuteRemain2" Style="Font-size:30pt;color:blue"> 0</Span>分<Span id="secondRemain2" Style="Font-size:30pt;color:blue"> 0</Span>秒経過しました。<BR>
</FONT>
<SCRIPT LANGUAGE="JavaScript"><!--
timerID2 = setTimeout("startStopwatch();",1);

function startStopwatch() {
clearTimeout(timerID2);

nowDate2 = new Date();
startHour2 = nowDate2.getHours();
startMinute2 = nowDate2.getMinutes();
startSecond2 = nowDate2.getSeconds();
startMillisecond2 = Math.floor(nowDate2.getMilliseconds()/100);

startTotalsec2 = startHour2 * 3600 + startMinute2 * 60 + startSecond2 + startMillisecond2;

minuteCount2 = 0;
secondPass2 = 0;
minuteRemain2.innerText = 0;
secondRemain2.innerText = 0;

timerID2 = setTimeout("passSecond2();",1);
}

function passSecond2() {
clearTimeout(timerID2);

nowDate2 = new Date();
nowHour2 = nowDate2.getHours();
nowMinute2 = nowDate2.getMinutes();
nowSecond2 = nowDate2.getSeconds();
nowMillisecond2 = Math.floor(nowDate2.getMilliseconds()/100);

nowTotalmillisec2 = nowHour2 * 36000 + nowMinute2 * 600 + nowSecond2 * 10 + nowMillisecond2;

hourCount2 = nowHour2 - startHour2;
minuteCount2 = Math.floor(( nowTotalmillisec2 - startTotalmillisec2)/600) - hourCount2 * 60;
secondCount2 = Math.floor(( nowTotalmillisec2 - startTotalmillisec2)/10) - hourCount2 * 3600 - minuteCount2 * 60;

minuteRemain2.innerText = minuteCount2;
secondRemain2.innerText = secondCount2;

timerID2 = setTimeout("passSecond2();",500);
}
//--></SCRIPT>

目次へ

SampleX
ポイント：

表示例：

準備中

ソース：
(ご利用の場合、下記をコピーしてください)
準備中

目次へ

Copyright (C) 2003 ひろ坊 All Rights Reserved