「JavaScript高級プログラム設計」BOM

11508 ワード

javascript

1、windowオブジェクト
BOMの核心はwindowで、ブラウザの一例を表しています.ブラウザでは、windowオブジェクトは二重の役割を持ち、JavaScriptを通じてブラウザウィンドウにアクセスするインターフェースであり、ECMAScriptが規定するGlobalオブジェクトでもある.
グローバルスコープ
グローバルスコープで宣言した変数と関数はすべてwindowオブジェクトの属性と方法になります.

var age = 21;
function sayAge(){
    alert(this.age);
}

alert(window.age);  //21
sayAge();           //21
window.sayAge();    //21

ウィンドウサイズ

//        
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;
    }
}

ポップアップウィンドウのブロック
ブラウザの拡張や他のプログラムがウィンドウをイジェクトするのを阻止したら、Windows.openが流暢に流れているためにエラーが発生します.したがって、薬箱は正確にポップアップウィンドウが遮蔽されているかどうかを検出します.リターン値を検出すると同時に、window.openの呼び出しを一つのtry-catchブロックに入れなければなりません.

var blocked = false;

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

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

間欠呼び出しとタイムアウト呼び出し
javascriptは単一スレッド言語であるが、タイムアウト値(指定された時間後にコードを実行する)と間欠値(指定された時間ごとにコードを実行する)を設定することにより、コードを特定の時刻に実行させることができる.

//      
var timeoutId = setTimeout(function(){
    alert("Hello World.");
},1000);

//    
clearTimeout(timeoutId);

//      
var num;
var max = 10;
var intervalId = null;
function incrementNumber(){
    num++;

    //         max，           
    if(num == max){
        clearInterval(intervalId);
        alert("Done");
    }

    //               
    //         max，          
    if(num < max){
        setTimeout(incrementNumber,500);
    } else {
        alert("Done");
    }
}

intervalId = setInterval(incrementNumber,500);
setTimeout(incrementNumber,500);

システムダイアログ
三つの方法を含みます.alert()、confirm()とprompt().

//alert        
alert("Hehe");

//confirm()
if(confirm("are you sure?")){
    alert("Yes");
} else {
    alert("No");
}

//prompt()
var result = prompt("what is your name?","");
if(result != null){
    alert("wlecome, "+result);
}

2、locationオブジェクト
locationは、現在のウィンドウにロードされているドキュメントに関する情報を提供する最も有用なBOMオブジェクトであり、また、いくつかのナビゲーション情報とURLを独立したセグメントとして解析し、開発者が異なる属性でこれらのセグメントにアクセスできるようにする.
属性名
例
説明
sh
「〹contets」
URLのhashに戻ります
ホスト
「wwwww.wrox.com:80」
サーバ名とポートを返します.
hostname
「wwww.wrox.com」
ポート番号がないサーバ名を返します.
href
「http://www.wrox.com」
ロードページの完全なURLを返します.
pathname
「/WileyCDA/」
URLのディレクトリとファイル名を返します.
ポーター
「8080」
URLで指定されたポート番号を返します.
protocol
「http:」
ページで使用するプロトコルを返します.
search
「?q=javascript」
URLクエリを返す文字列
locationのプロパティを変更するたびに、ページは新しいURLで再読み込みされます.
クエリー文字列のパラメータ
location.searchは、疑問符からURLの最後からすべてのコンテンツに戻るが、一つ一つのクエリ文字列パラメータにアクセスすることはできない.クエリー文字列を解析し、すべてのパラメータを含むオブジェクトを返す関数を作成できます.

function getQueryStringArgs(){
    //               
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
    //       
    args = {},
    //     
    items = qs.length ? qs.spilt("&") : [],
    item = null,
    name = null,
    value = null,
    i = 0,
    len = items.length;

    //         args   
    for(i=0;i"="];
        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オブジェクトを使うと、ブラウザの位置を多くの方法で変えることができます.最も一般的な方法はassignです.

location.assign("http://www.wrox.com");
//           assign()         
window.location = "http://www.wrox.com";
location.href = "http://www.wrox.com";

locationオブジェクトの属性を変更してURLを変更すると、ブラウザの履歴に新しいレコードが作成されますので、「後戻り」ボタンをクリックして前のページにナビゲーションします.このような行為はreplace()によって無効にできます.


<html>
<head>
    <title>testtitle>
head>
<body>
    <script>
        setTimeout(function(){
            location.replace("http://www.wrox.com");
        },1000);
    script>
body>
html>

上のページをブラウザに読み込むと、1秒後にwww.wrox.comにリダイレクトされ、「後退」ボタンは無効状態になります.もう一つの方法は位置と関係があります.reload()は現在のページを再読み込みする役割を果たしています.

location.reload();      //    (        )
location.reload(true);  //    (        )

3、ナビゲートの対象
navigatorオブジェクトはクライアントを識別するためのブラウザです.
検出プラグイン

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

//         QuickTime
function hasQuickTime(){
    var result = hasPlugin("QuickTime");
    if(!result){
        result = hasIEPlugin("QuickTime.QuickTime");
    }
    return result;
}

登録処理プログラム
HTML 5にはナビゲートオブジェクトのための二つの方法が追加されています.レギター・コンテント・ハードラー()とレギター・プロダクト・ハードラー().
4、history対象
historyオブジェクトはユーザーがインターネットを利用した履歴を保存しています.同時にwindowオブジェクトの属性です.

//    
history.go(-1);
history.back();
//    
history.go(1);
history.forward();
//    
history.go(2);

//      wrox.com
history.go("wrox.com");

//length  
if(history.length == 0){
    //              
}

ECMAScript 6、es 6 getとsetの違い