혼공학습단9기_자바스크립트
혼공단 자바스크립트 6주차 미션
퓨어워터맨
2023. 2. 18. 23:39
728x90
반응형
안녕하세요 시간은 정말 빨리 가는 거 같습니다. 이제 9기의 마지막 주차 과제네요
항상 끝날 때 되면 조금 더 잘 할걸 이라는 후회가 남습니다. 그래도 책 한권을 가볍게나마 뗄 수 있었다는 점에서 의의를 찾고 싶습니다. 시간을 따로내어 전체적으로 복습을 하도록 하겠습니다.
구분 | 진도 | 기본 미션 | 선택 미션 |
1주차 (1/2 ~ 1/8) |
Chapter 01 ~ 02 | p.54의 <파일 만들고 저장해 실행하기>에서 "Hello World" 출력하기 | Ch.01(01-1)확인 문제 1번 상세하게 적고 인증하기 |
2주차 (1/9 ~ 1/15) |
Chapter 03 | p. 139의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행 결과 인증하기 | p. 139의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행 결과 인증하기 |
3주차 (1/16 ~ 1/22) |
Chapter 04 | p. 195의 확인 문제 4번 풀고 인증하기 | p. 183 [좀 더 알아보기] 손코딩 실행하고 결과화면 인증하기 |
🙇설 연휴🙇 (1/23 ~ 1/29) |
야호! 한 주 쉬어갑니다 ❣️새해 복 많이 받으세요❣️ 야호! 한 주 쉬어갑니다 | ||
4주차 (1/30 ~ 2/5) |
Chapter 05 | p.202 <윤년을 확인하는 함수 만들기> 예제를 실행하여 2022년이 윤년인지 확인하는 결과 인증하기 | p. 240 확인문제 1번 풀고, 풀이 과정 설명하기 |
5주차 (2/6 ~ 2/12) |
Chapter 06 | 객체, 속성, 메소드가 무엇인지 설명하기 | p.288 확인 문제 3번 풀고, 풀이 과정 설명하기 |
6주차 (2/13 ~ 2/19) |
Chapter 07 ~ 08 | p. 315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡쳐하기 | p. 352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡쳐하기 |
기본미션 : p. 315의 <직접 해보는 손코딩>을 실행한 후 출력되는 고양이 이미지 캡쳐하기
<!DOCTYPE html>
<html>
<head>
<title> DOMContentLoaded </title>
<script>
document.addEventListemer('DOMContentLoaded', () =>{
const rects = document.quertSelectorAll('.rect') //측정 클래스 요소 선택
rects.forEach((rect, index) => {
const width = (index +1) *100
const src = 'http://placekitten.com/$(width)/250'
rect.setAttribute('src', src) // src 속성에 값을 저장
})
})
</script>
</head>
<body>
<img class = "rect">
<img class = "rect">
<img class = "rect">
<img class = "rect">
</body>
</html>
선택미션 : p. 352 누적 예제를 활용하여 본인의 할 일 목록을 만들어 캡쳐하기
<body>
<h1>할 일 목록</h1>
<input id="todo">
<button id="add-button">추가하기</button>
<div id="todo-list">
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', () => {
// 문서 객체 가져오기
const input = document.querySelector('#todo')
const todoList = document.querySelector('#todo-list')
const addButton = document.querySelector('#add-button')
// 변수 선언
let keyCount = 0
// 함수 선언
const addTodo = () => {
// 입력 양식에 내용이 없으면 추가 X
if(input.value.trim() === ''){
alert('할 일을 입력해주세요.')
return
}
// 문서 객체 설정
const item = document.createElement('div')
const checkbox = document.createElement('input')
const text = document.createElement('span')
const button = document.createElement('button')
// 문서 객체를 식별할 키 생성
const key = keyCount
keyCount += 1
// item 객체 조작 및 추가
item.setAttribute('data-key', key)
item.appendChild(checkbox)
item.appendChild(text)
item.appendChild(button)
todoList.appendChild(item)
// checkbox 객체 조작
checkbox.type = 'checkbox'
checkbox.addEventListener('change', (event) => {
item.style.textDecoration
= event.target.checked ? 'line-through' : ''
})
// text 객체 조작
text.textContent = input.value
// button 객체 조작
button.textContent = "제거하기"
button.addEventListener('click', () => {
removeTodo(key)
})
// 입력 양식의 내용 비우기
input.value = ''
}
const removeTodo = (key) => {
// 식별 키로 문서 객체 제거
const item = document.querySelector(`[data-key="${key}"]`)
todoList.removeChild(item)
}
// 이벤트 연결
addButton.addEventListener('click', addTodo)
input.addEventListener('keyup', (event) => {
// 입력 양식에서 Enter 키 누르면 바로 addTodo() 호출
const ENTER = 13
if(event.keyCode === ENTER){
addTodo()
}
})
})
</script>
어마어마한 코딩에 잠깐 놀랐지만, 그래도 차분히 하다보니 작성을 완료 하였습닏.
마무리 및 회고
6주간의 활동이 이제 끝났는데, 약간의 아쉬움도 있는 것이 사실입니다. 더 열심히 할걸...
3월달에는 전체적으로 복습하고, 코딩에 대한 기초 체력을 기르도록 하겠습니다.
그동안 모두 고생하셨습니다.
728x90
반응형