2024.09.19-20 (Day 10,11) - JavaScript Implicit Object 2

2. 브라우저 내장 객체

브라우저 내장 객체

• 브라우저 내장 객체는 브라우저에서 제공하는 자바스크립트 내장 객체임으로

브라우저에서 실행되는 프런트 웹 애플리케이션에서만 사용할 수 있다.

window : 브라우저 창을 지칭하는 객체
document : 브라우저에 출력되는 HTML 문서를 지칭하는 객체
history : 브라우저의 인터넷 방문 기록을 지칭하는 객체
screen : 브라우저가 떠 있는 스크린 창을 지칭하는 객체
navigator : 브라우저에 대한 정보를 제공하는 객체
location : 브라우저의 출력 URL 을 지칭하는 객체

• 브라우저의 객체들은 모두 window 의 객체들로 window 부터 계층 구조로 구성되어 있다

• document, history, screen, navigator, location 모두 window 에 포함된 객체들이다.

그러므로 이 객체들을 이용할 때 window.document 혹은 window.history 등으로 이용해야 한다.

• 브라우저에서 실행되는 모든 자바스크립트의 글로벌 객체가 window 이며 이 window 객체는 생략할 수 있다.

즉 window.document 로 작성해야 하지만 window 를 생략하고 document 만 작성한다.

window

• window 객체는 브라우저 창을 지칭하는 객체로 브라우저에서 실행되는 애플리케이션 모든 곳에서 이용이가능한 객체이다.

alert() 함수 - window 객체의 함수

console - window 에 선언된 객체

document, location, navigator, history, screen - window 에 선언된 객체

▼ window 프로퍼티

• 브라우저의 사이즈 정보가 필요한 경우 innerWidth, innerHeight 혹은 outerWidth, outerHeight 를 이용한다.

outerWidth, outerHeight 는 브라우저 창 자체의 사이즈이며 innerWidth, innerHeight 는 스크롤 바까지 포함한 HTML 문서가 출력되는 부분의 사이즈이며 또한 브라우저가 스크린에서 어느 위치에 보이고 있는지를 screenTop, screenLeft 를 이용해 알아볼 수 있다.

▼ window 함수

▷ window 함수 – open()

• open() 함수를 이용해 새로운 URL 을 출력시킬 수 있는데 이 URL 의 HTML 문서가 새로운 브라우저 창이열리고 그 창에서 떠야 하는지 아니면 현재 창에 떠야 하는지를 지정해 주어야 한다.

• 브라우저 창에서 새로운 브라우저 창을 띄우면 기존 브라우저 창은 “부모 창(parent)” 이 되며 새로 뜬 브라우저는 “자식 창(child)” 이 된다.

• open(url) : url 만 지정해서 open() 함수 호출
open(url, target) : url 과 target 을 지정해서 open() 함수 호출
open(url, target, windowFeatures) : url, target 과 다양한 정보를 설정해서 open() 함수 호출

• open() 함수를 호출하면서 target 을 매개변수로 지정해서 새로운 url 이 어느 창이 떠야 하는지를 제어할수 있다.

target 정보를 지정하지 않으면 기본 _blank 가 되며 _blank 는 창을 열고 그곳에 url 을 출력하는 target 정보이다._

_ blank : 새 창이 열리고 그곳에 url 출력
_parent : 부모 창에 url 출력
_self : 자신 창에 url 출력

• open() 함수를 호출하면서 url, target 정보 이외에 windowFeatures 정보를 설정할 수 있는데 windowFeatures 에 창에 대한 정보를 설정할 수 있습니다.

width, height : 새로운 브라우저 창의 사이즈
left, top : 새로운 브라우저 창이 뜨는 위치

<body>
  <button onclick="myOpen1()">open - new window</button>
  <button onclick="myOpen2()">open - self</button>
  <button onclick="myOpen3()">open - option</button>
  <button onclick="myClose()">close</button>
  <button onclick="myScroll()">scroll</button>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
  <h1>Test</h1>
</body>

//window 의 기본 정보 추출
console.log(window.innerWidth, window.innerHeight)//520 298
console.log(window.outerWidth, window.outerHeight)//1057 725
console.log(window.screenLeft, window.screenTop)
//스크롤 정보는 스크롤 이벤트가 발생한 경우만 유지
window.addEventListener('scroll', () => {
  console.log(window.scrollX, window.scrollY)
})

//새로운 tap으로 새창이 뜬다
//target 을 지정하지 않으면 기본이 _blank - 새창
function myOpen1() {
  window.open('http://www.google.com')
}

function myOpen2() {
  window.open('http://www.google.com', '_self')
}

//자식창 지칭 객체
let childWindow

const myOpen3 = () => {
  childWindow = window.open(
    'http://www.google.com',
    '_blank',
    'left=100,top=100,width=300,height=400'
  )
  if(childWindow == null){
    alert('팝업이 차단되었습니다. 해제해 주세요.')
  }
}

▷ window 함수 – close()

• close() 함수를 이용해 브라우저 창을 닫을 수 있다.

• 부모창에서 자식창을 open() 띄우면서 자식창을 임의 객체에 저장해 놓고, 그 객체를 이용해 close() 함수를호출하면 자식창이 닫힌다.

const myClose = () => {
  console.dir(childWindow)
  childWindow.close()
}

▷ window 함수 – scrollBy()

function myScroll() {
  window.scrollBy(100, 100)
}

▷ HTML 문서의 메모리 구조 - opener 를 이용해 부모창의 변수 함수 이용하기

• open() 함수로 새창을 여는 경우 경우에 따라 자식창에서 부모창의 데이터가 필요할 수도 있고 반대로 부모창에서 자식창의 데이터가 필요할 수도 있다.

open() 함수에 의해 자식창이 열리면 부모창과 자식창이 상호 변수 혹은 함수에 접근해서 하는 경우가 있는데 이를 위해 opener 라는 객체를 제공한다.

또한 부모창에서 자식창을 open() 함수로 여는 경우 자식창에서 자신을 연 부모창을 지칭하는 객체이다.

//index.html (부모)

<script>
    //child 창의 html - js 에서 접근할 데이터, 함수
    //자식창에서 접근하려면 var 로 선언, let 으로 선언하면 undefined
    var mainData = 10
    function mainFun() {
      console.log('mainFun call....')
    }

    function goChild() {
      window.open('child.html','_blank', 'left=100,top=100,width=300,height=400')
    }

    function getChildData() {
      //자식창의 변수, 함수 접근
      //자식창에서 지정한 이름으로 접근
      console.log(child.childData)
      child.childFun()
    }
  </script>
</head>
<body>
  <h1>I am Parent Page!!</h1>
  <button onclick="goChild()">go child</button>
  <button onclick="getChildData()">get child data</button>
</body>

▷ HTML 문서의 메모리 구조 - opener 를 이용해 자식창의 변수 함수 이용하기

• 부모창에서 open() 으로 띄운 자식창에 선언된 변수, 함수가 이용되어야 하는 경우가 있다.

이것이 가능하려면 먼저 자식창의 자바스크립트 코드에서 opener 객체를 이용해 자신의 window 를 지칭하는 객체를 선언해 주어야 한다.

▷ HTML 문서의 메모리 구조 - opener 를 이용해 부모창의 URL 변경하기

• opener 객체를 이용해 자식창에서 부모창의 URL 을 변경해서 특정 화면으로 이동하게 할 수 있다.

  <script>
    function getMainData() {
      //window.open() 에 의해 뜬 html 의 내장 객체. opener 자신을 띄운 창을 지칭
      console.log('child log', opener.mainData)
      opener.mainFun()//ok 
    }
    //아래 변수, 함수는 부모 창에서 접근
    var childData = 20
    function childFun() {
      console.log('childFun call.... ')
    }

    //부모창에서 자식창을 접근하려면 먼저 자식창에서 
    //자신을 부모창에서 이용하게 등록을 해주어야 한다.
    //this - 예약어(자기 자신을 지칭하는 예약어)
    //child 는 자신을 부모창에서 사용하는 이름-개발자 임의 이름
    opener.child = this

    function myClose(){
      //부모창을 특정 url 로 이동 
      opener.location.href = 'http://www.naver.com'
      window.close()
    }
  </script>
</head>
<body>
  <h1>I am child page</h1>
  <button onclick="getMainData()">get main data</button>
  <button onclick="myClose()">close</button>
</body>

location

• location 객체는 브라우저의 URL 을 다루기 위한 객체이며 URL 에서 원하는 정보를 추출하는 방법을 제공하거나

브라우저의 화면을 특정 URL 로 변경하는 방법을 제공한다.

▼ location 프로퍼티

▼ location 함수

• reload() 함수는 현재의 URL로 다시 요청하는 것임으로 마치 브라우저의 새로고침 버튼을 누른것과 동일한효과가 난다. replace() 함수를 이용해 브라우저에 새로운 URL 을 지정할 수 있고 이 URL 로 이동하게 할 수 있고 location.href 로 이동하면 현재의 URL 정보가 브라우저 히스토리에 유지됨으로 만약 뒤로가기 버튼이 클릭되면 현재의 화면이 다시 나오게 된다. 또한 location.replace() 로 이동을 하면 현재의 URL 정보는 유지되지 않는다.

  <h3>location test</h3>
  <button onclick="locationTest()">location test</button><br/>
  <script>
    //http://127.0.0.1:5500/03-implicit-object/03-2-browser/test4-etc/index.html?name=kim&age=20#test1
    function locationTest() {
      console.log(location.href)
      console.log(location.protocol)//http:
      console.log(location.host)//127.0.0.1:5500
      console.log(location.hostname)//127.0.0.1
      console.log(location.port)//5500
      console.log(location.pathname)///03-implicit-object/03-2-browser/test4-etc/index.html
      console.log(location.search)//?name=kim&age=20
      console.log(location.hash)//#test1
      console.log(location.origin)//http://127.0.0.1:5500
    }
  </script>

  <button onclick="goGoogle1()">go google - href</button>
  <button onclick="goGoogle2()">go google - replace</button>
  <script>
    function goGoogle1(){
      location.href = "http://www.google.com"
    }
    function goGoogle2(){
      location.replace("http://www.google.com")
    }
  </script>

history

• history 객체는 브라우저의 히스토리 정보를 이용해 이전 혹은 이후 화면으로 이동시키기 위해서 사용된다.

▼ history 함수

• go()함수의 매개변수에 숫자를 지정하면 그 단계의 앞, 뒤로 이동이 가능하다.

• go( 0 ) 처럼 0을 지정하게 되면 브라우저의 “새로고침” 버튼을 클릭한 것과 동일하다.

  <h3>history test</h3>
  <button onclick="goBack()">back</button>
  <button onclick="goForward()">forward</button>
  <button onclick="go()">go</button>
  <script>
    function goBack(){
      history.back()
    }
    function goForward(){
      history.forward()
    }
    function go(){
      let input = prompt('숫자를 입력해 주세요')
      if(isNaN(input)){
        alert('숫자를 입력하세요')
      }else {
        let no = parseInt(input)
        history.go(no)
      }
    }

screen

• screen 객체는 브라우저가 실행되는 스크린 정보를 획득하기 위해서 이용됩니다

▼ screen 프로퍼티

• availWidth, availHeight 와 width, height 의 차이는 시스템이 기본으로 제공하는 영역까지 포함되는지의 차이이다.

navigator

• navigator 객체는 브라우저의 다양한 정보 혹은 기능에 접근할 수 있는 프로퍼티를 제공하는 객체이다.

화면과 관련 없는 다양한 정보 혹은 기능에 접근할 수 있는데 브라우저의 이름 혹은 브라우저가 네트워크에 연결된 것인지를 navigator 정보로 알 수 있으며 위치정보, 배터리 정보등에도 접근할 수 있다.

▼ navigator 프로퍼티

• userAgent 프로퍼티가 반환하는 문자열을 애플리케이션이 실행되는 브라우저와 그 브라우저가 실행되는플랫폼 정보이며 이 정보를 통해 유저가 어느 브라우저에서 혹은 어느 플랫폼에서 애플리케이션을 이용하고 있는지를 확인할 수 있다.

브라우저는 자동으로 HTTP Request header 에 userAgent 문자열을 전송해 주며 그러므로 백앤드 애플리케이션에서도 확인할 수 있는 정보이다.

  <h3>navigator test</h3>
  <button onclick="navigatorTest()">navigator test</button>
  <script>
    function navigatorTest(){
      console.log(navigator.cookieEnabled)//true
      console.log(navigator.language)//ko-KR
      console.log(navigator.onLine)//true
      console.log(navigator.userAgent)
    }

'BootCamp Review' 카테고리의 다른 글

2024.09.23 (Day 12) - JavaScript OOP / Object Literal (0)	2024.09.24
2024.09.20-23 (Day 11, 12) - JavaScript Implicit Object 3 (0)	2024.09.23
2024.09.13-19 (Day 9,10) - JavaScript Implicit Object 1 (0)	2024.09.19
2024.09.12 (Day 8) - JavaScript Event Programming (0)	2024.09.12
2024.09.11 (Day 7) - JavaScript Scope 와 Hoisting (0)	2024.09.12

브라우저 내장 객체

window

location

history

screen

navigator

'BootCamp Review' 카테고리의 다른 글

티스토리툴바