February 07, 2020
브라우저 (크롬) 에서는 자바스크립트 엔진이 있어서 브라우저 내부 콘솔을 이용해서 자바스크립트 언어를 실행할 수 있다.
콘솔
: 브라우저 시스템 내부를 키보드라는 입력장치를 통해 접근할 수 있는 장치
그리고 브라우저가 실행되면 자바스크립트의 실행컨텍스트 내부요소인 💡 scope chain에 window
라는 객체가 담긴다.
window 객체
: 브라우저 내 여러기능들(뒤로가기, 창닫기, 팝업창, document 등)를 담고있는 전역객체
크롬에서는 tab 기능으로 하나의 브라우저에서 여러 창을 킬 수 있는데 각 창마다 각각의 window 객체를 가지는 것 같다.
window.close() // 현재 보고있는 탭이 하나 닫힌다.
document 객체
: 전달받은 html 파일을 document 객체 트리형태로 저장해서 window객체 내부에 들어간다.
window.console.log(window.document) // 현재 페이지의 html 정보가 나온다!
그리고 window 객체는 전역객체로 scope chain 안에 담기기 때문에, window 내부 객체나 메소드는 window를 생략하고 사용할 수 있다.
close() // close()는 window 내부 메소드기 때문에 window 생략가능
console.log(window.document) // console도 window 내부 객체이기 때문에 window 생략가능
브라우저의 전역객체인 window 내부 속성, 객체, 메소드에는 어떤 것들이 담겨져있을까?
현재 window의 내부 컨텐츠 길이
를 저장한다.
현재 window의 sidebar를 포함한 전체 길이
를 저장한다.
크롬의 경우, 북마크 툴바나 devTools 모두 포함한다.
window 의 좌상단 좌표를 저장하는데, page가 window보다 커서 스크롤이 발생하면 page에 대한 window의 상대적 위치를 저장한다.
window 내부의 콘솔에 접근한다. 개발 초보인 나에게 한줄기 빛이 되어주는 console.log
가 이 console 객체 안의 메소드를 사용하는 것!!
console.log() // '갓'솔로그
console.warn() // 메시지를 경고형식으로 출력
console.error() // 메시지를 에러형식으로 출력
history 객체는 현재 사용하는 window 에서 내가 방문한 페이지들을 기록한다.
var history = {
length: 1; // length 속성을 통해 몇개의 페이지들이 기록되었는지 확인할 수 있다.
}
history.back() // 뒤로가기
history.forward() // 앞으로가기
history.go(2) // 해당 페이지로 가기
현재 페이지 url에 대한 내용이 담긴다.
var location = {
host: 'taeny.dev',
href: 'https://taeny.dev/',
pathname: '/',
protocol: 'https:',
search: '', //쿼리스트링에 대한 정보들
port: '', //포트번호
}
location.reload() // 페이지를 새로고침한다!
location.replace() // url을 교체한다. history에 남지 않는다는 특징이 있다.
브라우저 사용환경에 대한 정보들이 저장된다.
모바일 기기나 데스크탑 기기의 스펙 등이 해당된다. window의 innerWidth와 같은 속성과 다르게 고정값
이다!! 즉, 브라우저의 크기를 줄이거나 해도 변하지 않음.
var screen = {
width: 1440,
height: 900,
availHeight: 1440, // 작업표시줄을 제외한 값, mac의 경우 상단 작업표시줄과 하단의 Dock 등이 제외됨.
availWidth: 814, // 작업표시줄을 제외한 값
colorDepth: 24, // 색상값
pixelDepth: 24, // 픽셀값
}
open()
: 새로운 window 전역객체를 생성하고 탭, 또는 창을 연다.
open() // about:blank 빈 페이지를 연다.
open('https://taeny.dev') // url 주소로 새창에서 연다. (두번째 parameter _blank 가 디폴트값으로 들어있음.)
open('https://taeny.dev', '_self') // url주소로 창을 여는데, 현재 페이지에서 연다.
open('https://taeny.dev', 'width:400,height:400') // 세번째 parameter 로 window 설정을 직접 지정할 수 있다.
close()
: 현재 window 를 닫는다.
close() // parameter가 없이 실행되는 메소드
stop()
: 현재 window 의 로딩을 중지한다.
stop() // parameter가 없이 실행되는 메소드
한 윈도우에서 다른 윈도우 객체를 컨트롤 할 수도 있다.
const taenyLog = open('https://taeny.dev')
taenyLog.close() // 변수에 window 를 담아서 컨트롤
alert()
: 일방적인 메시지를 전달하는 대화상자를 띄운다.
alert('반가워요!') // 대화상자에는 ok 만 존재
confirm()
: 메시지에 대한 응답을 양자택일해야하는 대화상자를 띄운다.
confirm('회원정보를 등록할까요?') // 대화상자에는 ok, cancel 존재
prompt()
: 메시지에 대한 응답을 input 형태로 묻는 대화상자를 띄운다.
prompt('너의 이름은..?') // 대화상자에 input 창과 ok, cancel, input창이 존재
prompt('너의 이름은..?', '김00') // 두번째 parameter로 기본값(화면에도 보여짐) 설정가능
setTimeout()
: 두번째파라미터(ms) 시간 후, 첫번째파라미터(함수) 실행
setTimeout(() => {
console.log('3초지남')
}, 3000)
clearTimeout()
: setTimeout() 메소드를 중지한다. setTimeout 메소드를 변수에 담고 첫번째 parameter에 변수명을 넣어준다.
var timer = setTimeout(() => {
console.log('3초지남')
}, 3000)
clearTimeout(timer)
setInterval()
: 두번째파라미터(ms) 시간마다, 첫번째파라미터(함수) 실행
setInterval(() => {
console.log('3초마다')
}, 3000)
clearInterval()
: setInterval() 메소드를 중지한다. setInterval 메소드를 변수에 담고 첫번째 parameter에 변수명을 넣어준다.
var interval_timer = setInterval(() => {
console.log('3초마다')
}, 3000)
clearInterval(interval_timer)
moveBy()
: 지정된 window 를 현재위치에서 주어진 값만큼 이동
moveTo()
: 지정된 window 를 주어진 값의 절대적 위치로 이동
// 현재 위치가 50,50인데 300,300 으로 이동하고 싶을 때,
moveBy(250, 250)
// or
moveTo(300, 300)
scrollBy()
: 스크롤 위치를 현재위치에서 주어진 값만큼 이동
scrollTo()
: 스크롤 위치를 주어진 값의 절대적 위치로 이동
// 현재 위치가 0,50인데 0,300 으로 이동하고 싶을 때,
scrollBy(0, 250)
// or
scrollTo(0, 300)
resizeBy()
: 지정된 window 의 크기를 현재크기에서 주어진 값만큼 변화시킴
resizeTo()
: 지정된 window 의 크기를 절대적 크기로 변화시킴
// 현재 크기가 50,50인데 300,300 사이즈를 키우고 싶을 때,
resizeBy(250, 250)
// or
resizeTo(300, 300)