※ 책 [혼자 공부하는 자바스크립트]를 공부하며 기록, 정리해 놓은 노트이다.
목차
문서 객체 조작하기
실제 HTML문서에는 내용을 입력하지 않고도 자바스크립트 쪽에서 body태그 내부에 뭔가 조작하거나 내용물을 넣거나 하게 만들어보자.
요약:
DOMContentLoaded 이벤트
: head태그 안에 있는 script태그에서 body에 글자를 입력하라고 명령하고 싶을 때 이걸 이용한다.
원래는 안되는 건데, 이 이벤트를 걸어놓으면 ‘화면에 문서 객체를 모두 읽어들일 때까지 기다릴게. 다 되면 이거 실행해’라고 대기 목록을 걸어놓게 된다.
문서 객체 가져오기
당연히 있는 게 전제되는 요소 읽어들이기:
document.head document.body document.title
(head나 body 요소 내부에 있는) 다른 요소들 읽어들이기:
document.querySelector(선택자) document.querySelectorAll(선택자)
문서 객체 생성하기
- document.createElement(문서 객체 이름) 로 객체를 하나 만들고
- 부모 객체.appendChild(자식 객체) 로 원하는 위치에 붙인다.
문서 객체 이동하기
appendChild() 메소드로 원하는 객체를 타겟 위치에 추가하면 이동하는 게 된다.
문서 객체 제거하기
부모 객체.removeChild(자식 객체)
혹은
타겟 객체.parentNode.removeChild(타겟 객체)
문서 객체 내부를 조작하기
글자 조작
문서 객체.textContent = ‘문자 그대로 넣기’ ⇒ 더 최신버전. 추천. 문서 객체.innerHTML = ‘<h1>HTML 형식으로 인식되게 넣기</h1>’ innerText도 있다고(?)
속성 조작
문서 객체.setAttribute(속성 이름, 값) 문서 객체.getAttribute(속성 이름)
스타일 조작
h1.style.backgroundColor = ‘rgba(ooo, ooo, ooo)’ ⇒ 추천. h1.style[’backgroundColor’] = ‘rgba(ooo, ooo, ooo)’ h1.style[’background-color’] = ‘rgba(ooo, ooo, ooo)’
이벤트 설정하기
이벤트: 문서 객체가 생성되거나 클릭되거나 마우스가 올려지거나 할 때 발생한다. 그러면 어떤 작업을 수행하라고 예약해놓을 수 있다.
이벤트 리스너 또는 이벤트 핸들러 : 이벤트가 발생하면 실행될 함수.
이벤트 연결 생성하기
문서 객체.addEventListener(이벤트 이름, 이벤트 리스너) ⇒ “이 이벤트가 발생하면, 이 이벤트 리스너(=콜백 함수)를 호출하라”
이벤트 연결 제거하기
문서 객체.removeEventListener(이벤트 이름, 이벤트 리스너)
이벤트 활용
이벤트 모델, 이벤트 객체, 이벤트 발생 객체
요약:
이벤트 모델 event model
: 이벤트를 연결하는 방법.
표준 이벤트 모델
: 현재 표준으로 사용되는 이벤트 연결 방법. 현재는 addEventListener()가 표준임.
문서 객체.addEventListener(이벤트 이름, 이벤트 리스너)고전 이벤트 모델
인라인 이벤트 모델
모든 이벤트 리스너는 “event”라는 이벤트 객체를 첫 매개변수로 받는다. 따라서 기본적인 이벤트 모델의 템플릿은 다음과 같다:
// 표준 이벤트 모델 템플릿:
const h1 = document.querySelector('h1')
h1.addEventListener('keyup', (event) => {
h1.textContent = '키보드에서 키가 떼어질 때마다 실행됨'
})
키보드 이벤트
종류(이름):
keydown keypress keyup
이벤트 객체로 사용할 수 있는 속성:
event.code // 입력한 키 (KeyC, KeyF 등) event.keyCode // 입력한 키를 나타내는 숫자 event.altKey // 누른 키가 alt면 true event.ctrlKey event.shiftKey
사용 예:
페이스북과 트위터 등과 같은 소셜네트 사이트에서 단축키를 구현할 때 사용.
이벤트 발생 객체
이벤트 리스너를 외부로 분리한 경우, 이벤트를 발생시킨 지금 문서 객체(=요소)에 접근하는 방법 두 가지:
- event.currentTarget 속성을 이용 const length = event.currentTarget.value.length
- this 키워드를 이용 const length = this.value.length
글자 입력 양식 이벤트
입력 양식 form
: 사용자로부터 어떠한 입력을 받을 때 사용하는 요소. HTML에서 input, textarea, button, select 태그 등.
입력 양식 문서 객체의 (입력받은)값에 접근하기: 문서 객체.value
조기 리턴 패턴이란 게 있다.
사용 예:
입력 양식을 기반으로 inch를 cm 단위로 변환하는 프로그램
이메일 형식을 확인해주는 프로그램
드롭다운 목록
현재 문서 객체가
<select> <option>떡볶이</option> <option>튀김</option>
</select>
일 때:
- 일단 option들을 배열처럼 값을 가져옴: const options = event.currentTarget.options
- 드롭다운 중 현재 선택된 option의 인덱스를 받아옴: const index = event.currentTarget.options.selectedIndex
- 선택한 option 태그(의 글자)를 추출: options[index].textContent (어쩔 땐 options[index].value로 추출하기도 한다)
사용 예:
드롭다운 목록으로 선택 가능하게 만들기
드롭다운 목록에서 Ctrl 키를 누른 상태로 여러 항목을 선택 가능하게 만들기
cm 단위를 여러 단위로(드롭다운 목록 중에서 선택) 변환하는 프로그램
체크 박스
현재 문서 객체가 <input type=”checkbox”>일 때:
if (event.currentTarget.checked) ⇒ “(체크박스가) 체크된 상태냐”, 이 두 상태의 활용.
사용 예:
약관에 체크가 됐으면 다음 페이지로, 안 됐으면 못 넘어가게 만들기
라디오 버튼
현재 문서 객체가 <input type=”radio”> 일 때:
if (event.currentTarget.checked) ⇒ “(라디오 버튼이) 체크된 상태냐”
기본 이벤트 막기
기본 이벤트: 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것.
기본 이벤트 예:
웹 브라우저에서 이미지에 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴context menu를 출력해주는 것, 링크를 클릭했을 때 이동하는 것, 제출 버튼을 눌렀을 때 이동하는 것 등
이런 기본 이벤트를 제거하기: event.preventDefault()
사용 예:
이미지 마우스 오른쪽 버튼 클릭 막기(불펌 방지)
체크 때만 링크 활성화하기
할 일 목록 만들기
지금까지 배운 문서 객체 조작과 이벤트 처리만으로 만들 수 있다!
(생략)
아주 강력한 글자 수 세기 프로그램
트위터에서 사용하는 방법: (생략)
localStorage 객체
: 웹 브라우저가 기본적으로 제공하는 객체. 웹 브라우저에 데이터를 저장하는 데 사용된다.
localStorage.getItem(키)
localStorage.setItem(키, 값)
localStorage.removeItem(키)
localStorage.clear()
웹 API : localStorage같이 웹 브라우저가 제공해주는 기능. 배터리 정보를 추출하는 API, 블루투스 API, 게임 패드 입력 API, 위치 정보 API, 이미지 동영상 캡처 API, 드래그앤드롭 API 등등 많은 기능이 있다. 모질라 웹 API 문서 등에서 관련 정보를 더 찾아볼 수 있다.
참고:
[책] 혼자 공부하는 자바스크립트 - 윤인성
Uploaded by N2T