체크박스 활용
일반적인 웹 페이지에서 약관을 읽었는지 확인하거나 SMS 수신 허가, 이메일 수신허가등에 사용하는 요소이다
체크박스처럼 체크상태를 확인 할 때는 입력양식의 checked속성을 사용한다
체크박스의 체크상태를 확인하고 setInterval() , clearInterval() 함수를 실행함
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
document.addEventListener('DOMContentLoaded', () => {
let [timer, timerId] = [0, 0]
const h1 = document.querySelector('h1')
const checkbox = document.querySelector('input')
checkbox.addEventListener('change', (event) => {
if (event.currentTarget.checked) { //checked 속성을 사용
//setInterval() : 시간 간격두고 반복 및 실행
//clearInterval() : 반복중지 및 재시작
// 체크 상태
timerId = setInterval(() => {
timer += 1
h1.textContent = `${timer}초`
}, 1000)
} else {
// 체크 해제 상태
clearInterval(timerId)
}
})
})
</script>
</head>
<body>
<input type="checkbox">
<span>타이머 활성화</span>
<h1></h1>
</body>
</html>
라디오버튼
<body> // 버튼을 하나씩만 선택하려면 name속성을 동일하게 입력해 그룹으로 만든다
<h3># 좋아하는 애완동물을 선택해주세요</h3>
<input type="radio" name="pet" value="강아지">
<span>강아지</span>
<input type="radio" name="pet" value="고양이">
<span>고양이</span>
<input type="radio" name="pet" value="햄스터">
<span>햄스터</span>
<input type="radio" name="pet" value="기타">
<span>기타</span>
<hr>
<h3 id="output"></h3>
</body>
</html>
이런식으로 name속성을 한 그룹에 둔다면, 중복선택할 수가없고 하나씩 선택가능
단, name속성을 아예 없앤다면 중복선택 가능
기본 이벤트 막기
대상에 갖다대고 마우스 오른쪽 버튼 클면
위와 같은 컨텍스트 메뉴 출력
어떠한 이벤트가 발생했을 때 웹 브라우저가 기본적으로 처리 해주는 것을 기본 이벤트라고 함
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const imgs = document.querySelectorAll('img')
imgs.forEach((img) => {
img.addEventListener('contextmenu', (event) => {
event.preventDefault() <- 컨텍스트 메뉴 출력 제거
})
})
})
</script>
</head>
<body>
<img src="http://placekitten.com/300/300" alt="">
</body>
</html>
저걸 써주게 되면 컨텍스트메뉴가 나타나는걸 막아줌
보통 불펌방지를 위해서 사용하는 이벤트
체크 때만 링크 활성화 하기
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
document.addEventListener('DOMContentLoaded', () => {
let status = false
const checkbox = document.querySelector('input')
checkbox.addEventListener('change', (event) => {
status = event.currentTarget.checked
}) // checked 속성을 사용
const link = document.querySelector('a')
link.addEventListener('click', (event) => {
if (!status) {
//status가 false가 아니면 링크의 기본 이벤트 제거
event.preventDefault()
}
})
})
</script>
</head>
<body>
<input type="checkbox">
<span>링크 활성화</span>
<br>
<a href="http://hanbit.co.kr">한빛미디어</a>
</body>
</html>
체크 되어있으면 : 링크타고 들어가기 가능
체크 해제되어있으면 : 버튼자체는 활성화 되어있으나 들어가기 불가능
단, 해제되어있을때 컨텍스트 메뉴로 새창열고 들어가면 뚫림
키보드 이벤트
글자 수 출력하기
<script>
document.addEventListener('DOMContentLoaded', () => {
const textarea = document.querySelector('textarea')
const h1 = document.querySelector('h1')
let timerId
textarea.addEventListener('focus', (event) => {
timerId = setInterval(() => {
// 'focus' - 입력양식 활성화
const length = textarea.value.length
h1.textContent = `글자 수: ${length}`
}, 50)
})
textarea.addEventListener('blur', (event)
//'blur' - 입력양식 비활성화
=> {
clearInterval(timerId)
})
})
</script>localStorage 객체
웹 브라우저에 데이터를 저장하는 localStorage 객체
- localStorage.getItem(키) : 저장된 값을 추출, 없으면 undefined 출력
- localStorage.setItem(키,값) : 값을 저장, 객체에 속성을 지정하는 일반적인 형태를 사용
- localStorage.removeItem(키): 특정 키의 값을 제거
- localStorage.clear() : 저장된 모든 값을 제거
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const p = document.querySelector('p')
const input = document.querySelector('input')
const button = document.querySelector('button')
const savedValue = localStorage.getItem('input')
// localStorage.input도 가능합니다. //값을 읽을 때는 getItem() 메소드 사용
if (savedValue) {
input.value = savedValue
p.textContent = `이전 실행 때의 마지막 값: ${savedValue}`
}
input.addEventListener('keyup', (event) => {
const value = event.currentTarget.value
localStorage.setItem('input', value)
// localStorage.input = value도 가능합니다. //값을 저장할 때는 setItem() 메소드 사용
})
button.addEventListener('click', (event) => {
localStorage.clear() // 값을 모두 제거할 때는 clear() 메소드를 사용
input.value = ''
})
})
</script>
</head>
<body>
<p></p>
<button>지우기</button>
<input type="text">
</body>
</html>
이와 같이 최초에는 이전 값이 없어서 표출되지 않았지만 입력해놓고 새로고침을 한다면,
그 값을 저장해서 나타나게 해줌
-
target은 누른 바로 그 것, currentTarget은 이벤트를 실행하는 바로 그 것
-
textContent속성의 정의 : 지정된 노드와 모든 자손의 텍스트 내용을 설정하거나 반환한다 .
내용 설정하는 경우, 모든 자식 노드가 제거되고 지정된 문자열을 포함하는 단일 Text 노드로 대체된다.
localStorage 처럼 웹 브라우저가 제공해주는 기능을 "웹 API" 라고 부른다
uk_sanj