728x90
반응형
1) Javascript 예제
1-1) 종합 평가 점수 계산 및 결과 출력
1) Javascript 예제
1-1) 종합 평가 점수 계산 및 결과 출력
scit45_오후_황상범.html
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>종합평가 결과</title>
<link rel="stylesheet" href="./scit45_오후_황상범.css" />
<!-- 1) 자바스크립트를 외부파일로부터 참조 -->
<script src="./scit45_오후_황상범.js" type="text/javascript"></script>
</head>
<body>
<!-- 2) 이미지 및 동영상과 일치하는 엘리먼트 생성(CSS는 평가 요소 X) -->
<div id="frame">
<!-- ---------------------header--------------------- -->
<header>
<!-- 제목 태그 생성 -->
<h2>[ 종합 평가 점수 ]</h2>
</header>
<!-- --------------------- main --------------------- -->
<main>
<div id="scoreContents">
<!-- 목록태그 생성 : 순서가 있는 목록을 만들어주는 "ol 태그" 생성(목록 요소인 "li 태그" 추가) -->
<!-- 과목 및 프로젝트 점수, 출석률 입력태그 생성 : input 태그 생성 -->
<!-- 점수를 입력 받기 위한 입력 태그에 0(과목, 프로젝트)과 100(출석률만 해당)이 보여지도록 속성값 부여 : 각 input 태그별로 placeholder 속성 추가 -->
<ol>
<li>
<label for="inputBox1" class="listItem">Java Fundamental :</label>
<span class="scorePart">
<input
type="text"
id="inputBox1"
placeholder="0"
class="scoreBox"
/>
<span>점</span>
</span>
</li>
<li>
<label for="inputBox2" class="listItem">Oracle Database :</label>
<span class="scorePart">
<input
type="text"
id="inputBox2"
placeholder="0"
class="scoreBox"
/>
<span>점</span>
</span>
</li>
<li>
<label for="inputBox3" class="listItem">HTML, CSS :</label>
<span class="scorePart">
<input
type="text"
id="inputBox3"
placeholder="0"
class="scoreBox"
/>
<span>점</span>
</span>
</li>
<li>
<label for="inputBox4" class="listItem">JavaScript :</label>
<span class="scorePart">
<input
type="text"
id="inputBox4"
placeholder="0"
class="scoreBox"
/>
<span>점</span>
</span>
</li>
<li>
<label for="inputBox5" class="listItem">Basic Test :</label>
<span class="scorePart">
<input
type="text"
id="inputBox5"
placeholder="0"
class="scoreBox"
/>
<span>점</span>
</span>
</li>
<li>
<label for="inputBox6" class="listItem">Team Project :</label>
<span class="scorePart">
<input
type="text"
id="inputBox6"
placeholder="0"
class="scoreBox"
/>
<span>점</span>
</span>
</li>
<li>
<label for="inputBox7" class="listItem">출 석 률 :</label>
<span class="scorePart">
<input
type="text"
id="inputBox7"
placeholder="100"
class="scoreBox"
/>
<span>%</span>
</span>
</li>
</ol>
</div>
<!-- 최종결과 확인용 버튼 생성 -->
<div id="btnArea">
<input type="button" value="결과 확인" id="checkBtn" />
</div>
</main>
<!-- ---------------------footer--------------------- -->
<footer>
<h4 id="finalResultStandard">
※ 각 과목은 10%, 프로젝트 2회 각 20%, 출석률 20%로 총 100%로 점수
환산함
</h4>
<div id="finalResultArea" style="display: none">
<h2># 최종 결과:</h2>
<span id="finalResult"></span>
</div>
</footer>
</div>
</body>
</html>
scit45_오후_황상범.css
/* css 작성 */
html {
width: 100%;
height: 100%;
}
body {
background: linear-gradient(white, #7ca3ff);
width: 100%;
height: 100%;
}
#frame {
width: 800px;
height: 100%;
margin: 0 auto;
}
header {
margin-top: 25px;
}
header > h2 {
width: 730px;
margin: 0 auto;
text-align: center;
background-color: #1866f6;
color: black;
padding: 25px 0;
}
main > #scoreContents {
width: 450px;
margin: 0 auto;
text-align: center;
}
main > #scoreContents > ol > li {
margin-bottom: 10px;
}
main > #scoreContents > ol > li > .listItem {
display: inline-block;
width: 175px;
}
main > #scoreContents > ol > li > .scorePart > .scoreBox {
text-align: right;
border: 2px solid transparent;
border-image: linear-gradient(to right, black, #6f6f6e, #b8b7b6);
border-image-slice: 1;
}
main > #scoreContents > ol > li > .scorePart > span {
margin-left: 5px;
}
main > #btnArea {
width: 800px;
text-align: center;
}
main > #btnArea > #checkBtn {
background: linear-gradient(to right, #7fbdfe, #2dd0f9);
color: white;
font-weight: bold;
border: transparent;
border-radius: 30px;
padding: 10px 50px;
}
main > #btnArea > #checkBtn:hover {
background: linear-gradient(to right, #7fbdfe, #2dd0f9);
color: white;
font-weight: bold;
border: transparent;
border-radius: 30px;
box-shadow: 5px 5px 5px 2px #697fba;
padding: 10px 50px;
}
footer {
text-align: center;
padding-bottom: 40px;
}
footer > #finalResultArea > h2 {
text-shadow: 5px 5px 4px #708ac9;
}
scit45_오후_황상범.js
// javascript 작성
/*
9) 이벤트 및 엘리먼트에 대한 처리가 개별적일 경우는 10점 만점
이벤트 및 엘리먼트에 대한 처리가 다중선택으로 효율적 코드를 작성한 경우는 20점 만점(중복된 코드를 최대한 줄일 것)
*/
window.onload = function () {
// 점수 입력박스 7개(keyup 이벤트 적용)
let scoreBox = document.querySelectorAll(".scoreBox");
// 최종 결과 확인 버튼(click 이벤트 적용)
let resultCheckBtn = document.querySelector("#checkBtn");
for (let i = 0; i < scoreBox.length; i++) {
scoreBox[i].addEventListener("keyup", function () {
// 3) 각 입력란에 0 ~ 100 의 점수를 입력하지 않았을 때 ‘숫자만 입력하세요’ 문구를 출력
if (isNaN(scoreBox[i].value)) {
alert("숫자만 입력하세요");
scoreBox[i].focus();
scoreBox[i].value = null;
return;
}
if (
parseInt(scoreBox[i].value) < 0 ||
parseInt(scoreBox[i].value) > 100
) {
alert("숫자만 입력하세요");
scoreBox[i].focus();
scoreBox[i].value = null;
return;
}
// 각 점수 입력박스 별로 양의 정수가 아닌
// 소수점이 들어간 숫자(ex. 1.1 등)를 입력한 경우
// 아래와 같이 경고창을 띄우고
// 해당 입력박스의 값을 0으로 초기화 시킵니다.
if (scoreBox[i].value.indexOf(".") != -1) {
alert("양의 정수(0~100)를 입력하세요");
scoreBox[i].focus();
scoreBox[i].value = null;
return;
}
});
}
resultCheckBtn.addEventListener("click", function () {
let finalResultArea = document.querySelector("#finalResultArea");
let finalResult = document.querySelector("#finalResult");
// 종합 평가 점수
let totalScore = 0;
for (let j = 0; j < scoreBox.length; j++) {
// 4) 각 입력란에 아무것도 입력하지 않았을 경우 0 으로 계산되도록 처리
if (scoreBox[j].value == "") {
scoreBox[j].value = 0;
}
// 5) 성적 반영 비율 계산(각 과목은 10%, 기초평가 및 팀프로젝트는 20%, 출석률 20%)
// 6) 각 항목의 점수를 성적 반영 비율로 계산하여 ‘종합 평가 점수’ 계산
if (j <= 3) {
totalScore += parseInt(scoreBox[j].value) * 0.1;
} else {
totalScore += parseInt(scoreBox[j].value) * 0.2;
}
}
// 7) 결과 확인 버튼을 클릭하면 안보이던 최종 결과 영역이 보이도록 출력
// 8) 결과 확인 버튼을 클릭하면 계산된 ‘종합 평가 점수’ 를 출력
finalResult.innerHTML = `종합 평가 점수: ${totalScore}점`;
finalResultArea.style.display = "block";
});
};
※ 첫 접속 화면
※ 점수 입력 후 "결과 확인" 버튼 클릭 시 화면
'Javascript > Javascript(2024 version)' 카테고리의 다른 글
| Javascript(8) - 정보처리기사 필기 결과 출력 (0) | 2024.06.19 |
|---|---|
| Javascript(6) - 예제(간단한 계산기, window) (0) | 2024.06.14 |
| Javascript(5) - 예제(class 추가/삭제, selectBox를 통한 이미지 선택, 데이터 출력, 주민등록정보 조회) (0) | 2024.06.12 |
| Javascript(4) - HTML DOM 이벤트, HTML BOM, 예제(배경색 변경 / 글자수 표기) (0) | 2024.06.11 |
| Javascript(3) - Object 객체, JSON, 함수, 객체생성자 함수, HTML DOM (0) | 2024.06.10 |
