■JavaScriptのサンプル■
■例1 直前のページに戻る■
自分のあるページを複数のページからリンクを貼っている場合,アク セスした人が前に参照していたページに戻るために以下のようにすることがで きる.ブラウザーの「BACK(戻る)」と同じ機能をページ上に作ることができる. いままでに作成したすべてのHTMLファイルに適用できる.
(例1)フォームのボタンを用いる例
ボタンの「INPUT」タグの中に「onClick="history.back()"」という event handlerを入れる.
<FORM> <INPUT TYPE="button" VALUE="前ページへ戻る" onClick="history.back()"> </FORM> |
とページ中に記述すると,
のように表示される.
(例2)フォームを用いない例
ボタンを使わない普通のリンク形式である.アンカータグで通常 「http://...」と書く部分に「javascript:history.back()」と書く.
<A HREF="javascript:history.back()">前ペー ジに戻る</A> |
とページ中に記述すると,
前ページに戻る |
のように表示れる.。
■例2 リンクの説明をステータスバーに表示させる■
ページ内のリンク上にマウスのポインターを合わせると,そのリンク先のペー ジがどういったページなのかの説明をステータスバーに表示させる例である.ま ずHEAD部分でsetStatusというfunctionを定義して,リンク先を指定するアンカー タグ(A HREF=で始まる部分)に「onMouseOver="setStatus('ここに説明を書く'); return true"」を入れる.
ただし,ステータスバーにテロップのような表示が出力されるようになって いるページの場合ではこれは使えない。
(例)(ヘッダ部分の記述例)
<HEAD> <TITLE>JavaScript: Discriptions of links on status bar</TITLE> <script type="text/javascript"> function setStatus(msg) { status = msg } </script> </HEAD> |
(例)(BODY部分の記述例)
<A HREF="index.html" onMouseOver="setStatus('hogehoge
のページだぜ');return true">hogehogeのページ</A> <BR> <A HREF="javascript.html" onMouseOver="setStatus('これは 別ページの例だよ');return true">何か別のページ</A> <BR> <A HREF="http://www.nit.ac.jp/" onMouseOver="setStatus('さらに別ページだぜ');return true">さらに別のページ</A> |
(次のリンクの上にマウスカーソルを合わせてみよ)
hogehogeのページ 何か別のページ さらに別のページ |
この例は、実はセキュリティ上の問題を提起している。ステータスバー にまったく別のサイトのURLを偽装させることが可能だからである。例えば、有 名サイトを騙って詐欺を目的のサイトへ誘導することが可能である。
もちろん、このテクニックだけではアドレスバーを偽装することができない ので、注意深い人ならば問題ないが、XSS脆弱性があるサイトに対して複合的に 用いることで、フィッシング詐欺を補助する効果が考えられる。
このため、Firefoxなど他のブラウザでは、これが動作しないようにされてい るものもある
■例3 ファイルの更新年月日を表示■
インターネットのホームページでよく「Last Updated on 日付」と書いてあ るページがよくある.これらは通常,手書きで書き込むが,JavaScriptを使うと いちいち手入力しなくても,ファイルの更新年月日を自動的に表示してくれるよ うになる.下記スクリプトの例は関数を定義せずに利用可能なため,いままでに 作成したHTMLファイルすべてに埋め込むことができる.
ただしこの例も、MozzilaやFirefoxでは動作がおかしいので注意
単純な記述例
ページ中で次のように記述する
<SCRIPT type="text/javascript"> document.write("Last updated on " + document.lastModified +".") </SCRIPT> |
下のように表示される
書式を凝った例
スクリプトは以下の通り.
<SCRIPT type="text/javascript"> update = new Date(document.lastModified) upMonth = update.getMonth() + 1 upDate = update.getDate() upYear = update.getYear() document.writeln("<I>Last Updated: " + upMonth + "/" + upDate + "/" + upYear + "</I>") </SCRIPT> |
■例4 流れるメッセージ
「SIZE=""」のところで長さを調節する.BODYタグに「onLoad=」というevent handlerを入れる.
下の例ではメモリー不足を防止するため,一定時間経つと表示が止まるようにしてある.各自が用いいるときにはこの数字を適当に変えて利用せよ.自己紹介のページに用いると良いであろう.
流れるメッセージ表示例
ヘッダ内(<head></head>)に記述するスクリプト
<SCRIPT type="text/javascript"> var msg = "ステータスバーにメッセージが表示されると見ている人がリンク先の" msg += "表示も見れなくなるしこっちの方がいいですよね。" var delay = 150 //ここの数字を変えることによって表示速度を調整 var timerId var i = 0 function scrollMsg() { if (i <= 200) { //この数字が大きいほど長い間続く i++ document.forms[0].banner.value = msg //1番目のフォームなら[0]、2番なら[1]、3番なら[2] msg = msg.substring (2, msg.length) + msg.substring (0, 2) timerId = setTimeout("scrollMsg()", delay) } else { clearTimeout(timerId) } } </SCRIPT> |
<body>タグのオプション指定
<BODY onLoad="scrollMsg()"> |
<BODY>...</BODY>内の適所の記述
<FORM> <INPUT TYPE="text" NAME="banner" SIZE="80"> </FORM> |