5월 ~ 7월) 웹/servlet

50Day - 25_animate/ &&[servlet] HelloServlet & web

첼로그 2023. 6. 14. 18:04

 

25_animate

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<style type="text/css">
#box {
	width: 150px;
	height: 150px;
	background: orange;
	margin-bottom: 20px;
	position: relative;
	top: 0;
	left: 0;
}
</style>
</head>
<body>
	<h1>Effect - animate</h1>
	<hr>
	<select id="easing">
		<option>linear</option>
		<option>easeInCubic</option>
		<option>easeOutCubic</option>
		<option>easeInBack</option>
		<option>easeOutBack</option>
		<option>easeInElastic</option>
		<option>easeOutElastic</option>
	</select>
	<hr>
	<div id="box"></div>
	<button type="button" id="left">◀</button>
	<button type="button" id="right">▶</button>
	
	<script type="text/javascript">
	/*
	$("#right").click(function() {
		//태그의 left 스타일 속성값을 반환받아 변수에 저장
		// => parseInt() 함수를 사용하여 [px] 문자값을 제거하여 숫자값만 변수에 저장 
		var x=parseInt($("#box").css("left"));
		//alert("x = "+x);
		x+=50;
		//태그의 left 스타일 속성값을 변경 - 태그 이동
		$("#box").css("left",x);
	});
	*/
	
	$("#left").attr("disabled", "disabled");//태그를 비활성화 처리
	
	$("#left").click(function() {
		//선택자로 검색된 태그(select 태그)의 자식태그(option 태그) 중 선택된 태그의 태그내용을 
		//반환받아 변수에 저장
		var easing=$("#easing").children(":selected").text();
		
		$("#left").attr("disabled", "disabled");//태그를 비활성화 처리
		$("#right").removeAttr("disabled");//태그를 활성화 처리
		
		//$(selector).animate(properties, duration[, easing][, callback]) : 선택자로 검색된
		//태그에 애니메이션 효과를 제공하는 메소드
		// => properties : 태그의 CSS 스타일 속성과 속성값을 Object 객체의 요소로 전달 - 태그 스타일 변경
		// => duration : 애니메이션 효과의 적용시간(ms) 전달 - 태그 스타일이 변화되는 시간
		// => easing : 애니메이션 효과의 적용속도 전달 - https://easings.net 사이트 참조 - jquery-ui 라이브이브 필요
		// => callback : 애니메이션 효과 적용 후 실행될 명령이 작성된 함수
		//$(selector).stop() : 선택자로 검색된 태그에 설정된 애니메이션 효과를 멈추는 메소드
		$("#box").stop().animate({"left":0}, 3000, easing);
	});
	
	$("#right").click(function() {
		var easing=$("#easing").children(":selected").text();
		
		$("#right").attr("disabled", "disabled");//태그를 비활성화 처리
		$("#left").removeAttr("disabled");//태그를 활성화 처리
		
		//$(selector).width() : 선택자로 검색된 태그의 폭을 반환하는 메소드
		$("#box").stop().animate({"left":$(window).width()-170}, 3000, easing);
	});
	</script>
</body>
</html>
Footer
© 2023 GitHub, Inc.
Footer navigation
Terms
Privacy
Security
Status

 

 

 

 

&& [servlet] HelloServlet

 

각각의 위치

 

//3 //4 생략가능.

단, // 5 **중요함!!

// 300 400 500 중요!!

45번째 - response, request 중요함!!

 

 

 

 

 

package xyz.itwill.servlet;

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

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

// Servlet : Server+let 합성어로 웹서버에서 실행되는 간단한 프로그램 - Java Web Server Program
// > Servlet 프로그램은 클라이언트 요청으로 WAS(Web Application Server)에 의해 실행되며 
//실행결과로 웹문서를 동적으로 생성하여 클라이언트에게 응답
// > Servlet 프로그램은 WAS에 의해 관리(생성, 사용, 소멸)
//WAS(Web Application Server) : Web Server(요청과 응답) + Web Container(서블릿 관리)

// 서블릿 프로그램 작성 방법
// 1.HttpServlet 클래스(J2EE >> ApacheTomcat)를 상속받은 자식클래스 작성 - 서블릿 클래스
// > HttpServlet 클래스를 상속받은 자식클래스는 객체 직렬화 클래스로 serialVersionUID 필드를
//선언하는 것을 권장
public class HelloServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	// 2.doGet() 메소드 또는 doPost() 메소드를 오버라이드 선언
	// > 클라이언트에 요청에 대한 처리 명령과 실행결과를 웹문서로 생성하는 명령을 작성하는 
	// 메소드 - 요청 처리 메소드 : WAS에 의해 자동 호출되는 메소드
	// > doGet() : 클라이언트가 서블릿 프로그램을 GET 방식으로 요청한 경우 호출되는 메소드
	// > doPost() : 클라이언트가 서블릿 프로그램을 POST 방식으로 요청한 경우 호출되는 메소드
	// doGet() 메소드 또는 doPost() 메소드 대신 service() 메소드를 오버라이드 선언 가능
	// > service() 메소드 : 클라이언트가 서블릿 프로그램을 모든 방식으로 요청한 경우 호출되는 메소드
	// > doGet() 메소드 또는 doPost() 메소드보다 service() 메소드의 호출 우선순위가 높게 설정
	// WAS 프로그램에 의해 요청 처리 메소드가 호출될 때 메소드 매개변수에는 HttpServletRequest
	// 객체(request 객체)과 HttpServletResponse 객체(response 객체)가 전달되어 저장
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// HttpServletRequest 객체 : 리퀘스트 메세지(요청 관련 정보)를 표현한 객체
		// HttpServletResponse 객체 : 리스폰즈 메세지(응답 관련 정보)를 표현한 객체
		
		
		// 3. (생략가능) 클라이언트 요청에 대한 실행결과를 저장하여 응답하기 위한 파일형태(MimeType)를 변경 
		// > 리스폰즈 메세지의 몸체부에 저장될 파일형태 설정
		// HttpServletResponse.setContentType(String mimeType[;charset=encoding]) 메소드 호출
		// > 리스폰즈 메세지의 몸체부에 저장될 파일형태를 변경하는 메소드
		// > 응답 파일이 문서파일인 경우 문자형태(CharacterSet - Encoding) 설정
		//기본 응답 파일 형식 : text/html;charset=iso-8859-1 >> 서유럽어로 만들어진 HTML 문서로 응답
		response.setContentType("text/html;charset=utf-8");//한글로 만들어진 HTML 문서로 응답
		
		
		// 4.(생략가능) 응답파일을 생성하기 위한 출력스트림을 반환받아 저장
		// HttpServletResponse.getOutputStream() : 응답파일을 생성하기 위한 출력스트림(ServletOutputStream 객체)을 반환하는 메소드
		// > 원시데이타(1Byte)를 전달해 그림,소리,동영상 파일등과 같은 이진파일을 생성하기 위한 출력스트림
		// HttpServletResponse.getWriter() : 응답파일을 생성하기 위한 출력스트림(PrintWriter 객체)을 반환하는 메소드
		// > 문자데이타(2Byte)를 전달해 HTML,XML 파일등과 같은 문서파일을 생성하기 위한 출력스트림
		PrintWriter out=response.getWriter();
		
		
		// **5. (중요함) 클라이언트 요청에 대한 처리 명령 작성 및 출력스트림을 이용한 응답파일 생성
		// > 클라이언트 요청에 대한 처리 명령에 필요한 값은 HttpServletRequest 객체로부터 제공받아 사용
		//PrintWriter.println(String str) : 출력스트림으로 문자열을 전달하는 메소드 - 응답파일 작성
		out.println("<!DOCTYPE html>");
		out.println("<html>");
		out.println("<head>");
		out.println("<meta charset='UTF-8'>");
		out.println("<title>Servlet</title>");
		out.println("</head>");
		out.println("<body>");
		out.println("<h1>서블릿(Servlet)</h1>");
		out.println("<hr>");
		out.println("<p>Hello, Servlet!!!</p>");
		out.println("</body>");
		out.println("</html>");
		
		
		//6.서블릿 클래스를 서블릿(웹프로그램)으로 실행되도록 설정
		// > [web.xml] 파일에서 서블릿 클래스를 서블릿으로 등록하고 서블릿을 요청할 수 있는 URL 주소를 매핑 설정
		//클라이언트가 매핑된 URL 주소의 서블릿을 요청하면 WAS 프로그램은 서블릿에 대한 클래스를
		//객체로 생성하여 요청 처리 메소드를 호출하고 처리결과를 클라이언트에게 전달하여 응답
		// > 클라이언트가 요청한 서블릿에 대한 클래스가 이미 객체로 생성된 경우 요청 처리 메소드만 호출하여 실행
	}
}

 

 

 

& web

<?xml version="1.0" encoding="UTF-8"?>
<!-- web.xml : 웹프로젝트가 WAS 프로그램에 의해 웹자원(WebContext)으로 변환될 때 필요한 정보를 
제공하기 위한 환경설정파일 - XSD(XML Schema Description) 파일에 선언된 태그(엘리먼트)만 사용 가능 -->
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
	<!-- display-name : 프로젝트 이름을 설정하기 위한 엘리먼트 -->
	<display-name>servlet</display-name>
	
	<!-- servlet : 서블릿 클래스를 서블릿으로 등록하기 위한 엘리먼트 -->
	<servlet>
		<!-- servlet-name : 서블릿을 구분하기 위한 이름(고유값)를 설정하기 위한 엘리먼트 -->
		<servlet-name>hello</servlet-name>
		<!-- servlet-class : 서블릿으로 등록될 서블릿 클래스를 설정하기 위한 엘리먼트 -->
		<servlet-class>xyz.itwill.servlet.HelloServlet</servlet-class>
	</servlet>
	
	<!-- servlet-mapping : 클라이언트가 요청하여 실행하기 위한 서블릿의 요청 URL 패턴을 
	매핑하기 위한 엘리먼트 -->
	<servlet-mapping>
		<!-- servlet-name : 요청 URL 패턴에 의해 실행될 서블릿의 이름을 설정하기 위한 엘리먼트 -->
		<servlet-name>hello</servlet-name>
		<!-- url-pattern : 서블릿을 요청하기 위한 요청 URL 패턴을 등록하기 위한 엘리먼트 -->
		<url-pattern>/hello.itwill</url-pattern>
	</servlet-mapping>
	
	<!-- welcome-file-list : welcome-file 엘리먼트 목록을 설정하기 위한 엘리먼트 -->
	<welcome-file-list>
		<!-- welcome-file : 클라이언트가 서버에 접속하여 웹프로그램을 요청하지 않은 경우 기본적으로  
		실행되어 응답될 웹문서의 이름을 설정하기 위한 엘리먼트 - 순차적으로 적용 -->
		<welcome-file>index.html</welcome-file>
		<welcome-file>index.jsp</welcome-file>
		<welcome-file>index.htm</welcome-file>
		<welcome-file>default.html</welcome-file>
		<welcome-file>default.jsp</welcome-file>
		<welcome-file>default.htm</welcome-file>
	</welcome-file-list>
</web-app>

 

 

 

 

저작자표시 비영리 (새창열림)