반응형
- D09_dom_버튼_암기 - 01_기본
- 대부분이 웹은 버튼이다.
- _00_this개념1.html
- 누른 애를 찾을 수 있어야 한다.
- 버튼이랑 윈도우를 구분할 수 있어야 한다.
- onclick="btn1Function()"은 이 버튼을 클릭했을 때 실행할 함수를 지정해요.
- onclick 방식은 HTML 안에 자바스크립트 로직이 들어가요.
- 이 방식은 간단하지만, 유지보수가 어렵고 비추천되는 방식이에요. 실무에서는 잘 안 써요.
- alert(this);는 this가 무엇인지 팝업으로 보여줘요.
- 여기서 this는 **버튼 자기 자신(btn1)**을 가리켜요.
- document.querySelector("#btn2").addEventListener("click", btn2Function);
👉 전체 의미:
"웹 페이지에서 id가 btn2인 버튼을 찾아서, 클릭했을 때 btn2Function을 실행해줘." - ✅ 그럼, 왜 btn1은 안 가져와도 되나요?
- btn1 관련 코드는 이 코드와 전혀 관계없어요.
- btn1은 onclick 속성 방식으로 작동하는 별도의 코드이고,
- 우리가 지금 쓰는 이 한 줄은 btn2 버튼에 이벤트 리스너를 자바스크립트로 직접 연결하는 방식이에요.
- 네! addEventListener를 쓰려면 대상 요소를 먼저 꺼내와야 해요.
- 반면에 onclick은 HTML 안에서 직접 지정하니까 굳이 꺼내오지 않아도 돼요.
- <button id="btn1" onclick ="btn1Function()">onClick의 this</button>
- 버튼을 누르자 마자 ㅎ마수를 실행해!
- 즉, HTML이 직접 "이벤트 연결"을 해주고 있어요.
- 자바스크립트가 굳이 DOM에서 버튼을 "찾지 않아도" 돼요.
- 💡 그냥 HTML에서 바로 알려줬으니까 자바스크립트는 몰라도 돼요.
- 2. addEventListener는 왜 요소를 꺼내야 할까?
const btn = document.querySelector("#btn2"); btn.addEventListener("click", sayHi);
- 자바스크립트는 "어떤 요소에 이벤트를 붙일지" 알아야 해요.
- 그러려면 먼저 HTML에서 그 요소를 찾아와야 하죠.
- querySelector를 통해 btn2 버튼을 변수로 꺼내오고, 그 다음에 이벤트 리스너를 연결하는 구조예요.
“querySelector로 꺼내서, 거기에 이벤트리스너를 붙이는 느낌”
→ 이게 정확한 이해예요! 👍
addEventListener를 쓰려면 querySelector로 요소를 꺼내와서, 그 요소에 **이벤트를 "붙이는 느낌"**이 맞아요.
onclick은 HTML에서 직접 실행시키기 때문에 꺼내올 필요가 없습니다.
- _00_this개념2.html
- 나를 찾고 싶은것
- _01_노드한개_그리기.html
- f12를 눌러서 td가 생김
- 스타일에서 td라는 기준점. 틀을 만들고 script에서 옮기는 느낌
- "이름이 td인 애는 다 이렇게 생겨!" 라고 지정하는 거예요. 도장판처럼요.
- "기준점을 하나 만들어두고, 그걸 이리저리 옮기거나 추가하는 느낌이다"
→ 맞습니다! 정확해요! - 이게 바로 **"DOM 조작"**의 핵심이에요.
- 먼저, 이 코드는 무엇을 알려주려는 코드인가?즉,
- HTML을 직접 쓰지 않고,
- JS로 <td>(테이블 셀)을 만들고,
- 웹 페이지에 붙이는 방식이에요.
실무에서 자주 쓰입니다! - 자바스크립트를 사용해서 HTML 요소를 동적으로 만드는 법을 알려주는 예제예요.
- let body = document.body;
- document: 현재 웹 페이지 전체를 의미해요.
- document.body: 그 중에서도 <body> 태그를 가리킵니다.
- 나중에 뭔가를 body에 붙이거나 조작하려면, 이렇게 참조를 저장해두는 게 편해요.
- let node = document.createElement("td");
- document.createElement("td"): 새로운 <td> 태그를 하나 만듭니다.
👉 이건 아직 화면에 안 붙어 있음! - let node = ...: 새로 만든 요소를 node라는 이름으로 저장해둔 거예요.
- <td>는 표(table)의 한 칸이죠.
자바스크립트로 HTML 코드를 직접 만들고 있는 거예요!
지금 만든 이 node는 눈에 안 보여요. 메모리에만 있어요. - 이 node는 HTML 코드처럼 보이지 않지만, 실제로는 브라우저 메모리 안에 존재하는 HTML 요소예요.
- 아직 페이지에는 안 붙었기 때문에 눈에 보이지 않아요.
- document.createElement("td"): 새로운 <td> 태그를 하나 만듭니다.
- body.append(node);
- 방금 만든 <td>를 웹페이지의 <body>에 붙이는 동작이에요.
이걸 해야 비로소 브라우저 화면에 나타나요! - append()는 요소를 실제 DOM에 추가하는 명령이에요.
- 이 한 줄이 없으면, 만든 요소는 그냥 숨어 있는 상태로 남아요.
- 웹페이지에 요소를 보여주려면 반드시 이 동작이 필요해요.
- 방금 만든 <td>를 웹페이지의 <body>에 붙이는 동작이에요.
- _02_노드한개_이벤트적용1.html
- 이벤트를 넣어줌
- append를 안 하면?
- 그냥 createElement로 요소를 만들기만 하면,
- 그 요소는 메모리에만 존재하고 화면에 전혀 보이지 않습니다.
- 그래서 꼭 append 같은 메서드를 사용해 DOM 트리에 붙여야 보이는 거예요!
- 코드역할
document.createElement("td") 새 <td> 요소를 메모리에 만듦 body.append(node) 만든 <td>를 페이지 <body>에 붙임 (화면에 표시)
- _03_노드한개_이벤트적용2.html
- 함수
- 클릭 이벤트가 발생하면 실행되는 함수예요.
- e는 이벤트 객체, e.target은 클릭된 <td> 요소.
- 만약 check가 false(처음엔 빈 상태)이면
→ 글자를 "눌렀음!"으로 바꿔서 표시해요. - check가 true면
→ 글자를 빈 문자열 ""로 만들어서 지워요. - 마지막에 check = !check;는
→ check를 반전시켜서, 다음 클릭 때 상태가 바뀌도록 함.
- e.target이란?
- e는 **이벤트 객체(event object)**라고 불려요.
- 이벤트가 발생할 때 브라우저가 자동으로 만들어서 이벤트 핸들러 함수에 넘겨줘요.
- e 안에는 그 이벤트에 관한 여러 정보가 담겨있어요.
- 그중에서 e.target은 **“이벤트가 실제로 발생한 HTML 요소”**를 가리켜요.
- e.target.innerText = "눌렀음!";
- td자기 자신에게 글자를 넣어라. =>e.target(자기자신)
- _04_노드여러개_그리기1.html
- 테이블 만듬
- tr도 만듬
- td를 5개를 만들고
- tr을 5개를 넣은것
- tr을 테이블에 넣고
- 테이블을 바디에 넣은것
- f12들어가서 봐야한다. - 요소
- **HTML 테이블(table)**을 자바스크립트로 직접 만들 수 있다는 것
- createElement, append를 이용한 DOM 조작 방식
- 반복문을 활용해서 여러 개의 셀(<td>)을 동적으로 만들기
- ⭐ 특히 중요하게 짚고 넘어갈 부분
- 새 요소를 만들고, 원하는 부모 요소에 붙이는 기본 방식입니다.
- create → append 흐름은 자바스크립트로 HTML 조작의 핵심 패턴이에요.
- for문을 사용해 코드를 반복적으로 줄이면서 많은 요소를 만들 수 있어요.
- 이 패턴은 나중에 3x3 틱택토 게임판, 스프레드시트, 달력 등 만들 때 기본이 됩니다.
- ✅ 1. createElement()와 append() 조합
- _05_노드여러개_이벤트적용1.html
- 🔍 스코프란?
- let num = 1; 은 함수 밖에서 선언되어 있기 때문에 **전역 변수(global variable)**입니다.
- 모든 clickEvent 함수는 이 전역 변수에 접근할 수 있어요.
- 그래서 칸이 여러 개여도, 전부 **같은 숫자 상태(num)**를 공유하게 됩니다.
- ❓ “전에 눌렀던 숫자를 어떻게 기억하나요?”
- 👉 그 숫자는 td 안의 innerText에 저장되어 있기 때문에 기억되는 거예요!
- e.target.innerText = num;
- _06_노드여러개_이벤트적용2.html
- 함수
- ✔ 중요한 부분 하나씩 찝어서 설명하면:
- e: 클릭 이벤트 객체예요. 클릭된 요소 정보가 담겨 있음.
- e.target: 클릭한 그 td 셀을 의미.
- e.target.innerText: 클릭한 셀에 있는 숫자 텍스트 값.
- Number(...): 문자열로 되어 있는 텍스트를 숫자형으로 바꿈.
- if (value % 2 == 0): 짝수인지 판별.
- alert(...): 사용자에게 결과 알려줌.
- innerText를 통해 요소 안의 값을 가져오고
- Number()로 데이터 타입을 바꿔서
- if 문으로 조건에 따라 로직을 분기합니다.
- _07_노드1차원배열_그리기_이벤트적용.html
- 누를때 인덱스 숫자가 나오도록
- 🧠 실행 흐름 요약
- <td> 셀 5개를 만들어서 테이블에 넣고
- 셀을 클릭하면 clickEvent가 실행되고
- 클릭된 셀(e.target)의 innerText와
전체 셀 리스트(tdList)를 비교해서 - **몇 번째 셀인지(i)**를 찾아서 alert로 출력
- 📌 이벤트 함수부터 볼게요:
-
🔥 여기서 중요한 포인트코드설명
function(e) e는 클릭 이벤트 객체예요. 사용자가 어떤 걸 클릭했는지 담고 있어요. e.target 실제로 클릭한 셀 <td> 그 자체 tdList[i] 우리가 직접 만든 td 셀들의 배열 innerText 비교 클릭된 셀의 숫자와 배열에 있는 셀의 숫자가 같으면 → 같은 셀이라고 판단 alert(i) 셀이 몇 번째(0~4)인지 알려줌 - 모든 셀을 배열에 저장했다는 점 (tdList)
- 클릭된 셀을 배열의 값들과 비교하여 인덱스를 알아낸다는 점
- 매우 기본적이지만 꼭 필요한 로직
- _08_노드여러개_그리기2_이벤트적용.html
- 숫자가 계속 늘어다도록
- 함수는 익명함수
- tr이 5개가 있음
- 2차원으로 만듬
- _09_노드2차원배열_그리기_이벤트적용.html
- 익명함수 e.target 잡음
- 지금 this냐. e.target이냐 이것을 구분
- 이것을 찾아야지 버튼을 찾을 수 있다.
- 누른 자기자신을 찾고 싶다.
- _10_화살표함수.html
- 화살표 함수는 e.target으로 찾는다.
- _11_변수명표기법.html
반응형
'코딩 > 1-JavaScript' 카테고리의 다른 글
| 댓글 알고리즘 을 추가 (0) | 2025.06.05 |
|---|---|
| 02_틱택토1단계, 02_틱택토2단계 (0) | 2025.06.05 |
| _12_ToDoList ~ _17_회원가입_템플릿 (0) | 2025.06.04 |
| _12_ToDoList ~ _17_회원가입_템플릿 (0) | 2025.06.02 |
| _01_간식고르기 ~ _11_이미지슬라이드 (1) | 2025.05.29 |