#6 명언과 배경
배경
- 준비
- js 파일 만들어서 html에 연결.
- 이미지 파일들 따로 폴더 만들어서 넣어둠.
- js
- images 배열 만들어서 안에 이미지 파일의 이름들 넣음.
- 배열에서 가져올 이미지 이름을 랜덤 인덱스로 뽑음.
- 이전까지는 html에 만들어놓은 요소를 js에서 찾았음. 근데 이번엔 js에서 만들고 나서 html에 추가해야 함.
- document.createElement("img") : img 태그를 만들 수 있음. elements 탭에서 찾을 수 없는데(페이지에 존재하지 않음) 만들었으니 일단 존재함.
- 변수로 정의하면 img 태그를 객체로, 그 안의 src도 찾을 수 있음.
- string으로서 <img src="img/파일명.jpg"> 태그 만들어놓고 html <body>에 추가.
- document.body.appendChild(추가할 태그)
- body 안 맨 마지막에 태그 추가해줌.
- prepend : 맨 앞에 추가.
- [질문] html에 img 태그 만들어놓고 그 안의 src 속성을 js에서 고치면 안 되나?'
- document.createElement("img") : img 태그를 만들 수 있음. elements 탭에서 찾을 수 없는데(페이지에 존재하지 않음) 만들었으니 일단 존재함.
#7 To-do 리스트
셋팅
- 세팅 : todo.js 만들어 html에 import.
- html
- form : 사용자가 todo 입력
- todo-form 아이디 가진 <form>과 그 안에 <input>
- list : 입력한 todo를 리스트로 나열
- todo-list 아이디 가진 <ul> 만듦.
- 그 안에 <li>는 미리 만들어둘 필요 없음. js로 추가할 것.
- form : 사용자가 todo 입력
- js
- form, input, ul 태그 가져옴.
- input은 form 안에 있음. document가 아니라 toDoForm 안에서 찾으면 그냥 "input"으로 검색해도 됨.
- form은 submit 이벤트 가짐.
- 함수를 만들어서 기본 동작 막음.
- input의 값을 변수에 저장하고 지움.
- form, input, ul 태그 가져옴.
ToDo 추가하기
- paintToDo(newTodo) : todo를 그리는 역할의 함수.
- 그려야 할 것(newTodo)을 인자로 줌.
- <li> 태그를 만들어서 그 안에 newTodo가 담긴 <span>을 넣음.
- <li> 안에 이 toDo를 삭제하는 <button> 만들 거라서.
- 남은 문제
- 리스트의 todo를 지울 수 없음.
- 새로고침하면 사라짐.
ToDo 지우기(버튼)
- <button>도 <li> 안에 넣음.
- <li> 안의 <button>은 클릭 이벤트 기다려야 함.
- eventListener 추가.
- todo 지우는 함수 만듦.
- [문제] 클릭된 버튼이 어떤 <li>인지 모름.
- JS에서 자동으로 보내주는 event에 대한 정보 이용하면 됨.
- .path를 보면 어떤 요소에서 클릭 일어났는지 알 수 있음.
- event.target : 이벤트가 일어난 HTML 태그에 대한 정보
- .parentNode/.parentElement는 클릭된 버튼의 부모. 이걸 삭제하면 됨.
- JS에서 자동으로 보내주는 event에 대한 정보 이용하면 됨.
- 삭제하고 싶은 <li> 변수로 저장.
- li.remove() : 삭제
- [문제] 클릭된 버튼이 어떤 <li>인지 모름.
'TIL' 카테고리의 다른 글
| [TIL-49] 노마드코더 크롬앱(JS) 클론코딩 #7.6~#7.8 (0) | 2021.10.29 |
|---|---|
| [TIL-48] 노마드코더 크롬앱(JS) 클론코딩 #7.3~#7.5 (0) | 2021.10.29 |
| [TIL-46] 노마드코더 크롬앱(JS) 클론코딩 #5.0~#6.0 (0) | 2021.10.26 |
| [TIL-45] 노마드코더 크롬앱(JS) 클론코딩 #4.4~#4.7 (0) | 2021.10.24 |
| [TIL-44] 노마드코더 크롬앱(JS) 클론코딩 #4.0~#4.3 (0) | 2021.10.24 |