반응형
1. 다중 조건 분기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>다중 조건 분기 예제</title>
<style>
</style>
</head>
<body>
<h2>나이를 입력하세요</h2>
<input type="number" id="ageInput" placeholder="나이 입력">
<button onclick="checkAge()">확인</button>
<p id="result"></p>
</body>
<script>
function checkAge() {
const age = parseInt(document.getElementById("ageInput").value);
const result = document.getElementById("result");
if (isNaN(age)) {
result.textContent = "숫자를 입력해주세요.";
} else if (age < 13) {
result.textContent = "당신은 어린이입니다.";
} else if (age < 20) {
result.textContent = "당신은 청소년입니다.";
} else if (age < 65) {
result.textContent = "당신은 성인입니다.";
} else {
result.textContent = "당신은 노년층입니다.";
}
}
</script>
</html>
See the Pen age_checker by Cheolho Jang (@chiro-J) on CodePen.
2. 시험 점수 계산기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>점수 계산기</title>
<style>
</style>
</head>
<body>
<h2>과목 점수 입력</h2>
<label>국어: <input type="number" id="korean"></label>
<br>
<label>수학: <input type="number" id="math"></label>
<br>
<label>영어: <input type="number" id="english"></label>
<br>
<label>과학: <input type="number" id="science"></label>
<br><br>
<button onclick="calculate()">계산하기</button>
<h3>결과</h3>
<p id="total"></p>
<p id="average"></p>
<p id="grade"></p>
</body>
<script>
function calculate() {
const korean = parseFloat(document.getElementById("korean").value) || 0;
const math = parseFloat(document.getElementById("korean").value) || 0;
const english = parseFloat(document.getElementById("korean").value) || 0;
const science = parseFloat(document.getElementById("korean").value) || 0;
const total = korean + math + english + science;
const average = total / 4;
let grade = "";
if (average >= 90) grade = "A";
else if (average >= 80) grade = "B";
else if (average >= 70) grade = "C";
else if (average >= 60) grade = "D";
else grade = "F";
document.getElementById("total").textContent = `총점: ${total}`;
document.getElementById("average").textContent = `평균: ${average.toFixed(2)}`;
document.getElementById("grade").textContent = `등급: ${grade}`;
}
</script>
</html>
See the Pen exam_score_calc by Cheolho Jang (@chiro-J) on CodePen.
※ 모르는 것 알고 가기!
onclick : 클릭 시 이벤트 실행
function : 함수 선언
구문 ) function name([param[, param,[..., param]]]) { [statements] }
parseFloat() / parseInt() : 문자열을 파싱하여 실수(float) / 정수(integer) 로 변환
isNaN() : ()의 결과값을 boolean형(True/False)으로 반환
document.getElementById
- document : DOM 최상위 객체, 보고있는 웹페이지 전체, HTML 요소를 조작하려면 항상 document를 통해서 접근
- getElementById("-") : id가 "-" 인 요소를 찾기
toFixed(2) : 소수점 둘째자리까지 표시. (셋째자리에서 반올림)
.textContent : 텍스트 값 표시
- document.getElementById("result").textContent = "새로운 내용";
"result"라는 id를 가진 요소의 텍스트 값을 "새로운 내용"으로 변경.
.value : input, textarea, select 같은 곳에 입력을 받는 곳에 입력 값을 의미.
document.getElementById("korean").value = "90";
"korean" 이라는 id를 가진 요소의 입력 값을 "90"으로 변경.
|| 0 : or 0, 입력하지 않았을 때 결과값이 NaN 일 때 에러가 나는 걸 방지하기 위해 0으로 대체하기 위한 장치
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| JavaScript #6 (반복문 - while, break/continue) (0) | 2025.06.24 |
|---|---|
| JavaScript #5 (반복문 - for) (3) | 2025.06.24 |
| JavaScript 기초 #3 (제어문, if&else, switch) (0) | 2025.06.23 |
| JavaScript 연습문제 #2 (변수, 입출력, 연산자) (0) | 2025.06.23 |
| JavaScript 기초 #1 (개요, dtype, 연산자) (0) | 2025.06.23 |
