<SCRIPT LANGUAGE="JavaScript" src="外部JavaScriptファイル名"></SCRIPT>
⇒別ファイルにしたJavaScriptを読み込ます為に上記のように書きます
⇒関数の宣言用のタグにsrc=を追加するとエラーとなります 上記の一行は単独で書き込みます
⇒ブラウザで表示させる為に拡張子をtxtにしていますが，JavaScriptの拡張子はjsです
function select_change_password(sel_val){⇒プルダウン式メニューを変更時に呼び出されます
switch(sel_val){⇒switchは括弧内の値により処理を分岐するキーワード
case "dialog":⇒caseはswitchの括弧内の値がcase右値の時に以下を処理するキーワード
⇒caseでは命令の区切りの;で区切るのではなく:です 注意して下さい
in_txt=prompt("表示文字","値の初期値");⇒promptは入力用ダイアログのキーワード
⇒in_txtに入力した値が入ります
if(in_txt==null) break;⇒キャンセル時switch{}の外に抜けます
⇒キャンセルするとpromptの値はnullとなります breakはswitch{}の外に抜けるキーワード
if(in_txt!="パスワード"){⇒入力値がパスワード以外の時
alert("パスワードが一致しませんでした。");⇒メッセージを表示
select_change_password(sel_val);⇒この関数を呼び出しています つまり入力用ダイアログを再表示
return;}⇒この関数から抜ける つまり処理終了 実際は処理されません
location="表示URL文字";⇒locationは現在のページから指定ページに移動するキーワード
⇒入力値がパスワードと一致すると処理されます
break;⇒switch{}の外に抜ける 無いと以下も処理され，ウィンドウが表示されます
case "window":⇒switchの括弧内の値が"window"の時に以下を処理
win_pas=window.open("表示URL文字","","width=幅,height=高さ");
⇒window.openは新しいウィンドウを表示するキーワード 新しいウィンドウで指定URLを表示します
break;⇒switch{}の外に抜ける
case "source":⇒switchの括弧内の値が"source"の時に以下を処理
window.open("password_script.txt");⇒新しいウィンドウで指定の物を表示
break;}⇒switch{}の外に抜ける 必要ないですが後々のことを考えて
document.form_image_change.password_script.value="dummy";}
⇒プルダウン式メニューを最初値(dummy)に表示変更
⇒表示ウィンドウ内の宣言文
function sel_pas_win_ok(ok_pas){⇒表示ウィンドウのOKボタンを押すと呼び出されます
if(ok_pas!="パスワード"){⇒入力値がパスワード以外の時
alert("パスワードが一致しませんでした。");⇒メッセージを表示
return;}⇒この関数から抜ける つまり処理終了 表示ウィンドウは閉じていません
opener.window.location="表示URL文字";
⇒openerは呼出元のウィンドウをを示すキーワード つまりこのウィンドウを指定URLに移動します
window.close();}⇒表示ウィンドウを閉じます
function sel_pas_win_can(){⇒表示ウィンドウのキャンセルボタンを押すと呼び出されます
window.close();}⇒表示ウィンドウを閉じます
function sel_pas_win_foc(){⇒onLoadで呼び出されます
sel_pas_win_pas.focus();}⇒sel_pas_win_pasは一行入力フィールドの名前
⇒focus()により一行入力フィールドを選択します すぐに入力できる状態にします
⇒完全に表示されていないonLoad以前にfocus()を処理するとエラーとなる可能性があります
⇒表示ウィンドウ内の呼出文
<BODY onLoad="sel_pas_win_foc()">⇒onLoadはこの位置に書き込みます
<TABLE><TR><TD><BR></TD><TD>⇒表示を揃える為に表を使用しています フォームは使用していません
<INPUT TYPE=SUBMIT VALUE="ボタンの表示文字" onClick="sel_pas_win_ok(sel_pas_win_pas.value);" TABINDEX=2></TD>
⇒TYPE=SUBMITでボタンが作成されます ボタンにはBUTTONとIMAGEとRESETがあります
⇒SUBMITを使用するとリターンキーを押すことがSUBMITのボタンをクリックしたことになります
⇒onClickがクリックのキーワード onClickで指定した関数が処理されます(OK)
⇒sel_pas_win_pasは一行入力フィールドのNAMEです
⇒sel_pas_win_pas.valueで一行入力フィールドの選択した値を参照できます
⇒TABINDEXを設定するとTABキーを推す度にTABINDEXで設定した番号順に選択されて行きます
</TR><TR><TD>パスワードを入力して下さい。</TD><TD><BR></TD></TR><TR><TD> 一致するとgooへ移動します。</TD><TD>
<INPUT TYPE=RESET VALUE="ボタンの表示文字" onClick="sel_pas_win_can();" TABINDEX=3></TD></TR><TR><TD>
⇒TYPE=RESETでボタンが作成されます
⇒RESETを使用するとESCキーを押すことがRESETのボタンをクリックしたことになります
⇒onClickがクリックのキーワード onClickで指定した関数が処理されます(キャンセル)
<INPUT TYPE=PASSWORD NAME="sel_pas_win_pas" SIZE=30 ID="sel_pas_win_pas" TABINDEX=1></TD><TD><BR></TD></TR></TABLE>
⇒TYPE=PASSWORDで一行入力フィールドが作成されます PASSWORDは入力した値が*と表示されます
⇒NAMEを設定しないと一行入力フィールドの値の参照，設定が出来ません
⇒TYPE=TEXTで普通の一行入力フィールドが作成されます
⇒呼出文
<FORM NAME="フォーム名"><P>⇒プルダウン式メニューを使用するにはフォームが必要
⇒フォームはチェックボックスと併用しています
<SELECT NAME="password_script" ID="password_script" onChange="select_change_password(form_image_change.password_script.value);">
⇒SELECTでプルダウン式メニューが作成されます
⇒NAMEを設定しないとプルダウン式メニューの値の参照，設定が出来ません
⇒onChangeが項目が変更された時のキーワード onChangeで指定した関数が処理されます
⇒form_image_change.password_script.valueプルダウン式メニューの選択した項目を参照できます
⇒form_image_changeはフォーム名でpassword_scriptはプルダウン式メニュー名です
<OPTION VALUE="dummy">選択して下さい⇒OPTIONでプルダウン式メニューの項目を設定します
⇒VALUEで設定した値はvalueで参照されます
⇒valueの他にselectedIndexでも選択項目が分かります。零からの項目順の番号となります dummyは零
⇒最初に表示している項目を選択してもonChangeとならないのでダミーを設定します
⇒必要な数だけOPTIONを繰り返します
<OPTION VALUE="dialog">ダイアログ⇒selectedIndexの値は壱
<OPTION VALUE="window">ウィンドウ⇒selectedIndexの値は２
<OPTION VALUE="source">ソースの表示</SELECT><BR></P></FORM>⇒selectedIndexの値は３
⇒余談
⇒window.openの幅高さに以下のオプションを追加すると表示されます テストしていません
⇒ アドレスバーはlocation=yes，ステータスバーはstatus=yes，ツールバーはdirectories=yes，
⇒ スクロールバーはscrollbars=yes，ウィンドウズサイズ可変はresizable=yes，
⇒ メニューバーはmenubar=yes，ツールバーはtoolbar=yes，
⇒ screenX=左上隅からの横位置,left=横位置、screenY=縦位置,top=縦位置
⇒htmlファイルを作成しなくてもJavaScriptのみでwebページは作成できますが，
⇒ document.writeを追加する為に，ファイルが読み難くなります。作成時にはわかっていませんでした
⇒ document.writeにより，タグ・JavaScriptも書きこめます。JavaScriptのタグの書きこみを忘れないように
⇒ document.write("書込み文");内ではタグ等をすべて文字扱いとする為に " になる所を ' にします
⇒ document.write('書込み文');内ではタグ等をすべて文字扱いとする為に ' になる所を " にします
⇒ 上記はどちらを使用しても良いようですが，文字扱いが変数とならない簡単な回避策です
⇒外部JavaScriptを使用すると表示→ソースではパスワードのソースは表示されませんが，
⇒ ソースの中に指定しているので外部JavaScriptファイルを直接指定して表示できてしまう
⇒ 外部JavaScriptファイルのパーミッション(アクセス権)で読み込み出来ないようにすると，
⇒ 表示させないように出来ますが，JavaScriptも読み込み出来なくなり，JavaScriptを実行しない
⇒ セキュリティを重んじる場合はJavaApplet等を使用しましょう
⇒FTPのソフト等でパーミッションを変更してもすぐに反映されません
⇒ 時間を置いて(5分ほどかな サーバーしだい)パーミッションの値を良く確認しましょう
⇒ホタルのプレビューでは表示時に外部JavaScriptを読み込むので，
⇒ プレビューのままで外部JavaScriptを変更しても反映されません
⇒ プレビューを抜けて，プレビューを再度選択して，外部JavaScriptの変更を反映させましょう
更新すると３パターン？ パクリ⇒宣言文
map_cng_n=3;⇒画像数を設定
map_cng_n=Math.ceil(Math.random()*map_cng_n);⇒表示する画像を設定
⇒Math.random()で零から壱の乱数を発生 Math.ceilで整数に切り上げ よって，零から画像数の整数になります
map_cng_t=new Array();⇒マップの為の配列を準備
switch(map_cng_n){⇒switchは括弧内の値により処理を分岐するキーワード
case 1:⇒switchの括弧内の値が1の時に以下を処理(壱つ目の画像の設定)
map_cng_i="pictures/yahoo_goo_pi-po.gif";⇒画像ファイル名を設定
map_cng_a="TOP";⇒行に対する画像の位置を設定 TOP,MIDDLE,BOTTOM等があります
map_cng_k=3;⇒マップ数を設定
map_cng_t[0]='<AREA SHAPE=RECT COORDS="14,83,101,104" HREF="http://de.yahoo.com/" ALT="Yahooへ">';
map_cng_t[1]='<AREA SHAPE=RECT COORDS="109,83,199,104" HREF="http://www.goo.ne.jp/" ALT="gooへ">';
map_cng_t[2]='<AREA SHAPE=RECT COORDS="201,83,293,104" HREF="http://www.keishicho.metro.tokyo.jp/" ALT="ピーポくんへ">';
⇒<AREA SHAPE=RECT COORDS="左上Ｘ,左上Ｙ,右下Ｘ,右下Ｙ" HREF="URL文字" ALT="代替文字">
⇒上記の一行を必要な数だけ羅列 この場合は計3行の<AREA・・・>
⇒SHAPE=RECTは四角の領域のキーワード COORDS=は画像に対にての領域範囲 画像左上が零,零
⇒マップ領域でクリックすると指定URLに移動します
⇒配列を使用しているので括弧内の値を一つずつ増やす 零から始める
break;⇒switch{}の外に抜ける 無いと以下も処理され，defaultの画像しか表示されない
case 2:⇒switchの括弧内の値が2の時に以下を処理(二つ目の画像の設定)
map_cng_i="pictures/scroll_msg.gif";⇒画像ファイル名を設定
map_cng_a="BOTTOM";⇒行に対する画像の位置を設定
map_cng_k=2;⇒マップ数を設定
map_cng_t[0]='<AREA SHAPE=RECT COORDS="58,83,147,104" onClick="fun_map_cng(2);">';
map_cng_t[1]='<AREA SHAPE=RECT COORDS="152,81,242,104" onClick="fun_map_cng(3);">';
⇒マップが二ヶ所だから二行 onClickがクリックのキーワード onClickで指定した関数が処理されます(関数呼出)
break;⇒switch{}の外に抜ける 無いと以下も処理され，defaultの画像しか表示されない
default:⇒caseで指定された値以外の時に以下を処理(三つ目の画像の設定)
map_cng_i="pictures/close_msg.gif";⇒画像ファイル名を設定
map_cng_a="MIDDLE";⇒行に対する画像の位置を設定
map_cng_k=1;⇒マップ数を設定
map_cng_t[0]='<AREA SHAPE=RECT COORDS="111,78,197,97" onClick="fun_map_cng(1);">';}
⇒マップが一ヶ所だから一行 onClickがクリックのキーワード onClickで指定した関数が処理されます(関数呼出)
document.write('<MAP NAME="yahoo_goo_pi-po">');
⇒document.writeでページに書き込みます <MAP NAME="マップ名"> マップの宣言を書き込みます
for(i=0;i<map_cng_k;i++){⇒for(初期値;条件;変数の増減){}
⇒forは条件が成立している間の一回は{}内を処理します 条件と変数(この場合はi)が無関係だと永久に繰り返します
document.writeln(map_cng_t[i]);}⇒マップの数だけマップの設定を書き込みます
document.writeln('<AREA SHAPE=DEFAULT>');⇒必要ないですがホタルで追加されるので書き込みます
document.write('</MAP>');⇒マップの終了を書き込みます
function reload_setup(){⇒onLoadで呼び出されます
document.map_change.src=map_cng_i;⇒表示画像を設定
document.map_change.align=map_cng_a;}⇒表示画像の位置を設定します
⇒表示が完了前に関数を呼び出すとエラーとなる為にonLoadで関数を呼び出す
⇒呼出文
<IMG SRC="pictures/yahoo_goo_pi-po.gif" ALT="" ALIGN=BOTTOM WIDTH=312 HEIGHT=113 BORDER=0 USEMAP="#yahoo_goo_pi-po" NAME="map_change" ID="map_change">
⇒<IMG SRC="画像ファイル名" ALT="代替文字" ALIGN=行に対する画像の位置 BORDER=0 USEMAP="#マップ名" NAME="画像名">
⇒BORDER=0で画像のリンク枠を表示させない 画像名を設定しないと画像をJavaScriptで変更できません
⇒画像の位置を確保する為に画像は設定します 画像のサイズは揃えてあります
⇒余談
⇒イメージマップでは同じマップ名では最初に指定したものだけが有効になります
⇒イメージマップでは再定義や設定を解除する方法が見つかりません
⇒イメージマップを変化させたい時は更新による変更しか出来ないようです
⇒イメージマップをJavaScriptで使用する時はonLoadでの呼出しではエラーとなります
マウスを合わせると戻る ホタルの機能
⇒宣言文
function dBsftGoHistory(count, isForward) {
if (isForward == 0) history.go(-(count));⇒戻る時(零)指定した数だけブラウザの表示を戻す
if (isForward == 1) history.go(count);}⇒進む時(壱)指定した数だけブラウザの表示を進める
⇒呼出文
<SPAN onMouseOver="dBsftGoHistory(1,0);">ページ文字</SPAN><BR>⇒呼出(指定数,戻るは零で進むは壱)
⇒onMouseOverがマウスを合わせるのキーワード onMouseOverで指定した関数が処理されます
