list.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/jsp.js"></script>
</head>
<body>
<script>
//로컬스토리지에서 데이터 가져와서 뿌리기
var v_tblName = "yujin";
out.print("<h1>정말 환상적인 게시판</h1>");
out.print("<hr>");
var v_datas = JSON.parse(localStorage.getItem(v_tblName));
var v_tblStr = "<table border=1>";
v_tblStr += "<tr><th>순번</th><th>제목</th><th>작자</th><th>능력</th></tr>"
for(var i=0; i<v_datas.length; i++){
v_tblStr += "<tr>";
v_tblStr += "<td>" + (i+1) + "</td>";
// v_tblStr += "<td><a href='read.html?gid=" + v_datas[i].gid + "'>"+ v_datas[i].title +"</a></td>";
v_tblStr += "<td><a href='#' onclick='f_read("+ v_datas[i].gid+")'>"+ v_datas[i].title +"</a></td>";
v_tblStr += "<td>" + v_datas[i].writer + "</td>";
v_tblStr += "<td>" + v_datas[i].skills + "</td>";
v_tblStr += "</tr>";
}
v_tblStr += "</table><br><br>";
v_tblStr += "<input type='button' id='id_close' value='눌러'>";
v_tblStr += "<a href='write.html'>글쓰기로 이동</a>";
out.print(v_tblStr);
var v_clsBtn = document.querySelector("#id_close");
v_clsBtn.onclick = function(){
if(newWin){
newWin.close(); // 새창 닫기
}
}
var newWin = null;
function f_read(p_arg){
//이건 기억하기 - 잔상가지고는 부족(ajax를 막는 방법)
event.preventDefault(); // 장착된(built-in) 이벤트기능 막기
newWin = window.open("read.html?gid="+p_arg,"any","width=200,height=300,left=100,top=100"); //이름을 주면 해당 탭이 열려있으면 새로 열리지 않고 기존에 열린 창으로 이동
}
</script>
</body>
</html>결과화면 :
write.jsp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
Restful api
get + url => 조회
post + url => 생성
put + url => 수정
delete + url => 삭제
patch + url => 일부수정
?name=value&name=value& => queryString
-->
<h1>정말 볼품없는 게시판</h1>
<form action="write_action.html" method="get">
제목 <input type="text" name="n_title" value=""><br>
글쓴이 <input type="text" name="n_writer" value=""><br>
글쓴이 능력<br>
HTML<input type="checkbox" name="n_skills" value="html">
CSS<input type="checkbox" name="n_skills" value="css">
JS<input type="checkbox" name="n_skills" value="js">
JSP<input type="checkbox" name="n_skills" value="jsp">
내용<br>
<textarea name="n_content" cols="30" rows="10"></textarea> <br>
<input type="submit" value="등록">
<input type="reset" value="다시쓰기">
</form>
</body>
</html>결과화면 :
write_action.jsp
<!DOCTYPE html>
<meta charset="UTF-8">
<script src="./js/jsp.js"></script>
<script>
var v_tblName = "yujin";
var v_title = request.getParameter("n_title");
var v_writer = request.getParameter("n_writer");
var v_skills = request.getParameterValues("n_skills");
var v_content = request.getParameter("n_content").replaceAll("+"," ");
//localStorage에 저장하기, 문자열밖에 저장 안됨
//여러글 저장하기
var v_gulArray = [] // 글묶음을 담을 배열
if(localStorage.getItem(v_tblName)){
v_gulArray = JSON.parse(localStorage.getItem(v_tblName));
};
var v_gul = {}; // 관련내용을 묶어줄 빈 배열생성
v_gul.title = v_title;
v_gul.writer = v_writer;
v_gul.skills = v_skills;
v_gul.content = v_content;
v_gulArray.push(v_gul); // 배열에 담기
localStorage.setItem(v_tblName,JSON.stringify(v_gulArray)); // 결과 확인
alert("글이 잘 저장되었음");
location.href="list.html"; //? 캐쉬된 페이지를 보여줄수도 있음
// location.replace("list.html"); //? 안 캐쉬된 페이지를 보여줌
//stringify => 객체를 문자열로 바꿔주는 것(serialize)
// var v_str = '{"name":"곽지훈"}'; // ',' "에 주의 JSON의 문제(바깥에 ', 안쪽에 "사용)
// var v_obj = JSON.parse(v_str); // 성공?
// alert(v_obj.name);
</script>
결과화면 :
등록버튼을 눌렀을 때
jsp.js
/*
위로 갈수록 최신
디코딩 인코딩
decodeURIComponent decodeURIComponent
decodeURI decodeURI
unescape escape
*/
//name값을 주면 value값을 return해주는 기능을 일반화할 필요가 생김
//빈 객체(json)을 이용해서 name space를 표현
var request = {};
request.getParameter = function(p_name){
var v_locStr = location.href;
if(v_locStr.indexOf("?") == -1){
return null;
}
var v_queryString = v_locStr.split("?")[1];
var v_nameValues = v_queryString.split("&");
for(var i = 0; i < v_nameValues.length; i++){
var v_name = v_nameValues[i].split("=")[0];
var v_value = v_nameValues[i].split("=")[1];
if(v_name == p_name){
return decodeURIComponent(v_value).replaceAll("+", " ");
}
}
return null; //요런건 잘 상의해서 팀원들이 알 수 있게 정의
}
request.getParameterValues = function(p_name){
var v_locStr = location.href;
if(v_locStr.indexOf("?") == -1){
return null;
}
var v_queryString = v_locStr.split("?")[1];
var v_nameValues = v_queryString.split("&");
var v_values = [];
if(v_nameValues.length > 0){
for(var i = 0; i < v_nameValues.length; i++){
var v_name = v_nameValues[i].split("=")[0];
var v_value = v_nameValues[i].split("=")[1];
if(v_name == p_name){
v_values.push(decodeURIComponent(v_value));
}
}
} else { return null; }
return v_values;
}
//out.print(p_msg)
//out.println(p_msg)
var out = {};
out.print = function(p_msg){
document.write(p_msg);
}
out.println = function(p_msg){
document.write(p_msg + "<br>");
}read.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>읽기</title>
<script src="./js/jsp.js"></script>
</head>
<body>
제목 <input type="text" name="n_title" value="" readonly><br>
글쓴이 <input type="text" name="n_writer" value=""><br>
글쓴이 능력<br>
HTML<input type="checkbox" name="n_skills" value="html">
CSS<input type="checkbox" name="n_skills" value="css">
JS<input type="checkbox" name="n_skills" value="js">
JSP<input type="checkbox" name="n_skills" value="jsp">
내용<br>
<textarea name="n_content" cols="30" rows="10"></textarea> <br>
<input type="hidden" id="id_gid" value="">
<!-- 사용자에게 보이진 않지만 프로그램적으로 수정/삭제를 위해 값을 hidden으로 저장 -->
<br><br>
<a href="list.html">리스트로 가기</a>
<script>
var v_tblName="yujin";
var v_ckboxs = document.getElementsByName("n_skills"); //체크박스의 전체 값 배열
window.addEventListener("DOMContentLoaded", function(){
var v_gid = request.getParameter("gid");
var v_datas = JSON.parse(localStorage.getItem(v_tblName));
for(var i=0; i<v_datas.length; i++){
if(v_datas[i].gid == v_gid){ //찾았다면
document.getElementsByName("n_title")[0].value = v_datas[i].title;
document.getElementsByName("n_writer")[0].value = v_datas[i].writer;
document.getElementsByName("n_content")[0].value = v_datas[i].content;
document.querySelector("#id_gid").value = v_gid;
var v_skills = v_datas[i].skills; // 글쓴이 체크된 스킬 배열
for(var k=0; k< v_skills.length; k++){
for(var j=0; j < v_ckboxs.length; j++){ //글쓴이의 체크된 스킬과 체크박스 전체중 같은 값이 있을때 체크하기
if(v_ckboxs[j].value == v_skills[k]){
v_ckboxs[j].checked = true;
}
}
}
}
}
});
</script>
</body>
</html>