JSP(Java Server Page)란 ?

Server(web)를 통해서 Client form(document form (== 웹브라우저 전체))을 만들어 내는 코드이다.

Html안에 Java코드 사용한다. (Html과 Java가 섞여서 가독성이 좋지 못하다.)

Client에게 요청이 오면 Web Server를 거쳐 Web container에 들어가서 jsp파일이나 html파일에서 데이터를 찾아서 반환한다.

 

JSP 기본 문법 정리

문법명 형식 설명
주석문 <%--  --%> 1줄 주석문은 없다. 
html주석문 ( <!--  --> )도 사용가능하다.

page 지시문









<%@    %>








인코딩 클래스 가져 오기, 세션 관리 등 JSP 프로그램 전체의 동작에
관한 정의합니다.

예시) <@ page 속성 명 = "속성 값"속성 명 = "속성 값"... %>

속성명 속성설명
contentType JSP 프로그램의 응답시의 MIME 타입과 문자 인코딩을 지정합니다. 
session  HTTP 세션을 사용할지 여부를 지정합니다. (기본값 True)
pageEncoding JSP 프로그램을 Servlet 프로그램으로 변환 할 때의 문자 인코딩을 지정합니다. 
language JSP 프로그램에서 사용하는 언어를 지정합니다.
import     JSP 프로그램에서 가져올 클래스 패키지를 지정합니다.
errorPage   JSP 프로그램에서  잡을 수 없는 예외를 처리 할 페이지를 지정합니다.
autoFlush
버퍼에 데이터가 쌓여 때 자동으로 클라이언트에 데이터를 보낼 것인지를 지정합니다.
buffer
클라이언트로 전송하는 데이터를 버퍼링 할 때 버퍼의 용량을 지정합니다. 용량은 kb로 지정합니다. 기본 크기는 8kb입니다. 버퍼하지 않으면 none을 지정합니다.
선언부 <%!      %> 전역변수, class, function를 선언하는 영역이다.
변수, 메소드 선언시 반드시; (세미콜론)가 필요합니다.
선언에서 선언 된 변수, 메소드는 처음 요청이있을 때 한 번만 호출됩니다. 
따라서 계속되는 요구에도 변수의 값은 초기화되지 않고, JSP 컨테이너 (Tomcat )
다시 시작할 때까지 값이 유지됩니다.
위치는 관계없지만 대부분 문서 윗쪽에 작성한다.
scriptlet <%       %> 실제 코드들이 들어가있는 부분이다.( == 코드부)
스크립틀릿은 JSP 태그에서는 표현할 수없는 작업을 Java 코드를 작성하고 자유로운
작업을 수행하는 경우에 사용합니다. 
Java 코드를위한 각 코드에는 반드시; (세미콜론)가 필요합니다.
scriptlet에서 선언 된 변수는 요청 때마다 호출됩니다. 
따라서 그 요청이 있을 때마다 변수의 값이 초기화됩니다.
표현식 <%=     %> Java 코드를 작성하고 그 결과를 표시합니다. 
따라서 실행 결과를 반환 코드 밖에 기술할 수는 없습니다. 
실행 결과를 리턴하지 void 메소드나 변수의 선언만 식으로 설명 할 수 없습니다. 
표현식에서는 ; (세미콜론)을 작성하지 않습니다.

 

내장(암시)객체

new(생성)을 하지 않고 바로 사용이 가능한 객체를  의미합니다.

 

자주 사용하는 내장객체 / 메소드 정리

객체명 객체 설명 메소드 메소드 설명
request 

javax.servlet.http.HttpServletRequest
인터페이스 객체 변수 입니다. 
클라이언트에서 전송 된 매개 변수 데이터 헤더 정보, Cookie를 취득 할 때 사용합니다. 


getParameter (String) 파라미터 값을 받을 때 사용합니다.
매개 변수가없는 경우는 Null이 반환됩니다.
getParameterValues​​ (String) 파라미터 값들을 받을 때 사용합니다.
String 형의 배열로 반환됩니다.
매개 변수가없는 경우는 Null이 반환됩니다.
 setAttribute(String name, Object value)  첫번째 파라미터 데이터 이름, 두 번째 인수에
데이터 값을 지정하고 세션 범위의 데이터 값을
등록합니다. 이미 데이터 이름이 있으면 새로 지정된 데이터 값을 덮어 씁니다.
 getAttribute(String name) 인수에 지정된 데이터 이름에 해당하는 세션 범위의 데이터 값을 반환합니다. 해당 데이터 이름이없는 경우는
null를 리턴합니다.
response javax.servlet.http.HttpServletResponse
인터페이스 객체 변수입니다.

클라이언트에 헤더 정보, HTTP 상태, Cookie 등을 반환 할 때 사용합니다. 
sendRedirect (String) 인수에 지정된 URL로 리디렉션(이동)합니다.
pageContext

javax.servlet.jsp.PageContext 클래스의 객체 변수입니다. 
이 객체는 JSP에서 사용되는 모든 객체를 관리 할 수 있습니다. 

forward (String) 인수에 지정된 URL에 요청을 전송합니다.처리는 전송 된 URL에
인계됩니다. URL은 상대 경로로 지정할 수 있습니다. 
forward 메서드 전에 어떤 값을 출력하는 처리를 해서는
안됩니다. 
값을 출력하는 작업을 수행하는 경우는 예외가 슬로우됩니다.
include (String) 인수에 지정된 URL의 리소스를 실행하고 처리 결과를 전송 바탕으로 반환합니다.URL은 상대 경로로 지정할 수 있습니다.
session

암시 객체 sessionjavax.servlet.http.HttpSession 인터페이스 객체 변수입니다. 
클라이언트와 서버 간의 세션 관리에 사용합니다. 
 page 지시어의 session 속성에 false가 설정되어있는 경우이 암시 객체를 사용 할 수 없습니다.
 setAttribute(String name, Object value)  첫번째 파라미터 데이터 이름, 두 번째 인수에
데이터 값을 지정하고 세션 범위의 데이터 값을
등록합니다. 이미 데이터 이름이 있으면 새로 지정된 데이터 값을 덮어 씁니다.
getAttribute (String) 인수에 지정된 데이터 이름에 해당하는 세션 범위의 데이터 값을 반환합니다. 해당 데이터 이름이없는 경우는
null를 리턴합니다.
out javax.servlet.jsp.JspWriter 클래스의 객체 변수입니다. 
브라우저에 출력이나 버퍼링 등 주로 출력 계의 메소드가 정의되어 있습니다. 
println (var) 인수에 지정된 값과 OS 환경에 맞게 개행 문자를 출력합니다.

 

session이란 ? 

HTTP 프로토콜을 이용하는 웹 환경에서 상태를 유지 방법이다.

HTTP는 새로고침을 할 때마다 새로운 HTTP가 생성이 되는데, 예를 들어 어떠한 페이지에서 로그인을 했을 시 다음 화면으로 넘어갈 때 로그인이 바로 풀리지 않는다. 그 이유는 세션에 로그인 정보가 저장되어 있기 때문이다.

저장공간은 server이며, 저장기한 등을 설정할 수 있다.

 

 

session사용 예시

html 예시

<body>

<a href="hello">hello servlet</a>

</body>

java 예시

package serv;

import java.io.IOException;
import java.io.PrintWriter;

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 javax.servlet.http.HttpSession;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("text/html; charset=utf-8");
		
		PrintWriter pw = resp.getWriter();
		
		pw.println("<html>");
		
		pw.println("<head>");
		pw.println("<title>제목</title>");
		pw.println("</head>");
		
		pw.println("<body>");
	
		HttpSession session = req.getSession();
		
		session.setMaxInactiveInterval(2 * 60 * 60);
		session.setAttribute("member", "abc123");
		String member = (String)session.getAttribute("member");
		
		pw.println("<p>session정보:" + member + "</p>");
        
		session.invalidate();
		
		pw.println("</body>");
		pw.println("</html>");
		pw.close();
	}
}

 

HttpSession 

session사용을 위한 객체

HttpSession 메소드

getSession() getSession(true) → default
session object가 존재하면, 현재 HttpSession을 반환한다
존재하지 않으면 새로 생성한다.
getSession(false)
session object가 존재하면, 현재 HttpSession을 반환한다
존재하지 않으면 null을 반환한다.
setMaxInactiveInterval() 저장기한(유효시간)을 설정한다. 
기한계산방법
- 1년 : 365 * 24 * 60 * 60
- 10분 : 10 * 60
setAttribute(String name, Obejct value) 세션에 데이터를 저장한다.
name은 저장할 데이터의 변수명, value는 저장값이 된다.
getAttribute(String name) name에 저장한 value를 가져온다. 형변환은 필수이다.
invalidate 세션을 종료합니다.

 

실행화면

클릭 후 실행화면

sendRedirect란?

java Servlet에서 이동을 위한 메소드이다. 오직 이동만 한다. 데이터를 가지고 가지 않는다.

	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.sendRedirect("sample");
	}

 

forward란?

java Servlet에서 이동을 위한 메소드이다.  클라이언트에게 받은 데이터를 가지고 이동한다.

	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		RequestDispatcher rd = req.getRequestDispatcher("sample");
		rd.forward(req, resp);
	}        

forward 사용예시

 

html 예시

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

 <h1>정보를 입력해주세요.</h1>
 <form action="packing" method="get">
 이름 : <input type="text" name="name" size="5"><br><br>
 연령대 :
 <select name="age">
 	<option value="10대">10대</option>
 	<option value="20대">20대</option>
 	<option value="30대">30대</option>
 	<option value="40대">40대</option>
 	<option value="50대">50대</option>
 </select><br><br>
 성별 :  
 <input type="radio" name="trans" value="남자">남자
 <input type="radio" name="trans" value="여자">여자<br><br>
 취미 : 
 <input type="checkbox" name="hobby" value="독서">독서
 <input type="checkbox" name="hobby" value="코딩">코딩
 <input type="checkbox" name="hobby" value="영화감상">영화감상
 <input type="checkbox" name="hobby" value="게임">게임
 <input type="checkbox" name="hobby" value="운동">운동<br><br>
 
 <input type="submit" value="제출">
 </form> 
 
</body>
</html>

Java Servlet 예시1 (forward사용)

package server;

import java.io.IOException;

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 dto.Dto;
@WebServlet("/packing")
public class Packing extends HttpServlet{

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String name = req.getParameter("name");
		String age = req.getParameter("age");
		String trans = req.getParameter("trans");
		String[] hobby = req.getParameterValues("hobby");
		
		// 콘솔에 찍어보기
		System.out.println(name);
		System.out.println(age);
		System.out.println(trans);
		
		if(hobby != null) {
			for (int i = 0; i < hobby.length; i++) {
				System.out.println(hobby[i]);
			}
		}
		
		Dto dto = new Dto(name, age, trans, hobby); // 데이터 연결객체
		req.setAttribute("data", dto); //포장하기 포장박스 : data
		
		//resp.sendRedirect("sample"); 사용시 데이터는 가지고 가지 않습니다.
        
		// 이민가기
		RequestDispatcher rd = req.getRequestDispatcher("sample");
		rd.forward(req, resp);
	}
}

checkbox는 데이터를 배열로 넘겨주기 때문에 getParameterValues를 사용하여야 한다.


Java Dto 예시

package dto;

public class Dto {
	private String name;
	private String age;
	private String trans;
	private String hobby[];
	
	Dto(){
		
	}

	public Dto(String name, String age, String trans, String []hobby) {
		super();
		this.name = name;
		this.age = age;
		this.trans = trans;
		this.hobby = hobby;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getAge() {
		return age;
	}

	public void setAge(String age) {
		this.age = age;
	}

	public String getTrans() {
		return trans;
	}

	public void setTrans(String trans) {
		this.trans = trans;
	}

	public String[] getHobby() {
		return hobby;
	}

	public void setHobby(String[] hobby) {
		this.hobby = hobby;
	}
}

Java Servlet 예시2

package server2;

import java.io.IOException;
import java.io.PrintWriter;

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 dto.Dto;
@WebServlet("/sample")
public class Unpacking extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("text/html; charset=utf-8");
		
		PrintWriter pw = resp.getWriter();
		
		pw.println("<html>");
		
		pw.println("<head>");
		pw.println("<title>제목</title>");
		pw.println("</head>");
		
		pw.println("<body>");
		
		pw.println("<h1>회원정보</h1>");
		
		// 출력하기
		Dto dto = (Dto) req.getAttribute("data");
		pw.println("<h3>이름 : " + dto.getName() + "</h3>");
		pw.println("<h3>연령대 : " + dto.getAge() + "</h3>");
		pw.println("<h3>성별 : " + dto.getTrans() + "</h3>");
		
		if(dto.getHobby() != null) {
			pw.print("<h3>취미 : ");
			for (int i = 0; i < dto.getHobby().length; i++) {
				if(i < dto.getHobby().length-1)
						pw.print(dto.getHobby()[i]+", ");
				else if(i == dto.getHobby().length-1) 
					pw.print(dto.getHobby()[i]);	
			}
		}
		pw.println( "</h3>");	
			
		pw.println("</body>");
			
		pw.println("</html>");
		pw.close();
	
	}
}

위 예시는 html파일에 작성을 하고 제출을 하면 Packing class에서 데이터를 받고 forward를 사용하여 Unpacking class에서 데이터를 출력하는 예시이다. 위에 언급대로 Packing class에서 sendRedirect 사용할 경우 페이지 이동은 하되, 데이터는 가져가지 않는다. 그렇기 때문에 forword를 사용한다.

 

실행화면

html 화면

 

Packing class 이클립스 console화면

 

Unpacking class 실행화면

 

get과 post의 차이점

Servlet 데이터 통신 방식
GET POST
<a>, <form>, <location.href> 사용가능 <form>에서만 사용가능.
전송할 때 입력결과를 URL 뒤에 name=value 형태로 전송하고, 여러 개일때는 '&'으로 연결한다. 전송할 때 입력결과가 TCP/IP Protocal의 HEAD 영역에 숨겨진 채 전송한다.
전송 데이터는 최대 255자 전송데이터는 무제한
Servlet의 doGet() 호출한다 Servlet의 doPost()를 호출한다
default 전송방식이며, 보안에 취약하다
처리속도가 GET 방식보다 느리고, 보안에 유리하다.

 

Web에서 Web으로 입력값 전달하기

 

html 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>IO Test</h1>
<form action="test" method="get">
<textarea name="text" rows="5" cols="30">
</textarea><br>
<input type="submit" value="get제출"> 
</form>
<form action="test" method="post">
<textarea name="text" rows="5" cols="30">
</textarea><br>
<input type="submit" value="post제출"> 
</form>
</body>
</html>

Java 예시

package sample2;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/test")
public class Test extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("text/html; charset=UTF-8");
		
		String text = req.getParameter("text");
		
		PrintWriter pw = resp.getWriter();
		
		pw.println("<html>");
		
		pw.println("<head>");
		pw.println("<title>제목</title>");
		pw.println("</head>");
		pw.println("<body>");
				
		pw.println("<h1>GET 방식</h1>");
		pw.println("<p>"+ text+"</p>");
		
		pw.println("</body>");
		pw.println("</html>");
		pw.close();
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		req.setCharacterEncoding("utf-8");
		resp.setContentType("text/html; charset=UTF-8");
		
		String text = req.getParameter("text");
		
		PrintWriter pw = resp.getWriter();
		
		pw.println("<html>");
		
		pw.println("<head>");
		pw.println("<title>제목</title>");
		pw.println("</head>");
		pw.println("<body>");
				
		pw.println("<h1>POST 방식</h1>");
		pw.println("<p>"+ text+"</p>");
		
		pw.println("</body>");
		pw.println("</html>");
		pw.close();
	}
}

 

설명

웹에서 웹으로 출력시, html문서의 구조를 그대로 작성해주어야한다.

@WebServlet("/url")

@WebServlet("/test")에 test는 html는 form tag의 url이다.

web.xml문서없이 Servlet실행이 가능하다.

HttpServletRequest

웹브라우저가 요청할 때 정보를 가져오는 객체

HttpServletResponse

웹브라우저에게 응답을 하기위한 객체

HttpServletRequest.setContentType(" ")

메소드 안의 문자열은 출력될 html의 인코딩 방식을 지정한다.

HttpServletRequest.getParameter("name명")

html의 name명을 작성할 시 해당tag의 value을 얻어온다.

HttpServletResponse.getWriter()

쓰기를 통해 응답을 하는 메서드

HttpServletRequest.setCharacterEncoding("utf-8")

입력된 데이터의 인코딩을 UTF-8로 변경한다.

Post방식은 위 메소드가 있어야 한글이 깨지지 않는다.

 

 

실행화면

 

console에서 java메소드 실행시키기 예시

(1) html, web.xml, java 총 3개의 파일이 필요하다.

(2) java servlet에서 @WebServlet사용시 html, java 2개의 파일이 필요하다.(업그레이드가 되면서 web.xml 파일이 생략가능)

 

 

(1)방법을 예시로 들어보겠다.

Html 예시

<h2>Servlet 기본</h2>

<form action="location" method="get">
	<input type="submit" value="Get방식">
</form>

<form action="location" method="post">
	<input type="submit" value="Post방식">
</form>	

action

값으로 적힌 url, 객체 등.. 이동해준다.

method

form태그 데이터 전송시의 통신방식, defualt값은 get방식이다.

submit

데이터를 전송하기 위한 전송버튼


web.xml예시

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                      http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
  version="4.0">

<servlet>
	<servlet-name>hello</servlet-name>
	<servlet-class>sample1.Hello</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>hello</servlet-name>
	<url-pattern>/location</url-pattern>
</servlet-mapping>
</web-app>

 

위 예시는 가장 기초적인 문법 예시이다.

servlet-name

servlet, servlet-mapping안의 servlet-name 문자열이 같아야 한다.

servlet-class

java파일의 Package명.class명을 의미한다.

url-pattern

연결할 url을 작성한다.

 


Java 예시

package sample1;

import java.io.IOException;

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

public class Hello extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("Hello doGet()");
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("Hello doPost()");
	}
}

 

Java Servlet의 조건사항

상속 HttpServlet(== 부모class)
class의 접근제한자 public
import javax.servlet.http.HttpServlet 
전송방식에 따른 메소드 선언 doGet(), doPost()
메소드의 매개변수 HttpServletRequest(요청을 위한 객체)
HttpServletResponse(응답을 위한 객체)

doGet()

html파일 form tag의 method="get"이였을 때 실행된다.

doPost()

html파일 form tag의 method="post"이였을 때 실행된다.

 

 

실행화면

Get방식 버튼을 눌렀을 때 페이지가 넘어가면서 이클립스 콘솔창에 Hello doGet() 출력이 되고,

Post방식 버튼을 눌렀을 때 페이지가 넘어가면서 이클립스 콘솔창에 Hello doPost()이 출력이 된다.

 

 

(2)방법을 예시로 들어보겠다.

Html 예시

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

<h2>Servlet 기본</h2>

<form action="location2" method="get">
	<input type="submit" value="Get방식">
</form>

<form action="location2" method="post">
	<input type="submit" value="Post방식">
</form>	

</body>
</html>

Java 예시

package sample2;

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;

@WebServlet("/location2")
public class Hello extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("Hello doGet()");
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		System.out.println("Hello doPost()");
	}
}

class선언 전 @WebServlet("/url") 작성 시 xeb.xml파일 없이도 Servlet이 실행된다.

실행화면은 위와 동일하다.

Servlet이란?

자바 서블릿은 자바를 사용하여 웹페이지를 동적으로 생성하는 서버 측 프로그램 혹은 그 사양을 말하며, 흔히 "서블릿"이라 불린다. 자바 서블릿은 웹 서버의 성능을 향상하기 위해 사용되는 자바 클래스의 일종이다. 위키백과

 

Servlet = Server + Applet

Model2에 주로 사용을 한다.

Servlet은 언어가 Java이다.

java코드 안에 Html코드를 사용한다.

 

web.xml파일 생성하기(이클립스)

Dynamic Web Project 생성후 Project 우클릭

Java EE Tools → Generate Deployment Descriptor Sub 클릭

WEB-INF 폴더를 클릭하면 web.xml파일이 생성된다.

web.xml은 정해여진 이름이라 수정을 하면 안 된다.

 

빨간박스 체크 내용은 굳이 없어도 된다.

web-app태그 안에서 구문을 작성한다.

서버란?

서버는 클라이언트에게 네트워크를 통해 정보나 서비스를 제공하는 컴퓨터 시스템으로 컴퓨터 프로그램 또는 장치를 의미한다. 특히, 서버에서 동작하는 소프트웨어를 서버 소프트웨어라 한다. 주로 리눅스 등의 운영 체제를 설치한 대형 컴퓨터를 쓰지만, 그렇지 않은 경우도 있다. 위키백과

 

 

서버와 클라이언트는 별개이다.

특정 클라이언트가 접속을 하기 전까지 서버는 항상 구동(동작)이 되어 있어야 한다.

스레드(thread)가 계속 체크를 하고 있다.


톰캣에서 Start == 서버를 켜놓고 이클립스 run버튼이 아닌 url로 접속(요청)한다.

잘 켜지면 서버가 응답을 해준 것이다.


 

Web Application Server(WAS)

WAS는 Web server, Contianer로 나눠진다.

 

Web server

계속 동작하고 있다.

 

Contianer (창고)

Contianer의 영역 : Servlet, jsp

Servlet을 크게 나눈다면 영역이 2개 : GET, POST

jsp 영역의 구분이 없어 자유롭게 사용할 수 있다.

 

request : client(웹브라우저)는 웹서버에 요청한다.

response : 요청을 한걸 찾으러 Contianer로 들어가서 요청을 받은 자료를 찾아서 client에게 응답한다.

'IT > 이것저것' 카테고리의 다른 글

윈도우 cmd 파일명, 경로+파일명 목록 검색  (0) 2022.09.26

여러 가지 함수 사용 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.5.1.min.js"></script>

<style type="text/css">
.aaa {
    color:#F00;
}

.ccc {
    padding:10px;
    border:#000 2px solid;
    background-color: red;
}

.q16_a {
    text-decoration:underline;
    color:#00F;
}

.q19_b{
    text-decoration:overline;
    color:#ff0;
}

#q20 {
    background:#FFF;
    width:100px;
    height:100px;
}

</style>

</head>
<body>

<p id="q01">Hello JQuery</p>

<script type="text/javascript">
$(function () {
	$("#q01").css('color', 'red');	
});
</script>

<p id="q02">Hello JQuery</p>

<script type="text/javascript">
$(function () {
//	$("#q02").css("color", "blue");
//	$("#q02").css("background", "#ffff00");
	
	$("#q02").css({ "color":"blue", "background":"#ffff00" });
});
</script>

<p id="q03"></p>

<script type="text/javascript">
$(function () {
	$("#q03").text("JQuery");	
});
</script>

<p id="q04">하이</p>

<script type="text/javascript">
$(function () {
	$("#q04").html("<a href='#'>안녕하세요</a>");	
});
</script>

<ul id="q05">
	<li>리스트1</li>
	<li>리스트2</li>
    <li>리스트3</li>
</ul> 

<script type="text/javascript">
$(function () {
	$("#q05").addClass("aaa");	
});
</script>

<ul id="q06">
    <li>리스트1</li>
    <li>리스트2</li>
    <li>리스트3</li>
</ul> 

<script type="text/javascript">
$(function () {
	$("#q06 li").remove();	
});
</script>

<p id="q07" style="color:red">hello world</p>

<p id="q08"></p>

<script type="text/javascript">
$(function () {
	let color = $("#q07").css("color");
	$("#q08").text(color);
});
</script>

<p id="q09">반드시</p>

<script type="text/javascript">
$(function () { //prepend 앞쪽에 추가
	$("#q09").prepend("나는 성공한다");	
});
</script>

<p id="q10">나는 성공한다. 내 이름은 </p>

<script type="text/javascript">
$(function () { // append 뒤쪽에 추가
	$("#q10").append("윤필용");
});
</script>

<ul id="q11">
	<li>커피</li>
</ul>

<script type="text/javascript">
$(function () {
	$("#q11 li").before("<li>홍차</li>");	
});
</script>

<ul id="q12">
	<li>커피</li>
    <li>카푸치노</li>
</ul>

<script type="text/javascript">
$(function () {
	//$('#q12 li').after('<li>홍차</li>'); //이렇게 하면 커피뒤에도 추가가되고, 카푸치노 뒤에도 추가가 된다.
	//.eq(-1).after : 같은게 없도록 추가  
	$("#q12 li").eq(-1).after("<li>홍차</li>");	
});
</script>




<p id="q13">최선을 다해서</p>

<script type="text/javascript">
$(function () { // wrap: p태그를 div태그로 감싼다.
	$("#q13").wrap("<div class='ccc'></div>");	
});
</script>

<div class="ccc">
    <p id="q14">최선을 다해서</p>
</div>

<script type="text/javascript">
$(function () { // unwrap: 감싼걸 벗긴다.
	$("#q14").unwrap('div.ccc');
})
</script>

<p class="q15">가가가</p>
<p>나나나</p>
<p class="q15">다다다</p>
<p>라라라</p>
<p class="q15">마마마</p>

<script type="text/javascript">
$(function () {
	$("p.q15").replaceWith('<p>xxx</p>');	
});
</script>

<p class="q16">Q16</p>

<script type="text/javascript">
$(function () {
	//$('.q16').addClass('q16_a');
	$("p.q16").attr("class", "q16_a");
});
</script>


<p class="q17">
	<a href="#">aaa</a>
</p>
<p>
	<a href="#">bbb</a>
</p>
<p class="q17">
	<a href="#">ccc</a>
</p>
<p>
	<a href="#">ddd</a>
</p>
<p class="q17">
	<a href="#">eee</a>
</p>

<script type="text/javascript">
$(function () { // removeAttr 속성삭제
	$("p.q17 a").removeAttr('href');
});
</script>

<p class="q18">
	<a href="#">AAA</a>
</p>
<p>
	<a href="#">BBB</a>
</p>
<p class="q18">
	<a href="#">CCC</a>
</p>
<p>
	<a href="#">DDD</a>
</p>
<p class="q18">
	<a href="#">EEE</a>
</p>

<script type="text/javascript">
$(function () {	
	$("p.q18 a").attr("target", "_blank");
});
</script>


<p class="q19_a">q19</p>

<script type="text/javascript">
$(function () {
	$(".q19_a").toggleClass("q19_b");
});
</script>

<p id="q20">q20</p> 

<script type="text/javascript">
$(function () {	 // offset : 위치설정 x축, y축 좌표..
	$("#q20").offset({ left:100, top:0  });
});
</script>

</body>
</html>

 

짤막한 설명..(힘들다)

prepend : 앞쪽에 추가

append : 뒤쪽에 추가

eq(-1).after : 같은게 없도록 추가

after : 선택된 요소 안의 모든 요소 뒤에 추가

wrap :  감싼다

unwrap : 감싼 걸 벗긴다.

removeAttr : 속성 삭제

offset : 위치 설정 x축, y축 좌표..

td elemant에 문자열을 치환하도록 하라.

이름을 마우스 클릭하면 alert창에 이름이 출력되도록 하라

<button type="button" id="mbtn">남자부</button>
<button type="button" id="wbtn">여자부</button>

<table border="1">
<tr>
	<th></th><th>성명</th><th>시간</th>
</tr>
<tr>
	<th>우승</th><td></td><td></td>
</tr>
<tr>
	<th>2위</th><td></td><td></td>
</tr>
<tr>
	<th>3위</th><td></td><td></td>
</tr>
</table>
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
let womam = [
	["", ""],
	["성춘향", "01:06:11"],
	["향단이", "01:07:25"],
	["심청이", "01:08:34"]
];

let man = [ 
	["", ""],
	["김철수", "01:06:11"],
	["일지매", "01:06:12"],
	["홍길동", "01:06:15"]
];

$(document).ready(function() {
	$("#mbtn").click(function() {
		for(i=0;i<man.length; i++){
			for(j=0; j<man[i].length; j++){
				$("tr:eq(" + i + ") td:eq(" + j + ")").html(man[i][j]);
			}
		}
	}); // 
	
	$("#wbtn").click(function() {
		
		for(i=0;i<man.length; i++){
			for(j=0; j<man[i].length; j++){
				$("tr:eq(" + i + ") td:eq(" + j + ")").html(womam[i][j]);
			}
		}
	});
	
	$("td").click(function () {
		let val = $(this).text();
		alert(val);
	});	
});
</script>

 

설명

td태그의 값을 빈 값으로 설정해주고, sacrip안에서 배열을 선언해준다. 각 버튼을 눌렀을 때 그에 맞는 값이 들어가도록 이중 for문을 사용한다.

$("tr:eq(" + i + ") td:eq(" + j + ")").html(man[i][j])

예를 들어 i=1, j=0일 경우 ("tr:eq(1) td:eq(0)").html(man[1][0]) : tr태그 1번지(index) 안의 td태그 0번지에 man[1][0](==김철수)의 값이 들어간다. 

 

클릭 시 td태그의 this(td태그에서 클릭을 당한 요소)의 text를 경고장에 출력된다.

요소의 생성 및 삽입 append사용, removeAttr 사용 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h2>이미지 자동 삽입</h2>
<p>클릭시 이미지 삭제됩니다.</p>
<script type="text/javascript">
$(document).ready(function() {
	for(i=1; i<=9; i++){ //.attr().attr()연달아 사용할 수 있다.
		let img = $("<img>").attr({'src': './image/photo_'+i+'.jpg',
							"class":"photo"});
	$("body").append(img);
	}
	$('.photo').click(function() {
		$(this).removeAttr("src");
	})
});
</script>
</body>
</html>

 

설명

우선 이미지명이 photo_1~9까지의 이미지가 9개가 있다고 가정한다.

연속되는 이미지 명이기 때문에 for문을 사용하여 img tag에 scr값과 class를 추가하여 body tag 밑에 생성한다.

클릭 시 removeAttr()함수를 사용하여 scr를 삭제한다.

removeAttr() : 선택된 요소의 속성을 삭제한다.

+ Recent posts