22-11-29 수업내용 (1) JSP 태그

JSP 수업 기록

22-11-29 수업내용 (1) JSP 태그

JadeStone 2022. 11. 29. 19:41

교안파일

2강_JSP태그.pdf

0.46MB

#JSP

*JSP 특징

1. 동적 웹어플리케이션 컴포넌트 (자바 코드 사용가능)

2. .jsp 확장자

3. 클라이언트의 요청에 동적으로 작동하고, 응답은 HTML을 이용.

4. JSP는 웹서버와 통신시에 자동으로 Servlet으로 변환됨.

5. MVC패턴에서 View로 이용됨.

* JSP 태그의 개념 이해

- Servlet은 java언어를 이용하여 문서를 작성하고, 출력객체 (PrintWriter)를 이용하여 html 코드를 삽입합니다.

- jsp는 서블릿과 반대로 html코드에 java언어를 삽입하여 동적 문서를 만들 수 있습니다.

- html코드 안에 java코드를 삽입하기 위해서는 jsp태그를 이용 해야 하며, 이러한 태그를 학습해야 합니다.

*스크립트릿(scriptlet)

<% %> -> 모든 자바 코드 기술 가능.

<body>
	
	<%
	//자바코드
	int a = 10;
	if(a >= 10){
		out.println("10보다큼"); //웹 화면 출력
	} else {
		out.println("10보다작음");
	}
	%>
	
	<hr>
	<%
	for(int i = 1; i<=10; i++){
		out.println(i + "<br>"); //태그로 인식 - 문자열에서 태그입력시.
	}
	%>
	
	<hr>
	<%
	int num = 0;
	if(num >= 0){
		out.println("<h6>num은 0보다 큽니다</h6>"); //태그로 인식
	}
	%>
	
	<hr>
	<% if(num >= 10){ %>
		<h6>num은 10보다 큼</h6>
	<% } else { %>
		<h6>num은 10보다 작음</h6>
	<% } %>
	
	<hr>
	1. 구구단 3단 out.prinln과, br태그를 사용해서 브라우저 화면에 출력<br>
	<%
	for(int i=1; i<=9; i++){
		out.println(3*i+"<br>");
	}
	%>
	
	
	
	2. 동일한 name을 가진 체크박스 20개를 브라우저에 생성 <br>	
	<%for(int i=1; i<=20; i++ ){ %>
		<input type="checkbox" name=box>
	<% } %>
</body>

<%     
    //상단부 선언
    int a = 10;
	String str = "hello world";
%>    

<body>
	<%-- 
	<%
		out.println(a + "<br>");
		out.println(str + "<br>");
	%>
	 --%>
	 
	 <!-- html주석 -->
	 
	<%=a %><br>
	<%=str %><br>
	
	<h2>구구단 3단을 표현식을 통해서 출력</h2>
	<% for(int i=1; i<=9; i++){ %>
	
		3 x <%=i %> = <%=3*i %><br>
		<%--  <%= "3"+"x"+i+"="+3*i %><br> 위에 줄은 선생님이 하신거 --%>
	<% } %>
	<h2>반복문으로 체크박스에 1~20까지 이름을 붙여서 가로 출력</h2>
	<% for(int i=1; i<=20; i++){ %>
		<input type="checkbox" name=box><%= i  %>
	<% } %>
	
	
</body>

#표현식(expression)

<%= %> -> 결과 값을 출력할 때 사용

# JSP 주석

<%-- --%>

-html, jsp 주석다는 단축키: ctrl + shift + /(슬래쉬키)

-HTML 주석은

#지시자

<%@ %> 페이지 속성을 지정

<%@page import="java.util.HashMap"%>
<%@page import="java.util.HashSet"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	Date date = new Date();
	SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
	String now = sdf.format(date);
	
	ArrayList<String> list = new ArrayList<>();
	HashSet<Integer> set = new HashSet<>();
	HashMap<Integer, String> map = new HashMap<>();//map
	
	//
	list.add("hong");
	list.add("kim");
	
	set.add(1);
	set.add(1); //x
	
	map.put(1, "kim");
	map.put(2, "hong");
%>    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

	지금:<%=now %><br>
	리스트:<%=list.toString() %><br>
	맵:<%=map.toString() %><br>
	셋:<%=set.toString() %>

</body>
</html>

* 지시자에서 기억할 점은

-임포트해야하는 class를 사용할 때 ctrl + spacebar 를 눌러서 자동완성 해주면 자동으로 임포트도 된다는것.

-contentType="text/html; charset=UTF-8

contentType 이 문서에서 어떤 언어로 작성되는지, 인코딩 형식은 UTF-8을 사용한다는것을 보여준다는 것을 주의해서 기억해두자.

#INCLUDE

-include: JSP 페이지의 특정 영역에 다른 문서를 포함시킵니다.

웹 페이지를 보다보면 페이지가 바뀌어도 계속 똑같이 보이는 부분이 있다. 아래 사진과 같이.

그런 부분들을 이렇게 한줄로 담아서 다른 페이지에 삽입해주면 똑같은 내용을 여러번 써야한다는 것(코드의 중복)을 피할 수 있다.

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

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

상단 - header

<%@ 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>

	<header>
		<h3>header파일</h3>
		<nav>
			<Ul>
				<li>목록</li>
				<li>목록</li>
			</Ul>
		</nav>
	</header>

본문 - section

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

	
	<%@ include file="include_header.jsp" %>
	
	<section>
		<h3>본문입니다</h3>
	</section>
	
	<%@ include file="include_footer.jsp" %>

</body>
</html>

하단 - footer

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


	<footer>
		<h3>Copyright 2022.11.29</h3>
	</footer>

</body>
</html>

로 파일을 나누어 만든다. ( 얘네들을 시멘틱 태그 또는 fragment(조각)라고도 함)