2024 여름 최대 할인 | 코드잇 레벨업 위크!
40% 할인에 아이패드 행운 추첨까지! 역대급 혜택 받고 SSS급 인재로 성장하세요.
www.codeit.kr
웹 페이지 - JavaScript
웹페이지를 다양하게 동작하도록 함.
태그 선택
id로 태그 선택
document.getElementById();
id로 요소를 가져온다.
접근하려는 태그의 id를 가져옴.
id는 다른 태그와 분류해주는 고유한 id
그래서 명확하게 태그 선택 가능.
존재하지 않는 태그 선택시 null 나옴.
class로 태그 선택하기.
여러 요소를 동시에 선택하기 → id는 부적합.
document.getElementsByClassName(’클래스명’)
해당 클래스명 사용하는 모든 요소들에 접근 가능함.
완벽한 배열은 아니지만 대괄호인덱스로 접근가능 []
→ 유사배열이라고 부름. 배열과 형태 유사하지만 배열 메소드 사용 불가.
깊이와 상관없이 위에서 부터 차례대로 적용됨.
없는 클래스명을 작성하면 빈 HTMLCollection이 출력됨.
document.getElementsByTagName('태그이름')메소드를 활용하면 태그 이름으로 태그를 선택할 수 있습니다. 태그 이름으로 하는 경우는 거의 없기에 많이 사용되지는 않음.
css 선택자로 태그 선택하기.
document.querySelector(’ ’)
css선택자로 id 선택할 때는 #기호 사용.
클래스로 선택 → .을 붙임. → .color-btn
이 중 하나 첫번째 것이 선택됨.
querySelectorAll 하면 다 나옴. 유사배열로.
qeurySelectorAll 메소드를 활용할 경우 요소가 하나 뿐이라도 요소가 하나인 NodeList를 반환함.
이벤트와 버튼 클릭
버튼 클릭 후 .onclick 함수를 적용해줌.
btn.onclick = function() {
console.log(’Hello Codeit’!)
}
이벤트 발생시 특정 동작하도록 이벤트 다루는 것 - 이벤트 핸들링
함수 부분 - 이벤트 핸들러
브라우저와 자바스크립트
JavaSript는 모든 것이 객체다.
웹브라우저를 다루기 위해 등장한 언어.
웹브라우저 - JavaScript의 윈도우라는 객체로 다룰 수 있음.
window 객체는 브라우저 창을 대변함.
window 객체를 통해 브라우저의 정보를 전달받고,브라우저를 수정할 수 있으.ㅁ
윈도우 객체 = 자바스크립의 최상단에 존재하는 객체
전역객체. 모든 객체에서 접근 가능.
윈도우 내의 모든 프로퍼티는 .안붙이고 그냥 사용 가능함. ex) console.log
DOM
문서 객체 모델
웹페이지에 나타나는 HTML 문서 전체를 객체로 표현한 것.
document가 웹 문서의 최상단 객체 - 진입점 역할
웹페이지 내부 어떤 것이든 접근 가능, 새로운 콘텐츠 만들 수 있음.
DOM에 집적 접근하게 되면 객체 아닌, DOM에 해당하는 html이 출력됨.
console.dir(document) 하면 태그 아닌 object형태로 볼 수 있음.
console.log vs console.dir
log
파라미터로 전달받은 값을 위주로 출력
전달받은 모든 값 출력
값에 좀 더 중점을 둔 log 메소드는 대상을 HTML 형태로 출력
dir
객체의 속성을 좀 더 자세하게 출력
여러 값 전달해도 첫 번째 값만 출력.
객체의 속성에 좀 더 중점을 둔 dir메소드는 대상을 객체 형태로 출력.
DOM 트리
DOM - 웹 페이지의 태그들을 객체처럼 다룰 수 있다.
HTML 태그의 구조 -
DOM 은 이 HTML문서를 객체화한 것이기 때문에
document 객체를 최상위로 해 똑같이 계층 구조 이루고 나무에 비유해 DOM트리라고 함.
각 객체 - 노드라 표현
관계 = 부모, 자식, 형제 관계
노드 타입 : 요소 노드 - 태그 표현, 텍스트 노드 - 문자열 표현
텍스트 노드는 요소 노드의 자식, leaf node라함. -> 스스로 자식 노드 가질 수 없음.
코멘트 노드, 문서 노드 등
보통 요소 노드, 텍스트 노드 이 2가지 위주로 구성됨.
노드에 접근하는 방법.
doucment객체 메소드 활용
DOM트리의 부모, 자식, 형제 관계 활용해 접근
console.log(myTage.children[1])
HTMLCollection나오고, 해당 요소의 자식 요소를 담음.
first(last)ElementChild
myTag.parentElement
형제 .previous(next)ElementSibling
없으면 null 값 return.
myTag.parentElement.nextElementSibling
자주 사용할 요소노드의 주요 프로퍼티
줄바뀜, 띄어쓰기, 들여쓰기 모두 반영됨.
innerHTML
outerHTML
textContent
innerHTML 요소 안 html 수정 및 요소 추가할 때 사용
myTag.innerHTML += ‘<li><>’
myTag.outerHTML
해당 html 포함한 전체 html 코드를 문자열로 리턴
값 할당하면 처음 선택한 요소는 사라진다.
다시 그 요소를 선택하게 됨. querySelector한 게 바뀌어서 그 요소 다루려면 다시 선택 필요.
textContent
innerHTML 과 유사함.
html태그 제외한 text들만 가져옴.
요소 안 내용 수정 가능.
태그도 텍스트로 인식.
요소 노드 추가하기
요소 노드 생성해서 추가
createElement(’li’)
- 요소 노드 만들기
- 요소 노드 꾸미기
- 추가하기.
const first = document.createElement(’li’);
first.textContent = ‘처음’;
tomorrow.prepend(first);
요소 노드 삭제와 이동
삭제
tomorrow.remove();
today.children[2].remove();
이동
prepend, append, before, after → 모두 추가 삭제 아니고 이동시켜줌.
tomorrow.children[1].after(today.children[1]);
괄호안의 요소를 tomorrow.children[1]이거 뒤로 이동 시켜줌.
today.append(tomorrow.children[1]);
html 속성 다루기
DOM 만들면서 html 의 속성들은 요소 노드의 프로퍼티가 됨.
모든 속성이 그런건 x
html 표준 속성
html표준 속성이 아닌 속성에 접근?
getAttribute(’href’)
표준,비표준 상관x
속성 추가
setAttribute(’속성’, ‘값’)
없으면 추가, 있으면 수정
속성 삭제
removeAttribute(’속성’) - 속성 제거함.
대소문자 구분 x
스타일 다루기
- style 프로퍼티 활용하기: element.style.styleName = 'value';
- class 변경을 통해 간접적으로 스타일 적용하기: element.className, element.classList
style프로퍼티
.style.textDecoration
.style.backgroundColor
카멜표기 사용.
클래스 다루는 게 더 좋음.
.className = ‘done’;
done이라는 css 클래스를 적용할 것.
classList 객체
add, remove, toggle
classList.add(’’,’’); 여러 개 추가 가능.
classList.remove() 삭제 가능.
toggle - 있으면 제거, 없으면 추가.
classList.toggle()
두번째 파라미터 - true : add, false : remove만 하도록.
토글은 클래스 하나만 다룬다. 여러 개 불가능하다.
이벤트 살펴보기
이벤트 핸들러 등록
even.addEventListener(event, handler);
하나의 이벤트에 여러개의 독립적인 이벤트 등록가능.
removeEventListener를 통해 이벤트 핸들러 개별적으로 삭제 가능.
btn.removeEventListener(click, event2) 동일 이벤트 핸들러를 두 번째 파라미터에 넣어줘얗.ㅁ
반드시 외부에 함수 만들어 핸들러 전달해줘야 !! 삭제도 잘 될 수 있음.
이름만 전달하면 됨. 파라미터로.
()까지 넣으면 등록이 안됨.
이벤트 객체
이벤트에 대한 상세한 요소
뭘 클릭, 마우스 포인터의 위치, 어떤 키보드를 눌렀는데
이벤트 발생시 이벤트 관련 정보 담긴 이벤트 객체 자동으로 생김.
이벤트 핸들러 되는 함수의 첫 번째 파라미터 - 항상 이벤트 객체가 전달됨.
type :이벤트 타입
target : 이벤트 발생한 해당 요소.
function printEvent(event) {
console.log(event);
}
event 또는 e 사용.
이벤트 버블링
버블링 : 이벤트가 발생한 뒤, 동일한 이벤트타입의 부모 요소의 이벤트 핸들러도 동작하는 것.
이걸 막는 방법은 e.stopPropagation() 메소드를 사용하는 것.
되도록 안 쓰는 게 좋음.
target 과 currenttarget
target은 이벤트 시작한 요소
currentTarget현재 이벤트핸들러가 동작하는 요소 접근함.
캡처링
이벤트 발생시 가장 먼저, 버블링의 반대 방향으로 진행되는 이벤트 전파 방식
하지만 상황에 따라서는 캡쳐링 단계에서 부모 요소의 이벤트 핸들러를 동작시켜야 할 수도 있겠죠? 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener에 세번째 프로퍼티에 true 또는 { capture:true }를 전달하면 됩니다.
이벤트 위임
이벤트 버블링을 활용한 동작.
자식 노드의 부모노드에 이벤트핸들러를 적용하면 자식 노드에게까지 이벤트핸들러가 동작함.
따라서 새 요소를 추가하거나 삭제해도 제어가 크게 신경쓰지 않아도 됨.
이때, 딱 원하는 자식노드들에만 적용될 수 있도록 작성하는 건 필요함.
중요
원리 - 자식 노드에 이벤트를 발생시키면 → 부모노드의 이벤트 핸들러가 작동함.
⇒ 이게 버블링.
그래서 부모노드에 하나만 이벤트 핸들러 등해도, 자식 노드의 이벤트에도 반응하는 것.
브라우저 기본 동작 막기
event.preventDefualt();
동작을 막음.
꼭 필요한 일인지 고민해볼 것.
다양한 이벤트 알아보기.
client
보여지는 화면의 좌측 상단 모서리 위치를 (0,0)
offset
offset 프로퍼티는 이벤트가 발생한 target이 기준이 됩니다.
offset 값도 이벤트가 발생한 대상을 기준으로 계산하기 때문에 스크롤 위치와는 무관하게 항상 대상의 좌측 상단의 모서리 위치를 (0, 0)으로 계산합니다.
page
전체 문서 기준
| 0 | 마우스 왼쪽 버튼 |
| 1 | 마우스 휠 |
| 2 | 마우스 오른쪽 버튼 |
| 3 | X1 (일반적으로 브라우저 뒤로 가기 버튼) |
| 4 | X2 (일반적으로 브라우저 앞으로 가기 버튼) |
참고로 mouseenter, mouseleave, mouseover, mouseout, mousemove 처럼 마우스 이동과 관련된 이벤트에서는 이 값이 null이나 undefined가 아니라 0이라는 점. 꼭 기억해 주세요!마우스 이벤트의 타입에는 아래와 같은 타입들이 있습니다.이벤트 타입 설명
| mousedown | 마우스 버튼을 누르는 순간 |
| mouseup | 마우스 버튼을 눌렀다 떼는 순간 |
| click | 왼쪽 버튼을 클릭한 순간 |
| dblclick | 왼쪽 버튼을 빠르게 두 번 클릭한 순간 |
| contextmenu | 오른쪽 버튼을 클릭한 순간 |
| mousemove | 마우스를 움직이는 순간 |
| mouseover | 마우스 포인터가 요소 위로 올라온 순간 |
| mouseout | 마우스 포인터가 요소에서 벗어나는 순간 |
| mouseenter | 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음) |
| mouseleave | 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음) |
3. MouseEvent.위치프로퍼티
마우스 이벤트 객체에는 마우스 포인터의 위치와 관련된 다양한 프로퍼티들이 있는데요. 주로 아래와 같은 프로퍼티들이 자주 사용됩니다.프로퍼티 설명
| clientX, clientY | 마우스 포인터의 브라우저 표시 영역에서의 위치 |
| pageX, pageY | 마우스 커서의 문서 영역에서의 위치 |
| offsetX, offsetY | 마우스 포인터의 이벤트 발생한 요소에서의 위치 |
| screenX, screenY | 마우스 포인터의 모니터 화면 영역에서의 위치 |
4. MouseEvent.relatedTarget
mouseenter, mouseleave, mouseover, mouseout 이벤트에는 relatedTarget이라는 프로퍼티가 존재하는데요.비슷하지만 서로 다른 두 프로퍼티를 잘 구분해서 기억해 두시면 좋을 것 같습니다!키보드 이벤트의 타입에는 아래와 같은 타입들이 있습니다.이벤트 타입 설명
| keydown | 키보드의 버튼을 누르는 순간 |
| keypress | 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음) |
| keyup | 키보드의 버튼을 눌렀다 떼는 순간 |
6. KeyboardEvent.key vs KeyboardEvent.code
키보드 이벤트 객체에는 key와 code 프로퍼티가 자주 사용되는데요.
7. input태그 다루기
input 태그는 말 그대로 입력의 역할을 하는 태그입니다. 타입에 따라 조금씩 차이가 있을 수 있지만, input 태그를 다룰 때는 아래와 같은 이벤트 타입들이 활용될 수 있습니다.이벤트 타입 설명
| focusin | 요소에 포커스가 되는 순간 |
| focusout | 요소에 포커스가 빠져나가는 순간 |
| focus | 요소에 포커스가 되는 순간 (버블링이 일어나지 않음) |
| blur | 요소에 포커스가 빠져나가는 순간 (버블링이 일어나지 않음) |
| change | 입력된 값이 바뀌는 순간 |
| input | 값이 입력되는 순간 |
| select | 입력 양식의 하나가 선택되는 순간 |
| submit | 폼을 전송하는 순간 |