■JavaScriptのサンプル■

■例1　直前のページに戻る■

自分のあるページを複数のページからリンクを貼っている場合，アクセスした人が前に参照していたページに戻るために以下のようにすることができる．ブラウザーの「BACK(戻る)」と同じ機能をページ上に作ることができる．いままでに作成したすべてのHTMLファイルに適用できる．

（例１）フォームのボタンを用いる例

ボタンの「INPUT」タグの中に「onClick="history.back()"」という event handlerを入れる．

とページ中に記述すると，

のように表示される．

（例２）フォームを用いない例

ボタンを使わない普通のリンク形式である．アンカータグで通常「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>...</BODY>内の適所の記述