첫 수업은 js에대해서 배운다 오늘은 modal에 대해 배운다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step05_Modal.html</title>
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/bootstrap.bundle.js"></script>
</head>
<body>
<div class="container">
<h1>Modal 테스트</h1>
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#myModal">Modal 띄우기</button>
<a href="javascript:test()">눌러보셈</a>
</div>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">알림</h3>
<button class="btn-close" data-bs-dismiss = "modal"></button>
</div>
<div class="modal-body">
확인 버튼을 누르면 삭제 됩니다.
</div>
<div class="modal-footer">
<button class="btn btn-primary">확인</button>
<button class="btn btn-danger" data-bs-dismiss = "modal">취소</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">알림2</h3>
<button class="btn-close" data-bs-dismiss = "modal"></button>
</div>
<div class="modal-body">
확인 버튼을 누르면 저장 됩니다.
</div>
<div class="modal-footer">
<button class="btn btn-primary">확인</button>
<button class="btn btn-danger" data-bs-dismiss = "modal">취소</button>
</div>
</div>
</div>
<script>
//bootstrap 에서 동작하는 Modal 의 참조값 얻어내기
const modal = new bootstrap.Modal("#myModal2",{backdrop:false});
function test(){
//여기에서 #myModal2를 띄우기
modal.show();
}
//id 가 myModal 인 쇼오가 화면에 나타났을 때 실행할 함수 등록
document.querySelector("#myModal").addEventListener("show.bs.modal", (e)=>{
console.log("modal이 떴습니다.")
});
//id 가 myModal 인 쇼오가 화면에 숨겨졌을 때 실행할 함수 등록
document.querySelector("#myModal").addEventListener("hidden.bs.modal", (e)=>{
console.log("modal이 사라졌습니다.")
});
</script>
</body>
</html>이제 이클립스를 실행하고 어제 배우고 있던 el을 배워보자
in jsap page에서 ${ }을 사용했을 때에는 주로 cpath를 넣기 위해서만 사용했었다.
String myName="김구라";
/*
page scope 에 "myName" 이라는 키값으로 myName 담기
해당 jsp 페이지 에서만 사용할수 있다.
*/
pageContext.setAttribute("myName", myName);
String yourName="해골";
/*
request scope 에 "yourName" 이라는 키값으로 yourName 담기
request scope 에 담은 값은 응답하기 전까지 사용할수 있다.
(다른 페이지로 forward 이동해도 사용할수 있다)
(다른 페이지로 redirect 이동하면 사용할수 없다)
*/
request.setAttribute("yourName", yourName);
String ourName="원숭이";
/*
session scope 에 "ourName" 이라는 키값으로 ourName 담기
session scope 에 담은 값은 세션이 유지 되는 동안 사용할수 있다.
(다른 페이지로 forward, redirect 이동 해도 사용할수 있다)
(웹브라우저를 닫거나 세션을 초기화 하기 전까지 사용할수 있다)
*/
session.setAttribute("ourName", ourName);
String companyName="에이콘";
/*
application scope 에 "companyName" 이라는 키값으로 companyName 담기
application scope 에 담은 내용은 서버를 끄기 전까지 사용할수 있다.
(웹브라우저를 닫아도 지워지지 않는다)
*/
application.setAttribute("companyName", companyName);pageContext / pge scope
request / request scorp
session / session scope
application / application scope 에 각각의 영역에서 얼만큼 저장되는지 알수 있다.
pageScope은 생략이 가능하다. key값만 잘적으면 EL로 출력이 가능하다.
위에 두개는 같은 코드이다.
Servlet 에 request Scope, page Scope 에 있는 값들을 jsp page에서 key값만 정확히 적어주면 forwad를 통해 사용할 수 있다.
dto의 필드명만 적으면 자동으로 getter메소드를 호출 해 준다.
클라이언트의 웹브라우저에 특정 key 값으로 문자열을 저장할수 있다.
저장할수 있는 문자열은 Base64 인코딩 형식의 64가지 문자열을 저장할수 있다.
Server는 text, html, css, javascript,json,파일 다운로드...등등의 형식의 응답을 한다. 여기에 추가로 쿠키로도 응답을 할 수 있다.
쿠키로 응답을 하면 WebBrower는 쿠키를 가지고 있다가 다음번 요청에 (request)에 쿠키를 같이 보낸다 그럼 요청받은 Server에서는 쿠키를 읽어낼 수 있다. 사용자는 이를 느끼진 못한다(굳이 관심을 갖지 않으면)
이 쿠키는 보통 개발자들이 쿠키안에 어떠한 정보를 저장할 때 사용한다. 개발자가 원하는 저장정보를 클라이언트에 뭔가 표시를 해둔다 던가?
이 쿠키를 이용해 만들수 있는건?활용예?
로그인하지 않아도 장바구니 같은걸 담는다던가를 할 수가 있다. 이 쿠키는 예전에는 유용하게 많이 사용했지만 웹브라우저가 기능이 좋아지다보니 클라이언트에 저장할 수 있는 방법이 많다. 웹브라우저의 데이터저장소나 로컬스토리지 등등
이건뭘까?
지금 사용하고 있는 tomcat이 가지고 있는 삭제되지 않는 데이터 값이다.
session id(겹치지 않는 id이다)여러명이 로그인 하더라도 고유한 값을 가지고 있는 데이터 값이다.
이 값은 톰캣서버에 전송을 할 때 어떠한 id로 로그인했는지 알수 있다.
쿠키를 읽어들이고 싶을 때는 el을이용하여 읽으면 된다.
savedId 라는 키값으로 저장된 값 : ${cookie.savedId}이런 식으로 확인하면 된다.
'수업내용' 카테고리의 다른 글
| 20230615 수업내용👏👏👏 (0) | 2023.06.15 |
|---|---|
| 20230614 수업내용🧏♂️ (0) | 2023.06.14 |
| 20230612 수업내용😶🌫️😶🌫️😶🌫️ (0) | 2023.06.12 |
| 20230609 수업내용🤣🤣🤣 (0) | 2023.06.09 |
| 20230609 수업내용🤦♂️🤦♂️🤦♂️ (0) | 2023.06.09 |
댓글