[TIL] Day17
[SEB FE] Day17
☑️ 이벤트 객체
- 사용자가 버튼을 클릭하면, 그 버튼의
textContent/innerHTML을 이용해 내용을 가져올 수 있음. - 사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져옴
- 이벤트 객체란? 사용자 입력(
onclick,onkeyup…)을 트리거로 발생한 이벤트 정보를 담은 객체
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>이벤트 객체</title>
</head>
<body>
<button>아메리카노</button>
<button>카페라떼</button>
<script src="script.js"></script>
</body>
</html>// script.js
// 모든 버튼 가져오기
let menus = document.querySelectorAll("button");
let btnAmericano = menus[0]; // <button>아메리카노</button>
let btnCaffelatte = menus[1]; // <button>카페라떼</button>
function handleClick(event) {
// console.log(event); -> PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}
// console.log(event.target); -> <button>아메리카노</button>
// console.log(event.target.textContent); -> 아메리카노
let currentMenu = event.target.textContent;
console.log(currentMenu + "를 클릭하셨습니다.");
}
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick;
☑️ DOM 종합퀴즈 CheckPoint!
node는 요소(element)의 상위 개념
- DOM 관련 객체는 대부분
node에서 파생node의 기능을 적용한 객체는 여러 타입 존재 (그 중 가장 많이 사용되는 타입이Element)- DOM은 HTML을 조작할 수 있음 (DOM 구조 기반으로, JS로 프로그램을 작성하여 HTML 조작)
- DOM은
document객체를 통해 HTML에 접근
- BOM(Browser Object Model)이 window 객체를 통해 브라우저에 접근
- HTML 구조가 JS의 객체 구조와 같은 트리 구조라서, JS의 DOM이 브라우저에 접근하기 가장 바람직
- 다른 언어도 DOM을 가지고 있지만, JS의 DOM이 전통적으로 오래 쓰여왔으며 안정적
- 요소 생성 코드:
document.createElement(’div’)- 요소 조회 메서드:
document.querySelector- 요소 복제 메서드:
document.cloneNode- template을 활용하여 내용을 붙여 넣을 때 사용하는 메서드:
document.importNode
// <div> 요소 전부 조회
document.getElementsByTagName('div');
document.querySelectorAll('div');
----------
// 최상단 <div> 요소 하나만 조회
document.querySelector('div');
----------
// id가 'div'인 요소 하나 조회
document.getElementById('div');
----------
// class가 'div'인 요소 여러 개 조회
document.getElementByClassName('div');
let aElement = document.createElement('a') // <a> 요소 생성
aElement.setAttribute('id', 'javascript') // id가 'javascript'이며,
aElement.textContent = 'awesome' // 내용이 'awesome'.
// 아래 방법도 가능은 하지만, 지양!
aElement.id = 'javascript'
aElement.innerHTML = 'awesome'
// id가 'world'인 <div> 요소의 자식으로 변수 aElement를 삽입
document.getElementById('world').appendChild(aElement);
// alElement 제거
aElement.remove();
document.querySelector('#word').removeChild(aElement);
----------
// id가 'world'인 요소의 내용 변경
<div id="world">world</div>
document.querySelector('#world').textContent = "Earth"-
어떤 이벤트 발생 시 작동하는 함수를 할당하는 방법
- DOM 객체에 onclick을 직접 지정
function displayAlert() { alert('working!') } document.querySelector('#apply').onclick = displayAlert - addEventListener 메서드를 사용해서 할당
document.querySelector('#apply').addEventListener('click', function(){ alert("working"!) })
- DOM 객체에 onclick을 직접 지정
☑️ Todo List
✅ Today's TED Speech
👉🏻 Julian Treasure - 'How to speak so that people want to listen'
🎤
[버려야할 말하기 습관]
1. 험담하기 (gossip)
2. 비판하기 (judging)
3. 부정적으로 말하기 (negativity)
4. 불평하기 (complaining)
5. 남 탓하기 (excuses)
6. 이야기를 치장하거나 과장하기 (lying)
7. 독단주의(사실과 의견 혼동) (dogmatism)
[HAIL]
Honesty (be clear and straight)
Authenticity (be yourself)
Integrity (be your word)
Love (wish them well)
[말의 힘을 증가 시켜줄 도구]
1. 음성(register) (무게감을 원하면 음성을 가슴쪽으로 내려가야 함 -> 낮은 목소리를 가진 정치인에게 투표하는 경향이 있음)
2. 음색(timbre) (호흡법, 자세 등으로 음색으로 향상시키는 훈련을 통해서도 개선)
3. 운율(prosody) (단조로운 운율은 듣기 힘듬)
4. 속도(pace)
5. 음조(pitch)
6. 음량(volume)버려야할 말하기 습관
FE developer