728x90
수업내용
1교시 (09:30-10:20)
- 서브쿼리
SELECT HIREDATE FROM EMP;
-- 입사 일이 빠른 순서로 5건을 구하시오
-- 데이터는 꼭 눈으로 확인해야 한다. 건수가 적으면 아이체킹 한다.
-- 건수가 많으면 대표적인 데이터타입을 구별해서 확인해야 한다.
-- 1. 입사일 전 건 확인하기
SELECT HIREDATE FROM EMP;
SELECT HIREDATE FROM EMP ORDER BY HIREDATE ASC;
SELECT HIREDATE FROM EMP WHERE ROWNUM <= 5;
-- FROM 절에서 자식 쿼리 인라인 뷰 서브쿼리로
-- 입사일 빠른 순으로 SORT를 먼저 한다.
-- 이후 부모 쿼리에서 5건을 구한다.
SELECT A.HIREDATE
FROM
-- 인라인 뷰 서브쿼리
(SELECT HIREDATE FROM EMP ORDER BY HIREDATE ASC) A
WHERE ROWNUM <= 5;
/*
SELECT
SELECT * FROM DUAL;
FROM
SELECT * FROM DUAL;
WHERE
SELECT * FROM DUAL;
*/2교시 (10:30-11:20)
- ERwin 설치 후 ERD 그리기
3교시 (11:30-12:20)
- 지난 시간 복습
Ajax
**********************************************************************************
Ajax는 클라이언트(클라이언트 컴퓨터)가 비동기 방식으로[동기방식으로도] 자바스크립트를 이용하여
화면 전환없이 서버에서 자료(xml, json, html, plian text etc...)를
요청할 때 사용하는 방법
**********************************************************************************
교차 출처 리소스 공유(Cross-origin resource sharing, CORS)
-------------------------------------------------------
자바스크립트는 다른 도메인의 데이터를 기본적으로 가져올수 없다
-------------------------------------------------------
교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터
요청할 수 있게 허용하는 구조이다.
웹페이지는 교차 출처 이미지, 스타일시트, 스크립트, iframe, 동영상을 자유로이 임베드할 수 있다.
특정한 도메인 간(cross-domain) 요청, 특히 Ajax 요청은 동일-출처 보안 정책에 의해 기본적으로 금지된다.
모두 데이터가 넘어간다.
form.attr({}).submit(); -- 비동기방식으로 화면을 리프레쉬 시켜줘야 한다
Ajax({}); -- 동기 방식으로 화면 리프레쉬가 없어도 된다 - 조회 페이지에서 수정하기 위해 비밀번호 체크 하기
Ajax 사용하기
boardSelect.jsp
Ajax
———
bnum
bpw 암호화 한다.
isudType = PWCHK
/kosServlet/board?
버튼 클릭
BoardController.java
——————————
isudType = PWCHK true
bnum
bpw <-- 암호화 한다.
PW_GOOD 을 Ajax 에 리턴하기
service
——————————
dao
——————————
1건 -> true
query
——————————
SELECT COUNT(A.BNUM) NCNT
FROM MVC_BOARD A
WHERE DELETEYN = 'Y'
AND BNUM = 'B0008'
AND BPW = 'a953f09a1b6b6725b81956e9ad0b1eb49e3ad40004c04307ef8af6246a054116';
4교시 (12:30-13:20)
Ajax로 비밀번호 체크하기
- BoardSqlMap.java
package a.b.c.com.kosmo.board.sql;
public abstract class BoardSqlMap {
// 전체 조회
public static String getBoardSelectAll() {
StringBuffer sb = new StringBuffer();
sb.append(" SELECT \n");
sb.append(" A.BNUM BNUM \n");
sb.append(" ,A.BSUBJECT BSUBJECT \n");
sb.append(" ,A.BWRITER BWRITER \n");
sb.append(" ,A.BPW BPW \n");
sb.append(" ,A.BMEMO BEMMO \n");
sb.append(" ,A.DELETEYN DELETEYN \n");
sb.append(" ,TO_CHAR(A.INSERTDATE, 'YYYY-MM-DD') INSERTDATE \n");
sb.append(" ,TO_CHAR(A.UPDATEDATE, 'YYYY-MM-DD') UPDATEDATE \n");
sb.append(" FROM MVC_BOARD A \n");
sb.append(" WHERE A.DELETEYN = 'Y' \n");
sb.append(" ORDER BY 1 DESC \n");
return sb.toString();
}
// 조건 조회
public static String getBoardSelect() {
StringBuffer sb = new StringBuffer();
sb.append(" SELECT \n");
sb.append(" A.BNUM BNUM \n");
sb.append(" ,A.BSUBJECT BSUBJECT \n");
sb.append(" ,A.BWRITER BWRITER \n");
sb.append(" ,A.BPW BPW \n");
sb.append(" ,A.BMEMO BEMMO \n");
sb.append(" ,A.DELETEYN DELETEYN \n");
sb.append(" ,TO_CHAR(A.INSERTDATE, 'YYYY-MM-DD') INSERTDATE \n");
sb.append(" ,TO_CHAR(A.UPDATEDATE, 'YYYY-MM-DD') UPDATEDATE \n");
sb.append(" FROM MVC_BOARD A \n");
sb.append(" WHERE A.DELETEYN = 'Y' \n");
sb.append(" ORDER A.BNUM = ? \n"); // placeholder 1
return sb.toString();
}
// 입력하기
public static String getBoardInsert() {
StringBuffer sb = new StringBuffer();
/*
INSERT INTO MVC_BOARD (BNUM, BSUBJECT, BWRITER, BPW, BMEMO, DELETEYN, INSERTDATE, UPDATEDATE)
VALUES (?, ?, ?, ?, ?, 'Y', SYSDATE, SYSDATE
*/
sb.append(" INSERT INTO \n");
sb.append(" MVC_BOARD \n");
sb.append(" ( \n");
sb.append(" BNUM \n"); // COLUMN 1
sb.append(" ,BSUBJECT \n"); // COLUMN 2
sb.append(" ,BWRITER \n"); // COLUMN 3
sb.append(" ,BPW \n"); // COLUMN 4
sb.append(" ,BMEMO \n"); // COLUMN 5
sb.append(" ,DELETEYN \n"); // COLUMN 6
sb.append(" ,INSERTDATE \n"); // COLUMN 7
sb.append(" ,UPDATEDATE \n"); // COLUMN 8
sb.append(" ) \n");
sb.append(" VALUES \n");
sb.append(" ( \n");
sb.append(" ? \n"); // placeholder 2
sb.append(" ,? \n"); // placeholder 2
sb.append(" ,? \n"); // placeholder 3
sb.append(" ,? \n"); // placeholder 4
sb.append(" ,? \n"); // placeholder 5
sb.append(" ,'Y' \n"); // 'Y' 6
sb.append(" ,SYSDATE \n"); // SYSDATE 7
sb.append(" ,SYSDATE \n"); // SYSDATE 8
sb.append(" ) \n");
return sb.toString();
}
public static String getBoardUpdate() {
StringBuffer sb = new StringBuffer();
sb.append("UPDATE MVC_BOARD \n");
sb.append("SET BSUBJECT = ? \n"); // placeholder 1
sb.append(" ,BMEMO = ? \n"); // placeholder 2
sb.append(" ,UPDATEDATE = SYSDATE \n");
sb.append("WHERE DELETEYN = 'Y' \n");
sb.append("AND BNUM = ? \n"); // placeholder 3
return sb.toString();
}
public static String getBoardDelete() {
StringBuffer sb = new StringBuffer();
sb.append("UPDATE MVC_BOARD \n");
sb.append("SET DELETEYN = 'N' \n");
sb.append(" ,UPDATEDATE = SYSDATE \n");
sb.append("WHERE DELETEYN = 'Y' \n");
sb.append("AND BNUM = ? \n"); // placeholder 1
return sb.toString();
}
public static String getPWCheck() {
StringBuffer sb = new StringBuffer();
sb.append("SELECT COUNT(NVL(A.BNUM,0)) NCNT \n");
sb.append("FROM MVC_BOARD A \n");
sb.append("WHERE A.DELETEYN = 'Y' \n");
sb.append("AND A.BNUM = ? \n");
sb.append("AND A.BPW = ? \n");
return sb.toString();
}
}- BoardDAO.java
package a.b.c.com.kosmo.board.dao;
import java.util.ArrayList;
import a.b.c.com.kosmo.board.vo.BoardVO;
public interface BoardDAO {
public ArrayList<BoardVO> boardSelectAll();
public ArrayList<BoardVO> boardSelect(BoardVO bvo);
public boolean boardInsert(BoardVO bvo);
public boolean boardUpdate(BoardVO bvo);
public boolean boardDelete(BoardVO bvo);
public boolean boardPWCheck(BoardVO bvo);
}- BoardDAOImpl.java
package a.b.c.com.kosmo.board.dao;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import a.b.c.com.common.DBCP_Connectivity;
import a.b.c.com.common.KosConnectivity;
import a.b.c.com.kosmo.board.service.BoardServiceImpl;
import a.b.c.com.kosmo.board.sql.BoardSqlMap;
import a.b.c.com.kosmo.board.vo.BoardVO;
public class BoardDAOImpl implements BoardDAO {
Logger logger = LogManager.getLogger(BoardDAOImpl.class);
// 전체 조회
@Override
public ArrayList<BoardVO> boardSelectAll() {
// TODO Auto-generated method stub
logger.info("BoardDAOImpl:: boardSelectAll() 함수 진입 >>> : ");
// 사용할 객체를 지역변수로 선언하고 디폴트 값으로 초기화한다.
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rsRs = null;
ArrayList<BoardVO> aList = null;
// JDBC를 이용해서 데이터 가져오기
try {
conn = KosConnectivity.getConnection();
String sqls = BoardSqlMap.getBoardSelectAll();
pstmt = conn.prepareStatement(sqls);
logger.info("전체 조회 >>> : \n" + sqls);
rsRs = pstmt.executeQuery();
if (rsRs != null) {
aList = new ArrayList<BoardVO>();
while (rsRs.next()) {
BoardVO _bvo = new BoardVO();
_bvo.setBnum(rsRs.getString(1));
_bvo.setBsubject(rsRs.getString(2));
_bvo.setBwriter(rsRs.getString(3));
_bvo.setBpw(rsRs.getString(4));
_bvo.setBmemo(rsRs.getString(5));
_bvo.setDeleteyn(rsRs.getString(6));
_bvo.setInsertdate(rsRs.getString(7));
_bvo.setUpdatedate(rsRs.getString(8));
aList.add(_bvo);
}
}
KosConnectivity.conClose(conn, pstmt, rsRs);
} catch (Exception e) {
logger.info("전체 조회시 디비 에러가 >>> : " + e);
} finally {
KosConnectivity.conClose(conn, pstmt, rsRs);
}
return aList;
}
// 조건 조회
@Override
public ArrayList<BoardVO> boardSelect(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardDAOImpl:: boardSelect() 함수 진입 >>> : ");
logger.info("BoardDAOImpl :: boardSelect() bvo.getBnum() >>> : " + bvo.getBnum());
// 사용할 객체를 지역변수로 선언하고 디폻트 값으로 초기화 한다.
Connection conn = null;
PreparedStatement pstmt = null;
ResultSet rsRs = null;
ArrayList<BoardVO> aList = null;
// JDBC를 이용해서 데이터 가져오기
try {
conn = KosConnectivity.getConnection();
String sqls = BoardSqlMap.getBoardSelect();
pstmt = conn.prepareStatement(sqls);
pstmt.clearParameters();
pstmt.setNString(1, bvo.getBnum());
logger.info("조건 조회 >>> : \n" + sqls);
rsRs = pstmt.executeQuery();
if (rsRs != null) {
aList = new ArrayList<BoardVO>();
while (rsRs.next()) {
BoardVO _bvo = new BoardVO();
_bvo.setBnum(rsRs.getString(1));
_bvo.setBsubject(rsRs.getString(2));
_bvo.setBwriter(rsRs.getString(3));
_bvo.setBpw(rsRs.getString(4));
_bvo.setBmemo(rsRs.getString(5));
_bvo.setDeleteyn(rsRs.getString(6));
_bvo.setInsertdate(rsRs.getString(7));
_bvo.setUpdatedate(rsRs.getString(8));
aList.add(_bvo);
}
}
KosConnectivity.conClose(conn, pstmt, rsRs);
} catch (Exception e) {
logger.info("조건 조회 시 디비 에러가 >>> : " + e);
} finally {
KosConnectivity.conClose(conn, pstmt, rsRs);
}
return aList;
}
// 입력하기
@Override
public boolean boardInsert(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardDAOImpl:: boardInsert() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
// 사용할 객체를 지역변수로 선언하고 초기화 하기
Connection conn = null;
PreparedStatement pstmt = null;
int nCnt = 0;
boolean bool = false;
// JDBC 객체 이용해서 테이블에 인서트 하기
try {
conn = KosConnectivity.getConnection();
String sqls = BoardSqlMap.getBoardInsert();
pstmt = conn.prepareStatement(sqls);
logger.info("인서트 >>> : \n" + sqls);
// 플레이스 홀더에 입력할 데이터 바인딩하기
pstmt.clearParameters();
pstmt.setString(1, bvo.getBnum());
pstmt.setString(2, bvo.getBsubject());
pstmt.setString(3, bvo.getBwriter());
pstmt.setString(4, bvo.getBpw());
pstmt.setString(5, bvo.getBmemo());
nCnt = pstmt.executeUpdate();
if (!conn.getAutoCommit()) conn.commit();
logger.info("인서트 결과는 >>> : " + nCnt);
if (nCnt > 0) bool = true;
KosConnectivity.conClose(conn, pstmt);
}catch(Exception e) {
logger.info("인서트 디비 에러가 >>> : " + e);
}finally {
KosConnectivity.conClose(conn, pstmt);
}
return bool;
}
// 수정하기
@Override
public boolean boardUpdate(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardDAOImpl :: boardUpdate() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
// 사용할 객체를 지역변수로 선언하고 초기화하기
Connection conn = null;
PreparedStatement pstmt = null;
int nCnt = 0;
boolean bool = false;
// JDBC 객체 이용해서 테이블에 인서트 하기
try {
conn = KosConnectivity.getConnection();
String sqls = BoardSqlMap.getBoardUpdate();
pstmt = conn.prepareStatement(sqls);
logger.info("업데이트 >>> : \n" + sqls);
// 플레이스 홀더에 입력할 데이터 바인딩 하기
pstmt.clearParameters();
pstmt.setString(1, bvo.getBsubject());
pstmt.setString(2, bvo.getBmemo());
pstmt.setString(3, bvo.getBnum());
nCnt = pstmt.executeUpdate();
if (!conn.getAutoCommit()) conn.commit();
logger.info("업데이트 결과는 >>> : " + nCnt);
if (nCnt > 0) bool = true;
KosConnectivity.conClose(conn, pstmt);
} catch (Exception e) {
logger.info("업데이트 디비 에러가 >>>: " + e);
} finally {
KosConnectivity.conClose(conn, pstmt);
}
return bool;
}
@Override
public boolean boardDelete(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardDAOImpl :: boardDelete() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
// 사용할 객체를 지역변수로 선언하고 초기화하기
Connection conn = null;
PreparedStatement pstmt = null;
int nCnt = 0;
boolean bool = false;
// JDBC 객체 이용해서 테이블에 인서트 하기
try {
conn = KosConnectivity.getConnection();
String sqls = BoardSqlMap.getBoardDelete();
pstmt = conn.prepareStatement(sqls);
logger.info("딜리트 >>> : \n" + sqls);
// 플레이스 홀더에 입력할 데이터 바인딩 하기
pstmt.clearParameters();
pstmt.setString(1, bvo.getBnum());
nCnt = pstmt.executeUpdate();
if (!conn.getAutoCommit()) conn.commit();
logger.info("딜리트 결과는 >>> : " + nCnt);
if (nCnt > 0) bool = true;
KosConnectivity.conClose(conn, pstmt);
} catch (Exception e) {
logger.info("딜리트 디비 에러가 >>>: " + e);
} finally {
KosConnectivity.conClose(conn, pstmt);
}
return bool;
}
@Override
public boolean boardPWCheck(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardDAOImpl :: boardPWCheck 함수 진입 >>> : ");
Connection conn = null;
PreparedStatement pstmt = null;
int nCnt = 0;
ResultSet rsRs = null;
boolean bool = false;
try {
String sql = BoardSqlMap.getPWCheck();
conn = KosConnectivity.getConnection();
pstmt = conn.prepareStatement(sql);
logger.info("bnum >> " + bvo.getBnum());
logger.info("bpw >> " + bvo.getBpw());
logger.info("SQL SELECT PWCHECK >> \n" + sql);
pstmt.clearParameters();
pstmt.setString(1, bvo.getBnum());
pstmt.setString(2, bvo.getBpw());
rsRs = pstmt.executeQuery();
if (rsRs != null) {
while (rsRs.next()) {
nCnt = rsRs.getInt("NCNT");
}
}
logger.info("SQL SELCT nCnt >> " + nCnt);
if (nCnt > 0) bool = true;
KosConnectivity.conClose(conn, pstmt);
} catch (Exception e) {
logger.info("BoardDAOImpl :: boardPWCheck 에러 발생 >>> " + e.getMessage());
} finally {
KosConnectivity.conClose(conn, pstmt);
}
return bool;
}
}5교시 (14:30-15:20)
Ajax로 비밀번호 체크하기
- BoardService.java
package a.b.c.com.kosmo.board.service;
import java.util.ArrayList;
import a.b.c.com.kosmo.board.vo.BoardVO;
public interface BoardService {
public ArrayList<BoardVO> boardSelectAll();
public ArrayList<BoardVO> boardSelect(BoardVO bvo);
public boolean boardInsert(BoardVO bvo);
public boolean boardUpdate(BoardVO bvo);
public boolean boardDelete(BoardVO bvo);
public boolean boardPWCheck(BoardVO bvo);
}- BoardServiceImpl.java
package a.b.c.com.kosmo.board.service;
import java.util.ArrayList;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import a.b.c.com.kosmo.board.dao.BoardDAO;
import a.b.c.com.kosmo.board.dao.BoardDAOImpl;
import a.b.c.com.kosmo.board.vo.BoardVO;
public class BoardServiceImpl implements BoardService {
Logger logger = LogManager.getLogger(BoardServiceImpl.class);
// 전체 조회
@Override
public ArrayList<BoardVO> boardSelectAll() {
// TODO Auto-generated method stub
logger.info("BoardServiceImpl :: boardSelectAll() 함수 진입 >>> : ");
BoardDAO bdao = new BoardDAOImpl();
ArrayList<BoardVO> aList = bdao.boardSelectAll();
return aList;
// return bdao.boardSelectAll();
}
// 조건 조회
@Override
public ArrayList<BoardVO> boardSelect(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardServiceImpl :: boardSelect() 함수 진입 >>> : ");
BoardDAO bdao = new BoardDAOImpl();
ArrayList<BoardVO> aList = bdao.boardSelectAll();
return aList;
// return bdao.boardSelect(bvo);
}
// 입력하기
@Override
public boolean boardInsert(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardServiceImpl :: boardInsert() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
BoardDAO bdao = new BoardDAOImpl();
boolean bool = bdao.boardInsert(bvo);
return bool;
//return bdao.boardInsert(bvo);
}
// 수정하기
@Override
public boolean boardUpdate(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardServiceImpl :: boardUpdate() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
BoardDAO bdao = new BoardDAOImpl();
boolean bool = bdao.boardUpdate(bvo);
logger.info("bool >>> : " + bool);
return bool;
// return bdao.boardUpdate(bvo);
}
// 삭제하기
@Override
public boolean boardDelete(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardServiceImpl :: boardDelete() 함수 진입 >>> : ");
logger.info("bvo >>> : " + bvo);
BoardDAO bdao = new BoardDAOImpl();
boolean bool = bdao.boardDelete(bvo);
logger.info("bool >>> : " + bool);
return bool;
// return bdao.boardDelete(bvo);
}
// 패스워드 체크
@Override
public boolean boardPWCheck(BoardVO bvo) {
// TODO Auto-generated method stub
logger.info("BoardServiceImpl :: boardPWCheck() 함수 진입 >>> : ");
BoardDAO bdao = new BoardDAOImpl();
return bdao.boardPWCheck(bvo);
}
}- BoardController.java
package a.b.c.com.kosmo.board.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.log4j.LogManager;
import org.apache.log4j.Logger;
import a.b.c.com.common.ChabunUtil;
import a.b.c.com.common.EncryptSHA;
import a.b.c.com.kosmo.board.dao.BoardDAO;
import a.b.c.com.kosmo.board.dao.BoardDAOImpl;
import a.b.c.com.kosmo.board.service.BoardService;
import a.b.c.com.kosmo.board.service.BoardServiceImpl;
import a.b.c.com.kosmo.board.vo.BoardVO;
// http://localhost:8088/kosServlet/board
// /kosServlet/board
@WebServlet("/board")
public class BoardController extends HttpServlet {
private static final long serialVersionUID = 1L;
Logger logger = LogManager.getLogger(BoardController.class);
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
logger.info("BoardController :: doGet() 함수 진입 >>> : ");
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
String isudType = request.getParameter("isudType");
logger.info("BoardController :: doGet() 함수 진입 isudType >>> : " + isudType);
if (isudType !=null && isudType.length() > 0) {
isudType = isudType.toUpperCase();
if ("I".equals(isudType)) {
String bnum = ChabunUtil.getBoardChabun("");
String bsubject = request.getParameter("bsubject");
String bwriter = request.getParameter("bwriter");
String bpw = request.getParameter("bpw");
String bmemo = request.getParameter("bmemo");
BoardVO bvo = null;
bvo = new BoardVO();
bvo.setBnum(bnum);
bvo.setBsubject(bsubject);
bvo.setBwriter(bwriter);
// 패스워드 암호화 하기
bpw = EncryptSHA.encryptSHA256(bpw);
bvo.setBpw(bpw);
bvo.setBmemo(bmemo);
logger.info("bvo.getBnum() >>> : " + bvo.getBnum());
logger.info("bvo.getBsubject() >>> : " + bvo.getBsubject());
logger.info("bvo.getBwriter() >>> : " + bvo.getBwriter());
logger.info("bvo.getBpw() >>> : " + bvo.getBpw());
logger.info("bvo.getBmemo() >>> : " + bvo.getBmemo());
BoardService bs = new BoardServiceImpl();
boolean bool = bs.boardInsert(bvo);
if (bool) {
logger.info("입력 성공 >>> :" + bool);
// setAttribute(java.lang.String, java.lang.Object)
request.setAttribute("bool", new Boolean(bool));
RequestDispatcher rd = request.getRequestDispatcher("/kosmo/board/boardInsert.jsp");
rd.forward(request, response);
}else {
logger.info("입력 실패 >>> :" + bool);
out.println("<script>");
out.println("location.href='/kosmo/board/board.html'");
out.println("</script>");
}
}
if ("SALL".equals(isudType)) {
logger.info("BoardController :: doGet() 함수 진입 SALL isudType >>> : " + isudType);
// 서비스 호출
BoardService bs = new BoardServiceImpl();
ArrayList<BoardVO> aList = bs.boardSelectAll();
if (aList !=null && aList.size() > 0) {
logger.info("전체조회 성공 >>> : " + aList.size());
request.setAttribute("aList_selectALL", aList);
RequestDispatcher rd = request.getRequestDispatcher("/kosmo/board/boardSelectAll.jsp");
rd.forward(request, response);
}else {
logger.info("전체조회 실패 >>> : ");
out.println("<script>");
out.println("location.href='/kosmo/board/board.html'");
out.println("</script>");
}
}
if ("U".equals(isudType)) {
logger.info("BoardController :: doGet() 함수 진입 U isudType >>> : " + isudType);
String bnum = request.getParameter("bnumChk");
BoardVO bvo = null;
bvo = new BoardVO();
bvo.setBnum(bnum);
// 서비스 호출
BoardService bs = new BoardServiceImpl();
ArrayList<BoardVO> aList = bs.boardSelect(bvo);
if (aList !=null && aList.size() > 0) {
logger.info("조회 성공 >>> : " + aList.size());
request.setAttribute("aList_select", aList);
RequestDispatcher rd = request.getRequestDispatcher("/kosmo/board/boardSelect.jsp");
rd.forward(request, response);
}else {
logger.info("조회 실패 >>> : ");
out.println("<script>");
out.println("location.href='/kosServlet/board?isudType=SALL'");
out.println("</script>");
}
}
// 수정하기
if ("UOK".equals(isudType)) {
logger.info("BoardController :: doGet() 함수 진입 UOK isudType >>> : " + isudType);
String bnum = request.getParameter("bnum");
String bsubject = request.getParameter("bsubject");
String bmemo = request.getParameter("bmemo");
BoardVO bvo = null;
bvo = new BoardVO();
bvo.setBnum(bnum);
bvo.setBsubject(bsubject);
bvo.setBmemo(bmemo);
logger.info("bvo.getBnum() >>> : " + bvo.getBnum());
logger.info("bvo.getBsubject() >>> : " + bvo.getBsubject());
// 서비스 호출
BoardService bs = new BoardServiceImpl();
boolean bool = bs.boardUpdate(bvo);
// 결과 포워드 하기 /kosmo/board/boardUpdate.jsp
if (bool) {
logger.info("수정 성공 >>> :" + bool);
request.setAttribute("bool", new Boolean(bool));
RequestDispatcher rd = request.getRequestDispatcher("/kosmo/board/boardUpdate.jsp");
rd.forward(request, response);
} else {
logger.info("수정 실패 >>> :" + bool);
out.println("<script>");
out.println("alert('글 수정 실패')");
out.println("location.href='/kosServlet/board?isudType=SALL'");
out.println("</script>");
}
}
// 삭제하기
if ("D".equals(isudType)) {
logger.info("BoardController :: doGet() 함수 진입 D isudType >>> : " + isudType);
// http://localhost:8088/kosServlet/board?bnumchk=1&isudType=D
String bnum = request.getParameter("bnumChk");
BoardVO bvo = null;
bvo = new BoardVO();
bvo.setBnum(bnum);
logger.info("bvo.getBnum() >>> : " + bvo.getBnum());
// 서비스 호출
BoardService bs = new BoardServiceImpl();
boolean bool = bs.boardDelete(bvo);
// 결과 포워드 하기 /kosmo/board/boardDelete.jsp
if (bool) {
logger.info("삭제 성공 >>> : " + bool);
request.setAttribute("bool", new Boolean(bool));
RequestDispatcher rd = request.getRequestDispatcher("/kosmo/board/boardDelete.jsp");
rd.forward(request, response);
} else {
logger.info("삭제 실패 >>> : " + bool);
out.println("<script>");
out.println("alert('글 삭제 실패')");
out.println("location.href='/kosServlet/board?isudType=SALL'");
out.println("</script>");
}
}
// 아이디 체크
if ("IDCHK".equals(isudType)) {
logger.info("BoardController :: doGet() 함수 진입 IDCHK isudType >>> : " + isudType);
}
// 비밀번호 체크
if ("PWCHK".equals(isudType)) {
logger.info("BoardController :: doGet() 함수 진입 PWCHK isudType >>> : " + isudType);
String bnum = request.getParameter("bnum");
String bpw = request.getParameter("bpw");
bpw = EncryptSHA.encryptSHA256(bpw);
logger.info("BoardController :: doGet() 함수 진입 bnum >>> : " + bnum);
logger.info("BoardController :: doGet() 함수 진입 bpw >>> : " + bpw);
BoardVO bvo = null;
bvo = new BoardVO();
bvo.setBnum(bnum);
bvo.setBpw(bpw);
BoardService bs = new BoardServiceImpl();
boolean bool = bs.boardPWCheck(bvo);
logger.info("BoardController :: PWCHK bool" + bool);
if (bool) {
logger.info("비밀번호가 일치합니다.");
// ajax로 넘길때 모든 데이터가 다넘어간다
// out.println("11111111111");
out.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println("<pwchk>");
out.println("<result>PW_GOOD</result>");
out.println("</pwchk>");
} else {
logger.info("비밀번호가 일치하지 않습니다");
// ajax로 넘길때 모든 데이터가 다넘어간다
// out.println("222222222222222");
out.println("<?xml version='1.0' encoding='UTF-8'?>");
out.println("<pwchk>");
out.println("<result>PW_NOT_GOOD</result>");
out.println("</pwchk>");
}
}
} else {
logger.info("BoardController :: doGet() 구분자가 없습니다. >>> : ");
}
}
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}6교시 (15:30-16:20)
Ajax로 비밀번호 체크하기
- boardSelect.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.ArrayList" %>
<%@ page import="a.b.c.com.kosmo.board.vo.BoardVO" %>
<%@ page import="org.apache.log4j.LogManager" %>
<%@ page import="org.apache.log4j.Logger" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 조회하기</title>
<!-- jQuery CDN 불러오기 -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
let pw_result = "";
// 글쓰기 on (매개변수 3개)
$(document).on('click', '#insertBtn', function(){
location.href="/kosServlet/kosmo/board/board.html";
});
// 글목록 on(매개변수 3개)
$(document).on('click', "#selectAllBtn", function() {
location.href="/kosServlet/board?isudType=SALL";
});
// 글 수정
$(document).on('click', '#updateBtn', function(){
// alert("updateBtn >>> : ");
if (pw_result != 'PW_GOOD' || pw_result == '') {
alert("비밀번호가 일치하지 않거나, 비밀번호 확인을 하지 않으셨습니다.");
$("#bpw").val();
$("#bpw").focus();
} else {
$("#boardSelectForm").attr({
"action": "/kosServlet/board?isudType=UOK",
"method": "POST",
"enctype":"application/x-www-form-urlencoded"
}).submit();
}
});
// 패스워드 체크
$("#bpwChk").click(function(){
// alert(">>>");
let urlVal = "/kosServlet/board";
let typeVal = "GET";
let bnumVal = $("#bnum").val();
let bpwVal = $("#bpw").val();
let isudTypeVal = $("#isudType").val('PWCHK');
isudTypeVal = isudTypeVal.val();
$.ajax({
url : urlVal,
type:typeVal,
data: {
"bpw" : bpwVal,
"isudType" : isudTypeVal,
"bnum":bnumVal,
},
success : whenSuccess,
error : whenError
});//end of ajax
function whenSuccess(resData){
alert("resData \n" + resData);
var sVal = $(resData).find("result").text();
pw_result = sVal;
alert(sVal);
if(sVal == 'PW_GOOD'){
alert("비밀번호가 확인 되었습니다.");
$("#bpw").attr("readonly", "true");
$("#bpw").css("background-color", "yellow");
}else{
alert("비밀번호가 일치하지 않습니다.");
$("#bpw").val('');
$("#bpw").focus();
}
}
function whenError(){
alert("error");
}
});
});
</script>
<style type="text/css">
*{
font-size:14px;
}
.tr{
background-color: #f2c7f6;
width:180px;
height:23px;
text-align: right;
}
table{
margin:auto;
width:500px;
height:300px;
}
.div1{
border:1px solid #87a8ff;
width:500px;
height:550px;
margin:30px auto;
}
textarea {
width: 100%;
height: 180px;
padding: 10px;
box-sizing: border-box;
border: solid 1px ;
border-radius: 5px;
font-size: 14px;
resize: none;
}
text{
border-radius: 5px;
font-size: 14px;
box-sizing: border-box;
border: solid 2px #1E90FF;
}
</style>
</head>
<body>
<h3>boardSelect.jsp</h3>
<hr>
<% request.setCharacterEncoding("UTF-8"); %>
<%
Logger logger = LogManager.getLogger(this.getClass());
logger.info("boardSelect.jsp 진입 >>> : ");
Object obj = request.getAttribute("aList_select");
if (obj == null) return;
ArrayList<BoardVO> aList = (ArrayList<BoardVO>)obj;
if (aList != null && aList.size() > 0) {
BoardVO _bvo = aList.get(0);
%>
<div class="div1">
<h3 align="center">게시판 글 입력하기</h3>
<hr>
<form name="boardSelectForm" id="boardSelectForm">
<table>
<tr>
<td colspan="2" bgcolor="#4B0082"></td>
</tr>
<tr>
<td>글번호</td>
<!--
'readonly'는 form 전송이 가능하지만,
'disabled'는 form 전송시 값이 전달되지 않는다.
-->
<td>
<input type="text" class="bnum" name="bnum" id="bnum" style="background-color: #e2e2e2;"
value="<%= _bvo.getBnum() %>" readonly/>
</td>
</tr>
<tr>
<td>글제목</td>
<td>
<input type="text" class="bsubject" name="bsubject" id="bsubject" style="background-color: #e2e2e2;"
value="<%= _bvo.getBsubject() %>" />
</td>
</tr>
<tr>
<td>글쓴이</td>
<td>
<input type="text" class="bwriter" name="bwriter" id="bwriter" style="background-color: #e2e2e2;"
value="<%= _bvo.getBwriter() %>" readonly/>
</td>
</tr>
<tr>
<td>글 비밀번호</td>
<td>
<input type="text" class="bpw" name="bpw" id="bpw" placeholder="비밀번호 8자리"
style="background-color: #e2e2e2;" maxlength="8">
<input type="button" name="bpwChk" id="bpwChk" value="비밀번호확인">
</td>
</tr>
<tr>
<td>글내용</td>
<td>
<textarea class="bmemo" name="bmemo" id="bmemo" cols="32" rows="5"><%= _bvo.getBmemo() %></textarea>
</td>
</tr>
<tr>
<td>삭제여부</td>
<td>
<input type="text" name="bdeletyn" id="bdeletyn" class="bdeletyn"
style="background-color: #e2e2e2;" value="<%= _bvo.getDeleteyn() %>" disabled/>
</td>
</tr>
<tr>
<td>등록일</td>
<td>
<input type="text" name="binsertdate" id="binsertdate" class="binsertdate"
style="background-color: #e2e2e2;" value="<%= _bvo.getInsertdate() %>" disabled/>
</td>
</tr>
<tr>
<td>수정일</td>
<td>
<input type="text" name="bupdatedate" id="bupdatedate" class="bupdatedate"
style="background-color: #e2e2e2;" value="<%= _bvo.getUpdatedate() %>" disabled/>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#4B0082"></td>
</tr>
<tr>
<td colspan="2">
<!-- hidden flag : 히든 플래그 -->
<input type="hidden" name="isudType" id="isudType" value="UOK"/>
<input type="button" name="insertBtn" id="insertBtn" value="글쓰기" />
<input type="button" name="updateBtn" id="updateBtn" value="글수정" />
<input type="button" name="selectAll" id="selectAllBtn" value="글목록"/>
</td>
</tr>
</table>
</form>
</div>
<%
}
%>
</body>
</html>- board.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 디바이스에 최적화된 크기로 출력됨 ------------------------------------->
<meta name="viweport" content="width=device-width, iitail-scale=1">
<!-- jQuery CDN 불러오기 -------------------------------------------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#insertBtn').on('click', function(){
var bsubject = $("bsubject").val();
if (bsubject != '') {
$('#boardForm').attr({
"action":"/kosServlet/board",
"method":"GET",
"enctype":"application/x-www-form-urlencoded"
}).submit();
} else {
alert("글 제목을 넣으십시오");
$("#bsubject").focus();
}
});
});
</script>
<style type="text/css">
*{
font-size:14px;
}
.tr{
background-color: #f2c7f6;
width:180px;
height:23px;
text-align: right;
}
table{
margin:auto;
width:500px;
height:300px;
}
.div1{
border:1px solid #87a8ff;
width:500px;
height:400px;
margin:30px auto;
}
textarea {
width: 100%;
height: 180px;
padding: 10px;
box-sizing: border-box;
border: solid 1px ;
border-radius: 5px;
font-size: 14px;
resize: none;
}
text{
border-radius: 5px;
font-size: 14px;
box-sizing: border-box;
border: solid 2px #1E90FF;
}
</style>
</head>
<body>
<h3>board.html</h3>
<hr>
<form name="boardForm" id="boardForm">
<table>
<tr>
<td colspan="2" bgcolor="#4B0082"></td>
</tr>
<tr>
<td>글번호</td>
<td>
<input type="text" class="bnum" name="bnum" id="bnum" style="background-color: #e2e2e2;"
placeholder="글번호" readonly/>
</td>
</tr>
<tr>
<td>글제목</td>
<td>
<input type="text" class="bsubject" name="bsubject" id="bsubject" style="background-color: #e2e2e2;"
placeholder="글제목"/>
</td>
</tr>
<tr>
<td>글쓴이</td>
<td>
<input type="text" class="bwriter" name="bwriter" id="bwriter" style="background-color: #e2e2e2;"
placeholder="글쓴이"/>
</td>
</tr>
<tr>
<td>글비밀번호</td>
<td>
<input type="text" class="bpw" name="bpw" id="bpw" placeholder="비밀번호는 8자리"
style="background-color: #e2e2e2;" maxlength="8"/>
</td>
</tr>
<tr>
<td>글내용</td>
<td>
<textarea class="bmemo" name="bmemo" id="bmemo" cols="50" rows="10" placeholder="내용을 입력하세요"></textarea>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#4B0082"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="insertBtn" id="insertBtn" value="글입력"/>
<input type="reset" value="취소"/>
<input type="hidden" name="isudType" id="isudType" value="I"/>
</td>
</tr>
</table>
</form>
</body>
</html>- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 디바이스에 최적화된 크기로 출력됨 ------------------------------------->
<meta name="viweport" content="width=device-width, iitail-scale=1">
<!-- jQuery CDN 불러오기 -------------------------------------------->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#insertBtn').on('click', function(){
var bsubject = $("bsubject").val();
if (bsubject != '') {
$('#boardForm').attr({
"action":"/kosServlet/board",
"method":"GET",
"enctype":"application/x-www-form-urlencoded"
}).submit();
} else {
alert("글 제목을 넣으십시오");
$("#bsubject").focus();
}
});
});
</script>
<style type="text/css">
*{
font-size:14px;
}
.tr{
background-color: #f2c7f6;
width:180px;
height:23px;
text-align: right;
}
table{
margin:auto;
width:500px;
height:300px;
}
.div1{
border:1px solid #87a8ff;
width:500px;
height:400px;
margin:30px auto;
}
textarea {
width: 100%;
height: 180px;
padding: 10px;
box-sizing: border-box;
border: solid 1px ;
border-radius: 5px;
font-size: 14px;
resize: none;
}
text{
border-radius: 5px;
font-size: 14px;
box-sizing: border-box;
border: solid 2px #1E90FF;
}
</style>
</head>
<body>
<h3>board.html</h3>
<hr>
<form name="boardForm" id="boardForm">
<table>
<tr>
<td colspan="2" bgcolor="#4B0082"></td>
</tr>
<tr>
<td>글번호</td>
<td>
<input type="text" class="bnum" name="bnum" id="bnum" style="background-color: #e2e2e2;"
placeholder="글번호" readonly/>
</td>
</tr>
<tr>
<td>글제목</td>
<td>
<input type="text" class="bsubject" name="bsubject" id="bsubject" style="background-color: #e2e2e2;"
placeholder="글제목"/>
</td>
</tr>
<tr>
<td>글쓴이</td>
<td>
<input type="text" class="bwriter" name="bwriter" id="bwriter" style="background-color: #e2e2e2;"
placeholder="글쓴이"/>
</td>
</tr>
<tr>
<td>글비밀번호</td>
<td>
<input type="text" class="bpw" name="bpw" id="bpw" placeholder="비밀번호는 8자리"
style="background-color: #e2e2e2;" maxlength="8"/>
</td>
</tr>
<tr>
<td>글내용</td>
<td>
<textarea class="bmemo" name="bmemo" id="bmemo" cols="50" rows="10" placeholder="내용을 입력하세요"></textarea>
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#4B0082"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="insertBtn" id="insertBtn" value="글입력"/>
<input type="reset" value="취소"/>
<input type="hidden" name="isudType" id="isudType" value="I"/>
</td>
</tr>
</table>
</form>
</body>
</html>
7교시 (16:30-17:20)
- reply_1.xml
<?xml version="1.0" encoding="UTF-8"?>
<comment>
<result>true</result>
<message>댓글이 등록되었습니다.</message>
<item>
<num>4</num>
<writer>
<![CDATA[홍길동]]>
</writer>
<content>
<![CDATA[새롭게 등록 된 글입니다]]>
</content>
<datetime>
<![CDATA[2019-11-31 07:13:08]]>
</datetime>
</item>
</comment>- reply_2.xml
<?xml version="1.0" encoding="UTF-8"?>
<comment>
<result>true</result>
<message>댓글이 삭제되었습니다</message>
</comment>- reply.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0,
user-scalable=no"/>
<meta http-equiv="X-UA-Comatible" content="IE=edge, chrome=1"/>
<title>REPLY</title>
<style type="text/css">
*{
padding: 0;
margin : 0;
color: #333;
}
ul{
list-style:none;
}
#container{
padding: 30px 20px;
}
h1{
font-size:large;
border-left: 10px solid #7BAEB5;
border-bottom: 10px solid #7BAEB5;
padding : 10px;
width: auto;
}
#comment_write{
padding : 20px 15px;
border-bottom: 1px solid #7BAEB5;
}
#comment_write label{
display: inline-block;
width: 80px;
font-size: 14px;
font-weight: bold;
margin-bottom: 10px;
}
#comment_write input[type='text'], #comment_write textarea{
border: 1px solid #ccc;
vertical-align:middle;
padding: 3px 10px;
font-size: 12px;
line-height: 150%;
}
#comment_write textarea{
width: 380px;
height: 90px;
}
.comment_item{
font-size: 13px;
color: #333;
padding: 15px;
border-bottom : 1px dotted #ccc;
line-height: 150%;
}
.comment_item .writer{
color:#555;
line-height:200%;
}
.comment_item .writer .name{
color:#222;
font-weight:bold;
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- 사용자 스크립트 블록 -->
<script type="text/javascript">
/*
새로운 글을 화면에 추가하기 위한 함수
- num : 글 번호
- writer : 작성자 이름
- content : 덧글 내용
- datetime : 작성일시
*/
function addNewItem(num, writer, content, datetime){
//새로운 글이 추가될 li태그 객체
var new_li = $("<li>");
new_li.attr("data-num", num);
new_li.addClass("comment_item");
//작성자 정보가 지정될 <p>태그
var writer_p = $("<p>");
writer_p.addClass("writer");
//작성자의 정보의 이름
var name_span = $("<span>");
name_span.addClass("name");
name_span.html(writer + "님");
//작성일시
var date_span = $("<span>");
name_span.html("/" + datetime + " ");
//삭제하기 버튼
var del_input = $("<input>");
del_input.attr({"type":"button", "value":"삭제하기"});
del_input.addClass("delete_btn");
//내용
var content_p = $("<p>");
content_p.html(content);
//조립하기
writer_p.append(name_span).append(date_span).append(del_input);
new_li.append(writer_p).append(content_p);
$("#comment_list").append(new_li);
}
</script>
</head>
<body>
<div id="container">
<h1>jQuery Comment</h1>
<div id="comment_write">
<form id="comment_form">
<div>
<label for="user_name">작성자</label>
<input type="text" name="user_name" id="user_name"/>
<input type="submit" value="저장하기"/>
</div>
<div>
<label for="comment">덧글내용</label>
<textarea name="comment" id="comment"></textarea>
</div>
</form>
</div>
<ul id="comment_list">
<!-- 여기에 동적 생성 요소가 들어가게 됩니다. -->
</ul>
</div>
</body>
</html>8교시 (17:30-18:30)
- ajax_dom_1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!--
node.append(노드나 문자열) - 노드나 문자열을 node 끝에 삽입합니다
node.prepend(노드나 문자열) - 노드나 문자열을 node 맨 앞에 삽입합니다
node.before(노드나 문자열) - 노드나 문자열을 node 이전에 삽입합니다
node.after(노드나 문자열) - 노드나 문자열을 node 다음에 삽입합니다
node.replacewith(노드나 문자열) - 노드나 문자열) - node를 새로운 노드나 문자열로 대체합니다.
-->
<style type="text/css">
.alert{
padding : 15px;
border : 1px solid #d6e9c6;
border-radius : 4px;
color: #3c763d;
background-color : #dff0d8;
}
</style>
</head>
<body>
<script>
let div = document.createElement("div");
div.className = "alert";
div.innerHTML = "<string>안녕하세요</strong> 중요 메시지를 확인하셨습니다.";
document.body.append(div);
</script>
</body>
</html>
- ajax_dom_2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div id="div"></div>
<script>
div.before("<p>안녕하세요!!!!!!!!!</p>", document.createElement("hr"));
</script>
<p>안녕하세요 </p>
<hr>
<div id="div"></div>
</body>
</html>
- ajax_dom_3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ol id="ol">
<li>A</li>
<li>B</li>
<li>C</li>
</ol>
<script>
ol.before("before"); // <ol> 앞에 문자열 "before"를 삽입함
ol.after("after"); //<ol> 앞에 문자열 "before"를 삽입함
let liFirst = document.createElement("li");
liFirst.innerHTML = "prepend";
ol.prepend(liFirst); // <ol>의 첫 항목으로 liFirst를 삽입함
let liLast = document.createElement("li");
liLast.innerHTML = "append";
ol.append(liLast);
</script>
</body>
</html>
- document_write.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<p>일초 후, 이 페이지의 내용은 전부 교체됩니다</p>
<script>
// 일초 후 document.write 호출
setTimeout(() => document.write("<b>... 사라졌습니다.</b>"), 1000);
</script>
</body>
</html>
Notes
728x90