본문 바로가기

■ Web/projects

[JavaScript] 전공 평균학점 구하기

▶상황


오늘은 4학년 2학기 학교 성적이 나오는 날이다.


그래서 성적 조회를 해보았는데,

동아대학교 전체성적조회 페이지에서 전체평균학점은 보여주고 있으나, 전공평균학점은 보여주고 있지 않았다.


네이버 평균학점 계산기를 이용해서 계산하려면
매번 모든 학점수와 교과목별 평점을 입력하고 전공과목에 체크도 일일이 해주어야한다.

이렇게.. 정말 너무 너무 귀찮다..

좋은 방법이 없을까?



▶자바스크립트를 활용해 전공 평균학점 구하기


자바스크립트를 이용하면 컴퓨터가 전공 평점을 계산하도록 시킬 수 있다.


뭔가 해야 할 웹 페이지에서 [F12] 키를 누르면 아래와 같은 개발자 도구 창이 뜬다.

Elements, Console, Sources, Network 등 다양한 기능을 하는 탭이 있다.

우리는 Elements, Console 탭만 사용하면 된다.


▲개발자 도구 Elements 탭


개발자 도구의 Elements탭에서 소스코드(빨간 네모 박스)에 마우스를 갖다 대면

해당 코드가 브라우저상에서 어떤 영역으로 나타나는지 파란색으로 표시하여 알려준다.

이를 이용해 내가 필요한 정보가 들어있는 테이블의 id가 "dgList1"이라는 정보를 얻을 수 있었다.


아래와 같이 전공 학점 평균을 계산해서 경고창으로 띄워주는 자바스크립트 소스 코드를 작성해보았다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var 총학점수 = 0;
var 교과목별평점X학점수_합계 = 0;
 
function get평점(grade){
    if(grade=='A+'return 4.5;
    else if(grade=='A'return 4.0;
    else if(grade=='B+'return 3.5;
    else if(grade=='B'return 3.0;
    else if(grade=='C+'return 2.5;
    else if(grade=='C'return 2.0;
    else if(grade=='D+'return 1.5;
    else if(grade=='D'return 1.0;
    else if(grade=='F'return 0.0;
}
 
var table = document.getElementById("dgList1");
 
for(var i=1 ; i<table.rows.length ;i++){
    if(table.rows[i].cells[4].innerHTML.indexOf("전공")!=-1
        && table.rows[i].cells[6].innerHTML != 'P')
    {
        교과목별평점X학점수_합계 += get평점(table.rows[i].cells[6].innerHTML) * Number(table.rows[i].cells[5].innerHTML);
        총학점수 += Number(table.rows[i].cells[5].innerHTML);
    }
}
alert("<전공 학점 평균>\n "+교과목별평점X학점수_합계/총학점수);
cs


원하는 결과를 얻기 위해서 작성한 소스를 브라우저 개발자 도구의 [Console] 탭에서 실행시켜야 한다.


▲개발자 도구 Console 탭


[Console] 탭에서는 위와 같이 자바스크립트 소스코드를 입력하고 엔터를 눌러 실행시킬 수 있다.



▶코드 수정


편의를 위해 사용자에게 전공학점만 계산할 것인지 전체를 계산할 것인지를 고를 수 있게 하고,

총 학점 수가 얼마인지 알려주도록 소스 코드를 작성했다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var 총학점수 = 0;
var 교과목별평점X학점수_합계 = 0;
 
function get교과목별평점(grade){
    if(grade=='A+'return 4.5;
    else if(grade=='A'return 4.0;
    else if(grade=='B+'return 3.5;
    else if(grade=='B'return 3.0;
    else if(grade=='C+'return 2.5;
    else if(grade=='C'return 2.0;
    else if(grade=='D+'return 1.5;
    else if(grade=='D'return 1.0;
    else if(grade=='F'return 0.0;
}
 
var table = document.getElementById("dgList1");
var returnVal = confirm("전공학점만 계산하시겠습니까?");
 
if(returnVal){
    for(var i=1 ; i<table.rows.length ;i++)
    {
        if(table.rows[i].cells[4].innerHTML.indexOf("전공")!=-1
            && table.rows[i].cells[6].innerHTML != 'P')
        {
            var 교과목별평점 = get교과목별평점(table.rows[i].cells[6].innerHTML);
            var 학점수 = Number(table.rows[i].cells[5].innerHTML);
            
            교과목별평점X학점수_합계 += 교과목별평점 * 학점수;
            총학점수 += 학점수;
        }
    }
    alert("<전공 학점 평균>\n "+교과목별평점X학점수_합계/총학점수+"\n\n전공 총학점수 : "+총학점수);
}
else{
    for(var i=1 ; i<table.rows.length ; i++)
    {
        if(table.rows[i].cells[6].innerHTML != 'P')
        {
            var 교과목별평점 = get교과목별평점(table.rows[i].cells[6].innerHTML);
            var 학점수 = Number(table.rows[i].cells[5].innerHTML);
            
            교과목별평점X학점수_합계 += 교과목별평점 * 학점수;
            총학점수 += 학점수;
        }
    }
    alert("<전체 학점 평균>\n "+교과목별평점X학점수_합계/총학점수+"\n\n총학점수(pass 제외) : "+총학점수);
}
cs





소스를 실행시키면 위와 같이 확인 창이 뜨게 된다.
확인 버튼을 클릭하면 전공 평점만 계산하고, 취소 버튼을 누르면 전체를 계산한다.



▶결과



 ▲확인 버튼을 눌러 출력된 결과

 ▲취소 버튼을 눌러 출력된 결과



자바스크립트를 활용해 위와 같은 결과를 쉽게 얻을 수 있었다.

동아대학교 학생이 아니더라도 이를 참고해 필요에 따라 응용한다면 귀찮은 일을 편하게 처리할 수 있을 것이다.