문제 1. 이미지 클릭 이벤트 예제 - alert 창 출력
<body>
<img alt="이미지가 없습니다." src="./images/xwg.jpg" onclick="travelmg()">
<script type="text/javascript">
function travelmg(){
alert("타지하의 사진입니다!")
}
</script>
</body>
문제 2. 사용자 입력 확인 - 한국에서 가장 높은 산 맞히기
<body>
<h2>한국에서 제일 높은 산은?</h2>
답:
<input type="text" id=hell placeholder="입력" />
<button type="button" onclick="maxhell()">확인</button>
<script type="text/javascript">
function maxhell() {
let hel = document.getElementById("hell").value.trim();
if (hel === "한라산") {
alert("정답입니다.")
} else {
alert("틀렸습니다!")
document.getElementById("hell").value = "";
}
}
</script>
</body>
문제 3. 버튼 클릭으로 연산 수행 - 사칙연산 및 나머지 연산 구현
<body>
<h3>변수의 연산</h3>
<p>a, b에 대해서 변수 a와 b의 계산 결과를 표시합니다.</p>
<div>
<button type="button" onclick="calculation('+')">덧셈</button>
<button type="button" onclick="calculation('-')">뺼셈</button>
<button type="button" onclick="calculation('*')">곱셈</button>
<button type="button" onclick="calculation('/')">나눗셈</button>
<button type="button" onclick="calculation('%')">나머지</button>
</div>
<div>
<input type="text" id="b1" placeholder="숫자" />
<input type="text" id="b2" placeholder="연산 버튼 클릭" readonly />
<input type="text" id="b3" placeholder="숫자" />
=<input type="text" id="b4" placeholder="" readonly />
</div>
<script type="text/javascript">
function calculation(operator) {
let num1 = parseFloat(document.getElementById("b1").value);
let num2 = parseFloat(document.getElementById("b3").value);
let result = 0;
if (isNaN(num1) || isNaN(num2)) {
alert("숫자를 입력하세요!")
return;
}
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num2 !== 0 ? num1 / num2 : "오류";
break;
case '%':
result = num2 !== 0 ? num1 % num2 : "오류";
break;
}
document.getElementById("b2").value = operator
document.getElementById("b4").value = result
}
</script>
</body>
문제 4. 체크박스로 추가 요금 계산 - 체육관 이용료 자동 합산
: 기본 체육관 이용료(4,800원)를 기준으로 사용자가 추가 옵션을 선택할 때마다 총 금액이 자동으로 변경되는 기능을 구현
주요 기능
1. 기본 이용료 40,800원 설정 (4시간 기준 4,800원 + 기본 선택된 옵션 포함)
2. 체크박스 클릭 시 추가 요금 반영
- 야간조명 (20,000원)
- 배구네트 x2 (4,000원)
- 백구공 x10 (5,000원)
3. 체크박스 해제 시 금액 차감
4. 총 금액을 실시간으로 업데이트
<body>
<h1>체육관 이용 요금</h1>
<p>기본사용료(4시간) 4,800원</p>
<input type="checkbox" id="chk1" onclick="updateTotal(20000)" value="20000" />
야간조명(20,000원)
<br />
<input type="checkbox" id="chk2" onclick="updateTotal(4000)" value="4000" />
배구네트x2(4,000원)
<br />
<input type="checkbox" id="chk3" onclick="updateTotal(5000)" value="5000" />
백구공x10(5,000원)
<br /> 합계금액
<input type="text" id="sum" value="40800" readonly />원
<script type="text/javascript">
function updateTotal(amount) {
let total = parseInt(document.getElementById("sum").value);
let checkbox = event.target;
if (checkbox.checked) {
total += amount;
} else {
total -= amount;
}
document.getElementById("sum").value = total;
}
</script>
</body>
'Front > JavaScript' 카테고리의 다른 글
| JavaScript) 동적으로 HTML 태그 생성하기 (0) | 2025.02.20 |
|---|---|
| JavaScript) 변수 정리 : var, let, const (0) | 2025.02.20 |
| JavaScript) 이벤트 처리 : 사용자의 입력 / 버튼 클릭 / 체크박스 체크 이벤트 처리 방법 (0) | 2025.02.19 |
| JavaScript) 변수와 데이터 타입 / 객체와 배열 정리 (0) | 2025.02.19 |
| JavaScript) 기본 개념 정리 : 실행 방식 / DOM 조작 / 이벤트 처리 / 비교 연산자 (0) | 2025.02.19 |