Programmer's Progress

Ajax를 이용한 컴퓨터활용능력 실기 합격자 명단 출력하기 본문

JavaScript + JQuery/Self Learning

Ajax를 이용한 컴퓨터활용능력 실기 합격자 명단 출력하기

Blanc et Noir 2021. 2. 8. 14:22

오늘이 돼서야 드디어 말로만 듣던 Ajax에 대해 공부하기 시작했다.

Ajax란 Asynchronous JavaScript XML의 약자로, 비동기식 JavaScript와 XML을 의미한다.

 

동기 방식은 클라이언트가 서버에 신호를 보내면 서버가 이에 응답하기 전까진 다른 작업을 수행할 수 없다.

Ajax를 사용하지 않을 경우, 클라이언트가 서버에 파일을 요청하면, 잠시 동안 페이지가 서버 스크립트 페이지로 갱신되면서 파일 전송 요청이 완료되기 전까진 클라이언트가 어떤 작업도 수행하지 못한다.

 

비동기 방식은 클라이언트가 서버에 신호를 보내면  서버가 이에 응답하기 전에 다른 작업을 수행할 수 있다.

서버 스크립트 페이지를 거치지 않아도 자료를 받을 수 있는데, 블로그에 댓글을 달면 페이지가 전환되지 않고

바로 댓글이 작성완료 되는 것도 비동기식 방식을 사용했기 때문이다.

 

XML에 대해서도 배웠는데, Extensible MarkUp Language라는 명칭에서 알 수 있듯이, HTML과 같은 마크업 언어다.

그러나, Extensible하기 때문에 즉, 확장 가능하기 때문에 태그 명칭을 사용자가 임의대로 정할 수 있다. 이러한 특성 때문에 XML은 데이터를 구조적이고 체계적으로 나타내는 것에 중점을 둔다면, HTML은 데이터를 어떻게 효과적으로 가시성을 확보하며 표시할지에 중점을 둔다.

 

HTML5 : Source Code

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="ajax - 2.css">
    <script src="../../../JQUERY/jquery.js"></script>
    <script src="../../../JQUERY/jquery-ui.js"></script>
    <script src="ajax - 2.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="wrapper"></div>
</body>
</html>

 

CSS3 : Source Code

table{
    border:1px solid black;
    border-collapse: collapse;
    text-align: right;
}
td{
    border:1px solid black;
    text-align: right;
}
th{
    border:1px solid black;
    text-align: center;
}

 

JavaScript : Source Code

$(document).ready(function(){
    $.ajax({
        "url" : "dataBase.json",
        "dataType" : "json",
        "success" : function(dataBase){
            var cnt = 0;
            var arr = $.grep(dataBase, function(obj,index){
                console.log(index);
                if(evaluate(obj)){
                    cnt++;
                    return true;
                }else{
                    return false;
                }
            });
            $("#wrapper").append("<table></table>");
            $.each(arr,function(index, obj){
                $("#wrapper table").append("<tr></tr>");
                $("#wrapper table tr").eq(index).append("<td>"+obj.number+"</td>");
                $("#wrapper table tr").eq(index).append("<td>"+obj.basement+"</td>");
                $("#wrapper table tr").eq(index).append("<td>"+obj.calculation+"</td>");
                $("#wrapper table tr").eq(index).append("<td>"+obj.analysis+"</td>");
                $("#wrapper table tr").eq(index).append("<td>"+obj.etc+"</td>");
                $("#wrapper table tr").eq(index).append("<td>"+obj.dataBase+"</td>");
                $("#wrapper table tr").eq(index).append("<td>"+obj.input+"</td>");
                $("#wrapper table tr").eq(index).append("<td>"+obj.output+"</td>");
                $("#wrapper table tr").eq(index).append("<td>"+obj.process+"</td>");
            })
            $("#wrapper table").prepend("<tr><td>수험번호</td><td>기초작업</td><td>계산작업</td><td>분석작업</td><td>기타작업</td><td>DB 구축</td><td>입력 및 수정 기능 구현</td><td>조회 및 출력 기능 구현</td><td>처리 기능 구현</td></tr>");
            $("#wrapper table").prepend("<tr><th>합격자수 "+cnt+"</th><th colspan='4'>Excel 실기</th><th colspan='4'>Access 실기</th></tr>");
        },
        "error" : function(){
            alert("Error has occurred!");
        }
    })
    function evaluate(obj){
        var sumOfExcel = 0;
        var sumOfAccess = 0;
        sumOfExcel = obj.basement + obj.calculation + obj.analysis + obj.etc;
        sumOfAccess = obj.dataBase + obj.input + obj.output + obj.process;
        if(sumOfExcel >= 70 && sumOfAccess >= 70){
            return true;
        }else{
            return false;
        }
    }
});

dataBase.json 소스코드
Excel과 Access점수의 합계가 각각 70점 이상인 합격자들의 명단, 1000명중 66명 즉, 6.6%의 합격률을 보인다.

데이터베이스를 직접 구축하고, 데이터베이스에 합격자들 명단을 요청하는 과정이 있었으면 좋겠지만

아직 서버사이드 언어를 배우지 못한데다, Ajax로 JSON 데이터를 binding 하는 것으로 이번 공부 방향을 잡았기에

아래의 사이트에서 .json 파일의 형태로 간이 데이터베이스 비슷한 것을 구현했다.

 

Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel

 

Mockaroo - Random Data Generator and API Mocking Tool | JSON / CSV / SQL / Excel

Paste the header row from your CSV, TXT, or Excel file to create multiple fields at once.

www.mockaroo.com

 

이번 공부를 통해 클라이언트 사이드와 서버 사이드의 동작의 개념을 익혔고, 클라이언트 사이드에서 Ajax를 이용해

서버 사이드에 데이터를 요청하는 방법을 대략적으로나마 배웠다. 또한 나중에 JSP, MySQL, Java Spring 같은 서버 사이드 언어 및 라이브러리, 프레임워크도 배워야겠다는 생각이 들었다.

저작자표시

'JavaScript + JQuery > Self Learning' 카테고리의 다른 글

Ajax 를 이용한 교차 도메인 XML 데이터 Binding 하기  (0) 2021.02.10
Ajax를 이용한 XML 데이터 Binding 하기  (1) 2021.02.09
포트폴리오 레이아웃 One Page Scroll  (0) 2021.02.06
Vertical 네비게이터 구현하기  (0) 2021.02.05
네비게이터 메뉴 선택시 삼각형 표시 추가하기, hover 이벤트로 간결하게 구현하기  (0) 2021.02.04
'JavaScript + JQuery/Self Learning' Related Articles more
Comments