오늘 첫 수업으로 자바 스크립트에서 JSON의 배열들을 저장 버튼을 누를때 마다 테이블에 추가 되도록 프로그래밍을 하도록 하는 수업을 하겠다.
<!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">
<title>Step10_example5.html</title>
</head>
<body>
<input type="text" placeholder="번호입력..." id ="inputNum">
<br>
<input type="text" placeholder="이름입력..." id ="inputName">
<br>
<input type="text" placeholder="주소입력..." id ="inputAddr">
<br>
<button id = "saveBtn">저장</button>
<button id = "deleteBtn">삭제</button>
<table>
<thead>
<tr>
<th>번호</th>
<th>이름</th>
<th>주소</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
//번호, 이름, 주소를 입력하고 저장 버튼을 누르면 localStroage 에 저장하고
//삭제 버튼을 누르면 localStorage 에 저장된 정보를 삭제하고
document.querySelector("#saveBtn").addEventListener("click", ()=>{
//1. 입력한 내용을 읽어와서
const num = Number(document.querySelector("#inputNum").value);
const name = document.querySelector("#inputName").value;
const addr = document.querySelector("#inputAddr").value;
//2. object에 담고
const obj = {num, name, addr };
//3.배열에 누적 시키기
//빈 배열을 준비하고
let members=[];
//만일 localStorage에 이미 저장된 정보가 있다면
if(localStorage.members){
//localStorage에 저장된 정보를 이용해서 배열을 만든다.
members = JSON.parse(localStorage.members);
}
members.push(obj); //배열에 .push로 누적시키기
//4.배열을 json문자열로 변환
const json = JSON.stringify(members); //.parse로 json문자열로 변환하기
//5.json문자열을 localStroage에 저장하기
localStorage.members = json; //변환된 문자열을 localStroge에 저장
//6.localStorage 에 저장된 json 문자열을 이용해서 table에 출력
//위에 members는 테이블을 추가할때마다 업데이트 되어야한다.
printMembers();
});
//페이지 로딩시점에 이미 저장된 회원정보가 있다면 한번 출력해 준다.
if(localStorage.members){
printMembers();
}
function printMembers(){
//tbody 안에 있는 내용 삭제
document.querySelector("tbody").innerText="";
//localStorage 에 저장된 문자열을 배열로 변환
const members = JSON.parse(localStorage.members);
//반복문을 돌면서 tbody에 tr을 출력하기
for(let i = 0; i <members.length; i++){
let tmp = members[i];
const tr=`
<tr>
<td>${tmp.num}</td>
<td>${tmp.name}</td>
<td>${tmp.addr}</td>
</tr>
`;
document.querySelector("tbody").insertAdjacentHTML("beforeend", tr);
}
}
document.querySelector("#deleteBtn").addEventListener("click",()=>{
delete localStorage.members;
});
</script>
</body>
</html>
서버프로그램을 run했을 때 이클립스에서는 Tomcat 서버에 index.thml 페이지가 포함된 프로젝트를 add를 시키고 Tomcat 서버를 start시킨다. 웹프로우저를 실행시키면서 요철할 경로(선택된 html이나 jsp페이지)를 전달해준다.
/Step01Servlet/send?msg = hello 를 예로 들어
/Step01Servlet => context path
/send => request path(요청경로)
?msg=hello => GET request parameter
package test.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/send")
public class SendServlet extends HttpServlet{
/*
* service()메소드에는 2개의 객체의 참조값이 매개 변수에 전달된다.
*
* HttpServletRequest 객체 => 요청과 관련된 작업을 처리할 때 사용한다.
* HttpServletResponse 객체 => 응답과 관련된 작업을 처리할 때 사용한다.
*
*/
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//"msg" 라는 파라미터 명으로 전달되는 문자열을 읽어와서 msg라는 지역변수에
//해당 파라미터 명으로 전달되는 정보가 없으면 null이 리턴
String msg = req.getParameter("msg");
//콘소창에 출력해보기
System.out.println("msg :" + msg);
//응답 인코딩 설정
resp.setCharacterEncoding("utf-8");
//응답 컨텐츠 설정
resp.setContentType("text/html; charset=utf -8");
//클라이언트에 문자열을 응답할 수 있는 객체의 참조값 얻어내기
PrintWriter pw = resp.getWriter();
pw.println("<!doctype html>");
pw.println("<html>");
pw.println("<head>");
pw.println("<meta charset = 'utf-8'>");
pw.println("<title>메세지 전송 결과 페이지</title>");
pw.println("</head'>");
pw.println("<body>");
pw.println("<p >메세지 잘 받았어 </p>");
pw.println("</body>");
pw.close();
}
}form을 활용한 메세지 입력해서 받아보기
get과 post의 차이점을 공부
post 방식에서는
resp.setCharacterEncoding("utf-8");
를 꼭써주어야 한다.
- 아래의 폼을 제출하면 요청방식은 post
<form method = "post">
</form>
-아래의 폼을 제출하면 요청방식은 get
<form method = "get">
</form>
-링크를 누르면 무조건 get 방식 요청 or 웹브라우저의 주소창을 직접작성해서 요청하는 것도 get방식 요청
'수업내용' 카테고리의 다른 글
| 20230524 수업내용 😢😢😢 (0) | 2023.05.24 |
|---|---|
| 수업내용 20230523🤦♂️🤦♂️🤦♂️ (0) | 2023.05.24 |
| 20230519 수업내용😭 (0) | 2023.05.19 |
| 20230518 수업내용🤷♀️🤷♀️🤷♀️ (0) | 2023.05.18 |
| 20230517 수업내용😶🌫️😶🌫️😶🌫️ (0) | 2023.05.17 |
댓글