🍁Event 기본 코드 DOM 조작 BOM btn1.onclick = 함수; //btn1.onclick = 함수; btn1.onclick = m1; btn1.onclick = m2; //덮어쓰기 function m1() { alert('BOM'); } 이벤트 제거 btn2.onclick = m2; function m2() { btn1.onclick = null; //이벤트 제거 } BOM에서 이벤트를 제거할 때에는 null을 적용하며, 새로운 이벤트를 적용하면 덮어쓰기가 된다. DOM btn2.addEventListener(이벤트종류, 함수); btn2.addEventListener('click', m3); function m3() { alert('DOM'); } DOM에서는 이벤트 종류와 함수를 인자로..
🍁Timer 타이머 시작 1. id setTimeout(할 일, 시간) 1회성 타이머 2. id setInterval(할 일, 시간) 반복 타이머 타이머 종료 1. void clearTimeout(id) 2. void clearInterval(id) 🍁타이머의 사용 setTimeout setInterval 조작 타이머 주의사항 함수를 실행할 때마다 별도의 타이머가 실행되며 멈춤 버튼이 실행되지 않는다. 타이머를 호출하는 코드를 여러 번 반복하면 이전에 시작한 타이머를 조작할 방법이 없으므로 통제할 수 있도록 해야 한다. 타이머를 단 한 개만 실행하도록 하여 문제를 해결할 수 있다. 🍁타이머의 활용 🍂타이머 중복 실행 금지 var n = 1; var timer = 0; btn3.onclick = m3; f..
🍁링크 조작 링크 블로그 document 아래에 forms가 없기 때문에 할아버지가 손자를 자식으로 취급하는 말이 안 되는 상황이 발생한다. 이렇게 폼이 없는 상황에서는 all을 사용해서 접근한다. all을 사용하여 접근 원래는 블로그 링크를 클릭하면 블로그로 이동하지만, 버튼을 클릭하면 링크가 [JavaScript] BOM과 DOM: HTML 계층 구조 글로 이동하는 걸로 바뀌게 했다. 그런데 사용자는 링크가 바뀌었는지 알기 어렵다. 이럴 때 풍선 도움말을 활용할 수 있다. BOM //BOM document.links['link1'].href = 'https://isaac-christian.tistory.com/entry/JavaScript-BOM%EA%B3%BC-DOM'; document.links[..
🍁Collection 내장 배열은 곧 컬렉션을 의미한다. 컬렉션은 태그에 접근하기 위한 도구로, 데이터를 저장하고 조작하는 여러 구조를 나타낸다. 자바스크립트는 문서 내용(HTML)을 기반으로 자동 생성되는 배열을 제공한다. 자바스크립트에서 사용하는 데이터 자료구조는 인덱스(index) 기반의 컬렉션, 키(key) 기반의 컬렉션이 있다. window.document.images window.document.links window.document.anchors window.document.forms window.document.forms[index].elements window.document.all window.document.images 이미지 가장 꼭대기의 window 객체는 유일하기 때문에 생략할 ..
🍁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); ..
🍁HTML 태그의 속성 제어하기 태그를 조작한다는 건 다음의 두 가지의 의미를 가진다. 첫 번째는 속성의 값을 바꾼다는 것이고, 두 번째는 PCDATA(내용물)를 조작한다는 것이다. 텍스트 박스 조작 txt.프로퍼티 HTML의 대부분의 속성들은 JavaScript에서 동일한 이름의 프로퍼티로 제공한다. 단, HTML 속성명이 복합어일 경우 JavaScript에서는 캐멀 표기법🐫으로 제공한다. 프로퍼티의 종류로는 value 등이 있으며, 대부분의 프로퍼티들은 입출력(읽기, 쓰기)이 모두 된다. 일부 프로퍼티만이 읽기 또는 쓰기 전용이다. 텍스트 박스의 속성들을 조작해 보도록 하자!👉 쓰기 작업 txt1.value = 'Isaac'; //쓰기 읽기 작업 alert(txt1.value); //읽기 복합어 tx..
