2021 동계 모각코
[2021 모각코] 1회차 (2021.12.28.)
수빈최
2021. 12. 28. 23:08
학습 목표
: javascript의 복습을 위해 codecademy의 javascript 페이지의 Lesson을 모두 완료한다.
+)추가로 실습을 다시 해봄으로써 복습을 확실히 하기 위해 학기중 이 내용과 관련된 과제를 다시 해보았다.
학습 내용
codecademy를 통해 복습한 것은 함수(function), 범위(scope), 반복자(iterator), 객체(objects)였는데, 오늘 다시 풀어본 과제는 학생들의 정보를 객체를 사용해 저장하고 선택한 기준에 따라 저장된 학생들을 정렬하여 화면에 출력하는 것이었다.
화면 구성과 해당 화면을 구성하는 html 코드는 아래와 같다.
<!DOCTYPE html>
<html>
<head>
<title> 11월 19일</title>
<meta charset="utf-8"/>
</head>
<body>
이름 : <input id="name" type="text"><br><br>
국어 : <input id="kor" type="text" size="5">
수학 : <input id="math" type="text" size="5">
영어 : <input id="eng" type="text" size="5">
<br><br>
학과 : <select id="major">
<option value="com">컴퓨터공학과</option>
<option value="ai">인공지능학과</option>
<option value="math">수학과</option>
</select><br><br>
<input id="saveBtn" type="button" value="저장">
<br><br>
<hr>
과목 : <input id="korCheck" type="checkbox">
<label for="kor1">Korean</label>
<input id="mathCheck" type="checkbox">
<label for="Math1">Math</label>
<input id="engCheck" type="checkbox">
<label for="Eng1">English</label><br><br>
학과 : <select id="majorCheck">
<option value="allCheck">모두</option>
<option value="comCheck">컴퓨터공학과</option>
<option value="aiCheck">인공지능학과</option>
<option value="mathCheck">수학과</option>
</select><br><br>
정렬 : <select id="sort">
<option value="ascend">오름차순</option>
<option value="descend">내림차순</option>
</select><br><br>
<input id="searchBtn" type="button" value="검색">
<br><br>
<hr>
<ul id="list"></ul>
<script src="object.js"></script>
</body>
</html>
아래는 배웠던 것을 토대로 직접 과제를 다시 구현해 본 javascript 코드이다.
let infoArray = [];
let name = document.getElementById("name");
let korean = document.getElementById("kor");
let math = document.getElementById("math");
let english = document.getElementById("eng");
let major = document.getElementById("major");
let korCheck = document.getElementById("korCheck");
let mathCheck = document.getElementById("mathCheck");
let engCheck = document.getElementById("engCheck");
let majorCheck = document.getElementById("majorCheck");
let sort = document.getElementById("sort");
let list = document.getElementById("list");
document.getElementById("saveBtn").addEventListener("click", save);
document.getElementById("searchBtn").addEventListener("click", search);
function StudentInfo(name, koreanScore, mathScore, englishScore, major) {
this.name = name;
this.koreanScore = koreanScore;
this.mathScore = mathScore;
this.englishScore = englishScore;
this.major = major;
}
StudentInfo.prototype.sum = function () {
let scoreSum = 0;
if (korCheck.checked) {
scoreSum += this.koreanScore;
}
if (mathCheck.checked) {
scoreSum += this.mathScore;
}
if (engCheck.checked) {
scoreSum += this.englishScore;
}
return scoreSum;
};
StudentInfo.prototype.avg = function () {
let scoreSum = 0;
let count = 0;
if (korCheck.checked) {
scoreSum += this.koreanScore;
count++;
}
if (mathCheck.checked) {
scoreSum += this.mathScore;
count++;
}
if (engCheck.checked) {
scoreSum += this.englishScore;
count++;
}
return scoreSum/count;
}
function save() {
let student = new StudentInfo(
name.value,
parseInt(korean.value),
parseInt(math.value),
parseInt(english.value),
major.value
);
infoArray.push(student);
alert(infoArray.length + "개의 학생 정보가 저장되었습니다.");
}
function search() {
if(sort.value == "ascend"){
infoArray.sort(function(a,b){
return a.sum() > b.sum() ? 1 : -1;
})
}else if(sort.value == "descend"){
infoArray.sort(function(a,b){
return a.sum() > b.sum() ? -1 : 1;
})
}
if (!korCheck.checked && !mathCheck.checked && !engCheck.checked) {
alert("1개 이상 선택하십시오.");
return false;
}
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
let count = 0;
let totalSum = 0;
infoArray.forEach(function (student) {
if(majorCheck.value == "allCheck"){
totalSum += student.avg();
count++;
let li = document.createElement("li");
li.innerHTML = student.name + ") 총점 : " + student.sum() + " | 평균점수 : " + student.avg();
list.appendChild(li);
}else if(majorCheck.value == "comCheck"){
if(student.major == "com"){
totalSum += student.avg();
count++;
let li = document.createElement("li");
li.innerHTML = student.name + ") 총점 : " + student.sum() + " | 평균점수 : " + student.avg();
list.appendChild(li);
}
}else if(majorCheck.value == "aiCheck"){
if(student.major == "ai"){
totalSum += student.avg();
count++;
let li = document.createElement("li");
li.innerHTML = student.name + ") 총점 : " + student.sum() + " | 평균점수 : " + student.avg();
list.appendChild(li);
}
}else if(majorCheck.value == "mathCheck"){
if(student.major == "math"){
totalSum += student.avg();
count++;
let li = document.createElement("li");
li.innerHTML = student.name + ") 총점 : " + student.sum() + " | 평균점수 : " + student.avg();
list.appendChild(li);
}
}
});
if(majorCheck.value == "allCheck"){
let p = document.createElement("p");
p.innerHTML = "모든 학과 평균 : " + totalSum/count;
list.appendChild(p);
}else{
let p = document.createElement("p");
p.innerHTML = "학과 평균 : " + totalSum/count;
list.appendChild(p);
}
}
학습후기
: 모각코를 신청하지 않았더라면 지금도 계속 놀고 있었을지도 모른다. 날짜를 정해 이렇게 같이 모여서 코딩을 하니 사람이 조금 더 부지런해지는 것 같다. 또, 웹과 관련된 언어를 한 학기동안 너무 단기간에 많이 배워서 (html, css, javascript, jquery, php, json, ajax 등) 금방 까먹을까 걱정이 되었는데 이렇게 했던 과제를 다시 풀어보며 복습을 하니까 기억에도 더 잘 남는 것 같다. 내 스스로 프론트에 관심이 있는 게 아닌가 생각하고 있기 때문에 이번 방학 때 이렇게 복습을 하면서 해당 질문에 대해 더 생각해볼 수 있을 것 같다.