출처: https://bumcrush.tistory.com/182 [맑음때때로 여름]

tomcat.apache.org/taglibs/standard/

 

서블렛과 JSP 버전에 맞는 JSTL 설치

내가쓰는 tomcat8.5는 1.2를 설치

 

 

if, forEach, Url을 많이 사용한다
ontains(x) >> contains

 

 

<c:out>태그

 

 

makeList.jsp

<%@page import="form.Member"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%


 List<Member> members = new ArrayList<Member>();
	members.add(new Member("cool1","1111","cool11","photo11.jpg"));
	members.add(new Member("cool2","2222","cool12","photo12.jpg"));
	members.add(new Member("cool3","3333","cool13",null));
	members.add(new Member("cool4","4444","cool14","photo14.jpg"));
	members.add(new Member("cool5","5555","cool15","photo15.jpg"));
	members.add(new Member("cool6","6666","cool16","photo16.jpg"));
	members.add(new Member("cool7","7777","cool17","photo17.jpg"));
	members.add(new Member("cool8","8888","cool18",null));
	members.add(new Member("cool9","9999","cool19",null));
	members.add(new Member("cool10","0000","cool10","photo10.jpg"));
	
	session.setAttribute("members", members);
	


%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!-- 코어태그사용을 위한 태그라이브러리 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!-- 모듈화가능 -->
<%@ include file="makeList.jsp"%>

<%
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1>회원리스트</h1>

	<table border="1">
		<tr>
			<th>ID</th>
			<th>PASS</th>
			<th>NAME</th>
			<th>PHOTO</th>
		</tr>
        
		<c:forEach items="${members}" var="member">
			<tr>
				<td>${member.userId}</td>
				<td>${member.pass}</td>
				<td>${member.userName}</td>
				
				<td>
					<c:out value="${member.userPhoto}" escapeXml="false">
						<span style="color:red">프로필 사진 없음</span>
					</c:out>				
				</td>
				
			</tr>

		</c:forEach>
	</table>


</body>
</html>

 

<c:if>태그

 

!!!!!!!!!!!!!!!!! 참고

eq : =

ne : !=

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<c:set var="msg" value="user1" />
	msg : ${msg}
	<!-- 기본으로 page 속성에 들어가있음 -->
	<br>

	<%-- <c:if test="논리값이 true일때 출력"></c:if> --%>
	<c:if test="${true}">
		1) test 속성값이 true일때 출력
	</c:if>
	<br>

	<c:if test="${msg=='user1'}">
		2) test 속성값이 true일때 출력
	</c:if>
	<br>

	<c:if test="${msg=='user1'}" var="result" scope="page">
		3) test 속성값이 true일때 출력 : ${result}
	</c:if>
	<br>

	<c:if test="${msg eq 'user1'}" var="result1" scope="page">
		4) test 속성값이 true일때 출력 : ${result1}
	</c:if>
	<br>
	
	<c:if test="${msg ne 'user1'}" var="result2" scope="page">
		5) test 속성값이 true일때 출력 : ${result2}
	</c:if>	${result2}
	
	<br>
	
</body>
</html>

 

<c:choose>,<c:when>,<c:otherwise> 태그

 

 

이들 태그는 함께 사용되며 자바의 if ~ else if 문, switch 문과 유사하다.
<c:choose> 태그 내에는 <c:when> 태그가 여러 개 올 수 있다.

 

	<c:set var="number" value="12"/>
	
	<c:choose>
		<c:when test="${number>0}">
			양수입니다.
		</c:when>
		<c:when test="${number<0}">
			음수입니다.
		</c:when>
		<c:otherwise>
			0입니다.
		</c:otherwise>	
	</c:choose>
	
	<br>

 

<c:forEach> 태그

 

반복문과 관련된 태그로 자바의 for 문과 유사하다. 

가장 중요하고 널리 쓰이는 JSTL 태그 중 하나임.
여러 옵션 활용법을 잘 익혀 두어야 한다.

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<!-- 코어태그사용을 위한 태그라이브러리 -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!-- 모듈화가능 -->
<%@ include file="makeList.jsp"%>

<%
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1>회원리스트</h1>

	<table border="1">
		<tr>
			<th>INDEX</th>
			<th>COUNT</th>
			<th>ID</th>
			<th>PASS</th>
			<th>NAME</th>
			<th>PHOTO</th>
		</tr>
		<!-- index, count -->
		<c:forEach items="${members}" var="member" varStatus="status">
			<tr>
				<td>${status.index}</td>
				<td>${status.count}</td>
				<td>${member.userId}</td>
				<td>${member.pass}</td>
				<td>${member.userName}</td>
				
				<td>
					<c:out value="${member.userPhoto}" escapeXml="false">
						<span style="color:red">프로필 사진 없음</span>
					</c:out>				
				</td>
				
			</tr>
			<!-- index, count -->

		</c:forEach>
	</table>
	
	<c:forEach var="num" begin="1" end="10" step="2">
		${num} <br>
	
	</c:forEach>

</body>
</html>

 

 

 

 

<c:forTokens> 태그

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<c:forTokens var="phoneNum" items="010-9999-7777" delims="-">
	${phoneNum}
</c:forTokens>


<c:forTokens var="phoneNum" items="010-9999-7777" delims="-" varStatus="stat">
	<input type="text" name="phoneNum${stat.count}" value="${phoneNum}">
	<c:if test="${stat.count<3}">-</c:if>
</c:forTokens>


</body>
</html>

 

URL 관련 태그

 

잘안씀

<c:url> 태그

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<!-- context경로/index.jsp -->
	<c:url value="/index.jsp"/><br>
	
	<c:url value="/index.jsp"/><br>
	<c:url value="/index.jsp"/><br>
	<c:url value="/index.jsp" var="indexLink"/><br>
	
	${indexLink}
	
	<br>
	<c:url value="/index.jsp">
		<c:param name="pageNumber" value="1"/>
		<c:param name="keyword" value="jstl"/>
	</c:url>
	
	
</body>
</html>

 

그외 : <c:remove>태그

'JAVA > Jsp&Servlet' 카테고리의 다른 글

[JSP] FileUpload  (0) 2020.12.24
[JSP] JSTL - fmt  (0) 2020.12.23
[JSP] 표현언어 EL / Expression Language  (0) 2020.12.23
[JSP] mysql JDBC  (0) 2020.12.18
[JSP] session 기본 객체  (0) 2020.12.18
[JSP] 쿠키처리를 위한 유틸리티 클래스 만들기  (0) 2020.12.17
[JSP] 쿠키  (0) 2020.12.17

 

 

 

내장객체의 표현식이 생략되었을 때 규칙.
1. pageScope영역에서 찾는다.
2. request  > 3. session > 4. application
[영역이작은쪽부터]

 

 

예제

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

<% 

	request.setAttribute("userName", "김태형1");
	session.setAttribute("userName", "김태형2");
	application.setAttribute("userName", "김태형3");
	session.setAttribute("userId", "V");
%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>
<!-- 
내장객체의 표현식이 생략되었을 때 규칙.
1. pageScope영역에서 찾는다.
2. request  > 3. session > 4. application
[영역이작은쪽부터]
-->

	requestScope.userName : ${requestScope.userName},
							${userName}, <!-- 영역 생략가능 -->
							<%= request.getAttribute("userName") %> <br>
	sessionScope.userId : ${sessionScope.userId}, ${userId}
							<%= session.getAttribute("userId") %> <br>
							
	param.code : <%=request.getParameter("code") %>, 
				${param.code}<br>

	pageContext : <%= pageContext.getRequest().getServletContext().getContextPath() %><br>
				${pageContext.request.requestURI}<br>
				${pageContext.request.requestURL}<br>
				${pageContext.request.contextPath}<br>
				
</h1>

<a href="view1.jsp">session페이지 확인</a>

</body>
</html>

view1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<h1>
${sessionScope.userId}, ${userId}

</h1>
</body>
</html>

 

 

 

예제

test패키지 안의 자바클래스 product.java 생성

package test;

import java.util.Arrays;

//상품 정보를 가지는 beans 형식으로 정의
public class Product {
	
	// 상품 목록
	private String[] productList = {"item1","item2","item3","item4","item5",};

	// 테스트 변수
	private int price = 100;
	private int amount = 1000;
	
	public String[] getProductList() {
		return productList;
	}
	public int getPrice() {
		return price;
	}
	public int getAmount() {
		return amount;
	}
	
	public String getDisplay() {		
		return "price: "+ price + ", amount : " + amount;
	}
	@Override
	public String toString() {
		return "Product [productList=" + Arrays.toString(productList) + ", price=" + price + ", amount=" + amount + "]";
	}
	
	
	
	
}

 

productList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<jsp:useBean id="product" class="test.Product" scope="session"/>
	
	<%-- ${product} <br> --%>
	<%-- ${sessionScope.product} --%>
	
	<form action="selectProduct.jsp" method="post">
	
		<select name="sel">
		
		<%
			for(String item:product.getProductList()){
				out.println("<option>"+item+"</option>");
			}
		%>
			
		</select>
		
		<input type="submit" value="선택">
		
	</form>

</body>
</html>

selectProduct.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


	1. 선택한 상품 : ${param.sel} <br>
	2. 상품 설명 : ${product.display} <br>
	<!-- > display라는 변수는 없음 product.getDisplay() -->
	3. 상품 : ${product.productList[0]}
</body>
</html>

 

 

'JAVA > Jsp&Servlet' 카테고리의 다른 글

[JSP] FileUpload  (0) 2020.12.24
[JSP] JSTL - fmt  (0) 2020.12.23
[JSP] JSTL 설치 및 사용 / core <c:~>  (0) 2020.12.23
[JSP] mysql JDBC  (0) 2020.12.18
[JSP] session 기본 객체  (0) 2020.12.18
[JSP] 쿠키처리를 위한 유틸리티 클래스 만들기  (0) 2020.12.17
[JSP] 쿠키  (0) 2020.12.17

lib에 복사붙여넣기함

 

 

 

 

- aia 라는 계정에 open이라는 스키마를 만들고 그 안에 스캇계정 테이블 dept와 emp 추가해주었음

 

 

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
	// 모든 JAVA API를 사용할 수 있다.

Connection conn = null;

// 1. 드라이버 로드
Class.forName("com.mysql.cj.jdbc.Driver");

// 2. DB 연결 : connection 객체를 얻어온다.
String jdbcUrl = "jdbc:mysql://localhost:3306/open?serverTimezone=UTC";
String user = "aia";
String password = "aia";

conn = DriverManager.getConnection(jdbcUrl, user, password);

out.println("<h1>mysql 연결<h1>");

// statement 인스턴스 생성
Statement stmt = conn.createStatement();

// SQL
String sql_dept = "select * from dept";

ResultSet rs = stmt.executeQuery(sql_dept);
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mysql Connection</title>
</head>
<body>

	<h1>부서리스트</h1>


	<table border=1>
		<tr>
			<th>부서번호</th>
			<th>이름</th>
			<th>위치</th>

			<%
				while (rs.next()) {
			%>
		</tr>
		<td><%=rs.getInt(1)%></td>
		<td><%=rs.getString(2)%></td>
		<td><%=rs.getString("loc")%></td>
		</tr>

		<%
			}

		rs.close();
		stmt.close();
		conn.close();
		%>
	</table>


</body>
</html>

'JAVA > Jsp&Servlet' 카테고리의 다른 글

[JSP] JSTL - fmt  (0) 2020.12.23
[JSP] JSTL 설치 및 사용 / core <c:~>  (0) 2020.12.23
[JSP] 표현언어 EL / Expression Language  (0) 2020.12.23
[JSP] session 기본 객체  (0) 2020.12.18
[JSP] 쿠키처리를 위한 유틸리티 클래스 만들기  (0) 2020.12.17
[JSP] 쿠키  (0) 2020.12.17
[JSP] 에러  (0) 2020.12.17

<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	Date time = new Date();
	SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>세션 정보 출력</title>
</head>
<body>

	<h1>세션 정보</h1>
	<h3>
		세션 ID : <%= session.getId() %><br>
		세션 생성 시간 : <%= session.getCreationTime() %>, <%= format.format(session.getCreationTime()) %><br>
		최근 접속 시간 : <%=session.getLastAccessedTime()%>, <%= format.format(session.getLastAccessedTime())%><br>
	</h3>
</body>
</html>

'JAVA > Jsp&Servlet' 카테고리의 다른 글

[JSP] JSTL 설치 및 사용 / core <c:~>  (0) 2020.12.23
[JSP] 표현언어 EL / Expression Language  (0) 2020.12.23
[JSP] mysql JDBC  (0) 2020.12.18
[JSP] 쿠키처리를 위한 유틸리티 클래스 만들기  (0) 2020.12.17
[JSP] 쿠키  (0) 2020.12.17
[JSP] 에러  (0) 2020.12.17
[JSP] beans 빈즈  (0) 2020.12.17

CookieBox.java

package util;

import java.io.IOException;
import java.net.URLDecoder;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;

// 쿠키 객체를 생성하고 저장하고, 저장된 쿠키를  꺼내쓰는 기능
public class CookieBox {
	
	// Cookie 객체를 저장하는 Map 객체를 생성
	  Map<String, Cookie> cookieMap = new HashMap<String, Cookie>();
	
	// 초기화 : cookieMap에 cookie 데이터를 저장
	// 생성자 :
	public CookieBox(HttpServletRequest request) {
		// request를 통해 cookie 정보를 얻을 수 있다.
		Cookie[] cookies = request.getCookies();
		
		if(cookies!=null && cookies.length>0) {
			for(int i=0; i<cookies.length; i++) {
				// cookieMp에 Cookie 객체를 저장
				cookieMap.put(cookies[i].getName(), cookies[i]);
			}
		}
	}
	
	// 이름으로 쿠키 객체를 반환
	public Cookie getCookie(String name) {
		return cookieMap.get(name);
	}
	
	// 이름으로 쿠ㅋ키의 저장값을 반환
	public String getValue(String name) throws IOException {
		
		Cookie cookie = cookieMap.get(name); // Map에 name키가 업으면 null 반환
		
		if(cookie==null) {
			return null;
		}
		
		return URLDecoder.decode(cookie.getValue(),"UTF-8");
	}
	
	// cookieMap에 특정 이름의 쿠키가 존재하는지 여부 확인
	public boolean exists(String name) {
		return cookieMap.get(name) != null;
	}
	
	// 쿠기 객체를 생성해주는 메소드 : 객체를 생성하지 않고도 사용할 수 있는 메소드로 정의 : static 멤버로 정의
	// 오버로딩
	
	// 이름, 값을 가지고 cookie 객체 생성
	public static Cookie createCookie(String name, String value) {
		Cookie cookie = new Cookie(name, value);
		
		return cookie;
	}
	
	// 이름, 값, 경로, 유지시간을 가지고 cookie 객체 생성
	public static Cookie createCookie(
			String name, String value, String path, int maxAge) {
		Cookie cookie = new Cookie(name, value);
		cookie.setPath(path);       // 경로 설정
		cookie.setMaxAge(maxAge);	// 쿠기 유지시간 설정		
		
		return cookie;
	}
	

	// 이름, 값, 경로, 유지시간, 도메인을 가지고 cookie 객체 생성
	public static Cookie createCookie(
			String name, String value, String path, int maxAge, String domain) {
		Cookie cookie = new Cookie(name, value);
		cookie.setPath(path);       // 경로 설정
		cookie.setMaxAge(maxAge);	// 쿠기 유지시간 설정		
		cookie.setDomain(domain);	// 쿠키 도메인 설정
		
		return cookie;
	}
}

 

loginForm.jsp

<%@page import="util.CookieBox"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
	CookieBox cookieBox = new CookieBox(request);

	// 삼항연산자 [null값 출력을 막기 위해]
	String saveId =  cookieBox.exists("uid")? cookieBox.getValue("uid"):"";	
	String checked = cookieBox.exists("uid")? " checked " :  "";
	
%>
<!DOCTYPE html>
<html lang="ko">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>로그인 폼</title>
</head>

<body>
	<h1>회원 로그인</h1>
	<hr>
	<form action="loginResult.jsp" method="get">
		<table>
			<tr>
				<th><label for="userid">아이디</label></th>
				<td><input type="text" id="userid" name="userid" value="<%= saveId%>"></td>
			</tr>
			<tr>
				<th><label for="pw">비밀번호</label></th>
				<td><input type="password" id="pw" name="pw"></td>
			</tr>
			<tr>
				<td></td>
				<td><input type="checkbox" name="chk" value="on"<%= checked %>> 아이디
					저장</td>
			</tr>
			<tr>
				<td></td>
				<td><input type="submit" value="로그인"></td>
			</tr>
		</table>
	</form>

</body>

</html>

 

 

loginResult.jsp

<%@page import="util.CookieBox"%>
<%@page import="form.LoginFormData"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%

LoginFormData lfData = new LoginFormData();

String userId = request.getParameter("userid");
String pass = request.getParameter("pw");

String chk = request.getParameter("chk");

if(chk!=null && chk.equals("on") && userId!=null && !userId.isEmpty()){
	// 쿠키 생성 저장해준다
	// uid =  userId를 저장하자
	response.addCookie(CookieBox.createCookie("uid", userId, "/", 60*60*24*365));
	
}else{
	// 저장하지 않기 & 저장이 되었다면 삭제하기
	response.addCookie(CookieBox.createCookie("uid", userId, "/", 0));
}

lfData.setUserId(userId);
lfData.setPass(pass);

request.setAttribute("loginData", lfData);
%>

<jsp:forward page="loginView.jsp"/>

 

 

체크하면 > 체크상태가 유지 되고 아이디가 기억됨

 

체크를 다시 풀면 > 쿠키에서 아이디가 사라지고 체크상태도 풀림

 

 

번외)

 

<%@page import="util.CookieBox"%>
<%@page import="java.net.URLDecoder"%>
<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%

// 쿠키 객체를 생성
Cookie c1 = new Cookie("userID", "V");
// response.addCookie(쿠키객체)
response.addCookie(c1);

Cookie c2 = new Cookie("userName", URLEncoder.encode("김태형", "UTF-8"));
c2.setMaxAge(60*20); // 20분 뒤 삭제!
response.addCookie(c2);

response.addCookie(CookieBox.createCookie("nickName","MC_JADU"));
response.addCookie(CookieBox.createCookie("age", "26","/",-1));



%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>쿠키생성, 저장</h1>
	<h3> <%= c1.getName()%>=<%=c1.getValue() %></h3>
	<h3> <%= c2.getName()%>=<%= URLDecoder.decode(c2.getValue(), "utf-8")%></h3>
	
	<a href="viewCookie.jsp">쿠키 정보 보기</a>
	
</body>
</html>

viewCookie.jsp

<%@page import="util.CookieBox"%>
<%@page import="java.net.URLDecoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%

	CookieBox cookieBox = new CookieBox(request);
	
 
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

userID = <%= cookieBox.getValue("userID") %><br>
Age = <%= cookieBox.getCookie("age").getValue() %><br>
nickName이 존재하는가? = <%= cookieBox.exists("nickName") %>

 
 <h1><a href="editCookie.jsp">쿠키 수정하기</a></h1>
 <h1><a href="deleteCookie.jsp">쿠키 삭제하기</a></h1>

</body>
</html>

 

'JAVA > Jsp&Servlet' 카테고리의 다른 글

[JSP] 표현언어 EL / Expression Language  (0) 2020.12.23
[JSP] mysql JDBC  (0) 2020.12.18
[JSP] session 기본 객체  (0) 2020.12.18
[JSP] 쿠키  (0) 2020.12.17
[JSP] 에러  (0) 2020.12.17
[JSP] beans 빈즈  (0) 2020.12.17
[JSP] 내장객체와 속성관리 / 생명주기  (0) 2020.12.16

 

 

구성 요소

이름 : 각각의 쿠키를 구별하는 데 사용되는 이름
값 : 쿠키의 이름과 관련된 값
유효시간 : 쿠키의 유지 시간
도메인 : 쿠키를 전송할 도메인
경로 : 쿠키를 전송할 요청 경로


쿠키 이름의 제약
쿠키의 이름은 아스키 코드의 알파벳과 숫자만을 포함할 수 있다.
콤마(,), 세미콜론(;), 공백(' ') 등의 문자는 포함할 수 없다.
'$'로 시작할 수 없다.

 

예제

makeCookie.jsp

<%@page import="java.net.URLDecoder"%>
<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%

// 쿠키 객체를 생성
Cookie c1 = new Cookie("userID", "V");
// response.addCookie(쿠키객체)
response.addCookie(c1);

Cookie c2 = new Cookie("userName", URLEncoder.encode("김태형", "UTF-8"));

response.addCookie(c2);


%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>쿠키생성, 저장</h1>
	<h3> <%= c1.getName()%>=<%=c1.getValue() %></h3>
	<h3> <%= c2.getName()%>=<%= URLDecoder.decode(c2.getValue(), "utf-8")%></h3>
	
	<a href="viewCookie.jsp">쿠키 정보 보기</a>
	
</body>
</html>

viewCookie.jsp

<%@page import="java.net.URLDecoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

 <%
 
 	// 쿠키 가져오기!
 	Cookie[] cookies = request.getCookies();
 
 	if(cookies != null && cookies.length>0){
 		
 		for(int i=0; i<cookies.length; i++){
 			String name = cookies[i].getName();
 			String value = URLDecoder.decode(cookies[i].getValue(),"UTF-8");
 			
 			out.println("<h1>"+name+" : "+value+"</h1>");
 		}
 		
 	}else{
 		out.println("<h1>저장된 쿠키가 없습니다.</h1>");
 		
 	}
 
 %>

</body>
</html>

 

 


 

쿠키 값 변경

쿠키값 그냥 똑같은 이름으로 해주면 덮어써짐!

 

예제

쿠키 수정하기 > editCookie.jsp 를 추가!

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
	// V를 BTS로 변경
	Cookie cookie = new Cookie("userID", "BTS");
	response.addCookie(cookie);

%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>쿠키 userID의 값이 변경되었습니다.</h1>
<a href="viewCookie.jsp">바뀐 쿠키 정보 확인 </a>

</body>
</html>

 


 

쿠키 삭제하기

쿠키의 유지시간을 0으로 설정해준다.

예제

쿠키 수정하기 > deleteCookie.jsp 를 추가!

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>


<%
	// 쿠키 삭제를 위해 쿠키의 유지 시간을 0으로 설정해준다.
	Cookie cookie = new Cookie("userID","");
	cookie.setMaxAge(0);
	response.addCookie(cookie);
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>쿠키 userID의 값이 삭제되었습니다.</h1>
<a href="viewCookie.jsp">삭제된 쿠키 정보 확인 </a>

</body>
</html>

 

 

 


 

알아만두기

 


 

ex) 하루동안 보지 않기

 

예제

<%@page import="java.net.URLDecoder"%>
<%@page import="java.net.URLEncoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%

// 쿠키 객체를 생성
Cookie c1 = new Cookie("userID", "V");
// response.addCookie(쿠키객체)
response.addCookie(c1);

Cookie c2 = new Cookie("userName", URLEncoder.encode("김태형", "UTF-8"));
c2.setMaxAge(60*20); // 20분 뒤 삭제!
response.addCookie(c2);


%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>쿠키생성, 저장</h1>
	<h3> <%= c1.getName()%>=<%=c1.getValue() %></h3>
	<h3> <%= c2.getName()%>=<%= URLDecoder.decode(c2.getValue(), "utf-8")%></h3>
	
	<a href="viewCookie.jsp">쿠키 정보 보기</a>
	
</body>
</html>

 

에러페이지 지정 및 작성

 

에러 페이지 지정

– <%@ page errorPage="예외발생시보여질JSP지정" %>

 

에러 페이지 작성

– <%@ page isErrorPage="true" %>
   > isErrorPage 속성이 true인 경우 에러 페이지로 지정
– exception 기본 객체 : 발생한 예외 객체
 > exception.getMessage() : 예외 메시지
 > exception.printStackTrace() : 예외 추적 메시지 출력
– IE에서 예외가 올바르게 보여지려면 에러 페이지가 출력한 응답 데이터 크기가 513 바이트보다 커야 함

 

예제

<%@ page errorPage="에러가나면이동할페이지"%>를 이용

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page errorPage="viewErrorMessage.jsp"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


	<%
		// 오류발생 구문
	String name = request.getParameter("name").toUpperCase();
	
	%>

</body>
</html>

viewErrorMessage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%@ page isErrorPage="true" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>오류가 발생했습니다. 메인페이지로 이동해주세요</h1>
<h3>
	에러타입 : <%= exception.getClass().getName() %> <br>
	에러메세지 : <%= exception.getMessage() %>
	
</h3>
<a href="../index.jsp"> INDEX로 이동</a>

</body>
</html>

 

응답 상태 코드 별 에러 페이지 작성 및 지정

 

 

 

HTTP 상태 코드 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 둘러보기로 가기 검색하러 가기 아래는 HTTP(하이퍼텍스트 전송 프로토콜) 응답 상태 코드의 목록이다. IANA가 현재 공식 HTTP 상태 코드 레지스트리를 관리하고

ko.wikipedia.org

 

web.xml 파일에서 설정

<error-page>
    <error-code>에러코드</error-code>
    <location>에러페이지의 URI</location>
</error-page>

 

예제

 

 

error404.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ page isErrorPage="true" %>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>요청하신 페이지가 존재하지 않습니다. 404</h1>
<h1>주소를 확인 후 다시 다시 접속해주세요 :)</h1>

</body>
</html>

 

 

error500.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ page isErrorPage="true" %>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>서버에서 데이터를 처리하는 중 오류가 발생했습니다. 500</h1>
<h1>다시 시도해주세요 ㅠㅠ</h1>

</body>
</html>

 

 

에러 500 발생시키기 위한 페이지 > error500.jsp가 보여진다

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<%= 10/0 %>
	
</body>
</html>

 

예외 타입 별 에러 페이지 지정

 

web.xml에서 설정

<error-page>
    <exception-type>예외클래스명</exception-type>
    <location>에러페이지의 URI</location>
</error-page>

 

예제

 

errorType.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ page isErrorPage="true" %>
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>NullPointerException 발생~!</h1>
<h1>다시 시도해주세요 ㅠㅠ</h1>

</body>
</html>

 

 

에러 페이지의 우선 순위

예제

똑같은 NullPointerException이 발생하는 구문이지만 이동되는 에러페이지가 다르다.

아래 쪽 readParameter에는 <% page errorPage="viewErrorMessage.jsp"%> 구문이 있어서

web.xml에 NullPointerException타입의 에러페이지로 설정된 errorType.jsp가 뜨는 것이 아니라,

viewErrorMessage.jsp가 뜬다.

 

 

 

ㅇㅇ

JSP는 HTTP 프로토콜의 사용하는 웹 환경에서 구동되는 프로그램이다. HTTP는 비연결형으로 사용자가 서버에 특정 페이지를 요청하고 요청결과를 응답받으면 서버와의 연결이 끊기는 형태이다. 예를 들어 게시판에 글을 작성하는 페이지에서 작성한 내용은 다른 jsp에서 처리해야 하고 서버는 방금 글을 작성한 사람이 누구인지 모를 수 있다. 또 다른 예로 쇼핑몰에서 여러 상품 페이지를 이동하면서 장바구니에 물건을 담아 두고 한꺼번에 구매하고자 할 때 접속된 사용자별로 선택된 상품을 처리하는 경우 지금까지 배운 JSP 문법만 가지고는 이를 처리하기 어렵다. JSP 에서  page, request, session, application 내장객체를 통해 서로 다른 페이지에서 처리된 값을 저장하고 공유하기 위한 방법을 제공한다. 이는 컨테이너 기반 프로그램의 특징 중 하나로 실제 프로그램 구현 시 매우 중요한 기법이다.

 

➊ application은 모든 사용자가 공유하는 데이터를 저장할 수 있으며 톰캣이 종료될 때 까지 데이터를 유지할 수 있다(맨 위의 user1, user2 해당).
➋ session의 경우 사용자마다 분리된 저장 영역이 있으며 Page1, Page2, Page3 모두에서 공유되는 정보를 관리할 수 있다. 물론 이 데이터는 각자 공유 영역에서 관리되며 사용자 간에는 공유되지 않는다.
➌ 페이지 흐름이 Page1, Page2, Page3순으로 진행된다고 할 때, 한 페이지에서 다른 페이지로 데이터를 전달하려면 request 내장객체를 이용해야 한다(맨 아래의 user1에 해당한다). page 마다 생성됨.

 

  • request, session, application 은 각각 생성 시점과 소멸시점이 다르며 이를 잘 이해하고 적절한 내장객체를 이용해야 한다.
  • 각각의 내장객체는 모두 getAttribute(), setAttribute() 메서드를 통해 속성을 저장하거나 가져올 수 있다.

 

 

request, session, application을 이용한 속성 관리


- request, session, application은 맵 형태의 속성 관리 기능을 제공 한다.
- 속성을 저장하기 위해서는 setAttribute(String name, Object value) 형태를 취한다.
- 반대로 속성에 저장된 값을 가져오는 getAttribute(String name) 메서드는 name에 해당하는 Object 를 리턴한다.
- 리턴되는 타입이 Object 이므로 속성을 가지고 올 때에는 적절한 형 변환이 필요하다.
- 예를 들어 page1에서 session.setAttribute("name,"홍길동")으로 문자열 객체를 저장한다면.

  page3에서는 session.getAttribute("name")으로 저장된 값을 참조할 수 있다.

 

– PAGE 영역 - 하나의 JSP 페이지를 처리할 때 사용되는 영역 
– REQUEST 영역 - 하나의 HTTP 요청을 처리할 때 사용되는 영역 
– SESSION 영역 - 하나의 웹 브라우저와 관련된 영역 
– APPLICATION 영역 - 하나의 웹 어플리케이션과 관련된 영역

 

 

 

 

application 속성확인 예제

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
   application.setAttribute("name", "김태형");
   application.setAttribute("age", "26");

   %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1><a href="applicationAttrView.jsp">application 속성 확인</a></h1>
	
</body>
</html>

applicationAttrView.jsp

 

<%@page import="java.util.Enumeration"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<%
	Enumeration<String> attrNames = application.getAttributeNames();
	
	while(attrNames.hasMoreElements()){
		
		String attrName = attrNames.nextElement();
		Object value = application.getAttribute(attrName);
		out.println(attrName + " = " + value.toString()+"<br>");
				
	}
	
%>

</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
	request.setAttribute("lang", "ko");
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


	<%-- <jsp:forward page="forward.jsp" /> --%>

	<!-- ko가 나온다  리퀘스트공유 > 포워드 or 인클루드 -->
	<%
		response.sendRedirect("forward.jsp");
	/* null이나온다 */
	%>



</body>
</html>

forward.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<h1><%= request.getAttribute("lang") %></h1>

</body>
</html>

forward page와 response의 차이

 

 

 

  • 서블릿으로 변경된 JSP 코드는 모두 _jspService() 메서드에 위치함.
  • 메서드 매개변수인 request, response 를 비롯한 pageContext, session, application, page, config, out 등 메서드 내에서 참조할 수 있는 참조변수들이 내장객체가 됨.

내장객체를 이용한 속성 관리 기법


내장객체가 단순히 특정한 기능을 제공하는 컨테이너 관리 객체라는 점 외에도 한 가지 특징이 있다. 바로 page, request, session, application 내장객체를 이용한 속성 관리 기법이다. 이들 내장객체는 각자 지정된 생명주기가 있으며 setAttribute( ), getAttribute( )라는 메서드를 통해 해당 생명주기 동안 자바 객체를 유지하는 기능을 제공한다.

 

 

 

REQUEST 내장객체

 

  • request는 사용자 요청과 관련된 기능을 제공하는 내장객체로 javax.servlet.http.HttpServletRequest 클래스에 대한 참조변수이다
  • 주로 클라이언트에서 서버로 전달되는 정보를 처리하기 위해 사용한다
  • 대표적으로 HTML 폼을 통해 입력된 값을 JSP에서 가져올 때 사용함

 

예제

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Request Form</title>
</head>
<body>

	<h1>Request Form</h1>
	<hr>
	
	
	<!-- 중요 -->
	<form action="requestResult.jsp" method="get">
	
	<table>
		<tr>
			<td>이름</td>
			<td><input type="text" name="userName" id="userName"></td>
		</tr>
		<tr>
			<td>직업</td>
			<td>
			<select name="job">
					<option value="프로그래머">프로그래머</option>
					<option value="디자이너">디자이너</option>
					<option value="엔지니어">엔지니어</option>	
			</select>
			</td>
		</tr>
		<tr>
			<td>관심사</td>
			<td>
				<input type="checkbox" name="interest" value="java">JAVA<br>
				<input type="checkbox" name="interest" value="html5">html5<br>
				<input type="checkbox" name="interest" value="css3">css3<br>
				<input type="checkbox" name="interest" value="javascript">javascript<br>
				<input type="checkbox" name="interest" value="jsp">jsp<br>
			
			</td>
		</tr>
		<tr>
			<td></td>
			<td><input type="submit" value="보내기"><input type="reset" value="초기화"></td>
		</tr>
	</table>

	</form>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Request Result</title>
</head>
<body>

	<h1>Request Result</h1>
	<hr>

	<table>
		<tr>
			<td>이름</td>
			<td><%=request.getParameter("userName")%></td>
		</tr>
		<tr>
			<td>직업</td>
			<td><%=request.getParameter("job")%></td>
		</tr>
		<tr>
			<td>관심사</td>
			<td>
				<%
					String[] interests = request.getParameterValues("interest");

				for (int i = 0; i < interests.length; i++) {
					out.println(interests[i]+"<br>");
				}
				
				%>

			</td>
	</table>


</body>
</html>

GET 방식

 

RESPONSE 내장객체

 

  • ddresponse는 request와 반대되는 개념으로, 사용자 응답과 관련된 기능을 제공.
  • 사용자 요청(request)을 처리하고 응답을 다른 페이지로 전달하는 등의 기능을 제공한다.
  • javax.servlet.http.HttpServletReponse 객체에 대한 참조변수로, request에 만큼 많이 사용되지는 않으나 setContentType, sendRedirect와 같은 메서드는 잘 알아두어야 한다.

 

 

예제

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	<form action="resultPage.jsp">
		페이지 이동테스트 
		<select name="select">
			<option value="0">forward</option>
			<option value="1">sendRedirect</option>
		</select>
		<input type="submit">

	</form>
</body>
</html>

 

resultPage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Result Page</title>
</head>
<body>

   <%
      String select = request.getParameter("select");
     int selectNum = Integer.parseInt(select);
     
     if(selectNum>0){
        out.println(selectNum);
        
        // 현재 페이지가 응답으로 처리가 되고, result.jsp 페이지를 다시 요청
        response.sendRedirect("result.jsp");
     } else {
        out.println(selectNum);
        %>
<!--          현재 페이지가 응답으로 처리되는 것이 아니라 result.jsp 페이지의 결과가 응답으로 실행
 -->   
 <jsp:forward page="result.jsp"></jsp:forward>
   <%
     }
     %>

</body>
</html>

 

result.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>최종 결과 페이지</title>
</head>
<body>

<h1>최종 결과 페이지</h1>

</body>
</html>

 

SESSION 내장객체

 

  • HTTP 프로토콜이 비연결형 프로토콜이기 때문에 한 페이지가 출력된 다음에는 클라이언트와 서버의 연결이 끊어진다. 따라서 한번 로그인한 사용자가 로그아웃할 때까지 페이지를 이동해도 보관해야 할 정보가 있다면 이에 대한 처리가 매우 곤란해진다.
  • 이러한 HTTP 프로토콜 문제점을 해결하려고 나온 것이 쿠키와 세션이다.
  • session 은 javax.servlet.http.HttpSession 인터페이스의 참조 변수 이다. 
  • session 은 접속하는 사용자 별로 따로 생성되며 일정시간 유지되고 소멸된다.
    이러한 세션의 특징을 이용해 setAttribute() 메서드를 이용해 임의의 값을 저장해 놓고 활용할 수 있음.

- 세션이 주로 사용되는 경우는 다음과 같다. 
➊ 사용자 로그인 후 세션을 설정하고 일정 시간이 지난 경우 다시 사용자 인증을 요구 할 때. 
➋ 쇼핑몰에서 장바구니 기능을 구현할 때. 
➌사용자의 페이지 이동 동선 등 웹 페이지 트래킹 분석 기능 등을 구현할 때.

 

 

예제

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%
	session.setAttribute("userName", "김태형");
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>session control</title>
</head>
<body>

	<h1>세션에 정보를 저장했습니다 :)</h1>
	<h1><a href="sessionView.jsp">세션의 속성 확인</a></h1>

</body>
</html>

sessionView.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>세션 속성값 확인</title>
</head>
<body>

	<h1>세션의 속성에 저장된 userName : <%= session.getAttribute("userName")%></h1>
	<h1><a href="../index.jsp">index로 이동</a></h1>
	
</body>
</html>

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>First JSP</title>
</head>
<body>

<h1>INDEX :  <%= session.getAttribute("userName")%></h1>


</body>
</html>

 

 

 

그 밖의 내장객체

'JAVA > Jsp&Servlet' 카테고리의 다른 글

[JSP] 쿠키  (0) 2020.12.17
[JSP] 에러  (0) 2020.12.17
[JSP] beans 빈즈  (0) 2020.12.17
[JSP] 내장객체와 속성관리 / 생명주기  (0) 2020.12.16
[JSP] 지시어 & 액션 ( include / param / forward )  (0) 2020.12.15
[JSP] JSP / 서블릿 작성  (0) 2020.12.14
[JSP] apache tomcat 톰캣 환경설정  (0) 2020.12.14

지시어

 

 

 

 

기본적인 page 지시어는 자동 생성됨.

 

 

 

 

 

예제

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frame Include</title>
<style>

div.header {
   text-align: center;
}

div.nav {
   text-align: center;
}

div.news, div.shopping {
   width: 45%;
}

div.news {
   float: left;
}

div.shopping {
   float: right;
}

div.footer {
   clear: both;
   text-align: center;
}
</style>
</head>
<body>

   <div class="header">
      <h1>include 지시어 : Header</h1>
      <hr>
   </div>

   <div class="nav">[게임] [쇼핑] [뉴스]</div>

   <div class="contents">
      <div class="news">
         <h3>[최신 뉴스]</h3>
         <hr>
         코로나 바이러스 발생 현황
      </div>

      <div class="shopping">
         <h3>[쇼핑정보] 인기상품</h3>
         <hr>
         좋은 스마트폰
      </div>
   </div>

   <div class="footer">copyright 2020@</div>

</body>
</html>

 

 

지시어를 사용해 위와 같은 페이지 만들기

index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frame Include</title>
<style>
div.header {
	text-align: center;
}

div.nav {
	text-align: center;
}

div.news, div.shopping {
	width: 45%;
}

div.news {
	float: left;
}

div.shopping {
	float: right;
}

div.footer {
	clear: both;
	text-align: center;
}
</style>

</head>
<body>

	<%@ include file="header.jsp"%>
	<%@ include file="nav.jsp"%>

	<div class="contents">
		<%@ include file="news.jsp"%>
		<%@ include file="shopping.jsp"%>

	</div>


  <%@ include file="footer.jsp" %>

</body>
</html>

 

header.jsp / footer.jsp / nav.jsp / new.jsp / shopping.jsp 각각생성

//header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
   <div class="header">
      <h1>include 지시어 : Header include 처리</h1>
      <hr>
   </div>
   
   
 //footer.jsp
 
   <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div class="footer">copyright 2020@</div>



//nav.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div class="nav">[게임] [쇼핑] [뉴스]</div>


//news.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
      <div class="news">
         <h3>[최신 뉴스]</h3>
         <hr>
         코로나 바이러스 발생 현황
      </div>
      
      
// shopping.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
      <div class="shopping">
         <h3>[쇼핑정보] 인기상품</h3>
         <hr>
         좋은 스마트폰
      </div>

 

액션

 

 

인클루드 / include 액션 / param

 

예제1)

 

위의 index.jsp에 footer 부분을 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frame Include</title>
<style>
div.header {
	text-align: center;
}

div.nav {
	text-align: center;
}

div.news, div.shopping {
	width: 45%;
}

div.news {
	float: left;
}

div.shopping {
	float: right;
}

div.footer {
	clear: both;
	text-align: center;
}
</style>

</head>
<body>

	<%@ include file="header.jsp"%>
	<%@ include file="nav.jsp"%>

	<div class="contents">
		<%@ include file="news.jsp"%>
		<%@ include file="shopping.jsp"%>

	</div>

	<jsp:include page="footer.jsp">
		<jsp:param name="email" value="test@test.net" />
		<jsp:param name="tel" value="000-000-0000" />
	</jsp:include>



</body>
</html>

footer.jsp 부분도 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<div class="footer">copyright 2020@</div>
<div class="footer">email: <%= request.getParameter("email") %> , 
tel: <%= request.getParameter("tel") %></div>

실행 결과

 

포워드 forward 액션

 

예제2)

 

index.html에 forward page를 사용하면

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frame Include</title>
<style>
div.header {
	text-align: center;
}

div.nav {
	text-align: center;
}

div.news, div.shopping {
	width: 45%;
}

div.news {
	float: left;
}

div.shopping {
	float: right;
}

div.footer {
	clear: both;
	text-align: center;
}
</style>

</head>
<body>

	<%@ include file="header.jsp"%>
	<%@ include file="nav.jsp"%>

	<div class="contents">
		<%@ include file="news.jsp"%>
		<%@ include file="shopping.jsp"%>

	</div>

	<jsp:forward page="footer.jsp">
		<jsp:param name="email" value="test@test.net" />
		<jsp:param name="tel" value="000-000-0000" />
	</jsp:forward>


</body>
</html>

footer 페이지만 보여지게 된다.

'JAVA > Jsp&Servlet' 카테고리의 다른 글

[JSP] 쿠키  (0) 2020.12.17
[JSP] 에러  (0) 2020.12.17
[JSP] beans 빈즈  (0) 2020.12.17
[JSP] 내장객체와 속성관리 / 생명주기  (0) 2020.12.16
[JSP] 기본 객체와 영역 / 내장객체 / request / response / .. etc  (0) 2020.12.15
[JSP] JSP / 서블릿 작성  (0) 2020.12.14
[JSP] apache tomcat 톰캣 환경설정  (0) 2020.12.14

 

생성!

 

 

JSP 파일 만들고 작성하기 

 

 

 

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.Date" %>

<%
	Date now = new Date();
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>now Date</title>
</head>
<body>

<h1>현재시간 : <%= now %></h1>

</body>
</html>

 

 

 

서블릿 작성

 

- 서블릿이란 서블릿 클래스를 상속해서 만들어진 객체이다.
- 웹 컨테이너는 서블릿 클래스를 가지고 서블릿 객체를 만든 다음 그 객체를 초기화해서 웹 서비스를 할 수 있는 상태로 만드는데, 이 작업을 거친 서블릿 객체만 서블릿이라고 할 수 있다.

 

 

package test;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class firstweb1
 */
@WebServlet("/now1")
public class firstweb1 extends HttpServlet {

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) 
			throws ServletException, IOException {
		
		System.out.println("GET 방식의 요청");
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		// doGet(request, response);
	}

}

 

 


 

 

그냥 일반 클래스 생성 > extends HttpServlet 해주고 

shift  + alt + s 해서 do get 오버라이딩

package test;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HelloServlet extends HttpServlet {

   @Override
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
      
      // 응답 : html 생성해서 반환
      // 응답 관련 객체 : HttpServletResponse response
      
      // 컨텐트 타입과 character set 설정
      response.setContentType("text/html; charset=UTF-8");
      
      // 응답 처리에 사용할 날짜와 시간 데이터
      Date now = new Date();
      
      // HTML의 응답 처리를 위한 스트림 생성
      PrintWriter writer = response.getWriter();
      
      // 응답 데이터를 출력 : html 구조
      writer.println("<html>");
      writer.println("<head><title>now Date</title></head>");
      writer.println("<body>");
      writer.println("<h1>현재시간 : ");
      writer.println(now); // now.toString()
      writer.println("</h1>");
      writer.println("<h1>서블릿에서 생성된 응답코드</h1>");      
      writer.println("</body>");
      writer.println("</html>");
      
      writer.close();
   }
   
}

 

 


 

-서블릿 3.0버전부터는 @WebServlet 이노테이션을 사용하면, 웹 컨테이너가 자동 등록.

  <!-- 
  	서블릿 등록
  	서블릿 이름, 서블릿 클래스의 풀네임  
  -->
  
  <servlet>
  	<servlet-name>nowServlet</servlet-name>
  	<servlet-class>test.HelloServlet</servlet-class>  
  </servlet>
  
  <servlet-mapping>
  	<servlet-name>nowServlet</servlet-name>
  	<url-pattern>/hello</url-pattern>
  </servlet-mapping>

 

 

 

 

정리 ) 위에했던 것

 

 

 

 

톰캣 다운받기

 

tomcat.apache.org/download-80.cgi

 

수업에선 이거 받았음 8.5

 

 

– startup.bat – 톰캣을 독립 프로세스로 시작

– shutdown.bat – 실행된 톰캣을 종료시킨다.

– catalina.bat – 톰캣을 시작하거나 종료한다.

 

 

 

이클립스 기본 환경 설정

 

preferences > server > runtime Environments

에서 add 누르고 tomcat 버전에 맞게 눌러준다.

create a new local server 체크해주고 next

 

 

 

이름 해주고 디렉토리는 톰캣이 설치된 곳으로 잡아준다.

(여기는 C드라이브에 바로 압축 풀었음)

 

 

완료후 옆에 이렇게 생기는 것을 볼 수 있다.

 

 

이클립스 기본 주석 설정하기

 

텍스트 인코딩 설정하기

 

1. [General] → [Workspace] → Text file encoding 항목을 Other 로 변경한 뒤 UTF-8로 설정

2. 자바 클래스 인코딩 설정 : [General] → [Content Types] → Java Class File에 

   대한 Default encoding 값을 UTF-8 로 입력 후 <Update> 버튼

3. JSP 파일 인코딩 설정 : [General]→[Content Types] → [Text] → JSP 항목을 UTF-8 로 변경 후 <Update> 버튼

4. CSS / HTML / JSP 코드 인코딩 설정 : [Web] → [HTML Files], [JSP Files] 항목을 ISO 10646/Unicode(UTF-8)로 변경

 

http://coderap.tistory.com/539

<input type="text" id="pnum" name="pnum" required
onKeyup="this.value=this.value.replace(/[^0-9]/g,'');" />

숫자 이외에 다른 키 입력이 되지 않는다.

 

마우스이벤트

'

 

키보드이벤트

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>제이쿼리 키보드 이벤트</title>
    <!--제이쿼리 라이브러리 로드-->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

    <style>
    
        .rudrh{
            color:red;
        }
    </style>

    <script>
    
        $('document').ready(function(){
            
            $('textarea').keyup(function(){
                
                //현재 입력 문자열의 길이
                var inputStrLen = $(this).val().length;                
                
                
                if(inputStrLen>50){
                    $('span').addClass('rudrh');
                    alert('50자까지만 입력가능!');                    
                    var userInput = $(this).val().substr(0,50);
                    $(this).val(userInput);
                    userInput = 50;                    
                }else{
                    $('span').removeClass('rudrh');
                }
                
                $('span').text(inputStrLen);
                
            })        
                        
        });
        
    </script>
    
</head>
    
    

<body>
    
    <textarea rows="10" cols="50"></textarea>
    <h1><span>0</span>/50</h1>
    
</body>
</html>

 

 

윈도우이벤트

윈도 이벤트는 윈도 객체만 사용할 수 있는 이벤트가 아니라

window 객체와 document 객체 이외에 img 태그 등이 사용할 수 있는 이벤트

 

 

입력 양식 이벤트

<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>체크박스</title>

    <!--jQuery 라이브러리 로드-->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    
        <script>
        $('document').ready(function(){
           
            // 체크박스 이벤트 처리 : change() 메소드 사용
            $('#check-all').change(function(){
                if(this.checked){
                    $('#check-item').children().prop('checked',true);
                }else {
                    $('#check-item').children().prop('checked',false);
                }
            });
        
            
        });
    </script>
    
</head>

<body>
    
    개인정보활용 동의 <input type="checkbox" id="agree"><br>.
    <input type="checkbox" id="check-all"><label> 전체선택</label>
    <br><br>
    <div id="check-item">
        <input type="checkbox"> 게시물 1 <br>
        <input type="checkbox"> 게시물 2 <br>
        <input type="checkbox"> 게시물 3 <br>
        <input type="checkbox"> 게시물 4 <br>
        <input type="checkbox"> 게시물 5 <br>        
    </div>
</body>

</html>

이벤트를 연결할 때 on ( ) 메서드를 사용

 

 

on( ) 메서드를 사용하지 않은 기본 이벤트 연결

    <script>
        
        $('document').ready(function(){
        
        
           $('h1').click(function(){
               var length = $('h1').length;
               var html = $(this).html();
               
               $('#wrap').append('<h1>'+length+' - '+html+'</h1>');
           });
            
            
        });
    </script>

</head>

<body>


    <div id="wrap">
        <h1> HEADER 1 </h1>
    </div>

 

 

 

- delegate 방식을 사용하는 on( ) 메서드

- 이벤트 리스너에서 this 키워드가 #wrap 태그가 아니라 h1 태그라는 것을 주의

        
        $('document').ready(function(){

            // 범위를 지정하고 해당 범위안의 엘리먼트를 지정해서 이벤트 적용
            // 해당 범위에 특정 엘리먼트가 추가되어도 이벤트를 적용.
           $('#wrap').on('click','h1',function(){
               
               var length = $('h1').length;
               var html = $(this).html();
               
               $('#wrap').append('<h1>'+length+' - '+html+'</h1>');
               
               
           });
            
        });           

 

                // 제거
                $('#wrap').off('click', 'h1');

1) $(this).html($(this).html()+'+');
2) $(this).html(function(index, html){return html+'+'});

1)

    <script>

        $('documnet').ready(function() {

            // 이벤트 연결
            $('h1').on('click',function(){
                
                // 클릭이 발생하면 이벤트가 발생한 객체의 문자열을 변경
                // this는 이벤트가 발생한 객체
                $(this).html($(this).html()+'+');
            });

        });

    </script>

</head>

<body>


    <h1> CLICK1 </h1>

</body>

2)

        $('documnet').ready(function() {
        
            // 이벤트 연결
            $('h1').on('click',function(){
                 $(this).html(function(index, html){                     
                        return html+'+'; 
                 });
            });
        });

둘다 실행 결과는 같다 // 클릭할때 마다 +가 생김

 

 

 

이벤트 연결 

1) 기본


- on ( ) 메서드의 매개변수에 객체를 넣어줌
- 속성 이름과 속성 값에 이벤트 이름과 이벤트 리스너를 넣으면 이벤트를 쉽게 연결

 

        $('documnet').ready(function() {
            
            // 여러개의 이벤트를 등록할 때 객체 형식으로 정의
            $('h1').on({
                mouseenter:function(){
                    $(this).addClass('h1over'); // style에 .h1over만들어놓음
                },
                mouseleave:function(){
                    $(this).removeClass('h1over');
                },
                click : function(){
                    console.log(event);
                    $(this).html(function(index, html){
                        return html + '*'
                    })
                }
            })
            
            
        });

        $('documnet').ready(function(){
            $('h2').hover(function(){
                $(this).addClass('over');       
            }, function(){
                $(this).removeClass('over');
            })
            
        });

 

이벤트 연결 제거

 

- off ( ) 메서드는 다음 형태로 사용
- 1번 형태는 해당 문서 객체와 관련된 모든 이벤트를 제거
- 2번 형태는 해당 문서 객체의 특정 이벤트와 관련된 모든 이벤트를 제거
- 3번 형태는 특정 이벤트 리스너를 제거

        $('documnet').ready(function() {

            // 여러개의 이벤트를 등록할 때 객체 형식으로 정의
            $('h1').on({
                mouseenter: function() {
                    $(this).addClass('over'); // style에 .h1over만들어놓음
                },
                mouseleave: function() {
                    $(this).removeClass('over');
                },
                click: function() {
                    console.log(event);
                    $(this).html(function(index, html) {
                        return html + '*'
                    });
                    $(this).off('click');
                }
            })
        });


        $('documnet').ready(function() {
            $('h2').hover(function() {
                $(this).addClass('over');
            }, function() {
                $(this).removeClass('over');
                $('h2').off();
            })

        });

처음 한번만 실행되고 두번째부터는 실행되지 않는다.

1) hover는 테두리가 처음 한번만 생기고 다음엔 안생김

2) 눌러도 별표 한개이상 안생김

 

 

매개변수 context

- 특정 부분에 선택자를 적용하고 싶을 때 사용하는 것이 매개변수 context

- 매개변수 context는 selector가 적용하는 범위를 한정

    <script>
        $('documnet').ready(function() {

            $('div').click(function(){

                var header = $('h1', this).text();
                var paragraph = $('p', this).text();

                alert(header + ' : ' + paragraph);


            });
        });
    </script>

</head>

<body>

    <div>
        <h1> header - 1 </h1>
        <p> paragraph - 1 </p>
    </div>
    <div>
        <h1> header - 2 </h1>
        <p> paragraph - 2 </p>
    </div>
    <div>
        <h1> header - 2 </h1>
        <p> paragraph - 2 </p>
    </div>
</body>

 

 

이벤트 강제발생

 

        $(document).ready(function() {

            $('h1').on({
                mouseenter: function() {
                    $(this).addClass('over');
                },
                mouseleave: function() {
                    $(this).removeClass('over');
                },
                click: function(event) {
                    console.log(event);
                    $(this).html(function(index, html) {
                        return html + '+';
                    });
                }
            });

            setInterval(function(){
            	// h1의 마지막에 click 이벤트 강제발생
                $('h1').last().trigger('click');
            }, 1000);           
        });

계속해서 +가 발생한다.

 

 

버블링 막기

 

자바스크립트의 버블링에 대해서 알기쉬운 티스토리

http://programmingsummaries.tistory.com/313

 

 

[JavaScript] JavaScript에서 이벤트 전파를 중단하는 네가지 방법

자바스크립트 이벤트 리스너에서 preventDefault() 와 stopPropagation()  그리고 return false 는 자바스크립트 프로그래밍을 할 때 이벤트 중단을 위해 자주 사용되는 코드들이다. 이벤트 중단 시에 사용되

programmingsummaries.tistory.com

 

 

1) 버블링을 막지 않으면 <a>태그부분을 눌러도 div부분의 이벤트(alert)가 같이 실행된 후 네이버로 이동한다.

    </script>
		$('div').click(function() {

                var header = $('h1', this).text();
                var paragraph = $('p', this).text();

                alert(header + ' : ' + paragraph);
            });


            $('a').click(function(event) {
                //event.preventDefault();
                //return false;
            });

        });

    </script>

</head>

<body>
    <div>
        <h1>Header 1</h1>
        <p>paragraph 1</p>

        <h3>
            <a href="http://www.naver.com">네이버</a>
        </h3>

    </div>

</body>

</html>

 

2) preventDefault ( ) 메서드로 a 태그의 기본 이벤트를 제거하면,

 a 태그의 네이버로 이동하는 이벤트는 작동하지 않아서 네이버로 가지지는 않지만,

여전히 div의 이벤트인 alert는 작동한다.

 

            $('a').click(function(event) {
                event.preventDefault();
                //return false;
            });

 

 

 

 

3) return false;를 해주면 <a>태그 네이버를 눌러도 아무런 일도 일어나지 않는다.

return false

stopPropagation ( ) 메서드와 preventDefault ( ) 메서드를 함께 사용하는 경우가 많으므로, 

jQuery는 간단하게 return false를 사용하면 이 두 가지를 함께 적용하는 것으로 인식

            $('a').click(function(event) {
                //event.preventDefault();
                return false;
            });

 

 

 

 

1) appendTo

 

문서 객체 생성 , 문서 객체 연결

    <script>
        $(document).ready(function() {

            $('input[type=button]').click(function(){
                
                
                $('<h1></h1>').html('<i>새로운 태그 추가</i>').appendTo('div');
                
            });
            
        });
    </script>
</head>

<body>

    <div></div>
    
    <input type="button" value="동적tag추가">

</body></html>

더보기

이런 경우(아래코드)에는 생성 시점이 달라서 글씨색이 변경되지 않고 그냥 나온다.

- 코드가 같은 {} 곳에 삽입되어있다면 버튼을 누르면 원래 글씨색은 검정에서 빨간색으로 바뀌고,

  새로운 태그 추가부터 블루 초록 빨강 이런식으로 나옴

 

    <script>
        $(document).ready(function() {

            $('input[type=button]').click(function() {

                $('<h1></h1>').html('<i>새로운 태그 추가</i>').appendTo('div');

                //            var h1='<h1>안<h1>';
                //            var h2='<h1>녕<h1>';
                //            var h3='<h1>하<h1>';
                //            var h4='<h1>세<h1>';
                //            var h5='<h1>요<h1>';
                //            
                //            $('div').append(h1, h2, h3, h4, h5);

            });

        });

        $(document).ready(function() {
            var colors = ['red', 'blue', 'green'];

            $('h1').css('color', function(index) {
                return colors[index];
            });
        });
        
    </script>

</head>

<body>

    <div>
        <h1>원래있던태그</h1>
    </div>

    <input type="button" value="동적tag추가">

</body></html>

 

 

 

텍스트 노드를 갖지 않는 문서 객체를 생성하는 방법

- img 태그를 생성할 때는 $ ( ) 메서드로 문서 객체를 생성하고 attr ( ) 메서드로 속성을 입력

 

        $(document).ready(function() {

        $('input[type=button]').click(function(){
        
        $('<img>').attr({
        src:'../tae6.jpg',
        height:100
        }).appendTo('div');

        });

        });

 

 

2) append

- append ( ) 메서드의 사용 형태

 

- 여러 개의 문서 객체를 한꺼번에 입력할 수 있음

        $('input[type=button]').click(function(){

            var h1='<h1>안<h1>';
            var h2='<h1>녕<h1>';
            var h3='<h1>하<h1>';
            var h4='<h1>세<h1>';
            var h5='<h1>요<h1>';
            
            $('div').append(h1, h2, h3, h4, h5);
        });

- 배열을 사용한 문서 객체 생성과 추가

    <script>
        $(document).ready(function() {

            $('input[type=button]').click(function() {

                var links = [
                    {name:'네이버', url:'http://www.naver.com'},
                    {name:'다음', url:'http://www.daum.net'},
                    {name:'구글', url:'http://www.google.com'},
                ];
                
                $('h1').append(function(index){
                    var item = links[index];
                    var output = '<a href="'+item.url+'">'+item.name+'</a>';
                    
                    return output;
                    
                });

            });

        });
    </script>

</head>

<body>

    <div>
        <h1> 네이버 </h1>
        <h1> 카카오 </h1>
        <h1> 페이스북 </h1>
    </div>

    <input type="button" value="동적tag추가">

</body></html>

 

3) 문서 객체 이동

    <script>
        $(document).ready(function(){
           
            setInterval(function(){
                // 첫번째 이미지를 마지막으로 보낸다.
                 $('img').first().appendTo('div');
            },2*1000);
            
            
            
        });
    </script>
    <style>
        
        div {
            width: 150px;
            height: 150px;
            
            border: 2px solid black;
            
            overflow: hidden;
        }
        img {
            width: 150px;
            height: 150px;
        }
    </style>

</head>

<body>

    <div>
        <img src="/image/tae1.jpg">
        <img src="/image/tae2.jpg">
        <img src="/image/tae3.png">
        <img src="/image/tae4.jpg">
        <img src="/image/tae5.jpg">
    </div>

</body></html>

 

 

1) 문서 객체의 내부 검사

    <script>
        $(document).ready(function() {
            //html( ) 메서드 - Getter
            console.log('div->', $('div').html());
            //text( ) 메서드 - Getter
            console.log('div->', $('div').text());
        });
    </script>

</head>

<body>

    <div>

        <h1> 네이버 </h1>
        <h1> 카카오 </h1>
        <h1> 페이스북 </h1>

    </div>

 

2) 문서 객체의 내부 추가

            $('button').first().click(function() {
                $('div>h1').html('<h4>html</h4>');
            });

            $('button').first().click(function() {
                $('div>h1').text('<h4>text</h4>');
            });

 

 

 

            $('button').first().click(function() {
                $('div>h1').html(function(index){
                    return '<h'+(index+2)+'>안녕!</h'+(index+2)+'>';            
                });

            $('button').first().click(function() {
                $('div>h1').text(function(index){
                    return '<h'+(index+2)+'>안녕!</h'+(index+2)+'>';            
                });              
            });

 

3) 문서 객체 제거

            $('button').first().click(function() {
                $('div').empty();
            });

            $('button').first().click(function() {
                $('div>h1:first').remove();
            });

addClass() removeClass() / c대문자

문서 객체에 클래스 속성 추가 / 제거

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery_DOM / 문서객체 컨트롤</title>


    <!--제이쿼리 라이브러리 로드-->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>

    <script>
        $(document).ready(function() {

            $('button').first().click(function() {

                $('h1').addClass('float_left');

            });
            $('button').last().click(function() {
                $('h1').removeClass('float_left');
            });



        });
    </script>
    <style>
        h1 {
            border: 5px solid #ddd;
        }

        .float_left {
            float: left;
            widows: 32%;
        }
    </style>
</head>

<body>

    <h1> 네이버 </h1>
    <h1> 카카오 </h1>
    <h1> 페이스북 </h1>

    <button>변경</button><button>초기화</button>
</body></html>

 

 

attr()

문서 객체의 클래스 속성 검사 및 추가 ( 반환 & 설정 / get & set )

 

        $(document).ready(function() {
            $('button').first().click(function() {                
            	$('img').attr('src', '../image/tae2.jpg')
            });
            $('button').last().click(function() {          
                $('img').attr('src', '../image/tae1.jpg')
            });
            
            // 속성값을 반환 : get > attr('속성이름)
            var img_path = $('img').attr('src');
            console.log('img_path >', img_path);
            
            // 속성값을 설정 : set > attr('속성이름', 속성값)
            $('img').attr('width', 300);
            
        });

 

        $(document).ready(function() {
            // 속성값을 설정 : set > attr('속성이름', 함수())
            // 함수의 반환값은 속성에 적용할 데이터를 반환
            $('img').attr('width', function(index) {
                return (index + 1) * 100;
            });

        });

 

 

        $(document).ready(function() {
            // 속성값을 설정 : set > attr({속성이름:속성값 , 속성이름:속성값...})
            $('img').attr({
               width : function(index){
                   return (index+1)*100;
               },
                height:100
                                
            });
            
        });

 

 

 

removeAttr()

 

        $(document).ready(function() {

            $('button').first().click(function() {
                $('img').removeAttr('height');
                

            });
            $('button').last().click(function() {
            
            });
        });

css()

문서 객체의 스타일 검사 및 추가

    <script>
        $(document).ready(function() {

            var colors= ['red', 'blue','green'];
            
            $('h1').css('color',function(index){
                return colors[index];    
            });
            
        });
    </script>
    <style>
        h1 {
            border: 5px solid #ddd;
        }

        .float_left {
            float: left;
            widows: 32%;
        }
    </style>
</head>

<body>    
    <h1> 네이버 </h1>
    <h1> 카카오 </h1>
    <h1> 페이스북 </h1>
</body></html>

 

html = 1 > 2 > 3이라면 

                $('body').html($('body').html()+html); 

 

1) 뒤에 차례로 붙이기

[ body ] +  1 2 3

 

                $('body').html(html+$('body').html());

2) 역순으로 넣기 (위에 생김)

3 2 1  + [ body ]

- $.parseXML( ) 메서드와 each( ) 메서드, find() 메서드

 

        $(document).ready(function() {
            
            // xml 문서 구조의 문자열 
            var xmlStr = '';
            xmlStr += '<links>';
            xmlStr += '     <link>';
            xmlStr += '         <name>네이버</name>';            
            xmlStr += '         <url>http://www.naver.com</url>';            
            xmlStr += '     </link>';
            xmlStr += '     <link>';
            xmlStr += '         <name>구글</name>';            
            xmlStr += '         <url>http://www.google.com</url>';            
            xmlStr += '     </link>';
            xmlStr += '     <link>';
            xmlStr += '         <name>다음</name>';            
            xmlStr += '         <url>http://www.daum.net</url>';            
            xmlStr += '     </link>';
            xmlStr += '</links>';
            
            // 문자열 > xml 문서 객체로 만듦
            var xmlDoc = $.parseXML(xmlStr);
            
            // xml문서 객체 > 제이쿼리 객체로 만듦 > find() 사용 가능
            $(xmlDoc).find('link').each(function(index){
                // <link></link>가 하나의 this가 된다.
                var name = $(this).find('name').text();
                var url = $(this).find('url').text();
                
                var html ='';
                html += '<div class="card">';
                html += '   <h2>'+name+'</h2>';
                html += '   <a href="'+url+'">방문하기</a>';
                html += '</div>';
                
                $('body').html(html+$('body').html());
            });
            
      
        });
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div.card{
            border : 1px solid #aaa;
            width: 30%;
            float : left;
            margin: 5px;
        }
        
        
        div.card > h2 {
            background-color: palevioletred;            
            text-align: center;
        }
        
        div.card > a{
            display: block;
            text-align: center;
            height: 30px;
            line-height: 30px;
            text-decoration: none;
            color : black;
            background-color: pink;
        }
    </style>

기본 필터 메서드 filter(), filter(function(){})

    <script>
        $(document).ready(function() {

//            $('h3:even').css({
//                background: 'black',
//                color: 'orange'
//            });

            $('h3').filter(':even').css({
                background: 'black',
                color: 'orange'
            })

        });
    </script>


</head>

<body>

    <h3> header3-0 </h3>
    <h3> header3-1 </h3>
    <h3> header3-2 </h3>
    <h3> header3-3 </h3>
    <h3> header3-4 </h3>
    <h3> header3-5 </h3>
    <h3> header3-6 </h3>
    <h3> header3-7 </h3>


</body></html>

 

        $(document).ready(function() {

            $('h3').filter(':even').css({
                background: 'black',
                color: 'orange'
            })

            $('h3').filter(function(index) {
                return index % 3 == 0;
            }).css({
                background: 'black',
                color: 'red'
            });

        });

 

 

end()

	<script>
		$(document).ready(function() {

            //end (), filter를 이용한 선택의 한단계 위로 이동.
            $('h1').css('background-color','orange')
            .filter(':even').css('color','white')
            .end().filter(':odd').css('color','red');
            
        });
    </script>


</head>

<body>

    <h1> header1-0 </h1>
    <h1> header1-1 </h1>
    <h1> header1-2 </h1>
    <h1> header1-3 </h1>
    <h1> header1-4 </h1>
    <h1> header1-5 </h1>
    <h1> header1-6 </h1>
    <h1> header1-7 </h1>

 

특정 위치의 문서 객체 선택 eq(), first(), last()

 

        $(document).ready(function() {
            
            $('h1').eq(0).css('background','orange');
            $('h1').eq(-3).css('background','orange');
            $('h1').last().css('background','orange');

        });

 

add()

- add ( ) 메서드를 사용하면 현재 선택한 문서 객체의 범위를 확장할 수 있음

        $(document).ready(function() {

            $('h1').css('border','5px solid #333')
            .add('h3').css('color','blue');

        });

each$.each( ) 메서드의 콜백 함수

each() > 하나의 행을 다루는 핸들러 / 함수

        $(document).ready(function() {
            // 배열의 반복 처리를 위한 each 메소드
            // $.each(배열의 원본, callbck : 하나의 행을 처리하는 함수)
            
            // 배열 생성
            var links = [
                {name:'네이버', url:'http://www.naver.com'},
                {name:'다음', url:'http://www.daum.net'},
                {name:'구글', url:'http://www.google.com'},
            ];
            
            var output='';
            
            $.each(links, function(index,item){
                console.log(index, item);
                
                output += '<h1><a href="'+item.url+'">'+item.name+'</a></h1>';
            })     
                document.body.innerHTML +=output;
           
            
        });

 

addclass() 메서드

 

        $(document).ready(function() {
            $('h1').addClass('title');

            $('h1').each(function(index, item) {
                if (index % 2 == 0) {
                    $(item).css('color', 'red');
                }
            });

        });
    </script>
    <style>
        .title {
            background-color: beige;
            font-style: italic;
        }
    </style>
</head>

<body>

    <h1> h1 - 1 </h1>
    <h1> h1 - 2 </h1>
    <h1> h1 - 3 </h1>
    <h1> h1 - 4 </h1>
    <h1> h1 - 5 </h1>

        $(document).ready(function() {
//            $('h1').addClass('title');

            $('h1').each(function(index, item) {
                if (index % 2 == 0) {
                    /*$(item).css('color', 'red');*/
                    $(item).addClass('title')
                }
            });

        });
    </script>
    <style>
        .title {
            background-color: beige;
            font-style: italic;
        }
    </style>
</head>

<body>

    <h1> h1 - 1 </h1>
    <h1> h1 - 2 </h1>
    <h1> h1 - 3 </h1>
    <h1> h1 - 4 </h1>
    <h1> h1 - 5 </h1>

minified

 

jQuery Core – All Versions | jQuery CDN

jQuery Core – All Versions jQuery Core & Migrate - Git Builds UNSTABLE, NOT FOR PRODUCTION jQuery Core - All 3.x Versions jQuery Core 3.5.1 - uncompressed, minified, slim, slim minified jQuery Core 3.5.0 - uncompressed, minified, slim, slim minified jQue

code.jquery.com

 

 

***

            $('body').html('abc') 
            // abc만 출력됨(덮어쓰기)
            
            $('body').html(
                $('body').html()+output
            );            
            //document.body.innerHTML +=output;와 같다
           

 

 

 

$(document).ready( )

- jQuery를 사용한 모든 웹 페이지는 다음 코드로 시작

 

$(document).ready( )

- 이벤트 연결

 

        // 제이쿼리 객체를 만들고 객체의 메소드를 사용하는 형태
        // jquery(자바스크립트 객체 또는 선택자) : jquery 객체 생성
        $(document).ready(function(){
            alert('1');
        });
        
        $(document).ready(function(){
            alert('2');
        });
        
        $(document).ready(function(){
            alert('3');
        });
        

 

 

기본 선택자

- jQuery 메서드의 가장 기본적인 형태
- 선택자는 jQuery에서 가장 중요한 역할

 

    <script>
        //선택자로 제이쿼리 객체 생성 : $('선택자')
        $(document).ready(function(){
            console.log('onload=ready()')
            $('*').css('color','red');            
        });
        
                        
    </script>
</head>

<body>
    
    <h1>jquery test</h1>
    <p>제이쿼리 테스트</p>   
    
    
    
    
</body>

</html>

 

 

속성 선택자

		$(document).ready(function(){
            // 속성타입으로 선택
            $('input[type=text]').css('padding',10);
            $('input:text').css('color','pink');
            
            $('input:button').css('background-color', 'black');
        });
        
        //
        
    <input type="text"><br><br>
    <input type="button" value="버튼"><br>

 

필터 선택자

입력 양식 필터 선택자 - 필터 선택자는 기본 선택자 뒤에 사용

<script>
        $(document).ready(function() {
            // select에서 선택한 항목
            var value = $('select>option:selected').val(); // get 기능
            console.log(value);

            setTimeout(function() {
                var value = $('select>option:selected').val();
                console.log(value);
            }, 3 * 1000)
        });
    </script>
</head>

<body>

    <select>
        <option>2021</option>
        <option>2020</option>
    </select>

 

위치 필터 선택자

 <script>
        $(document).ready(function() {
            $('table tr:odd').css('background','pink');
            $('table tr:even').css('background','black');
            
            $('table tr:first').css('background','blue');
            $('table tr:last').css('background','green');            
        });
    </script>
</head>

<body>

    <table border="1" style="width: 400px">
        <tr>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
        </tr>
        <tr>
            <td>5</td>
            <td>5</td>
        </tr>
        <tr>
            <td>6</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>7</td>
        </tr>
        <tr>
            <td>8</td>
            <td>8</td>
        </tr>
        

    </table>

test1.csv
0.00MB
test2.csv
0.00MB

# Chapter09_02
# csv 파일 읽기 및 쓰기

# csv : meme - text/csv;

import csv

# 예제1
with open('./resource/test1.csv','r') as f :
    reader = csv.reader(f)
    next(reader) #header (첫줄) skip

    # 객체확인
    print(reader)

    # 타입확인
    print(type(reader))

    # 속성확인
    print(dir(reader))
    print()

    # 내용 출력
    for c in reader :
        #print(c)
        #print(type(c)) #list~~
        print(''.join(c))


# 예제2
with open('./resource/test2.csv','r') as f :
    reader = csv.reader(f,delimiter='|') # 구분자

    for c in reader:
        print(c)
        # 리스트안에 각각 두개 ['나라','약자']로 가져옴

# 예제3
with open('./resource/test1.csv','r') as f :
    reader = csv.DictReader(f)

    print(reader)
    print(type(reader))
    print(dir(reader))

    for c in reader:
        #print(c) #{'Name|Code': 'Zimbabwe|ZW'}
        for k,v in c.items():
            print(k,v)
        print('--------------------')


# 예제4
w = [[1,2,3],[4,5,6],[7,8,9],[10,11,12],[13,14,15],[16,17,18],[19,20,21]]
with open('./resource/write1.csv', 'w', encoding='utf-8') as f:
    print(dir(csv))
    wt=csv.writer(f)

    #dic확인
    #print(dir(wt))

    for v in w :
        wt.writerow(v) # 한줄씩 입력.row단위로.

# 예제5
with open('./resource/write2.csv', 'w', encoding='utf-8') as f:
    # 필드명
    fields = ['one', 'two','three']

    #DictWriter

    wt = csv.DictWriter(f, fieldnames=fields)
    #header Writer
    wt.writeheader()

    for v in w :
        wt.writerow({'one': v[0],'two':v[1],'three':v[2]})
# chapter09_01
# 파일 읽기 및 쓰기

# 읽기 모드 r 쓰기모드 w 추가모드 a 텍스트모드 t 바이너리모드 b
# 상대경로('../, ./') 절대 경로("C:\django\example..")

# 파일 읽기, 읽기 작업(read)
# 예제1)
import sys
import io

sys.stdout = io.TextIOWrapper(sys.stdout.detach(), encoding = 'utf-8')
sys.stderr = io.TextIOWrapper(sys.stderr.detach(), encoding = 'utf-8')
#한글깨짐 방지

f = open('./resource/it_news.txt', 'r', encoding='UTF-8')

# 속성확인
print(dir(f))
# 인코딩 확인
print(f.encoding)
# 파일이름
print(f.name)
# 모드 학인
print(f.mode)

cts=f.read()
print(cts)

#반드시 clos
f.close()


print('--------------------------------------')

# 예제2
with open('./resource/it_news.txt', 'r', encoding='UTF-8') as f :
    c = f.read()
    print(c)
    print(iter(c))
    print(list(c))
    # with문에서는 알아서 close해준다.

print('--------------------------------------')


# 예제3
# read() : 전체 읽기, read(10) : 10byte만 읽어옴
with open('./resource/it_news.txt', 'r', encoding='UTF-8') as f :
    c = f.read(20)
    print(c)
    c = f.read(20)
    print(c) # 다음 20byte를 읽어봄. 내가 마지막에 어디까지 읽었는지 내부적으로 기억.
    c = f.read(20)
    print(c)
    f.seek(0,0) # 처음으로 from 0 to 0
    c = f.read(20)
    print(c)
print('--------------------------------------')

# 예제4
# readline : 한줄씩 읽기
with open('./resource/it_news.txt', 'r', encoding='UTF-8') as f :
    line = f.readline()
    print(line)
    line = f.readline()
    print(line) #반복문 안에서 읽어오는 것이 좋다.
print('--------------------------------------')

# 예제5
# readlines : 전체를 읽은 후 라인 단위 리스트로 저장
with open('./resource/it_news.txt', 'r', encoding='UTF-8') as f :
    cts = f.readlines()
    print(cts)
    print(cts[0])

    for c in cts :
        print(c, end='')

print('--------------------------------------')


# 파일쓰기 (write)

# 예제1
with open('./resource/contents1.txt', 'w') as f :
    f.write('I love Python\n')

# 예제2
with open('./resource/contents1.txt', 'a') as f :
    f.write('I love Python\n')       # w로하면 덮어쓰기 a 뒤에추가 (append)

# 예제3
# writelines : 리스트 > 파일로 한줄씩
with open('./resource/contents2.txt', 'w') as f :
    list=['orange\n', 'Apple\n', 'banana\n','melon\n']
    f.writelines(list)

# 예제4
with open('./resource/contents3.txt', 'w') as f :
    print('Test Text Write', file=f) #콘솔이 아니라, 파일로 출력
<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript Window Object</title>

    <script>

        window.onload = function() {
            
            // 삭제버튼 : 이벤트 설정
            document.querySelector('input[type=submit]').onclick = function(){
               
                alert('h1');
                
                // 삭제 대상 
                var remove_h1 = document.getElementById('header-1');
                
                // 삭제 대상을 포함하는 문서객체
                var parent = document.body;
                
                parent.removeChild(remove_h1);
                
                
            };
        };
    </script>


</head>

<body>

    <div id="header-1">1</div>
    <div id="header-2">2</div>

    <br>
    
    <input type="submit" value="H1-0 삭제">



</body></html>

문제발생, h1을 누르면 div영역도 같이 눌려진다.

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 전달</title>
    
    <style>
    
        div{
            height: 300px;
            background-color: black;
        }
        
        h1{
            background-color: pink;
        }
    </style>
    
    <script>
    
        window.onload = function(){
            
            var div = document.querySelector('div');
            var h1 = document.querySelector('h1');
            
            div.onclick = function(){
                console.log('div 영역에 클릭이벤트 발생!');
            }
            h1.onclick = function(){
                console.log('h1 영역에 클릭이벤트 발생!');
            }
            
            
        };
    </script>
</head>

<body>
    
    <div>
    
        <h1> 클릭하세요 :) </h1>
    </div>
</body>
</html>

 

 

 

이벤트 객체의 stopPropagation() 메서드 사용!

익스플로러는 cancelBubble 속성을 true로 변경하는데 잘안쓰니까 패스..

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>이벤트 전달</title>
    
    <style>
    
        div{
            height: 300px;
            background-color: black;
        }
        
        h1{
            background-color: pink;
        }
    </style>
    
    <script>
    
        window.onload = function(){
            
            var div = document.querySelector('div');
            var h1 = document.querySelector('h1');
            
            div.onclick = function(){
                console.log('div 영역에 클릭이벤트 발생!');
            }
            h1.onclick = function(){
                console.log('h1 영역에 클릭이벤트 발생!');
            }
            
            h1.onclick = function(e){
                
                var event = e || window.event;
                console.log('h1 영역에 클릭이벤트 발생쓰!!!!!')
                
                if(event.stopPropagation){
                    event.stopPropagation();
                }
                
            };
            
        };
    </script>
</head>

<body>
    
    <div>
    
        <h1> 클릭하세요 :) </h1>
    </div>
</body>
</html>

+ Recent posts