728x90
반응형
1) Javascript 예제
1-1) 정보처리기사 필기 결과 출력
1) Javascript 예제
1-1) 정보처리기사 필기 결과 출력
scit45_subject.html
<!DOCTYPE html>
<html lang="kor">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web Front-End</title>
<!-- 1) CSS와 JavaScript는 파일로 지정하여 적용 -->
<!-- CSS 파일 가져오기 -->
<link rel="stylesheet" href="./subject_style.css" />
<!-- JS 파일 가져오기 -->
<script src="./subject_script.js" type="text/javascript"></script>
</head>
<body>
<!-- 8) 기준 이미지와 같이 HTML 태그 생성 -->
<div id="frame">
<!-- ---------------------header--------------------- -->
<header>
<!-- 2) 제목에 해당하는 태그 생성 -->
<!-- 제목 태그 생성 -->
<h1>[정보처리 기사 필기 결과]</h1>
<h2># 가채점 예상 점수를 입력하세요</h2>
</header>
<!-- --------------------- main --------------------- -->
<main>
<div id="scoreContents">
<h4 class="blueFont">맞춘 개수</h4>
<!-- 목록태그 생성 : 순서가 있는 목록을 만들어주는 "ol 태그" 생성(목록 요소인 "li 태그" 추가) -->
<!-- 3) 점수를 입력 받기 위한 입력 태그 생성 -->
<!-- 점수 입력태그 생성 : input 태그 생성 -->
<!-- 4) 점수를 입력 받기 위한 입력 태그에 0이 보여지도록 속성값 부여 : 각 input 태그별로 placeholder 속성 추가 -->
<!-- 5) 예상 점수를 출력 하기 위한 텍스트 태그 생성 -->
<!-- 예상점수 출력용 텍스트태그 생성 : span 태그(class="blueFont expectedScore") 생성 -->
<ol>
<li>
<label for="inputBox1" class="listItem">소프트웨어 설계:</label>
<span class="scorePart">
20문제 중
<input
type="text"
id="inputBox1"
placeholder="0"
size="6"
class="scoreBox"
/>
개
</span>
<span class="blueFont expectedScore"></span>
</li>
<li>
<label for="inputBox2" class="listItem">소프트웨어 개발:</label>
<span class="scorePart">
20문제 중
<input
type="text"
id="inputBox2"
placeholder="0"
size="6"
class="scoreBox"
/>
개
</span>
<span class="blueFont expectedScore"></span>
</li>
<li>
<label for="inputBox3" class="listItem">데이터베이스 구축:</label>
<span class="scorePart">
20문제 중
<input
type="text"
id="inputBox3"
placeholder="0"
size="6"
class="scoreBox"
/>
개
</span>
<span class="blueFont expectedScore"></span>
</li>
<li>
<label for="inputBox4" class="listItem"
>프로그래밍 언어활용:</label
>
<span class="scorePart">
20문제 중
<input
type="text"
id="inputBox4"
placeholder="0"
size="6"
class="scoreBox"
/>
개
</span>
<span class="blueFont expectedScore"></span>
</li>
<li>
<label for="inputBox5" class="listItem"
>정보시스템 구축관리:</label
>
<span class="scorePart">
20문제 중
<input
type="text"
id="inputBox5"
placeholder="0"
size="6"
class="scoreBox"
/>
개
</span>
<span class="blueFont expectedScore"></span>
</li>
</ol>
</div>
<!-- 6) 최종 결과를 출력하기 위한 버튼 태그 생성 -->
<!-- 최종결과 출력용 버튼 생성 -->
<div id="btnArea">
<input type="button" value="최종 결과 확인" id="checkBtn" />
</div>
</main>
<!-- ---------------------footer--------------------- -->
<footer id="finalResultArea" style="display: none">
<h2># 최종결과</h2>
<h4 class="blueFont">
합격: 100점을 만점으로 하여 과목당 40점 이상, 전과목 평균 60점 이상.
</h4>
<!-- 목록태그 생성 -->
<ul>
<li id="subjectAvg"></li>
<li id="failedNum"></li>
</ul>
<!-- 7) 최종 결과를 출력하는 영역 태그 및 하위 태그 생성 -->
<!-- 최종결과 출력용 영역 태그 및 하위 태그 생성 -->
<div id="finalResult">
<span id="finalResultPhrase"></span>
</div>
</footer>
</div>
</body>
</html>
subject_style.css
/* css 작성 */
/* 1) 전체 화면 : 폭은 800px, 높이는 620px, 화면 중앙 정렬 */
body > #frame {
width: 800px;
height: 620px;
margin: 0 auto;
border: 1px dotted black;
box-sizing: border-box;
padding: 0 5px;
}
/* 2) 상단의 제목 : 가운데 정렬 */
header > h1 {
text-align: center;
background-color: #00008b;
color: white;
}
/* 3) "맞춘 개수를 출력하는 영역"에 임의의 배경색 변경 */
main {
background-color: #f0ffff;
}
main > #scoreContents {
padding-left: 30px;
}
main > #scoreContents > h4 {
padding-top: 28px;
}
main > #scoreContents > ol > li > .listItem {
display: inline-block;
width: 175px;
}
main > #scoreContents > ol > li > .scorePart > .scoreBox {
text-align: right;
}
main > #btnArea {
width: 800px;
text-align: center;
padding-bottom: 10px;
}
main > #btnArea > #checkBtn {
background-color: #00ffff;
font-weight: bold;
border-radius: 8px;
}
footer > #finalResult {
text-align: center;
}
/* 4) 불합격 문구의 배경색(=gainsboro) & 글자색(=red)을 기준 이미지와 같이 변경 */
footer > #finalResult > #finalResultPhrase {
display: inline-block;
background-color: gainsboro;
color: red;
font-weight: bold;
font-size: 15px;
width: 100px;
height: 25px;
}
/* 5) 맞춘 개수, 예상점수, 합격 조건 문구의 font 색상 "blue"로 적용 */
.blueFont {
color: blue;
}
subject_script.js
// javascript 작성
// 5) DOM의 element들을 JavaScript로 불러와 활용 및 조작
window.onload = function () {
// 점수 입력박스 5개(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 () {
// 예상점수 문구 영역 5개
let expectedScore = document.querySelectorAll(".blueFont.expectedScore");
// 각 점수 입력박스 별로 입력값을 지우고 난 뒤
// 재입력하는 경우에 다시 예상점수 문구를 보여주기 위해 추가한 코드입니다.
expectedScore[i].style.display = "inline-block";
/*
2) 점수를 입력하는 입력박스에 문자를 입력하면 ‘숫자를 입력하세요’ 문구를 출력하고,
20을 넘어갈 경우 ‘각 과목당 맞춘 문제수(0~20)를 입력하세요’ 문구를 출력하고,
해당 입력박스의 값을 null로 초기화 시키고 예상점수 문구를 안보이도록 설정.
*/
if (isNaN(scoreBox[i].value)) {
alert("숫자를 입력하세요");
scoreBox[i].focus();
scoreBox[i].value = null;
expectedScore[i].style.display = "none";
return;
}
if (parseInt(scoreBox[i].value) > 20 || parseInt(scoreBox[i].value) < 0) {
alert("각 과목당 맞춘 문제수(0~20)를 입력하세요");
scoreBox[i].focus();
scoreBox[i].value = null;
expectedScore[i].style.display = "none";
return;
}
// 각 점수 입력박스 별로 입력했던 값을 지우면
// 해당 예상점수 문구가 안보이게 처리한 코드입니다.
if (scoreBox[i].value.trim().length == 0) {
expectedScore[i].style.display = "none";
return;
}
// 각 점수 입력박스 별로 양의 정수가 아닌
// 소수점이 들어간 숫자(ex. 1.1 등)를 입력한 경우
// 아래와 같이 경고창을 띄우고
// 해당 입력박스의 값을 null로 초기화 시키고
// 해당 예상점수 문구가 안보이게 처리한 코드입니다.
if (scoreBox[i].value.indexOf(".") != -1) {
alert("양의 정수(0~20)를 입력하세요");
scoreBox[i].focus();
scoreBox[i].value = null;
expectedScore[i].style.display = "none";
return;
}
/*
1) 점수를 입력하는 입력박스에 숫자를 입력할 경우에만
이미지와 같이 예상점수를 1문제당 5점으로 계산하여 출력
*/
expectedScore[i].innerHTML = `[예상점수] ${
parseInt(scoreBox[i].value) * 5
}점`;
});
}
/*
3) 최종 결과 확인 버튼을 누를 경우에만 최종 결과가 보이도록
클릭 이벤트를 설정하고 해당 최종 결과 영역에 display 속성값(block) 부여
*/
resultCheckBtn.addEventListener("click", function () {
let finalResultArea = document.querySelector("#finalResultArea");
let subjectAvg = document.querySelector("#subjectAvg");
let failedNum = document.querySelector("#failedNum");
let finalResultPhrase = document.querySelector("#finalResultPhrase");
// 점수가 미입력된 과목이 한 개라도 있는 경우
// 최종 결과 확인 버튼을 누르면 경고창을 띄우고
// 최종 결과를 보여주지 않도록 처리하였습니다.
for (let j = 0; j < scoreBox.length; j++) {
if (scoreBox[j].value == "") {
alert(
"점수가 미입력된 과목이 있습니다.\n확인 후 반드시 점수를 입력해주세요."
);
scoreBox[j].focus();
// 최종 결과를 확인한 후 점수 수정이 필요하여
// 수정하는 과정에서 실수로 점수를 미입력한 경우
// 최종 결과를 보여주지 않도록 처리하였습니다.
finalResultArea.style.display = "none";
return;
}
}
// 4) 최종 결과 영역에 평균, 과락된 과목 수의 값을 계산하여 출력
// 과목 점수의 총합
let totalScore = 0;
// 과락된 과목의 개수
let subjectNum = 0;
for (let k = 0; k < scoreBox.length; k++) {
totalScore += parseInt(scoreBox[k].value) * 5;
if (parseInt(scoreBox[k].value) * 5 < 40) {
subjectNum++;
}
}
// 과목 점수의 평균
let subjectAverage = totalScore / scoreBox.length;
if (subjectAverage >= 60 && subjectNum == 0) {
subjectAvg.innerHTML = `평균: ${subjectAverage}`;
failedNum.innerHTML = `과락된 과목 수: ${subjectNum}과목`;
finalResultPhrase.innerHTML = "합격";
finalResultArea.style.display = "block";
} else {
subjectAvg.innerHTML = `평균: ${subjectAverage}`;
failedNum.innerHTML = `과락된 과목 수: ${subjectNum}과목`;
finalResultPhrase.innerHTML = "불합격";
finalResultArea.style.display = "block";
}
});
};
'Javascript > Javascript(2024 version)' 카테고리의 다른 글
| Javascript(7) - 종합 평가 점수 계산 및 결과 출력 (0) | 2024.06.18 |
|---|---|
| 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 |
