왕진 블로그
반응형
Web Development · JavaScript
JavaScript 이미지 변경
new Image() 프리로딩과 select 선택값으로 이미지 src를 바꾸는 흐름을 정리합니다.
시작 오늘 분석할 코드
이 예제는 사용자의 선택과 입력에 따라 화면 값을 바꾸는 흐름을 다룹니다. 이미지는 src를 바꾸고, 폼 요소는 value, checked, focus()를 읽고 제어합니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>new Image()로 이미지 로딩</title> <script> // 미리 로딩해 둘 8개의 이미지 파일 이름 배열 let files = ["media/Penguins.png", "media/Lighthouse.png", "media/Chrysanthemum.png", "media/Desert.png", "media/Hydrangeas.png", "media/Jellyfish.png", "media/Koala.png", "media/Tulips.png"]; let imgs = new Array(); // 이미지 객체를 저장할 배열 for(let i=0; i<files.length; i++) { imgs[i] = new Image(); // 이미지 객체 생성 imgs[i].src = files[i]; // 이미지 로딩 지시 } let next = 1; function change(img) { // 다음 이미지 출력 img.src = imgs[next].src; // 이미지 변경 next++; // 다음 이미지에 대한 인덱스 next %= imgs.length; // 개수를 넘으면 처음으로 } </script> </head> <body> <h3>new Image()로 이미지 로딩</h3> <hr> 이미지를 클릭하면 다음 이미지를 보여줍니다.<p> <img style="border:20px ridge wheat" src="media/Penguins.png" alt="." width="200" height="200" onclick="change(this)"> </body> </html> <!-- 다음 폼/이미지 예제 --> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>select 객체에서 선택한 과일출력</title> <script> function drawImage() { let sel = document.getElementById("fruits"); let img = document.getElementById("fruitimage"); img.src = sel.options[sel.selectedIndex].value; } </script> </head> <body onload="drawImage()"> <h3>select 객체에서 선택한 과일 출력</h3> <hr> 과일을 선택하면 이미지가 출력됩니다.<p> <form> <select id="fruits" onchange="drawImage()"> <option value="media/strawberry.png">딸기 <option value="media/banana.png" selected>바나나 <option value="media/apple.png">사과 </select> <img id="fruitimage" src="media/banana.gif" alt=""> </form> </body> </html>
실제 출력 미리보기
image
용어 용어 정리
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 | 선택/해제에 따라 합계를 더하고 뺍니다. |
핵심 한 줄 요약
image src이미지 변경은 결국 img 요소의 src 값을 새 파일 경로로 바꾸는 작업입니다.
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 키 이벤트 — e.key·e.code·방향키 이동 완전 정리 (0) | 2026.07.05 |
|---|---|
| JavaScript 폼 입력 요소 — onfocus·radio·checkbox 완전 정리 (0) | 2026.07.05 |
| JavaScript 마우스 이벤트 — 클릭·휠·좌표·우클릭 완전 정리 (0) | 2026.07.05 |
| JavaScript onload · eval 계산기 완전 정리 (0) | 2026.07.05 |
| JavaScript 이벤트 취소 — preventDefault·return false 완전 정리 (0) | 2026.07.05 |
댓글