2. 변환: Javascript -> JQuery

댓글을 저장하는 fn_formSubmit() 함수를 변환한다.

현재 게시물에 대한 댓글을 작성하는 폼(form1)의 구성원인

작성자(rewriter)와 글내용(rememo)의 입력 여부를 확인하여

입력하지 않은 경우 메시지를 사용자에게 보여 주는 기능이다.

form1.rewriter.value로 작성했는데 document.form1을 form1으로지정했기 때문에

실제로는 document.form1.rewriter.value라고 사용하는 것이다.

JavaScript

function fn_formSubmit(){
    var form1 = document.form1;
   
    if (form1.rewriter.value=="") {
        alert("작성자를 입력해주세요.");
        form1.rewriter.focus();
        return;
    }
    if (form1.rememo.value=="") {
        alert("글 내용을 입력해주세요.");
        form1.rememo.focus();
        return;
    }
    form1.submit();   
}

JQuery

function fn_formSubmit(){
    if ( $.trim($("#rewriter1").val()) == "") {
        alert("작성자를 입력해주세요.");
        $("#rewriter1").focus();
        return;
    }
    if ($.trim($("#rememo1").val()) == "") {
        alert("글 내용을 입력해주세요.");
        $("#rememo1").focus();
        return;
    }
    $("#form1").submit();   
}

이 긴 문장을 $("#rewriter1")로 간단하게 사용하게 된다.

$는 JQuery 사용을 의미하고, #은 HTML 태그 속성 중 ID를 의미한다.

즉 $("#rewriter1")은 id가 rewriter1(작성자)인 HTML 태그(입력상자)를 반환하게 되고,

태그의 값(value)을 val()함수로 가져와 비었는지 여부를 확인한다.

이러한 처리를 위해서는

다음 코드처럼 입력과 관련된 모든 HTML 태그에 이름(name)과 같은 id를 부여해 줘야 한다.

그렇지 않으면 $("input[name= rewriter]")과 같이 사용하는데

간단하게 사용하기 위해 id를 사용하는 것이 좋다.

<form id="form1" name="form1" action="board7ReplySave" method="post">
    <input type="hidden" id="brdno1" name="brdno" value="<c:out value="${boardInfo.brdno}"/>">
    <input type="hidden" id="reno1" name="reno">
    작성자: <input type="text" id="rewriter1" name="rewriter" size="20" maxlength="20"> <br/>
    <textarea id="rememo1" name="rememo" rows="3" cols="60" maxlength="500" placeholder="댓글을 달아주세요."></textarea>
    <a href="#" onclick="fn_formSubmit()">저장</a>
</form>

BoardRead.jsp

JS도 document.getElementById를 이용하여 id로 식별하여 사용하지만

입력상자(Textbox)와 관련된 처리를 할 때는 개인적으로 간편하게 사용하기 위해

JS는 태그의 이름(ex:form1.rewriter.value)으로 식별하고 JQuery를 사용할 때는 id로 식별하여 사용한다.

form2, form3도 모두 이와 같이 id와 name에 값을 부여해서

JS(JQuery)에서는 id로 인식하여 처리하고,

서버로 값을 전달할 때는 name으로 인식한다.

<div id="replyDiv" style="width: 99%; display:none">
    <form id="form2" name="form2" action="board7ReplySave" method="post">
        <input type="hidden" id="brdno2" name="brdno" value="<c:out value="${boardInfo.brdno}"/>">
        <input type="hidden" id="reno2" name="reno">
        <textarea id="rememo2" name="rememo" rows="3" cols="60" maxlength="500"></textarea>
        <a href="#" onclick="fn_replyUpdateSave()">저장</a>
        <a href="#" onclick="fn_replyUpdateCancel()">취소</a>
    </form>
</div>

<div id="replyDialog" style="width: 99%; display:none">
    <form id="form3" name="form3" action="board7ReplySave" method="post">
        <input type="hidden" id="brdno3" name="brdno" value="<c:out value="${boardInfo.brdno}"/>">
        <input type="hidden" id="reno3" name="reno">
        <input type="hidden" id="reparent3" name="reparent">
        작성자: <input type="text" id="rewriter3" name="rewriter" size="20" maxlength="20"> <br/>
        <textarea id="rememo3" name="rememo" rows="3" cols="60" maxlength="500"></textarea>
        <a href="#" onclick="fn_replyReplySave()">저장</a>
        <a href="#" onclick="fn_replyReplyCancel()">취소</a>
    </form>
</div>

BoardRead.jsp

form2, form3의 입력 상자들에 ID를 바꿀 때 주의 할 것이 있다.

이름과 동일한 id를 주면 id는 문서 전체(document)에서 고유하게 식별되는 것이고

폼(form)이 있는 경우 이름은 폼 내부에서 고유하게 식별된다.

따라서 같은 이름이 있어도 폼이 다르면 다르게 인식되지만

ID는 같게 인식되어 이름과 동일하게 주면 여러 개의 입력상자가 선택되게 되어 오류를 발생시킨다.

따라서 폼이 form2면 id도 brdno2처럼 부여 하여 사용한다.

이름은 그대로 brdno로 지정하여 서버로 전송 되게 한다.

$.trim() 함수는 문자열의 좌우 공백을 제거해 주는 JQuery 함수로 공백만 넣고 입력하는 글을 막기 위해 사용하였다.

댓글을 삭제하는 fn_replyDelete() 함수에서는 HTML 태그에 속성(attribute)을 지정하는 방법을 알 수 있다.

JS에서는 action 속성에 값을 지정해서 넣어주고 (form.action="board6ReplyDelete")

JQuery에서는 속성 함수 (attr) 를 호출해서 지정한다 ($("#form2").attr("action", "board7ReplyDelete")).

fn_replyUpdate() 함수에서는 다음과 같이 이름으로 식별하고(form), id로 식별하는 (getElementById) 방식을 같이 사용했다.

    var form = document.form2;

    var reply = document.getElementById("reply"+reno);

    var replyDiv = document.getElementById("replyDiv");

div 태그는 id로 인식해서 사용하는데,

두 방식 모두 필요한 태그를 찾아서 변수에 담아서 사용한다.

JQuery에서도 동일하게 사용하는 게 좋지만 복잡하게 사용하는 것이 아니라서

변수에 담아서 사용하지 않고 직접 호출해서 사용하지만

reply = $("#reply"+reno)의 경우에는 매번 ID를 조합해서 찾는 것이 무리라고 여겨서 변수에 담아서 사용했다.

div 태그를 보이고(replyDiv.style.display = "") 숨기는 (replyDiv.style.display = "none") 방법도

개발자에게 직관적인 show, hide 함수로 치리된다.

입력 박스(Text)는 값(value)을 가지기 때문에 JQuery의 val함수를 사용하고

div 태그는 innerText나 innerHTML 속성으로 값을 다루고, JQuery는 text와 html 함수로 호출해서 사용한다.

이하의 함수들도 이와 같은 규칙에 의해 변환되었기 때문에 더 이상의 설명이 필요 없을 것 같아서 생략한다.

여기서는 JQuery의 장점을 제대로 표현하지 못했고 단지 JS와 비교하며 초보 수준에서 다루었다.