🍁history 객체 history 객체에는 브라우저의 발자취가 남아 있다.👣 발자취는 브라우저가 방문한 탐색 기록을 의미한다. 그리고 이 탐색 기록을 접근하는 게 history 객체이다. 탐색 기록이 필요한 이유는 사용자가 전에 방문한 페이지로 돌아가는 등의 페이지 이동이 페이지를 기억하고 있어야 가능하기 때문이다. 뒤로 가기/앞으로 가기 history 객체 window.history.go(-2); go 함수 안에는 양수값과 음수값을 넣을 수 있다. go 함수에는 숫자만큼 페이지를 뒤로 가거나 앞으로 갈 수 있다. 페이지 이동 기록 ex19 > 네이버 > 구글 > ex19 > 다음 > 쿠팡 사용자가 위와 같이 페이지를 이동한 기록이 history 객체에 기록된다. 만약 위와 같은 경로를 통해 쿠팡 페이..
🍁location 객체 location 객체는 현재 창의 페이지 주소(URL)와 관련된 객체이다. 읽기 (현재 페이지) console.log(window.location.href); 읽기를 하면 현재 페이지의 주소를 읽어온다. 쓰기 (페이지 이동) window.location.href = 'https://isaac-christian.tistory.com/'; window.location.assign('https://isaac-christian.tistory.com/'); 자바스크립트에서는 window.location.href으로 페이지를 이동한다. assign 함수로 페이지 이동을 지원하지만, href를 더 많이 사용한다. 새로고침 window.location.reload(); //새로고침(F5) 전역 ..
🍁screen 객체 screen 객체는 화면 정보를 제공한다. availWidth, availHeight console.log(window.screen.availWidth); console.log(window.screen.availHeight); 위 숫자는 현재 보고 있는 모니터의 해상도를 의미한다. 내가 만든 페이지가 어떤 화면의 크기로 보이고 있느냐에 따라 디자인을 다르게 만들 수 있기 때문에 해상도가 중요하다. colorDepth console.log(window.screen.colorDepth); 24bit 컬러를 지원한다는 의미에서 24가 출력된다. 대부분 24bit 컬러를 지원하므로 큰 의미는 없다. orientation console.log(window.screen.orientation); ..
🍁window 객체 window.open(URL, name, options); URL: 새 창의 URL name: 새 창의 이름 options: 새 창 옵션들 window로 창을 새로 만들었을 때 만들어진 창을 자식창이라고 한다. 옵션들 사이는 띄어쓰기를 해도 되고, 콤마를 찍어도 된다. 자식창 띄우기 window 객체 창 제어하기 자식 페이지 크기를 지정해 주었기 때문에 탭으로 새 창이 생기지 않고 새로운 창으로 생긴다. 빈 문자열로 이름을 지정해주지 않을 수도 있다. 이름을 주지 않으면 행동이 달라진다. name 빈 문자열로 지정 window.open('ex16_child.html', '', 'width=500 height=300'); 이름을 빈 문자열로 지정하면 여러 창을 띄울 수 있다. 이름을 지..
🍁HTML 태그의 속성 제어하기 태그를 조작한다는 건 다음의 두 가지의 의미를 가진다. 첫 번째는 속성의 값을 바꾼다는 것이고, 두 번째는 PCDATA(내용물)를 조작한다는 것이다. 텍스트 박스 조작 txt.프로퍼티 HTML의 대부분의 속성들은 JavaScript에서 동일한 이름의 프로퍼티로 제공한다. 단, HTML 속성명이 복합어일 경우 JavaScript에서는 캐멀 표기법🐫으로 제공한다. 프로퍼티의 종류로는 value 등이 있으며, 대부분의 프로퍼티들은 입출력(읽기, 쓰기)이 모두 된다. 일부 프로퍼티만이 읽기 또는 쓰기 전용이다. 텍스트 박스의 속성들을 조작해 보도록 하자!👉 쓰기 작업 txt1.value = 'Isaac'; //쓰기 읽기 작업 alert(txt1.value); //읽기 복합어 tx..
🍁키 관련 이벤트 키 관련 이벤트는 onkeyXXX 형태를 가진다. 보편적으로 keydown을 사용한다. keyup을 사용하는 경우는 방금 누른 문자가 필요한 업무를 할 때이다. onkeydown 키를 눌렀을 때 발생한다. 키 이벤트 키를 누르고 있으면 연속 입력된다. function m1() { //console.log('keydown'); console.log(event.keyCode); //입력한 문자 코드 } 입력된 (물리)키는 구분이 가능하지만, 입력된 문자(같은 키에 할당된 a와 A)는 구분할 수 없다. keydown은 입력된 문자는 중요하지 않을 때, 물리키를 구분하는 용도로 사용한다. 모든 키에 반응하므로 keypress보다 keydown을 많이 사용한다. keypress는 Shift, C..
🍁Event 이벤트는 사건을 의미한다. 객체(태그 포함)에서 발생하는 사건을 전부 이벤트라고 부른다. 이벤트는 언제 발생할지 예측이 불가능하다. 🍂Event Handling 이벤트 핸들링은 이벤트 처리/등록에 관한 기능이다. 언제 발생할지 예측 불가능한 사건에 대비해 처리할 코드를 미리 준비해서 언젠가 사건이 발생하면 코드를 자동으로 실행하도록 할 수 있다. Oracle의 Trigger와 비슷한 느낌의 기능을 한다. 이벤트 등록 onXXX 속성(프로퍼티)을 제공한다. 동적 방식을 사용하면 HTML에 JavaScript 코드를 적지 않아도 되기 때문에 보통 동적 방식을 많이 사용한다. 코드 관리 차원에서 동적 방식을 주로 사용하는 편이다. 정적 방식 Event 정적 방식은 HTML 태그에 적용한다. 사건이..
🍁BOM과 DOM CSS는 태그를 조작할 때 선택자(HTML 태그 검색)로 접근을 하고 나서 조작했다. 마찬가지로 JavaScript에서도 HTML 태그를 검색하여 접근한 뒤에 조작한다. 이는 HTML 계층 구조를 활용하여 JavaScript로 탐색하는, 즉 태그를 찾는 방법에 대한 얘기이다. BOM이란? 자바스크립트 BOM (브라우저 객체 모델)은 브라우저의 창, 프레임 등의 브라우저의 요소를 객체로서 제어할 수 있게 해준다. BOM으로 브라우저와 상호작용하여 브라우저의 창 크기, 위치, 히스토리, 쿠키, 알림 등을 다룰 수 있다. BOM 객체로는 window, screen, location, history, navigator, document 등이 있으며, 이러한 객체들을 사용하여 웹 페이지의 동적인..
