ウィンドウ・オブジェクトとBOMとBOM



Windowオブジェクト


Windowオブジェクトは、브라우저要素、JavaScriptエンジン、および변수のすべてを含むオブジェクトです.
ネットブラウザを見ると、上にラベルがあり、アドレスウィンドウがあり、お気に入りもあります.次に、Webサイトが表示されます.ここで,ブラウザ全体を担当するのはWindowオブジェクト,サイトのみを担当するのはDocumentオブジェクトである.

コンソールのwindow.簡単でも、多くのオブジェクトのプロパティやメソッドが表示されます.
その中で最も代表的なのはscreen,location,history,documentなどのオブジェクトである.方法はParseInt、isNaNなどがあります.
しかし、ここでは通常ParseInt()メソッドは使用されませんか?もしそうなら、使ったことがありますが、windowです.parseInt()を使うべきです.
原因を探してみると、windowはすべてのオブジェクトの祖先であることがわかります.전역객체と呼ばれ、すべてのオブジェクトが含まれているため、ウィンドウ自体は省略できます.そこで実際に調べてみると、Windowsオブジェクトの内部には、String、Boolean、Number、Object、Function、Arrayなどの자료형が含まれています.

一般的なウィンドウオブジェクトのメソッドとプロパティの例


window.close()
現在のウィンドウを閉じます.さっきこのwindowは省略できると言ったので、直接close();いいですよ.しかし混同される可能性もあるので、プロジェクト進行時に貼るべきでしょうか?
window.open()
新しいウィンドウを開きます.ポップアップウィンドウとして開くこともできます.
新しいラベルで開くこともできます.最初のパラメータ受信アドレス、2番目のパラメータを使用して新しいラベルを開くか、現在のラベルで開くかどうかを設定できます.3番目のパラメータは、新しいウィンドウのさまざまな設定を渡すこともできます.
open('https://www.google.com'); // 새 탭
open('https://www.google.com', '_self'); // 현재 탭
open('', '', 'width=200,height=200'); // 가로세로 200px의 팝업창
window.setTimeout(), window.setInterval()
遅延関数の実行?あなたを助けます.
setTimeoutは遅延であり、
setIntervalは指定秒ごとに繰り返されます.
setTimeout(function() {
  alert('1초 뒤');
}, 1000);

setInterval(function() {
  console.log('1초마다');
});
window.getComputedStyle()
現在適用されているCSS属性値がわかります.
console.log(getComputedStyle(document.getElementById('app-root')));

DOM vs BOM


DOM
DOMはDocumentオブジェクトモデルです.
HTMLとXML用のAPIです.
DOMはページ全体を「ノードをツリー構造で表現し、修正、削除などの操作を行う」ようにします.
BOM
Webブラウザ環境における様々な機能を対象としたモデルでは,ほとんどの機能がブラウザで実現されているが,標準が存在しないため,ブラウザごとに詳細が異なるという欠点がある.
BOMを使用して、Webブラウザのボタン、URLアドレス入力ウィンドウ、タイトルバーなどのWebブラウザウィンドウとWebページの一部を制御します.
Windowsオブジェクトから簡単にアクセスできます.

DOMは理解できますがBOMで何ができますか?


ブラウザ自体がコントロールなので、以下の例を挙げます.
ユーザーが
  • をクリックすると、ブートウィンドウが表示されます!?
  • 現在のurl位置と接続履歴!?
  • プレイヤーがログインする環境を知りたい!?
  • ex)
    window.onbeforeunload = function() {
        return '작성 중인 메시지가 있습니다.'
    }
    ウィンドウを閉じようとすると、次のようなブートウィンドウを開くことができます.

    注意:
    https://vkanakaraj.wordpress.com/2009/12/18/javascript-vs-dom-vs-bom-relationship-explained/
    https://www.geeksforgeeks.org/html-vs-xml/