오늘은 자바스크립트의 이벤트 처리에 대해 알아보겠다.
[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 교재도 참고하여 공부하였다.
JS 코드 추가하기
HTML에 JS 코드 추가하기
자바 스크립트 코드를 HTML에 삽입할 때는 <script>라는 태그를 사용한다.
<script>
console.log("test")
</script>JS 코드를 별도의 파일로 분리하기
js 파일을 별도의 파일로 만들려면 .js 확장자를 이용하여 파일을 생성한다.
js를 html과 연결할 때는 <script> 태그를 src 속성과 함께 사용한다.
<script src="파일 경로"></script>JS 코드 활용 시 주의사항
JS코드는 HTML과의 배치 위치에 따라서 화면에 보여지는 결과가 달라질 수 있다.
HTML 코드는 반드시 위에서부터 아래로 흘러가며 실행된다.
인라인 모델을 사용하면 코드 순서에 구애받지 않는다.
그러나 <script> 태그를 사용할 때는 태그의 위치를 아래로 옮겨야 한다.
DOMContentLoaded
위 두 가지 방법 이외에 DOMContentLoaded라는 비동기 처리 방식을 사용할 수 있다.
비동기 방식은 지금 당장 처리할 명령어와 나충에 처리할 명령을 구분한다.
따라서 DOMContentLoaded 이벤트를 사용하면 문서의 콘텐츠 로딩이 완료되었을 때, 비로소 이벤트 핸들러의 함수가 실행된다.
document.addEventListener("DOMContentLoaded",
function(e){
let button = document.querySelector("input")
button.addEventListener("input",
function(e){
console.log(e.target.value)
}
)
}
)
이벤트란
정적인 마크업 언어에서 동적인 일이 일어나는 것은 하나의 사건이라 할 수 있다.
이러한 사건을 js에서는 이벤트라고 부른다.
이때 수행되는 작업을 이벤트 핸들러라고 부른다.
태그에 onClick 속성을 부여하여 이벤트를 처리하는 방법을 인라인 이벤트 모델이라고 부른다.
문서 객체와 쿼리 셀렉터
js에서도 선택자를 사용한다.
단, 선택자만 사용하지는 않고 querySelector() 라는 기능을 사용한다.
<script>
function red(){
let button = document.querySelector("input")
button.style.backgroundColor = "red"
}
</script>
<input type="button" value="버튼" onClick="red()"/>괄호 안에는 선택자가 위치한다.
선택자를 보면 이름 앞에 점이나 샵이 없으므로, 저 선택자는 태그 선택자이다.
위 코드의 3번째 줄의 document는 무엇일까?
document는 HTML로 작성된 문서 그 자체를 의미한다.
button 뒤에 점을 찍어 style을 불러오고 있다.
여기에서의 style은 CSS에서 배운 스타일과 동일하다.
이처럼 다양한 CSS 스타일 속성을 JS를 통해 제어할 수 있다.
쿼리 셀렉터와 선택자를 활용하면 HTML 요소를 특정하여 제어할 수 있다.
브라우저와 관련된 객체
window 객체
window 객체는 웹 브라우저의 상태를 제어하며 js의 최상위에 있다.
따라서 js의 모든 객체는 window 객체 안에 포함된다.
window 객체의 메소드
| 종류 | 설명 |
|---|---|
| alert() | 알림 창을 표시함 |
| blur() | 현재 창에서 포커스를 제거 |
| close() | 현재 창을 닫음 |
| confirm() | [확인], [취소] 버튼이 있는 확인 창을 표시 |
| focus() | 현재 창에 포커스를 부여 |
| moveBy() | 현재 창을 지정한 크기만큼 이동 |
| moveTo() | 현재 창을 지정한 좌표로 이동 |
| open() | 새로운 창을 엶 |
| postMessage() | 메세지를 다른 창으로 전달 |
| print() | 현재 문서를 인쇄 |
| prompt() | 프롬프트 창에 입력한 텍스트를 반환 |
| resizeBy() | 지정한 크기만큼 현재 창의 크기를 조절 |
| resizeTo() | 동적으로 브라우저 창의 크기를 조절 |
| scroll() | 문서에서 특정 위치로 스크롤함 |
| scrollBy() | 지정한 크기만큼씩 스크롤함 |
| scrollTo() | 지정한 위치까지 스크롤함 |
| sizeToContent() | 내용에 맞게 창의 위치를 맞춤 |
| stop() | 로딩을 중지 |
여기서 open() 메서드와 close() 메서드는 새 윈도우 창을 열고, 닫을 수 있다.
또한 윈도우 창의 위치와 크기 등을 조절할 수 있다.
navigator 객체
navigator 객체에는 웹 브라우저의 버전을 비롯해 플러그인 설치 정보나 온&오프라인 등의 여러 정보가 담겨 있다.
이 정보는 사용자가 수정할 수 없으며 가져와서 보여줄 수만 있다.
navigator 객체의 주요 프로퍼티
| 종류 | 설명 |
|---|---|
| battery | 배터리 충전 상태를 알려줌 |
| cookieEnabled | 쿠키 정보를 무시하면 False, 허용하면 True를 반환 |
| geolocation | 모바일 기기를 이용한 위치 정보를 나타냄 |
| language | 브라우저 UI의 언어 정보를 나타냄 |
| oscpu | 현재 운영체제 정보를 나타냄 |
| userAgent | 현재 브라우저 정보를 담고 있는 사용자 에이전트 문자열 |
history 객체
history 객체에는 브라우저에서 [뒤로]나 [앞으로] 또는 주소 표시줄에 입력해서 방문한 사이트 주소가 배열 형태로 저장된다.
브라우저 히스토리는 보안 문제 때문에 읽기 전용이다.
history 객체의 주요 프로퍼티와 메소드
| 구분 | 설명 |
|---|---|
| length | 현재 브라우저 창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수가 저장됨 |
| back() | history 목록에서 이전 페이지를 현재 화면으로 불러옴 |
| forward() | history 목록에서 다음 페이지를 현재 화면으로 불러옴 |
| go() | history 목록에서 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴 |
location 객체
location 객체는 브라우저의 주소 표시줄과 관련된다.
location 객체에는 현재 문서의 url 주소 정보가 들어 있는데 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정할 수 있다.
location 객체의 프로퍼티와 메소드
| 구분 | 설명 |
|---|---|
| hash | URL 중에서 #으로 시작하는 해지 부분의 정보를 담음 |
| host | URL의 호스트 이름과 포트 번호를 담음 |
| hostname | URL의 호스트 이름이 저장됨 |
| href | 전체 URL. 이 값을 변겨아면 해당 주소로 이동 가능 |
| pathname | URL 경로가 저장됨 |
| port | URL의 포트 번호를 담고 있음 |
| protocol | URL의 프로토콜을 저장함 |
| password | 도메인 이름 앞에 username과 password를 함께 입력해서 접속하는 사이트의 URL일 경우에 password 정보를 저장 |
| search | URL 중에서 ?로 시작하는 내용 저장 |
| username | 도메인 이름 앞에 username을 함께 입력해서 접속하는 사이트의 URL일 경우에 username 정보를 저장 |
| assign() | 현재 문서에 새 문서 주소를 할당해서 새 문서를 가져옴 |
| reload() | 현재 문서를 다시 불러옴 |
| replace() | 현재 문서의 URL을 지우고 다른 URL의 문서로 교체 |
| toString() | 현재 문서의 URL을 문자열로 반환 |
screen 객체
사용자의 화면 크기나 정보를 알아낼 때 screen 객체를 사용한다.
screen 객체의 프로퍼티와 메소드
| 구분 | 설명 |
|---|---|
| availHeight | UI 영역을 제외한 영역의 높이 |
| availWidth | UI 영역을 제외한 내용 표시 영역의 너비 |
| colorDepth | 화면에서 픽셀을 렌더링할 때 사용하는 색상의 수 |
| height | UI 영역을 포함한 화면의 높이 |
| orientation | 화면의 현재 방향 |
| pixelDepth | 화면에서 픽셀을 렌더링할 때 사용하는 비트 수 |
| width | UI 영역을 포함한 화면의 너비 |
| lockOrientation() | 화면 방향을 잠금 |
| unlockOrientation() | 화면 방향 잠금을 해제 |
표준 이벤트 모델
이벤트 리스너의 사용방법은 아래와 같다.
요소.addEventListener(이벤트, 함수)
이벤트 리스터 안에서 함수를 정의하는 방법은 아래와 같다.
function(e){
실행할 내용
}함수의 이름을 정의하는 과정이 생략되고, 괄호 안에 e라는 값이 들어있다.
e는 event의 줄임말로, 괄호 안에 들어간 값들은 이벤트 객체이다.
let button = document.querySelector("input")
button.addEventListener("input",
function(e){
console.log(e.target.value)
}
)e는 이벤트 객체이다.
이벤트의 종류와 이벤트가 일어난 장소 등 이벤트에 대한 다양한 정보를 갖고 있다.
e.target은 이벤트의 타겟이다. 이벤트가 일어난 좌표를 의미한다.
e.target.value는 그곳에 입력된 값을 의미한다.
자주 쓰이는 이벤트들
| 이벤트명 | 인라인 호출 시 | 발생 시점 |
|---|---|---|
| keydown | onKeyDown | 키가 눌렸을 때 |
| click | onClick | 요소가 클릭되었을 때 |
| doubleClick | onDoubleClick | 요소가 더블 클릭되었을 때 |
| mouseover | onMouseover | 요소 위에 마우스 포인터가 올라왔을 때 |
| mouseleave | onMouseleave | 요소로부터 마우스 포인터가 벗어났을 때 |
| change | onChange | 요소의 값이 변경될 때 |
| input | onInput | 사용자가 요소에 값을 입력할 때 |
| submit | onSubmit | form 요소의 제출 버튼이 클릭되었을 때 |
| reset | onReset | form 요소의 리셋 버튼이 클릭되었을 때 |
이 외에도 keypress, keyup, mousedown, mousemove, mouseout, mouseup 등과
문서 로딩 이벤트인 abort, error, load, resize, scroll, unload,
폼 이벤트인 blur, focus, reset 등이 있다.
JS로 CSS 스타일 제어하기
요소의 스타일 제어
요소의 스타일 제어를 하려면 요소 객체를 대상으로 점을 찍고 style을 입력한다.
그리고 다시 점을 찍고 스타일 속성값을 입력한다.
요소.style.스타일속성 = "스타일 속성값"
js에서 스타일을 제어할 때는 스타일 속성을 카멜 케이스 표기법으로 작성한다.
e.target.style.backgroundColor = "red"요소의 속성 추출하기
js에서 속성을 열람할 때는 getAttribute()를 사용한다.
요소.getAttribute(속성 이름)
document.addEventListener("DOMContentLoaded",
function(e){
let button = document.querySelector("input")
button.addEventListener("click",
function(e){
console.log(e.target.getAttribute("type")
}
)
}
)
코드를 실행하면 <input> 태그의 'type' 속성을 확인해 'button'이 콘솔에 출력된다.
요소의 속성 제어하기
js에서 요소를 조작하는 기능은 setAttribute()를 활용한다.
요소.setAttribute(속성, 새로운 속성값)
document.addEventListener("DOMContentLoaded",
function(e){
let button = document.querySelector("input")
button.addEventListener("click",
function(e){
e.target.setAttribute("type", "text")
}
)
}
)
위 코드에서 버튼을 클릭하면 <input> 태그의 타입을 'text'로 변경한다.
문서의 글자 조작하기
태그의 글자 추출하기
js는 태그와 닫는 태그 사이에 입력된 글자에 접근하고, 이 글자를 제어할 수 있다.
요소.textContent
요소의 textContent 속성은 요소 내부의 글자를 보여준다.
document.addEventListener("DOMContentLoaded",
function(e){
let button = document.querySelector("input")
let p = document.querySelector("p")
button.addEventListener("click",
function(e){
console.log(p.textContent)
}
)
}
)
위 버튼이 클릭될 경우 <p> 태그의 textContent가 콘솔에 출력된다.
태그의 글자 조작하기
글자의 내용물을 변경하려면 p.textContent에 바로 스트링을 할당하면 된다.
document.addEventListener("DOMContentLoaded",
function(e){
let button = document.querySelector("input")
let p = document.querySelector("p")
button.addEventListener("click",
function(e){
p.textContent = "js로 입력함"
}
)
}
)
HTML 코드 조작하기
innerHTML 이라는 도구는 태그 사이에 HTML 코드를 삽입하는 도구이다.
<div></div>
<script>
let a = document.querySelector("div")
a.innerHTML = "<h1>innerHTML</h1><p>태그 내부에 태그를 삽입합니다</p>"
</script>innerHTML은 HTML 태그를 직접 조작할 수 있는 강력한 도구이다.
오늘은 이렇게 JS의 이벤트에 대해 공부하였다.
다음에는 바닐라JS로 크롬 앱을 만들어보겠다.(노마드 코더)
