初心者のためのJavaScript 基礎知識メモ(2)

ウィンドウオブジェクト

window オブジェクトはグローバルスコープとして機能するだけでなく、ブラウザウィンドウも表します。

window オブジェクトには 2 つの役割があります。js を介してブラウザウィンドウにアクセスするためのインターフェイスであり、ECMAScript で指定される Global オブジェクトです。

グローバルスコープで宣言されたすべての変数と関数は、ウィンドウオブジェクトのプロパティとメソッドになります。グローバル変数は delete 演算子を使用して削除できませんが、ウィンドウオブジェクトに直接定義されたプロパティは削除できます。

    var age = 29;
    window.color = "red";

    //throws an error in IE < 9, 在其他浏览器中返回false
    delete window.age;
    //throws an error in IE < 9, 在其他浏览器中返回true
    delete window.color;    //returns true

    alert(window.age);      //29
    alert(window.color);    //undefined

窓関係

各フレームには独自のウィンドウオブジェクトがあり、フレームコレクションに保存されます。

<head>
    <title>Frameset Example</title>
</head>
<frameset rows="160,*">
    <frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="anotherframe.htm" name="leftFrame">
        <frame src="yetanotherframe.htm" name="rightFrame">
    </frameset>
</frameset>

最上位のオブジェクトは常に、ブラウザウィンドウである最上位のフレームを指します。トップに関連する別のウィンドウオブジェクトが親です。フレームがない場合、親は先頭と等しくなければなりません

<head>
    <title>Frameset Example</title>
</head>
<frameset rows="100,*">
    <frame src="frame.htm" name="topFrame">
    <frameset cols="50%,50%">
        <frame src="anotherframe.htm" name="leftFrame">
        <frame src="anotherframeset.htm" name="rightFrame">
    </frameset>
</frameset>

窓の位置

screenLeft プロパティと screenTop プロパティは、それぞれ画面の左端と上端に対するウィンドウの位置を示すために使用されます。

<body>
    <p>This will open a new window/tab:
    <input type="button" value="Go to Wrox.com" onclick="window.open('http://www.wrox.com/')"></p>
    <p>This will open in the current window/tab:
    <input type="button" value="Go to Wrox.com" onclick="window.open('http://www.wrox.com/', '_self')"></p>
</body>

moveTo() と moveBy() を使用して、ウィンドウを新しい位置に正確に移動します。これらはすべて 2 つのパラメータを受け取り、moveTo() は新しい位置の x および y 座標値を受け取り、moveBy() は水平方向と垂直方向に移動したピクセル数を受け取ります。

ウィンドウサイズ

window オブジェクトには、ブラウザウィンドウの内側の幅と高さを取得できる innerWidth プロパティと innerHeight プロパティがあります。コンテナ内のページビュー領域のサイズを示します。内部の幅と高さは、メニューバー、ツールバー、境界線などのプレースホルダー要素を削除した後に Web ページを表示するために使用される正味の幅と高さを指します。

同様に、ブラウザウィンドウ全体の幅と高さを取得できる、outerWidth プロパティとouterHeight プロパティもあります。ブラウザウィンドウ自体の寸法を返します。

Chromeでは、innerWidthとinnerHeightはouterWidthとouterHeightと同じ値を返します。

ブラウザウィンドウ自体のサイズは決定できませんが、ページビューポートのサイズは取得できます。

    var pageWidth = window.innerWidth,
        pageHeight = window.innerHeight;

    if (typeof pageWidth != "number"){
        if (document.compatMode == "CSS1Compat"){
            pageWidth = document.documentElement.clientWidth;
            pageHeight = document.documentElement.clientHeight;
        } else {
            pageWidth = document.body.clientWidth;
            pageHeight = document.body.clientHeight;
        }
    }

    alert("Width: " + pageWidth);
    alert("Height: " + pageHeight);

ブラウザウィンドウのサイズは、resizeATo() メソッドとresizeBy() メソッドを使用して変更できます。2 つのパラメータを受け取り、resizeTo() はブラウザウィンドウの新しい幅と高さを受け取り、resizeBy() は新しいウィンドウと元のウィンドウの幅と高さの差を受け取ります。

ウィンドウに移動して開く

window.open() メソッドを使用して、特定の URL に移動するか、新しいブラウザウィンドウを開きます。このメソッドは、ロードする URL、ウィンドウターゲット、属性文字列、ブラウザ履歴内で現在ロードされているページを新しいページで置き換えるかどうかを示すブール値の 4 つのパラメータを受け取ることができます。

window.open(" http://www.baidu.com/ ", "topFrame")
//以下と同等

window.open() は新しいウィンドウへの参照を返し、close() メソッドを呼び出すと新しく開いたウィンドウを閉じることができます。新しく作成されたウィンドウオブジェクトには、それを開いた元のウィンドウオブジェクトを保持する opener プロパティがあります。

opener 属性を null に設定すると、新しく作成されたタブはそのタブを開いたタブと通信する必要がなく、別のプロセスで通信できることがブラウザーに伝えられます。

ポップアップウィンドウがブロックされていないか確認してください

    var blocked = false;
    try {
        var wroxWin = window.open("http://www.wrox.com", "_blank");
        if (wroxWin == null){
            blocked = true;
        }
    } catch (ex){
        blocked = true;
    }

    if (blocked){
        alert("The popup was blocked!");
    }

断続的な通話とタイムアウト通話

タイムアウト呼び出しでは、setTimeout() メソッドを使用する必要があります。このメソッドは、実行するコードとミリ秒単位の時間という 2 つのパラメーターを受け取ります。

    //不建议使用!
    setTimeout("alert('Hello world!') ", 1000);

    //推荐方法
    setTimeout(function() { 
        alert("Hello world!"); 
    }, 1000);

指定された時間が経過する前に clearTimeout() が呼び出される限り、タイムアウト呼び出しは完全にキャンセルできます。

    //设置超时调用
    var timeoutId = setTimeout(function() {
        alert("Hello world!");
    }, 1000);

    //注意：把它取消
    clearTimeout(timeoutId);

タイムアウト呼び出しはグローバルスコープで実行されるため、関数の this 値は非厳密モードではウィンドウオブジェクトを指しますが、厳密モードでは未定義になります。

断続的な呼び出し: キャンセルされるか、ページがアンロードされるまで、指定された間隔でコードの実行を繰り返します。実行されるコードと各実行前に待機するミリ秒数の 2 つのパラメーターを受け取ります。

    //不建议使用!
    setInterval("alert('Hello world!') ", 10000);

    //推荐方法
    setInterval(function() { 
        alert("Hello world!"); 
    }, 10000);

まだ実行されていない断続的な呼び出しをキャンセルするには、clearInterval() メソッドを使用して、対応する断続的な呼び出し ID を渡すことができます。

    var num = 0;
    var max = 10;
    var intervalId = null;

    function incrementNumber() {
        num++;

        //如果执行次数达到max设定的值，则取消后续尚未执行的调用
        if (num == max) {
            clearInterval(intervalId);
            alert("Done");
        }
    }

    intervalId = setInterval(incrementNumber, 500);

変数 num は 0.5 秒ごとに増加し、最大値に達すると通話はキャンセルされます。

    var num = 0;
    var max = 100;

    function incrementNumber() {
        num++;

        //如果执行次数未达到max设定的值，则设置另一次超时调用
        if (num < max) {
            setTimeout(incrementNumber, 500);
        } else {
            alert("Done");
        }
    }

    setTimeout(incrementNumber, 500);

システムダイアログボックス

ブラウザはシステムダイアログボックスを呼び出し、alert()、confirm()、prompt() メソッドを通じてユーザーにメッセージを表示します。

alert(): 文字列を受け取り、それをユーザーに表示します。

confirm()：「OK」の表示に加えて「キャンセル」ボタンも表示されます。

プロンプト(): プロンプトボックス。ユーザーにテキストの入力を求めるために使用されます。[OK] ボタンと [キャンセル] ボタンに加えて、ユーザーが内容を入力するためのテキスト入力フィールドが表示されます。ユーザーに表示されるテキストプロンプトとテキスト入力フィールドのデフォルト値の 2 つのパラメーターを受け取ります。

//显示“打印”对话框
window.print();
//显示“查找”对话框
window.find();

位置オブジェクト

位置オブジェクトは、ウィンドウオブジェクトの属性でもあり、ドキュメントオブジェクトの属性でもあります。

クエリ文字列を解析し、すべてのパラメータを含むオブジェクトを返す関数を作成します。

    function getQueryStringArgs(){

        //取得查询字符串并去掉开头的问号
        var qs = (location.search.length > 0 ? location.search.substring(1) : ""),

            //保存数据的对象
            args = {},

            //取得每一项
            items = qs.length ? qs.split("&") : [],
            item = null,
            name = null,
            value = null,

            //在for循环中使用
            i = 0,
            len = items.length;

        //逐个将每一项添加到args对象中
        for (i=0; i < len; i++){
            item = items[i].split("=");
            name = decodeURIComponent(item[0]);
            value = decodeURIComponent(item[1]);

            if (name.length){
                args[name] = value;
            }
        }

        return args;
    }

    //假设查询的字符串是 ?q=javascript&num=10

    var args = getQueryStringArgs();

    alert(args["q"]);     //"javascript"
    alert(args["num"]);   //"10"

ブラウザの場所は、location オブジェクトを使用してさまざまな方法で変更できます。

location.assign(“ http://www.baidu.com “);

window.location=”http://www.baidu.com”;

location.href=”http://www.baidu.com”;

URL は、ハッシュ、検索、ホスト名、パス名、およびポートの属性を新しい値に設定することで変更できます。これらの方法で変更を加えた後、ブラウザの履歴に新しいレコードが生成され、ユーザーは「戻る」をクリックして前のインターフェースに移動できます。この動作を無効にするには、replace() メソッドを使用します。このメソッドは 1 つのパラメータ (移動先の URL) を受け入れます。結果として、履歴に新しいレコードは生成されません。

reload(): 現在表示されているページをリロードします。サーバーから強制的にリロードするには、次の手順を実行します。

location.reload();//有可能从缓存中加载
location.reload(true);//从服务器重新加载

location.href を使用して取得できます。URL の各部分の値を取得するには、次のように記述できます。

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'

新しいページをロードするには、location.assign() を呼び出します。現在のページをリロードしたい場合は、location.reload() メソッドを呼び出すと非常に便利です。

ナビゲーターオブジェクト

ナビゲータオブジェクトはブラウザ情報を表します。最も一般的に使用される属性は次のとおりです。

navigator.appName: ブラウザ名;
navigator.appVersion: ブラウザのバージョン;
navigator. language: ブラウザによって設定された言語。
navigator.platform: オペレーティングシステムの種類;

navigator.userAgent: ブラウザによって設定されたユーザーエージェント文字列。

//检测插件（在IE中无效）
function hasPlugin(name){
    name = name.toLowerCase();
    for (var i=0; i < navigator.mimeTypes.length; i++){
        if (navigator.mimeTypes[i].name.toLowerCase().indexOf(name) > -1){
            return true;
        }
    }

    return false;
}

//检测 flash
alert(hasPlugin("Flash"));

//检测 quicktime
alert(hasPlugin("QuickTime"));

//detect Java
alert(hasPlugin("Java"));

この例では、hasPlugin() は 1 つのパラメーター、つまり検出されるプラグインの名前を受け取ります。

    //检测IE中的插件
    function hasIEPlugin(name){
        try {
            new ActiveXObject(name);
            return true;
        } catch (ex){
            return false;
        }
    }

    //检测 flash
    alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"));

    //检测 quicktime
    alert(hasIEPlugin("QuickTime.QuickTime"));

この例では、hasIEPlugin() はパラメータとして COM 識別子のみを受け取ります。

    //plugin detection - doesn't work in IE
    function hasPlugin(name){
        name = name.toLowerCase();
        for (var i=0; i < navigator.plugins.length; i++){
            if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
                return true;
            }
        }

        return false;
    }        

    //plugin detection for IE
    function hasIEPlugin(name){
        try {
            new ActiveXObject(name);
            return true;
        } catch (ex){
            return false;
        }
    }

    //detect flash for all browsers
    function hasFlash(){
        var result = hasPlugin("Flash");
        if (!result){
            result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
        }
        return result;
    }

    //detect quicktime for all browsers
    function hasQuickTime(){
        var result = hasPlugin("QuickTime");
        if (!result){
            result = hasIEPlugin("QuickTime.QuickTime");
        }
        return result;
    }

    //detect flash
    alert(hasFlash());

    //detect quicktime
    alert(hasQuickTime());

ナビゲータの情報はユーザーが簡単に変更できるため、JavaScriptで読み取った値が必ずしも正しいとは限りませんのでご注意ください。ブラウザーごとに異なるコードを記述するために、初心者の多くは、ブラウザーのバージョンを確認するために if を使用することを好みます。次に例を示します。

var width;
if (getIEVersion(navigator.userAgent) < 9) {
    width = document.body.clientWidth;
} else {
    width = window.innerWidth;
}

ただし、これにより不正確な判断が行われ、コードの保守が困難になる可能性があります。正しい方法は、存在しないプロパティに対して未定義を返す JavaScript の機能を最大限に活用し、短絡演算子 || を直接使用して計算することです。

var width = window.innerWidth || document.body.clientWidth;

履歴オブジェクト

履歴オブジェクトはブラウザの履歴を保存します。JavaScript は履歴オブジェクトの back() または forward() を呼び出すことができます。これは、ユーザーがブラウザの「戻る」または「進む」ボタンをクリックするのと同じです。
go() メソッドを使用して、ユーザーの履歴内を前後に任意に移動します。

history.go(-1);//后退一页
history.go(1);//前进一页
history.back();//后退一页
history.forword();//前进一页