java-school logo

DOM 실습 - HTML에서 자바스크립트 분리

실습을 위한 준비

https://goo.gl/QlhGyG에 링크한 파일 design.war은 게시판 프로젝트의 war 파일이다. 서버 측을 구현하지 않은 프로토타입 파일이다. 다운로드한 후 톰캣의 webapps에 복사하여 톰캣이 자동으로 서비스하도록 한다. (시스템에 따라서 다운로드한 파일의 확장자가 zip로 바뀌는 경우가 있다. 그럼 다시 war로 바꿔야 한다) http://localhost:port/design을 방문한다. 상단의 로그인 버튼을 이용하여 로그인하고 게시판 목록, 상세보기를 차례로 방문하여 테스트한다.

이클립스에서 작업하기 위해서 다음 과정을 따라 한다. 이클립스를 실행하고 워크스페이스를 TOMCAT_HOME/webapps로 선택한다. 1. 워크스페이스를 TOMCAT_HOME/webapps로 선택한다. Java Project를 선택하여 새로운 프로젝트를 만든다. 2. Java Project를 선택하여 새로운 프로젝트를 만든다. 프로젝트 이름을 design으로 정한다. 3. 프로젝트 이름을 design로 정한다. 이클립스의 코드 어시스트 기능을 지원받기 위해서 서블릿 API를 빌드 패스에 추가한다. 패키지 익스플로러 뷰에서 프로젝트를 선택하고, 마우스 오른쪽 버튼을 클릭하여 빌드 패스 설정 메뉴를 선택한다. 5. 패키지 익스플로러 뷰에서 프로젝트를 선택하고 마우스 오른쪽 버튼을 클릭하여 빌드 패스 설정 메뉴를 선택한다. TOMCAT_HOME/lib에서 서블릿 API를 찾아 빌드 패스에 추가한다. 6. TOMCAT_HOME/lib에서 서블릿 API를 찾는다. 7. servlet-api.jar를 빌드패스에 추가한다. 마지막으로 src 폴더와 output 폴더의 위치를 확인한다. 8. 마지막으로 소스 폴더와 Output 폴더를 확인한다.

design.war 파일에 대한 설명

여기서 설명하려는 내용과는 상관없지만 기존 게시판과 달라진 내용은 다음과 같다.

  1. JSP 디자인은 JSTL를 적용함.
  2. 자바 소스 파일의 위치는 /WEB-INF/src
  3. User.java에서 ID에 해당하는 username 필드 추가
  4. Article.java의 내용 변경됨.
  5. ArticleAddInfo.java는 게시글(Article.java)에 댓글 수, 첨부파일 수, 조회 수 정보를 추가한 클래스임.
  6. list.jsp(목록)와 view.jsp(게시글 상세보기)에 테스트 코드가 위 설명대로 구현되어 있음.
  7. 테스트 코드가 있으므로 데이터베이스 없이도 실습이 가능함.

상세보기 화면(view.jsp)에서 디자인과 자바스크립트 코드를 분리해 보자.

다운로드/파일삭제 링크에서 스크립트 분리

내용이 없는 자바스크립트 파일 bbs-view.js를 view.jsp 파일이 있는 곳에 만든다. 아래 그림에서 test.txt가 다운로드 링크이고 바로 옆의 x가 삭제 링크다. 파일 링크와 삭제 링크 view.jsp 파일에서 script 태그 전체를 제거하고, 아래처럼 bbs-view.js를 view.jsp에 임포트한다.

<script type="text/javascript" src="bbs-view.js"></script>

view.jsp 파일에서 첨부파일 링크와 첨부 파일 삭제 링크에 관한 코드를 아래처럼 바꾼다.

<div id="gul-content">
  <span id="date-writer-hit">edited ${articleAddInfo.article.regDateForView } 
  	by ${articleAddInfo.article.name } 
  	hit ${articleAddInfo.hit }</span>
  <p>${articleAddInfo.article.htmlContent }</p>
  <p id="file-list" style="text-align: right;">
    <c:forEach var="file" items="${attachFileList }">
      <a href="#" title="${file.attachFileNo }" class="download">${file.filename }</a>
      <c:if test="${user.username == articleAddInfo.article.username }">
      <a href="#" title="${file.attachFileNo }">x</a>
      </c:if>
      <br />
    </c:forEach>
  </p>		
</div>

bbs-view.js에 아래 코드를 입력한다.

window.onload = initPage;

function initPage() {
  //첨부파일 다운로드, 첨부파일 삭제
  var file_list = document.getElementById("file-list");
  var fileLinks = file_list.getElementsByTagName("a");
  for (var i = 0; i < fileLinks.length; i++) {
    var fileLink = fileLinks[i];
    if (fileLink.className == "download") {
      fileLink.onclick = function() {
        var attachFileNo = this.title;
        var form = document.getElementById("downloadForm");
        form.attachFileNo.value = attachFileNo;
        form.submit();
        return false;
      };
    } else {
      fileLink.onclick = function() {
        var attachFileNo = this.title;
        var chk = confirm("정말로 삭제하시겠습니까?");
        if (chk == true) {
          var form = document.getElementById("deleteAttachFileForm");
          form.attachFileNo.value = attachFileNo;
          form.submit();
          return false;
        }
      };
    }
  }

  //TODO 진행하면서 이곳에 차례대로 코드를 추가한다.
	
}//initPage 함수끝

테스트

테스트는 첨부파일 다운로드와 첨부 파일 삭제를 해본다. 첨부파일 삭제는 로그인 후에 테스트할 수 있다. 실제 첨부파일은 삭제되지 않는다. 대신 첨부파일 삭제를 처리하는 페이지로 이동하면 테스트는 성공이다. 참고로, 리눅스 시스템에서는 js 파일의 인코딩이 UTF-8 이 아니면 한글이 깨진다. 그 외 기능은 이제 작동하지 않는다.

댓글(수정|삭제, 수정하기|취소)링크에서 스크립트 분리

아래 그림을 참고한다. 댓글 반복 view.jsp에서 댓글 관련 디자인을 아래 강조된 부분을 참고하여 고친다.

<!--  댓글 반복 시작 -->
<c:forEach var="comment" items="${commentList }">
<div class="comments">
  <span class="writer">${comment.name }</span>
  <span class="date">${comment.regdate }</span>
  <c:if test="${user.username == comment.username }" >
  <span class="modify-del">
    <a href="#">수정</a> | <a href="#" title="${comment.commentNo }">삭제</a>
  </span>
  </c:if>
  <p>${comment.htmlMemo }</p>
  <form class="modify-comment" action="updateComment_proc.jsp" method="post" style="display: none">
    <p>
      <input type="hidden" name="commentNo" value="${comment.commentNo }" />
      <input type="hidden" name="boardCd" value="${param.boardCd }" />
      <input type="hidden" name="articleNo" value="${param.articleNo }" />
      <input type="hidden" name="curPage" value="${param.curPage }" />
      <input type="hidden" name="searchWord" value="${param.searchWord }" />
    </p>
    <div style="text-align: right;">
      <a href="#">수정하기</a> | <a href="#">취소</a>
    </div>
    <div>
      <textarea class="modify-comment-ta" name="memo" rows="7" cols="50">${comment.memo }</textarea>
    </div>
  </form>
</div>
</c:forEach>
<!--  댓글 반복 끝 -->

bbs-view.js 파일에 다음 함수를 추가한다.

function commentUpdate(e) {
  var me = getActivatedObject(e);
  var form = me.parentNode;
  while (form.className != "modify-comment") {
    form = form.parentNode;
  }
  form.submit();
  return false;
}

function modifyCommentToggle(e) {
  var me = getActivatedObject(e);
  var comments = me.parentNode;
  while (comments.className != "comments") {
    comments = comments.parentNode;
  }
  var p = comments.getElementsByTagName("p")[0];//댓글표시 p
  var form = comments.getElementsByTagName("form")[0];//댓글 수정 form
  if (p.style.display) {
    p.style.display = '';
    form.style.display = 'none';
  } else {
    p.style.display = 'none';
    form.style.display = '';
  }
  return false;	
}

/*
 Head First Ajax 참조 : 활성화된 객체 반환
*/
function getActivatedObject(e) {
  var obj;
  if (!e) {
    //IE 옛버전
    obj = window.event.srcElement;
  } else if (e.srcElement) {
    //IE 7 이상
    obj = e.srcElement;
  } else {
    //DOM 레벨2 브라우저
    obj = e.target;
  }
  return obj;
}

bbs-view.js 파일에서 initPage() 함수 구현부의 가장 아래에 다음 코드를 추가한다.

//댓글
var bbs = document.getElementById("bbs");
var divs = bbs.getElementsByTagName("div");

for (i = 0; i < divs.length; i++) {
  if (divs[i].className == "comments") {
    var comments = divs[i];
    var spans = comments.getElementsByTagName("span");
    for (var j = 0; j < spans.length; j++) {
      if (spans[j].className == "modify-del") {
        var md = spans[j];
        var commentModifyLink = md.getElementsByTagName("a")[0];//수정 링크
        commentModifyLink.onclick = modifyCommentToggle;
        var commentDelLink = md.getElementsByTagName("a")[1];//삭제 링크
        commentDelLink.onclick =  function() {
          var commentNo = this.title;
          var chk = confirm("정말로 삭제하시겠습니까?");
          if (chk == true) {
            var form = document.getElementById("deleteCommentForm");
            form.commentNo.value = commentNo;
            form.submit();
            return false;
          }
        };
      }
   
      //form 태그안의 수정하기 링크
      var form = comments.getElementsByTagName("form")[0];
      var div = form.getElementsByTagName("div")[0];
      commentModifyLink = div.getElementsByTagName("a")[0];
      commentModifyLink.onclick = commentUpdate;
      //form 태그안의 취소링크
      var cancelLink = div.getElementsByTagName("a")[1];
      cancelLink.onclick = modifyCommentToggle;
    }
  }    
}

테스트

댓글의 "수정 | 삭제" 와 "수정하기 | 취소" 링크를 차례로 테스트한다.

다음글, 이전글 링크에서 스크립트 분리

'다음글 이전글' 링크에서 자바스크립트를 분리한다. 아래 그림을 참고한다. 다음 글 이전 글 링크 view.jsp 파일에서 "다음글 이전글" 디자인을 수정한다.

<div id="next-prev">
  <c:if test="${nextArticleAddInfo != null }">
  <p>다음글 :
    <a href="#" title="${nextArticleAddInfo.article.postsNo }">
    ${nextArticleAddInfo.article.title }
    </a>
  </p>
  </c:if>
  <c:if test="${prevArticleAddInfo != null }">
  <p>이전글 :
    <a href="#" title="${prevArticleAddInfo.article.postsNo }">
    ${prevArticleAddInfo.article.title }
    </a>
  </p>
  </c:if>
</div>

bbs-view.js 파일에 다음 함수를 추가한다.

function goView() {
  var form = document.getElementById("viewForm");
  form.articleNo.value = this.title;
  form.submit();
  return false;
}

bbs-view.js 파일에서 initPage() 함수 구현부의 가장 아래에 다음 코드를 추가한다.

//다음글,이전글 링크
var nextPrev = document.getElementById("next-prev");
links = nextPrev.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
  links[i].onclick = goView;
}

수정,삭제,다음글,이전글,목록,새글쓰기 버튼에서 스크립트 분리

아래 그림을 참고한다. 수정,삭제,다음글,이전글,목록,새글쓰기 버튼 view.jsp 파일에서 "수정, 삭제, 다음글, 이전글, 목록, 새글쓰기 버튼" 디자인을 아래 강조된 부분을 참고하여 고친다.

<div id="view-menu">
	<c:if test="${user.username == articleAddInfo.article.username }">
	<div class="fl">
		<input type="button" value="수정" id="goModify" />
		<input type="button" value="삭제" id="goDelete" />
	</div>
	</c:if>
	
	<div class="fr">
	<c:if test="${nextArticleAddInfo != null }">		
		<input type="button" value="다음글" 
			title="${nextArticleAddInfo.article.articleNo }" 
			id="next-article" />
	</c:if>
	<c:if test="${prevArticleAddInfo != null }">			
		<input type="button" value="이전글" 
			title="${prevArticleAddInfo.article.articleNo }" 
			id="prev-article" />
	</c:if>
	
	<input type="button" value="목록" id="goList" />
	<input type="button" value="새글쓰기" id="goWrite" />
	</div>
</div>

form-group에 다음 폼을 추가한다.

<form id="listForm" action="list.jsp" method="get">
<p>
  <input type="hidden" name="boardCd" value="${param.boardCd }" />
  <input type="hidden" name="curPage" value="${param.curPage }" />
  <input type="hidden" name="searchWord" value="${param.searchWord }" />
</p>
</form>

bbs-view.js 파일에 다음 함수를 추가한다.

function goList() {
	var form = document.getElementById("listForm");
	form.curPage.value = this.title;
	form.submit();
	return false;
}

bbs-view.js 파일에서 initPage() 함수 구현부의 가장 아래에 다음 코드를 추가한다.

//수정버튼
var modifyBtn = document.getElementById("goModify");
if (modifyBtn) {
	modifyBtn.onclick = function() {
		var form = document.getElementById("modifyForm");
		form.submit();
	};
}
//삭제버튼
var deleteBtn = document.getElementById("goDelete");
if (deleteBtn) {
	deleteBtn.onclick = function() {
		var chk = confirm('정말로 삭제하시겠습니까?');
		if (chk == true) {
			var form = document.getElementById("delForm");
			form.submit();
		}
	};
}
//다음글 버튼
var nextArticle = document.getElementById("next-article");
if (nextArticle) {
	nextArticle.onclick = goView;
}
//이전글 버튼
var prevArticle = document.getElementById("prev-article");
if (prevArticle) {
	prevArticle.onclick = goView;
}
//목록버튼
var listBtn = document.getElementById("goList");
listBtn.onclick = function() {
	var form = document.getElementById("listForm");
	form.submit();
};
//새글쓰기 버튼
var writeBtn = document.getElementById("goWrite");
writeBtn.onclick = function() {
	var form = document.getElementById("writeForm");
	form.submit();
};

테스트

수정, 삭제, 다음글, 이전글, 목록, 새글쓰기 버튼을 클릭하여 테스트한다.

목록링크/페이징 처리/새글쓰기 버튼에서 스크립트 분리

view.jsp에서 목록, 페이징 처리, 새글쓰기 버튼과 관련된 코드에서 디자인과 자바스크립트의 분리를 작업한다. 아래 그림을 참고한다. view.jsp에서 목록과 페이징처리 부분,새글쓰기 버튼 view.jsp 파일에서 목록과 페이징 처리, 새글쓰기 버튼 관련 디자인을 아래처럼 수정한다.

<table id="list-table">
<tr>
	<th style="width: 60px">NO</th>
	<th>TITLE</th>
	<th style="width: 84px;">DATE</th>
	<th style="width: 60px;">HIT</th>
</tr>

<!--  반복 구간 시작 -->
<c:forEach var="articleAddInfo" items="${list }" varStatus="status">
<tr>
	<td style="text-align: center;">
	<c:choose>
		<c:when test="${viewArticleAddInfo.article.articleNo == articleAddInfo.article.articleNo }">
			<img src="../images/arrow.gif" alt="현재글" style="vertical-align: middle;" />
		</c:when>
		<c:otherwise>	
			${listItemNo - status.index }
		</c:otherwise>
	</c:choose>	
	</td>
	<td>
		<a href="#" title="${articleAddInfo.article.articleNo }">
			${articleAddInfo.article.title }
		</a>
		<c:if test="${articleAddInfo.attachFileNum > 0 }">
			<img src="../images/attach.png" alt="첨부파일" />
		</c:if>
		<c:if test="${articleAddInfo.commentNum > 0 }">
			<span class="bbs-strong">[${articleAddInfo.commentNum }]</span>
		</c:if>
	</td>
	<td style="text-align: center;">${articleAddInfo.article.regDateForList }</td>
	<td style="text-align: center;">${articleAddInfo.hit }</td>
</tr>
</c:forEach>
<!--  반복 구간 끝 -->
</table>
	
<div id="paging">
	
	<c:if test="${prevPage > 0 }">
		<a href="#" title="${prevPage }">[이전]</a>
	</c:if>
	
	<c:forEach var="i" begin="${firstPage }" end="${lastPage }">
		<c:choose>
			<c:when test="${i == param.curPage }">
				<span class="bbs-strong">${i }</span>
			</c:when>
			<c:otherwise>	
				<a href="#" title="${i }">${i }</a>
			</c:otherwise>
		</c:choose>	
	</c:forEach>
	
	<c:if test="${nextPage > 0 }">
		<a href="#" title="${nextPage }">[다음]</a>
	</c:if>
	
</div>

<div id="list-menu">
	<input type="button" value="새글쓰기" />
</div>

bbs-view.js 파일에서 initPage() 함수 구현부의 가장 아래에 다음 코드를 추가한다.

//상세보기 안의 목록의 제목링크
var listTable = document.getElementById("list-table");
links = listTable.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
	links[i].onclick = goView;
}

//페이징처리
var paging = document.getElementById("paging");
links = paging.getElementsByTagName("a");
for (i = 0; i < links.length; i++) {
	links[i].onclick = goList;
}

//검색 버튼 위의 새글쓰기 버튼
var listMenu = document.getElementById("list-menu");
writeBtn = listMenu.getElementsByTagName("input")[0];
writeBtn.onclick = function() {
	var form = document.getElementById("writeForm");
	form.submit();
};

테스트

제목을 클릭하여 주소창에 변경되는지 확인한다. 페이징 직접 이동 링크를 클릭하고 주소창에서 curPage가 변경되는지 확인한다. 새글쓰기 버튼을 클릭하여 새글쓰기 페이지로 이동하는지를 확인한다.

다운로드/파일 삭제 링크에서 스크립트 분리(jQuery)

다운로드/파일 삭제 링크에서 스크립트 분리에서 구현한 첨부파일 링크와 첨부 파일 삭제 링크에 대한 자바스크립트 코드를 jQuery 코드로 수정한다. 아래 그림에서 test.txt가 파일 다운로드 링크이고 바로 옆의 x가 파일 삭제 링크다. 첨부파일링크와 첨부파일 삭제 링크 jQuery 최신 파일을 jQuery.com에서 다운로드한다. 도큐먼트 베이스 아래 js 폴더를 만들고 그 안에 다운로드한 파일과 bbs-view.js을 복사한다. view.jsp 파일을 열고 bbs-view.js가 아래에 위치하도록 아래 문장으로 임포트 한다.

<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../js/bbs-view.js"></script>

js 폴더에 있는 bbs-view.js의 기존 내용은 모두 지운다. view.jsp에서 첨부파일 링크와 첨부 파일 삭제 링크에 관한 코드를 아래처럼 바꾼다.

<div id="gul-content">
  <span id="date-writer-hit">
    edited ${articleAddInfo.article.regDateForView } 
    by ${articleAddInfo.article.name } 
    hit ${articleAddInfo.hit }
  </span>
  <p>${articleAddInfo.article.htmlContent }</p>
  <p id="file-list" style="text-align: right;">
    <c:forEach var="file" items="${attachFileList }">
      <a href="#" title="${file.attachFileNo }" class="download">${file.filename }</a>
      <c:if test="${user.username == viewPostsAddInfo.posts.username }">
        <a href="#" title="${file.attachFileNo }">x</a>
      </c:if>
      <br />
    </c:forEach>
  </p>
</div>

bbs-view.js에 아래 코드를 입력한다.

$(document).ready(function() {
  $('#file-list a.download').click(function() {
    var $attachFileNo = this.title;
    $('#downloadForm input[name*=attachFileNo]').val($attachFileNo);
    $('#downloadForm').submit();
    
    return false;
  });
  
  $('#file-list a:not(.download)').click(function() {
    var chk = confirm("정말로 삭제하시겠습니까?");
    
    if (chk == true) {
      var $attachFileNo = this.title;
      $('#deleteAttachFileForm input[name*=attachFileNo]').val($attachFileNo);
      $('#deleteAttachFileForm').submit();
    }
    
    return false;
  });

});

테스트

테스트는 첨부파일 다운로드와 첨부 파일 삭제를 해본다. 그 외 기능은 이제 작동하지 않는다.

댓글(수정/삭제, 수정하기/취소)링크에서 스크립트 분리(jQuery)

댓글(수정/삭제, 수정하기/취소) 링크에서 스크립트 분리에서 완성한 자바스크립트 코드를 jQuery로 변경한다. 아래 그림을 참고한다. 댓글 반복 view.jsp 파일에서 댓글 관련 디자인을 아래와 같다. 강조된 부분이 "댓글(수정/삭제, 수정하기/취소) 링크에서 스크립트 분리" 와 다른 부분이다.

<!--  댓글 반복 시작 -->
<c:forEach var="comment" items="${commentList }">
<div class="comments">
  <span class="writer">${comment.name }</span>
  <span class="date">${comment.regdate }</span>
  <c:if test="${user.username == comment.username }" >
  <span class="modify-del">
    <a href="#" class="comment-toggle">수정</a> | 
    <a href="#" class="comment-delete" 
      title="${comment.commentNo }">삭제</a>
  </span>
  </c:if>
  <p class="view-comment">${comment.htmlMemo }</p>
  <form class="modify-comment" action="updateComment_proc.jsp" method="post" style="display: none">
    <p>
      <input type="hidden" name="commentNo" value="${comment.commentNo }" />
      <input type="hidden" name="boardCd" value="${param.boardCd }" />
      <input type="hidden" name="articleNo" value="${param.articleNo }" />
      <input type="hidden" name="curPage" value="${param.curPage }" />
      <input type="hidden" name="searchWord" value="${param.searchWord }" />
    </p>
    <div style="text-align: right;">
      <a href="#">수정하기</a> | <a href="#">취소</a>
    </div>
    <div>
      <textarea class="modify-comment-ta" name="memo" rows="7" cols="50">${comment.memo }</textarea>
    </div>
  </form>
</div>
</c:forEach>
<!--  댓글 반복 끝 -->

bbs-view.js에서 $(document).ready(function() {...} 구현부의 가장 아래에 다음 코드를 추가한다.

//댓글반복
$('.comments').click(function(e) {
	if ($(e.target).is('.comment-toggle')) {
		var $form = $(e.target).parent().parent().find('.modify-comment');
		var $p = $(e.target).parent().parent().find('.view-comment');
		if ($form.is(':hidden') == true) {
			$form.show();
			$p.hide();
		} else {
			$form.hide();
			$p.show();
		}
		return false;
	} else if ($(e.target).is('.comment-delete')) {
		var chk = confirm("정말로 삭제하시겠습니까?");
		if (chk == true) {
			var $commentNo = $(e.target).attr('title');
			$('#deleteCommentForm input[name*=commentNo]').val($commentNo);
			$('#deleteCommentForm').submit();
		}
		return false;
	}
});
//form 안의 수정하기 링크
$('.modify-comment a:contains("수정하기")').click(function(e) {
	$(e.target).parent().parent().submit();
	return false;
});
//form 안의 취소 링크
$('.modify-comment a:contains("취소")').click(function(e) {
	var $form = $(e.target).parent().parent();
	var $p = $(e.target).parent().parent().parent().find('.view-comment');
	if ($form.is(':hidden') == true) {
		$form.show();
		$p.hide();
	} else {
		$form.hide();
		$p.show();
	}
	return false;
});

테스트

댓글의 수정과 삭제를 테스트한다.

이전글, 다음글 링크에서 스크립트 분리(jQuery)

이전글, 다음글 링크에서 분리한 자바스크립트 코드를 jQuery 코드로 변경한다. 아래 그림을 참고한다. 다음글 이전글 링크 view.jsp 파일에서 다음 부분이다. 디자인은 이전 실습과 같다.

<div id="next-prev">
	<c:if test="${nextArticleAddInfo != null }">
	<p>다음글 :
	  <a href="#" title="${nextArticleAddInfo.article.articleNo }">
	  ${nextArticleAddInfo.article.title }
	  </a>
	</p>
	</c:if>
	<c:if test="${prevArticleAddInfo != null }">
	<p>이전글 :
	  <a href="#" title="${prevArticleAddInfo.article.articleNo }">
	  ${prevArticleAddInfo.article.title }
	  </a>
	</p>
	</c:if>
</div>

bbs-view.js 파일에 다음 함수를 추가한다.

function goView(articleNo) {
	$('#viewForm input[name*=articleNo]').val(articleNo);
	$('#viewForm').submit();
}

bbs-view.js에서 $(document).ready(function() {..} 함수 구현부의 가장 아래에 다음 코드를 추가한다.

$('#next-prev a').click(function() {
	var $articleNo = this.title;
	goView($articleNo);
	return false;
});

수정, 삭제, 다음글, 이전글, 목록, 새글쓰기 버튼에서 스크립트 분리(jQuery)

수정, 삭제, 다음글, 이전글, 목록, 새글쓰기 버튼에서 분리한 스크립트 코드를 jQuery로 변경한다. 수정,삭제,다음글,이전글,목록,새글쓰기 버튼 view.jsp에서 다음 부분으로 디자인은 전과 같다.

<div id="view-menu">
	<c:if test="${user.username == articleAddInfo.article.username }">
	<div class="fl">
		<input type="button" value="수정" id="goModify" />
		<input type="button" value="삭제" id="goDelete" />
	</div>
	</c:if>
	<div class="fr">
	<c:if test="${nextArticleAddInfo != null }">		
		<input type="button" value="다음글" 
			title="${nextArticleAddInfo.article.articleNo }" 
			id="next-article" />
	</c:if>
	<c:if test="${prevArticleAddInfo != null }">			
		<input type="button" value="이전글" 
			title="${prevArticleAddInfo.article.articleNo }" 
			id="prev-article" />
	</c:if>
	<input type="button" value="목록" id="goList" />
	<input type="button" value="새글쓰기" id="goWrite" />
	</div>
</div>

bbs-view.js 파일에 다음 함수를 추가한다.

function goList(curPage) {
	$('#listForm input[name*=curPage]').val(curPage);
	$('#listForm').submit();
}

bbs-view.js에서 $(document).ready(function() {..} 함수 구현부의 가장 아래에 다음 코드를 추가한다.

//수정 버튼
$('#goModify').click(function() {
	$('#modifyForm').submit();
});
//삭제 버튼
$('#goDelete').click(function() {
	var chk = confirm('정말로 삭제하시겠습니까?');
	if (chk == true) {
		$('#delForm').submit();
	}
});
//다음글 버튼
$('#next-article').click(function() {
	var $articleNo = this.title;
	goView($articleNo);
});
//이전글 버튼
$('#prev-article').click(function() {
	var $articleNo = this.title;
	goView($articleNo);
});
//목록버튼
$('#goList').click(function() {
	$('#listForm').submit();
});
//새글쓰기 버튼
$('#goWrite').click(function() {
	$('#writeForm').submit();
});

목록링크/페이징 처리/새글쓰기 버튼에서 스크립트 분리(jQuery)

목록링크/페이징 처리/새글쓰기 버튼에서 분리한 스크립트 코드를 jQuery 코드로 변경한다. view.jsp에서 목록과 페이징처리 부분,새글쓰기 버튼 view.jsp에서 다음 부분이며, 디자인은 전과 같다.

<table id="list-table">
<tr>
	<th style="width: 60px">NO</th>
	<th>TITLE</th>
	<th style="width: 84px;">DATE</th>
	<th style="width: 60px;">HIT</th>
</tr>

<!--  반복 구간 시작 -->
<c:forEach var="articleAddInfo" items="${list }" varStatus="status">
<tr>
	<td style="text-align: center;">
	<c:choose>
		<c:when test="${viewArticleAddInfo.article.articleNo == articleAddInfo.article.articleNo }">
			<img src="../images/arrow.gif" alt="현재글" style="vertical-align: middle;" />
		</c:when>
		<c:otherwise>	
			${listItemNo - status.index }
		</c:otherwise>
	</c:choose>	
	</td>
	<td>
		<a href="#" title="${articleAddInfo.article.articleNo }">
			${articleAddInfo.article.title }
		</a>
		<c:if test="${articleAddInfo.attachFileNum > 0 }">
			<img src="../images/attach.png" alt="첨부파일" />
		</c:if>
		<c:if test="${articleAddInfo.commentNum > 0 }">
			<span class="bbs-strong">[${articleAddInfo.commentNum }]</span>
		</c:if>
	</td>
	<td style="text-align: center;">${articleAddInfo.article.regDateForList }</td>
	<td style="text-align: center;">${articleAddInfo.hit }</td>
</tr>
</c:forEach>
<!--  반복 구간 끝 -->
</table>
	
<div id="paging">
	<c:if test="${prevPage > 0 }">
		<a href="#" title="${prevPage }">[이전]</a>
	</c:if>
	
	<c:forEach var="i" begin="${firstPage }" end="${lastPage }">
		<c:choose>
			<c:when test="${i == param.curPage }">
				<span class="bbs-strong">${i }</span>
			</c:when>
			<c:otherwise>	
				<a href="#" title="${i }">${i }</a>
			</c:otherwise>
		</c:choose>	
	</c:forEach>
	
	<c:if test="${nextPage > 0 }">
		<a href="#" title="${nextPage }">[다음]</a>
	</c:if>
	
</div>

<div id="list-menu">
	<input type="button" value="새글쓰기" />
</div>

bbs-view.js에서 $(document).ready(function() {.. } 함수 구현부의 가장 아래에 다음 코드를 추가한다.

//상세보기 안의 목록의 제목링크
$('#list-table a').click(function() {
	var $articleNo = this.title;
	goView($articleNo);
	return false;
});
//페이징 처리
$('#paging a').click(function() {
	var $curPage = this.title;
	goList($curPage);
	return false;
});
//검색 버튼 위의 새글쓰기 버튼
$('#list-menu input').click(function() {
	$('#writeForm').submit();
});

여기까지가 "자바 웹 프로그래밍" 과정이다. 최종 소스는 GitHub의 다음 주소에서 관리한다. https://github.com/kimjonghoon/SpringBbs

참고