왕진 블로그
반응형
Web Development · JavaScript
JavaScript 폼 입력 요소
focus/blur 검증, radio 선택 확인, checkbox 합계 계산을 정리합니다.
시작 오늘 분석할 코드
이 예제는 사용자의 선택과 입력에 따라 화면 값을 바꾸는 흐름을 다룹니다. 이미지는 src를 바꾸고, 폼 요소는 value, checked, focus()를 읽고 제어합니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>onfocus와 onblur</title> <script> function checkFilled(obj) { if(obj.value == "") { // obj에 입력된 것이 없다면 obj.focus(); // obj에 다시 포커스 } } </script> </head> <body onload= "document.getElementById('name').focus();"> <h3>onfocus와 onblur</h3> <hr> <p>이름을 입력하지 않고 다른 창으로 이동할 수 없습니다.</p> <form> 이름 <input type="text" id="name" onblur="checkFilled(this)"><p> 학번 <input type="text"> </form> </body> </html> <!-- 다음 폼/이미지 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>선택된 라디오버튼 알아내기</title> <script> function findChecked() { let found = null; let kcity = document.getElementsByName("city"); for(let i=0; i<kcity.length; i++) { if(kcity[i].checked == true) found = kcity[i]; } if(found != null) alert(found.value + "이 선택되었음"); else alert("선택된 것이 없음"); } </script> </head> <body> <h3>버튼을 클릭하면 선택된 라디오 버튼의 value를 출력합니다.</h3> <hr> <form> <input type="radio" name="city" value="seoul" checked>서울 <input type="radio" name="city" value="busan">부산 <input type="radio" name="city" value="chunchen">춘천 <input type="button" value="find checked" onclick="findChecked()"> </form> </body> </html> <!-- 다음 폼/이미지 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>선택된 물품 계산하기</title> <script> let sum=0; function calc(cBox) { if(cBox.checked) sum += parseInt(cBox.value); else sum -= parseInt(cBox.value); document.getElementById("sumtext").value = sum; } </script> </head> <body> <h3>물품을 선택하면 금액이 자동 계산됩니다</h3> <hr> <form> <input type="checkbox" name="hap" value="10000" onclick="calc(this)">모자 1만원 <input type="checkbox" name="shose" value="30000" onclick="calc(this)">구두 3만원 <input type="checkbox" name="bag" value="80000" onclick="calc(this)">명품가방 8만원<br> 지불하실 금액 <input type="text" id="sumtext" value="0" > </form> </body> </html>
실제 출력 미리보기
지불 금액
용어 용어 정리
srcimg 요소가 표시할 이미지 파일 경로입니다.
new Image()이미지 객체를 미리 만들어 파일을 로딩하게 하는 생성자입니다.
selectedIndexselect에서 현재 선택된 option의 순번입니다.
value입력 요소나 option이 가진 실제 값입니다.
checkedradio나 checkbox가 선택되었는지 나타내는 boolean 값입니다.
focus()특정 입력 요소에 커서를 다시 위치시키는 메서드입니다.
1 사용자 선택으로 화면 바꾸기
JavaScript는 사용자가 클릭하거나 선택한 값을 읽어 HTML 요소의 속성을 바꿉니다. 이미지 변경은 img.src, 계산 결과 출력은 input.value를 바꾸는 방식입니다.
사용자 입력
→
값 읽기
→
DOM 속성 변경
→
화면 갱신
2 이미지 프리로딩
new Image()로 이미지 객체를 미리 만들고 src를 지정하면 브라우저가 이미지를 미리 로딩합니다. 클릭할 때 이미지를 바꾸면 체감 지연이 줄어듭니다.
imgs[i] = new Image(); imgs[i].src = files[i]; img.src = imgs[next].src;
프리로딩은 이미지 슬라이드나 갤러리처럼 다음 이미지가 곧 필요할 때 효과적입니다.
3 select와 option 값
select 예제는 selectedIndex로 현재 option을 찾고, 그 option의 value를 이미지 src로 넣습니다. 화면에 보이는 글자와 실제 value는 다를 수 있습니다.
| 항목 | 의미 | 예시 |
|---|---|---|
| select | 선택 박스 전체 | fruits |
| option | 선택 가능한 항목 | 바나나 |
| selectedIndex | 선택된 순번 | 1 |
| value | 실제 사용할 값 | media/banana.png |
반응형
4 focus와 blur 검증
onblur는 입력 요소가 포커스를 잃을 때 발생합니다. 이름이 비어 있으면 focus()로 다시 입력 칸에 커서를 돌려보내 필수 입력을 유도합니다.
onfocus
입력 요소에 커서가 들어올 때 발생합니다.
onblur
입력 요소에서 커서가 빠져나갈 때 발생합니다.
5 radio 선택 확인
같은 name을 가진 radio 버튼은 하나만 선택됩니다. getElementsByName()으로 묶음을 가져와 반복하면서 checked가 true인 요소를 찾습니다.
let kcity = document.getElementsByName("city"); for (let i = 0; i < kcity.length; i++) { if (kcity[i].checked) found = kcity[i]; }
6 checkbox 합계 계산
checkbox는 여러 개를 동시에 선택할 수 있습니다. 클릭한 항목이 체크되면 가격을 더하고, 체크가 해제되면 가격을 빼서 합계를 갱신합니다.
| 상태 | 처리 | 결과 |
|---|---|---|
| checked true | sum += value | 합계 증가 |
| checked false | sum -= value | 합계 감소 |
| value 문자열 | parseInt(value) | 숫자로 변환 |
| sumtext | value 대입 | 화면에 합계 표시 |
7 작성 순서
1
요소에 id/name 부여JavaScript가 찾을 기준을 HTML에 먼저 만든다.
2
이벤트 연결onclick, onchange, onblur 같은 이벤트를 함수와 연결한다.
3
값 읽기value, checked, selectedIndex를 읽는다.
4
화면 갱신src, value, innerHTML 같은 DOM 속성에 결과를 넣는다.
8 자주 하는 실수
| 실수 | 증상 | 해결 |
|---|---|---|
| 이미지 경로 오타 | 이미지가 깨져 보입니다. | option value와 실제 파일 경로를 맞춥니다. |
| selectedIndex 대신 표시 텍스트 사용 | src에 잘못된 값이 들어갑니다. | option.value를 사용합니다. |
| value를 숫자로 변환하지 않음 | 문자열 덧셈이 됩니다. | parseInt 또는 Number를 사용합니다. |
| radio name을 다르게 둠 | 여러 개가 동시에 선택됩니다. | 같은 그룹은 같은 name을 씁니다. |
| onblur에서 무조건 focus | 사용자가 다른 입력으로 이동하지 못합니다. | 정말 필수일 때만 조건부로 실행합니다. |
9 최종 체크리스트
| 체크 | 통과 기준 |
|---|---|
| 이미지 | src 변경 흐름을 설명할 수 있습니다. |
| select | selectedIndex와 option.value를 구분합니다. |
| focus | focus와 blur 이벤트 차이를 압니다. |
| radio | checked 값을 반복문으로 찾습니다. |
| checkbox | 선택/해제에 따라 합계를 더하고 뺍니다. |
핵심 한 줄 요약
form input폼 입력 요소는 value, checked, focus 상태를 읽고 바꾸면서 사용자 입력을 처리합니다.
imagesrc를 바꾸면 화면 이미지가 바뀝니다.
formvalue와 checked를 읽어 사용자 선택을 처리합니다.
eventonclick, onchange, onblur가 처리 시점을 정합니다.
Tags
#JavaScript #image #new Image #select #form #radio #checkbox #onfocus #onblur #티스토리
▼ 티스토리 태그 입력란 복사용
JavaScript, image, new Image, select, form, radio, checkbox, onfocus, onblur, 티스토리
반응형
'php' 카테고리의 다른 글
| JavaScript window.open · close — 윈도우 열기·닫기 완전 정리 (0) | 2026.07.05 |
|---|---|
| JavaScript 키 이벤트 — e.key·e.code·방향키 이동 완전 정리 (0) | 2026.07.05 |
| JavaScript 이미지 변경 — new Image 프리로딩·select 완전 정리 (0) | 2026.07.05 |
| JavaScript 마우스 이벤트 — 클릭·휠·좌표·우클릭 완전 정리 (0) | 2026.07.05 |
| JavaScript onload · eval 계산기 완전 정리 (0) | 2026.07.05 |
댓글