오늘은 07 - 2장의 내용 정리를 이어가 보자.
07 - 2장의 다음 부분은,여러 가지 글자 입력 양식 이벤트에 관해서 설명하고 있다.
글자 입력 양식 이벤트 사용자로부터 어떠한 입력을 받을 때 사용하는 요소를 입력 양식(form) 이라고 부른다. HTML에서는 input 태그, textarea 태그, button 태그, select 태그 등이 모두 입력 양식이다.
입력 양식을 사용하는 간단한 예를 살펴보자. 일단 inch 단위를 cm 단위로 변환하는 프로그램이다. 지금까지 배웠던 키보드 이벤트를 사용하면 숫자를 입력했을 때 실시간으로 변환할 수도 있다. 하지만 이번에는 button 태그의 활용도 함께 볼 수 있게 버튼을 클릭할 때 변환이 되도록 구현해 보자.
<! DOCTYPE html >
< html lang = " en " >
< head >
< title > Document </ title >
< script >
document . addEventListener ( ' DOMContentLoaded ' , () => {
const input = document . querySelector ( ' input ' )
const button = document . querySelector ( ' button ' )
const p = document . querySelector ( ' p ' )
button . addEventListener ( ' click ' , () => {
// 입력을 숫자로 변환한다
const inch = Number ( input . value )
// 숫자가 아니라면 바로 리턴한다
if ( isNaN ( inch )) {
p . textContent = ' 숫자를 입력해주세요 '
return // 조기 리턴
}
// 변환해서 출력한다
const cm = inch * 2.54
p . textContent = `${ cm } cm `
} )
} )
</ script >
</ head >
< body >
< input type = " text " > inch < br >
< button > 계산 </ button >
< p ></ p >
</ body >
</ html >
이번에는 인터넷에서 특정 사이트에 가입할 때 이메일과 전화번호 유효성 등을 검사하는 프로그램을 구현해보자.
<! DOCTYPE html >
< html lang = " en " >
< head >
< title > Document </ title >
< script >
document . addEventListener ( ' DOMContentLoaded ' , () => {
const input = document . querySelector ( ' input ' )
const p = document . querySelector ( ' p ' )
const isEmail = ( value ) => {
// 골뱅이를 갖고 있고 && 골뱅이 뒤에 점이 있다면
return ( value . indexOf ( ' @ ' ) > 1 )
&& ( value . split ( ' @ ' )[ 1 ] . indexOf ( ' . ' ) > 1 )
}
input . addEventListener ( ' keyup ' , ( event ) => {
const value = event . currentTarget . value
if ( isEmail ( value )) {
p . style . color = ' green '
p . textContent = ` 이메일 형식입니다: ${ value }`
} else {
p . style . color = ' red '
p . textContent = ` 이메일 형식이 아닙니다: ${ value }`
}
} )
} )
</ script >
</ head >
< body >
< input type = " text " >
< p ></ p >
</ body >
</ html >
isEmail() 함수는 indexOf() 함수 등을 활용해서 매개변수로 전달된 값이 이메일인지 확인하고 true 또는 false를 리턴한다.
완벽하진 않지만 간단하게 이메일인지 확인해 보는 프로그램을 구현해 보았다. indexOf() 의 리턴값이 1보다 커야 하므로 @ 과, 가 모두 앞에 최소 1글자가 오고 난 뒤 등장해야 올바른 메일로 판단하고 있다.
드롭다운 목록 활용하기
드롭다운 목록은 기본적으로 select 태그로 구현한다. select 태그는 사용 방법이 조금 특이하다. 다음 코드는 select 태그를 사용해서 드롭다운 목록을 만들고 드롭다운 목록을 선택했을 때(값이 변경되었을 때) 어떤 것을 선택했는지 출력하는 예제이다.
<! DOCTYPE html >
< html lang = " en " >
< head >
< title > Document </ title >
< script >
document . addEventListener ( ' DOMContentLoaded ' , () => {
const select = document . querySelector ( ' select ' )
const p = document . querySelector ( ' p ' )
select . addEventListener ( ' change ' , ( event ) => {
const options = event . currentTarget . options
const index = event . currentTarget . options . selectedIndex
p . textContent = ` 선택: ${ options[index] . textContent }`
} )
} )
</ script >
</ head >
< body >
< select >
< option > 떡볶이 </ option >
< option > 순대 </ option >
< option > 오뎅 </ option >
< option > 튀김 </ option >
</ select >
< p > 선택: 떡볶이 </ p > <!-- 초기 선택값: 떡볶이-->
</ body >
</ html >
실행결과
코드를 실행하고 드롭다운 목록에서 항목을 선택하면 options[index] 에서 선택한 option 태그가 출력된다. 현재 코드에서는 textContent 속성을 바로 추출해서 사용했는데, option 태그에 다른 속성들을 부여하고 속성을 활용할 수도 있다.
select 태그에 multiple 속성을 부여하면 ctrl 키 또는 shift 키를 누르고 여러 항목을 선택할 수 있는 선택 상자가 나온다. 이러한 multiple select 태그는 사용 방법이 조금 특이하므로 예제를 살펴보자.
<! DOCTYPE html >
< html lang = " en " >
< head >
< title > Document </ title >
< script >
document . addEventListener ( ' DOMContentLoaded ' , () => {
const select = document . querySelector ( ' select ' )
const p = document . querySelector ( ' p ' )
select . addEventListener ( ' change ' , ( event ) => {
const options = event . currentTarget . options
const list = []
for ( const option of options ) {
// options 속성에는 forEach() 메소드가 없다. 따라서 반복문을 돌린다.
if ( option . selected ) {
list . push ( option . textContent )
}
}
p . textContent = ` 선택: ${ list . join ( ' , ' ) }`
} )
} )
</ script >
</ head >
< body >
< select multiple >
< option > 떡볶이 </ option >
< option > 순대 </ option >
< option > 오뎅 </ option >
< option > 튀김 </ option >
</ select >
< p ></ p >
</ body >
</ html >
실행 결과
options 속성으로 모든 속성을 선택하고 반복문을 돌린 뒤, selected 속성으로 선택된 요소를 확인했다.
그럼 지금까지 배운 내용을 활용해서 여러 단위로 변환하는 프로그램을 만들어보자.
<! DOCTYPE html >
< html lang = " en " >
< head >
< title > Document </ title >
< script >
document . addEventListener ( ' DOMContentLoaded ' , () => {
let 현재값
let 변환상수 = 10
const select = document . querySelector ( ' select ' )
const input = document . querySelector ( ' input ' )
const span = document . querySelector ( ' span ' )
const calculate = () => {
span . textContent = ( 현재값 * 변환상수 ) . toFixed ( 2 ) // 소수점 2번째 자리까지 출력한다.
}
select . addEventListener ( ' change ' , ( event ) => {
const options = event . currentTarget . options
const index = event . currentTarget . options . selectedIndex
변환상수 = Number ( options [ index ] . value ) // 항목을 선택하면 항목의 value 속성을 추출한다
calculate ()
} )
input . addEventListener ( ' keyup ' , ( event ) => {
현재값 = Number ( event . currentTarget . value ) // 값을 입력하면 현재값을 추출한다
calculate ()
} )
} )
</ script >
</ head >
< body >
< input type = " text " > cm =
< span ></ span >
< select >
< option value = " 10 " > mm </ option >
< option value = " 0.01 " > m </ option >
< option value = " 0.393701 " > inch </ option >
</ select >
</ body >
</ html >
cm 단위를 여러 단위로 변환하는 프로그램
체크 박스 활용하기
이어서 체크박스를 살펴보자. 체크 박스처럼 체크 상태를 확인할 때는 입력양식의 checked 속성을 사용한다.
다음 예제는 체크 상태일 때만 타이머를 증가시키는 프로그램이다. change 이벤트가 발생했을 때 체크 박스의 상태를 확인하고 setInterval() 함수 또는 clearInterval() 함수를 실행한다.
<! DOCTYPE html >
< html lang = " en " >
< head >
< title > Document </ 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 속성 사용
// 체크 상태
timerId = setInterval ( () => { // setInterval은 내장함수, 1000 밀리초마다 timer를 1씩 증가시킴
timer += 1
h1 . textContent = `${ timer } 초 `
}, 1000 )
} else {
// 체크 해제 상태
clearInterval ( timerId )
}
} )
} )
</ script >
</ head >
< body >
< input type = " checkbox " >
< span > 타이머 활성화 </ span >
< h1 ></ h1 >
</ body >
</ html >
체크 박스 활용하기
코드를 실행하고 체크하면 타이머가 증가된다. 또한 타이머 체크를 해제하면 타이머가 중지된다.
체크 박스 활용하기
체크 박스와 비슷한 입력 양식 요소로 라디오 버튼이 있다. 라디오 버튼은 선택지 중에서 하나만 선택할 수 있게 해주는 요소이다. 체크 박스와 마찬가지로 checked 속성을 사용한다.
<! DOCTYPE html >
< html lang = " en " >
< head >
< title > Document </ title >
< script >
document . addEventListener ( ' DOMContentLoaded ' , () => {
// 문서 객체 추출하기
const output = document . querySelector ( ' #output ' )
const radios = document . querySelectorAll ( ' [name=pet] ' )
// 모든 라디오 버튼에
radios . forEach ( ( radio ) => {
// 이벤트 연결
radio . addEventListener ( ' change ' , ( event ) => {
const current = event . currentTarget
if ( current . checked ) {
output . textContent = ` 좋아하는 애완동물은 ${ current . value } 이시군요! `
}
} )
} )
} )
</ script >
</ head >
< body >
< h3 > # 좋아하는 애완동물을 선택해주세요 </ h3 >
< input type = " radio " name = " pet " value = " 강아지 " > <!-- 라디오 버튼을 하나씩만 선택하려면 name 속성을 동일하게 입력해 그룹으로 만들어야 한다-->
< 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 속성을 꼭 함께 사용하도록 하자.
뒷부분부터 내용이 살짝 달라지므로 잠깐 쉬어가자.
오늘 하루도 쌓였다.
