카테고리 없음

[JS] Window 객체

탱 'ㅅ' 2024. 6. 20. 15:12

Window Oject

- 브라우저에 의해 자동으로 생성

- 웹 브라우저의 창을 나타낸다

- 브라우저의 객체 (JS의 객체 X)

 

- 브라우저의 창에 대한 정보를 알고 제어할 수 있다

- var 키워드로 변수/함수를 선언하면 window 객체의 프로퍼티가 된다

 

 

let과 const는 블록 스코프이기에

window 객체 내부의 블록에서 선언된 것으로 되기에

전역 객체의 프로퍼티로 활용될 수 없습니다.

var newProp = 'property'

var newFunc = () => {
	return newProp
}

console.log(window.newProp) // property
console.log(window.newFunc()) // property

 

 

// Alert
alert('Hello World')

// Prompt
const input = prompt()
alert(input)

// Confirm 
if (confirm('Yes or No')) {
	console.log('YES')
} else {
	console.log('NO')
}
let val

// Outer height and width
val = window.outerHeight
val = window.outerWidth

// Inner height and width
val = window.innerHeight
val = window.innerWidth

// Scroll points
val = window.scrollY
val = window.scrollX

console.log(val)
let val

// Location Object : 현재 URL에 대한 정보
val = window.location
val = window.location.hostname
val = window.location.port
val = window.location.href
val = window.location.search

// Redirct
window.location.href = 'http://google.com'
// Reload
window.location.reload()


// History Object : 브라우저 창에서 사용자가 방문한 URL
window.history.go(-2)
val = window.history.length


// Navigator Object : 브라우저에 대한 정보
val = window.navigator
val = window.navigator.userAgent
val = window.navigator.language

console.log(val)

 

 

Web APIs

BOM(Browser Object Model)

window. ~

location, navigator, history, screen, etc.

 

DOM(Document Object Model)

window.document

 

[JS] HTML in JS (document 객체) 📌

document 우리가 JS에서 HTML에 접근할 수 있는 방법 브라우저에 이미 존재하는 객체 HTML이 app.js를 로드하기 때문에 존재하는 것 HTML은 CSS, JS를 가져와 브라우저와 연결해주는 접착제 같은 존재 HTML

119taeyoung.tistory.com