자바스크립트로 학업 성적 관리 웹 애플리케이션 만들기
안녕하세요! 프로그래밍과 블로그를 즐기는 여러분, 오늘은 자바스크립트를 이용해 학업 성적 관리 웹 애플리케이션을 만들어 보겠습니다. 이번 포스트에서는 기본적인 HTML과 CSS를 활용하여 사용자 친화적인 인터페이스를 구축하고, 자바스크립트로 성적을 관리하는 방법을 알아보겠습니다.
들어가며
학생들의 성적을 관리하는 것은 학교뿐 아니라 가정에서도 중요한 일입니다. 이 애플리케이션은 학생의 이름, 과목 및 점수를 기록하고, 이를 기반으로 다양한 분석을 제공하는 시스템입니다. 학부모나 선생님, 심지어 주어진 점수를 기반으로 자신을 평가하고 싶은 학생들에게도 유용할 것 같습니다.
자, 그럼 함께 시작해 볼까요?
코드 작성하기
먼저, HTML을 사용하여 기본적인 사용자 인터페이스를 구축해보겠습니다. 아래 코드는 학생 정보 입력을 위한 폼을 생성합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>성적 관리 시스템</title>
<style>
body { font-family: Arial, sans-serif; }
table { width: 80%; margin: auto; border-collapse: collapse; }
th, td { padding: 10px; border: 1px solid #ccc; text-align: center; }
input { padding: 5px; }
</style>
</head>
<body>
<h1>학업 성적 관리</h1>
<form id="gradeForm">
<input type="text" id="studentName" placeholder="학생 이름" required>
<input type="text" id="subject" placeholder="과목" required>
<input type="number" id="score" placeholder="점수" min="0" max="100" required>
<button type="submit">추가하기</button>
</form>
<h2>학생 리스트</h2>
<table id="gradeTable">
<thead>
<tr>
<th>학생 이름</th>
<th>과목</th>
<th>점수</th>
<th>등급</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>
코드 설명하기
- HTML 구조: 기본적인 HTML 템플릿을 설정하고, 학생 이름, 과목 및 점수를 입력받는 폼을 만들었습니다. 이러한 기본적인 구조는 사용자가 쉽게 정보를 입력할 수 있도록 돕습니다.
- CSS 스타일링: 테이블과 폼의 스타일을 적용하여 가독성을 높였습니다.
- 자바스크립트 로직: 다음 단계로, 입력된 정보를 받아서 테이블에 출력하고, 성적에 따라 등급을 부여하는 자바스크립트 코드를 구현해 보겠습니다.
document.getElementById('gradeForm').addEventListener('submit', function(event) {
event.preventDefault(); // 기본 제출 동작 방지
const studentName = document.getElementById('studentName').value;
const subject = document.getElementById('subject').value;
const score = Number(document.getElementById('score').value);
const grade = calculateGrade(score);
const tableBody = document.querySelector('#gradeTable tbody');
const newRow = tableBody.insertRow();
newRow.innerHTML = `
<td>${studentName}</td>
<td>${subject}</td>
<td>${score}</td>
<td>${grade}</td>
`;
// 폼 초기화
document.getElementById('gradeForm').reset();
});
function calculateGrade(score) {
if (score >= 90) return 'A';
if (score >= 80) return 'B';
if (score >= 70) return 'C';
if (score >= 60) return 'D';
return 'F';
}
코드 설명하기
- 성적 추가 이벤트: 폼이 제출되면
calculateGrade함수가 호출되어 입력된 점수에 따라 등급을 결정합니다. - 성적 등급 계산 로직: 점수 등에 따라 A, B, C, D, F로 등급을 판별하여 배열에 추가합니다.
- DOM 조작: 새로운 학생 정보를 테이블에 추가하여 실시간으로 데이터를 확인할 수 있도록 합니다.
예제 실행 결과
위의 코드를 실행하게 되면, 학생 이름, 과목 및 점수를 입력할 수 있는 폼이 나타나고, 정보를 입력한 후 '추가하기' 버튼을 누르면 테이블에 해당 학생의 정보가 추가되어 보입니다. 아래는 예시 입력 후의 시각적 결과입니다:
| 학생 이름 | 과목 | 점수 | 등급 |
|---|---|---|---|
| 홍길동 | 수학 | 85 | B |
| 김철수 | 영어 | 92 | A |
마무리하며
이번 포스트에서는 자바스크립트를 통해 학업 성적 관리 웹 애플리케이션을 만드는 방법을 살펴보았습니다. 직관적인 인터페이스와 실시간 데이터를 통해 사용자가 쉽게 정보를 관리할 수 있도록 구성하였습니다. 여러분도 직접 이 예제를 수정하거나 확장하여 다양한 기능을 추가해보세요! 좋은 프로그래밍 경험이 되시길 바랍니다.
혹시 질문이나 추가하고 싶은 기능이 있으시면 댓글로 남겨주세요! 다음 포스트에서 뵙겠습니다!
'개발' 카테고리의 다른 글
| JavaScript에서 Set과 Map 활용하기: 중복 제거와 키-값 쌍 관리 전략 (0) | 2024.11.17 |
|---|---|
| 자바스크립트로 배우는 객체지향 프로그래밍 기초 (1) | 2024.11.17 |
| 비동기 처리의 기초: 자바스크립트의 콜백과 프로미스 이해하기 (0) | 2024.11.17 |
| 자바스크립트 모듈화의 기초와 활용 방법 안내 (0) | 2024.11.17 |
| 자바스크립트로 실시간 계산기 만들기 튜토리얼 (0) | 2024.11.17 |