ブログデザイン備忘録 ~ポップアップ、Window制御関数

1. Javascriptの関数体系
2. ポップアップ表示
3. Windowの制御
3. まとめ

　今回からはJavascript関数の機能について紹介していく。実行できるものは、サンプルとして記事内に設置し、実行しづらいものは機能のみを紹介する。

1. Javascriptの関数体系

　Javascriptの関数は制御するオブジェクト名.関数名(引数)という形で呼び出す。オブジェクト名としてはwindow, document, frame, history, location, form, link, image, anchor, appletなどユーザーインターフェースにかかわるものと、String, Array, Date, Mathなどの変数の内部処理に用いるものがある。

2. ポップアップ表示

　以下ボタンをイベントハンドラonClickを使用してクリックすると関数を呼び出す仕組みにしている。動作確認として各ボタンをクリックするとポップアップが表示されるので注意してほしい。表示以外の処理は入れてないのでOKボタン等を押せば閉じることができる。

window.alert()はOKのみを表示するポップアップでメッセージは引数内に記述する。

<button type="button" onClick=window.alert("Click!")>アラートボタン</button>

window.confirm()はOKとキャンセルを表示するポップアップでメッセージは引数内に記述する。

<button type="button" onClick=window.confirm("確認ボタン")>確認ボタン</button>

window.prompt()はテキスト入力ボックスを表示するポップアップでメッセージは引数内に記述する。

<button type="button" onClick=window.prompt("テキスト入力")>テキストボタン</button>

ステータスバーにメッセージを表示するwindow.defaultStatusとwindow.statusがある。(Chrome環境ではうまく動作しない?) コード例のみ示すが、

<body onLoad="window.defaultStatus='ようこそ！'">　</body>

<button type="button" onmouseover="window.status='onMouseOver'; return true;">Statusボタン</button>

3. Windowの制御

Windowの開閉などの制御を行う関数を紹介する。 window.open()は新しい空のwindowを開く。(Chromeだとタブ)

<button type="button" onClick=window.open("","sample")>Window Open</button>

ボタンを押すと空のWindow、タブが開くことに注意。

window.close()はWindowを閉じる。

以下Chromeでは有効にならないが

window.resizeBy() は指定した幅・高さだけWindowの大きさを変える window.resizeTo() は指定した幅・高さのサイズにWindowの大きさを変える。Topへ戻るボタンの制御などに使用する。

window.scrollBy()は指定したX,Y距離だけスクロールする。

<button type="button" onClick=window.scrollBy(0,-200)>ScrollBy</button>

window.scrollTo()またはwindow.scroll()は指定したX,Y座標へスクロールする。どちらも同じ効果が得られる。

<button type="button" onClick=window.scrollTo(0,200)>ScrollTo</button>

<button type="button" onClick=window.scroll(0,200)>Scroll</button>

window.focus()はWindowにフォーカスを当て、window.blur()はフォーカスをはずす。

setInterval(func,time)は一定時間ごとにfuncを実行する。またclearInterval()はsetInterval()で設定したタイマーを解除する。なお今回はsetInterval()などの関数機能のみ紹介し、scriptの詳細は省略する。

<script>
var s = 0;
function countSecond() {
    s++;
    if (s > 5) {
        clearInterval();
        document.getElementById("sample1").innerHTML = "秒数カウントを終了";
    } else {
        document.getElementById("sample1").innerHTML = s+"秒";
    }
}
</script>
<div id="sample1">
<button onclick="setInterval('countSecond()',1000)">5秒カウント</button>
</div>

setTimeout(func,time)は一定時間経過したらfuncを1度実行する。またclearTimeout()はsetTimeout()で設定したタイマーを解除する

<script>
var n = 0;
function countSecond2() {
    n++;
    document.getElementById("sample2").innerHTML = n+"回目の2秒が経過";
    countUp();

    function countUp() {
        if (n > 3) {
            clearTimeout();
            document.getElementById("sample2").innerHTML = "お知らせを終了";
        } else {
            setTimeout('countSecond2()',2000);
        }
    }
}
</script>
<div id="sample2">
<button onclick="setTimeout('countSecond2()',2000)">2秒ごとに3回お知らせ</button>
</div>