숙지를 위한 연습 문제들 답

1번

 

html

js

 

 

417.

- document에서 getElement...하면 html 전체에서 훓어서 가지고 오는거니까, 위에 416에서 ex1으로 한정한걸 section으로 해주었으니, section에서 class 가지고 오는거로. 

- 그리고 class는 이름 같은걸 여러개 넣어줄 수 있으니 [0] 붙여주는게 정석이긴 하다. 

---

 

2번 

 

js

 

 

397.

xInput에 넣은 값(xInput.value)은 화면에는 숫자처럼 보이지만 사실은 문자. 

그래서 parseInt를 해주고 -> 이 값을 x1에다가 담아줌

 

400.

그렇게 정수 변환한 값들 x1 + y1 을 result에다가 꽂아주자 (innerText) 

---

3번 

 

 

cf) 2번 문제까지는 getElementById, getElementByClass 로 해주었는데, 지금부터는 querySelector로. (장점은 다 이거로 써주고 괄호 안에만 id면 #, class면 . 로 주면 됨) 

 

373 - btn을 누르면 다음을 실행

375 - setInterval (을 실행)

376 - span자리에 써준 글자(innerText)를 // 문제에서는 60

        숫자로 변환해서 (parseInt)

        count로 해준 다음에

377- count 가 하나씩 줄어들게 해주고 

378 - 이걸 -> span.innerText로 해준다. (그럼 줄어든 숫자가 들어가게 되는 것)

 

379 - 1초마다 

 

---

4번 

 

 

container 부분은 문제에서 회색 부분 전체

 

337. 

박스 전체 꺼내기 위해 All 사용

 

338.

input 태그 하나니까 굳이 class 안주고 저렇게 데려옴

 

자바스크립트가 css에도 변화를 준다는게 요지인 문제 (문제 이름이 'css 속성 다루기') 

 

cf) 스타일 속성을 바꿔주려면 이렇게

boxes[0].style.left = "100px";

 

347. 

boxes[0]이면 첫번째 box니까 1 써진 파랑이. 

그 박스의.style의.left값을 = 400 되기 전까지 계속 증가시켜서 굴려주기 

 

// 이건 숙제로 한 방법

 

 

 

310. 우리는 지금 첫번째 파랑이 동그라미를 굴려주고 싶지

311. box의 style을 가지고 오는데

312. 스타일 중에서도 특정 스타일을 가지고 오고 싶을 때 ("left") - 여기서는 left의 스타일을 가지고 와준거지

 

314. 굳이 tid에 넣어준 이유는 317행을 위해 (left==400이 되면 멈춰주려고) 

 

정리하자면

306.버튼을 누르면

314를 실행하는데, 

312 통해 가지고 온 특정 스타일 left의 값을 계속 증가시킴 (70, 71, 72...) 

320. 그리고 box에 스타일을 이렇게 지정해주는거지. 

---

5번 

 

 

233.

'추가' 버튼을 누르면 

 

240. div 태그를 만들어주고

243 ~ 그 div의 스타일들은 이렇게 지정해줘

243. 배경색은 colorInput자리에 적은.값(value) <- 이건 정수로 변환할 필요가 없으니 parseInt 필요없고~ 

 

(아래 그림) 

254. 그리고 idInput의.값(value)를 div에 넣어줘(append)

 

// 여기까지 style 주고 값 주고 만든 div는 '이데아 속의' div. 이걸 실제로 container 자리에 구현을 해야겠지. 

255. container(문제에서 버튼 아래 공간)에 (위에까지 만든) div를 넣어줘 (append)  

 

 

 

259. 삭제 버튼을 누르면 

260. (생성된 div들 중에서) 첫번째를 

261. 삭제 (remove) 

 

 

265. 복제 버튼을 누르면

266. (생성된 div들 중에서) 첫번째를 

267. clonNode를 해주는데 

- 괄호 안에 true를 쓰면 -> 안에 쓴 글자도 같이 복제

  괄호 안에 false를 쓰거나, ()만 쓰면 -> 형태만 복제

43일차.  true 하면 -> 자식들 다~ 복제하는 것 false는 -> 껍데기만 복제

268. 그리고 container에 복제된걸 넣어야지

 

 

272. 바꾸기 버튼을 누르면

44일차. replaceChild(newChild, oldChild)인데 e1이 새로운 애가 되는 이유는, 떼어내서 다시 넣으니 새로운 애가 되는 것

277, 281 

---

 

6번 

 

 

45일차. e는 '이벤트 객체'를 받은 것 비) 누가 결혼했대! 라고 하면 '누구랑? 언제? 어디서?' 등과 같은 내용들이 더 궁금해질 것 -> 이 이벤트 객체를 통해서 구체적인 정보를 알아볼 수 있다는 것 193행 주석 처리된 것처럼 하면 안 됨!! 저러면 class = box에서 ting이 추가되는게 아니라, class=ting으로 되어버려서 기존 box 처리된게 사라지게 됨 -> 196행처럼 해야함 194행. toggle : 이전거와 다를 때 실행하라 (그래서 189행의 조건문 필요)

 

184. 문제에서 (박스들 포함) 회색 부분 전체(container)를 누르면

185. (눌렀는데) e.target의 classList가 box를 포함하고 있지 않으면(!) return (= 빈 손으로 그냥 돌아가게 하기 ㅎㅎ)

 

192. container에서 target한걸 = selcted라 하자.

 

189. (이거 이해하기 위해서는 두 개 동그라미에 지금 빨간 라인이 그려졌다고 생각해야함. 내 마우스는 3에 있는데, 이전에 해준 2를 remove 해주기 위한 조건식이라고 생각하면 이해가 간다.)

- null 값이 아닌데(그러니까 선택된게 있는거)  && 현재 내가 e.target 하고 있는게 아닌거면 

190. -> remove 해달라. 

 

194. 반대는 toggle 

 

 

 

208. 삭제 버튼을 누르면

209. 선택되어 있는걸 (만약 내가 2번 선택해서 가운데가 지금 빨간 라인이면 이게 삭제되는 것)

210. 삭제해달라 

---

7번

 

 

우선 content들 d-none

 

 

 

156. accordion 전체 부분을 가지고 할건데 

158. 만약 선택하는 부분 class에 title을 가지고 있지 않으면 return (빈 손으로 돌려보내기) 

 

47일차. nextSibling은 빈 공백 마저도 인식 -> nextElementSibling

 

158과 반대로 title이 있는걸 선택하게 되면, 

161. 

---

8번

 

 

 

116. 전체 product 부분에 대해서 해줄건데,

117. 대신 내가 e.target 하는 부분을 target이라고 해주는데 

118. target했는데 class에 up, down, choose가 포함되어 있지 않으면 -> return (빈 손으로 돌려보내기) 

 

125. up이 포함되어 있으면

126. up의 prarentNode 선택 (div) 한 것 중에서! input을 선택한걸 (왼쪽에 표시) var input에 담겠다.

127. 그리고 그 값!에 (input.value)에 1을 추가해주겠다.  

 

137 

 

47일차. parentNode는 공백같은 것도 인식해서 우리가 원하는 결과를 안 줄 수도 있기에, parentElement를 써야 우리가 딱! 원하는 결과를 준다는게 요지. (둘 다 쓸 수 있다는 것을 보이기 위해 쓰기는 다 쓰고..)