블로깅 주제
- 이벤트 객체
1. 지금 현재, 당신의 기분이나 느낌을 표현해 주세요.
- DOM이라는 개념은 처음이라 배울 때 정신이 없었던 것 같다. 페어분께서 너무 잘 설명해주시고 하나하나 차근차근 가르쳐주셔서 과제를 무사히 잘 끝냈던 것 같다. 내일이면 벌써 코즈 미니 해커톤을 진행한다! 아등바등 정신없이 하루하루를 보냈지만 여기까지 온 나 자신 칭찬한다^^
2. 오늘 무엇을 학습한 내용 중 지금 떠올릴 수 있는 단어를 모두 나열해 주세요.
- 이벤트 객체
3. 2에서 작성한 단어를 가지고, 오늘의 학습 내용을 설명해 보세요.
- 이벤트 객체
<!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>
let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.
let btnAmericano = menus[0];
let btnCaffelatte = menus[1];
function handleClick(event) {
let currentMenu = event.target.textContent; // TODO
console.log(currentMenu + "를 클릭하셨습니다.");
}
btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.
</script>
</body>
</html>Q. 질문
- event 객체에는 어떤 내용이 출력되나요? -> 사용자 입력을 트리거로 발생한 event 정보
- event.target은 어떤 값을 담고 있나요? -> event가 발생한 대상 객체
- '아메리카노', '카페라떼'라는 문자열은 어디에 담겨있나요? -> event.target.textContent
function handleClick(event) {
console.log(event);
}
function handleClick(event) {
console.log(event.target);
// 아래의 빈 칸(____)을 채우세요.
// console.log("working?");
let currentMenu = event.target.innerHTML;
// 또는 event.target.textContent
console.log(currentMenu + "를 클릭하셨습니다.");
}
- append vs appendChild vs preapend
append : 노드, 문자열 추가 가능. 선택된 요소 맨 뒤에 추가됨.
appendChild: 생성이 되어있는 노드 한 개만 추가 가능. 선택된 요소 맨 뒤에 추가됨.
preapend: 노드, 문자열 추가 가능. 선택된 요소 맨 앞에 추가됨.
https://velog.io/@ldaehi0205/Javascript-append-appendChild-prepend
[Javascript] append, appendChild, prepend
appendChild는 DOM 메서드이므로 생성되이 있는 요소만 추가가 가능하다. 추가 노드 갯수도 1개로 제한되어 있다.let p = document.createElement('p');document.getElementById('myId').appendChild(p)
velog.io
document.cloneNode : 복제하는 메서드
document.importNode : template 을 활용하여 내용을 붙여 넣을 때 사용하는 메서드
document.getElementById('div') : id가 <div>요소 하나를 조회
document.getElementsByClassName('div') : class가 <div>요소 '여러 개'를 조회
유효성 검사 과제 : 회원가입 페이지 만들기
1. 입력한 id의 길이가 4 이상인지 확인
2. 비밀번호 및 비밀번호 재입력에 입력한 문자가 일치한지 확인
3. 아이디가 영문으로 시작하는지, 영문 및 숫자의 조합인지 확인
4. 비밀번호에 특수문자가 포함되는 등 강력한 비밀번호 형식인지 확인
'코드스테이츠 SEB FE 41기 > Section 별 내용 정리' 카테고리의 다른 글
| section2/unit1/Javascript 고차함수(9/20) (2) | 2022.09.20 |
|---|---|
| section1/unit12/Coz’ Mini Hackathon(9/15~16) (0) | 2022.09.16 |
| section1/unit11/DOM(9/13) (0) | 2022.09.13 |
| section1/unit10/Javascript 핵심 개념과 주요 문법(9/8) (0) | 2022.09.08 |
| section1/unit10/Javascript 핵심 개념과 주요 문법(9/7) (0) | 2022.09.06 |
