드롭다운 활용
-
드롭다운 목록은 기본적으로 select태그로 구현!
-
항목을 선택하면 option[index]에서 선택한 option태그가 출력됨
-
multiple 속성을 부여하면 ctrl, shift키를 누르고 여러항목 선택 가능
-
toFixed() 메소드를 사용하여 소수점 몇번째 자리 출력가능!
체크박스 활용
- 체크박스는 일반적인 웹 페이지에서 약관을 읽었는지 확인하거나 SMS 수신 허가, 이메일 수신 허가 등에 사용하는 요소
- checked 속성 사용
- 타이머는 change 이벤트 발생 -> setInterval() , clearInterval() 함수 실행
라디오 버튼 활용
- 체크 박스와 마찬가지로 checked 속성을 사용
- name 속성이 없는 라디오 버튼은 중복 선택이 가능해진다!
기본 이벤트 막기
-
이미지에 마우스 오른쪽 버튼 클릭하면 컨텍스트 메뉴가 출력
-
어떤 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리해주는 것을 기본이벤트 라고 부름!
-
기본 이벤트를 제거할 때는 event 객체의 preventDefault()메소드 사용
-
불펌 방지등을 구현할때 사용하는 코드
<body>
<h1>할 일 목록</h1>
<input id="todo">
<button id="add-button"></button>
<div id="todo-list">
</div>
</body>
<script>
document.addEventListener("DOMContentLoaded",()=>{
const input = documnet.querySelector("#todo")
const todoList= documnet.querySelector("#todo-list")
const addButton = documnet.querySelector("#add-button")
let keyCount = 0
const addTodo=()=>{
if(input.value.trim()===""){
alert("할일 입력")
return
}
}
const item = document.createElemnet('div')
const checkbox = document.createElemnet('input')
const item = document.createElemnet('span')
const item = document.createElemnet('button')
const key = keyCount
keyCount+=1
item.setAttribute('data-key',key)
item.appendChild(checkbox)
item.appendChild(text)
item.appendChild(button)
todoList.appendChild(item)
checkbox.type = "checkbox"
checkbox.addEventListener('change'(event)=>{
item.style.textDecoration
= event.target.checked ? 'line-through':''
})
text.textContent = input.value
button.textContent = "제거"
button.addEventListener("click",()=>{
removeTodo(key)
})
input.value=''
}
const removeTodo = (key) =>{
const item = document.querySelector(`[data-key="${key}"]`)
todoList.removeChild(itme)
}
addButton.addEventListener('click',addTodo)
input.addEventListener('keyup',(event)=>{
const ENTER = 13
if(event.keyCode ===ENTER){
addTodo()
}
})
})
</script>
꺽이지 않는 마음