22-04-08(금) 050일차 [HTML, CSS, JSP] 어제 했던 선택자 부분 보완 및 추가와 JSP 개요

국비지원교육 (22.01-22.07)/강의노트

22-04-08(금) 050일차 [HTML, CSS, JSP] 어제 했던 선택자 부분 보완 및 추가와 JSP 개요

옌炎 2022. 5. 24. 13:59

728x90

수업내용

1교시 (09:30-10:20)

css_09_selector3.html - 어제 내용 복습 및 내용 보완

<!DOCTYPE html>
<html>
<head>
	<meta charset="EUC-KR">
	<title>문서의 동적 구성</title>
	<script>
		function createDIV() {
			
			var obj = document.getElementById("parent_p");
			// alert("obj >>> : " + obj); 
			/*
				getEmelentById가 parent_p이면 [object HTMLParagraphElement]
				getEmelentById가  parent_body이면 [HTMLBodyElement]
			*/
			
			var newDIV = document.createElement("div");
			// alert("newDIV >>> : " + newDIV);
			/* newDIV >>> : [object HTMLDivElement] */
			
			// <div></div>
			newDIV.innerHTML = "새로 생성된 DIV입니다.";
			// innerHTML : XHTML 에서 사용하던 프로퍼티, 태그랑 문자를 같이 사용 할 수 있다, HTML 추가
			// <div>새로 생성된 DIV입니다.</div>
			newDIV.setAttribute("id", "myDiv");
			// <div id="myDiv">새로 생성된 DIV입니다.</div>
			newDIV.style.backgroundColor = "yellow";
			// <div id="myDiv" style="background-color:yellow">새로 생성된 DIV입니다.</div>
			
			obj.appendChild(newDIV);
			// <p id="parent_p">
			//    <div id="myDiv" style="background-color:yellow">새로 생성된 DIV입니다.</div>
			// </p>
			
			newDIV.onclick = function() {
				var p = this.parentElement; // 부모 HTML 태그 요소
				p.removeChild(this); // 자신을 부모로부터 제거
			};
		}
	</script>
</head>

<body id="parent_body">
	<!-- <input type="text" class="inputClass" name="inputname" id="inputid" value="value"> -->

	<h3>DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제</h3>
	<hr>
	
	<p>
		DOM 트리에 동적으로 객체를 삽입할 수 있습니다.<br>
		createElemnt(), appendChild(), removeChild() 메소드를<br>
		이용하여 새로운 객체를 생성, 삽입, 삭제하는 예제입니다.<br>
	</p>
	<p id="parent_p" style="border:1px solid red">
	<a href="javascript:createDIV()">DIV 생성</a>
</body>
</html>

2교시 (10:30-11:20)

css_09_selector3.html - paragraph와 body에 따라 달라지는 것 확인

<!DOCTYPE html>
<html>
<head>
	<meta charset="EUC-KR">
	<title>문서의 동적 구성</title>
	<script>
		function createDIV() {
			
			var obj = document.getElementById("parent_body");
			// alert("obj >>> : " + obj); 
			/*
				getEmelentById가 parent_p이면 [object HTMLParagraphElement]
				getEmelentById가  parent_body이면 [HTMLBodyElement]
			*/
			
			var newDIV = document.createElement("div");
			// alert("newDIV >>> : " + newDIV);
			/* newDIV >>> : [object HTMLDivElement] */
			
			// <div></div>
			newDIV.innerHTML = "새로 생성된 DIV입니다.";
			// innerHTML : XHTML 에서 사용하던 프로퍼티, 태그랑 문자를 같이 사용 할 수 있다, HTML 추가
			// <div>새로 생성된 DIV입니다.</div>
			newDIV.setAttribute("id", "myDiv");
			// <div id="myDiv">새로 생성된 DIV입니다.</div>
			newDIV.style.backgroundColor = "yellow";
			// <div id="myDiv" style="background-color:yellow">새로 생성된 DIV입니다.</div>
			
			obj.appendChild(newDIV);
			// <p id="parent_p">
			//    <div id="myDiv" style="background-color:yellow">새로 생성된 DIV입니다.</div>
			// </p>
			
			// <body id="parent_body">
			//    <div id="myDiv" style="background-color:yellow">새로 생성된 DIV입니다.</div>
			// </body>
			
			newDIV.onclick = function() {
				var p = this.parentElement; // 부모 HTML 태그 요소
				p.removeChild(this); // 자신을 부모로부터 제거
			};
		}
		
		function createDIV_p() {
			
			var obj = document.getElementById("parent_p");
			
			
			var newDIV = document.createElement("div");

			newDIV.innerHTML = "새로 생성된 DIV입니다.";
			newDIV.setAttribute("id", "myDiv");
			newDIV.style.backgroundColor = "yellow";
			
			obj.appendChild(newDIV);
						
			newDIV.onclick = function() {
				var p = this.parentElement; // 부모 HTML 태그 요소
				p.removeChild(this); // 자신을 부모로부터 제거
			};
		}
	</script>
</head>

<body id="parent_body">
	<!-- <input type="text" class="inputClass" name="inputname" id="inputid" value="value"> -->
	<h3>DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제</h3>
	<hr>
	
	<p>
		DOM 트리에 동적으로 객체를 삽입할 수 있습니다.<br>
		createElemnt(), appendChild(), removeChild() 메소드를<br>
		이용하여 새로운 객체를 생성, 삽입, 삭제하는 예제입니다.<br>
	</p>
	 
	<p id="parent_p" style="border:1px solid red">
	<!--
	<a href="javascript:createDIV()">DIV 생성</a>
	 -->
	<input type="button" value="body 생성" onclick="createDIV()">
	<input type="button" value="p 생성" onclick="createDIV_p()">
</body>
</html>

body는 빨간 박스 안에, p는 밖에 생성

3교시 (11:30-12:20)

css_09_selector4.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>jQuery Selector</title>
	<script  src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		
		$(document).ready(function(){
			
			$("ul li").on("click", function(){
				// $("li").children("span").css({ "color":"red"});
			
				// 지역변수 let
				// 상수 const: 변하지 않을 때
				let li = $("li").children("span");
				alert("let >>> : " + li);
				li.css({"color":"red"});
			});
			
			$(".txt1").on("click", function(){
				// $(".txt1").parent().css({"color":"red"});
			
				let text1 = $(".txt1").parent();
				alert("text1 >>> : " + text1);
				text1.css({"color":"red"});
			});
			
			$(".txt2").on("click", function(){
				// $(".txt2").parent().css({"color":"blue"});
				
				let text2 = $(".txt2").parent();
				alert("text2 >>> : " + text2);
				text2.css({"color":"blue"});
			});
			
			$(".txt3").on("click", function(){
				// $(".txt3").parents().css({"color":"cyan"});
			
				let text3 = $(".txt3").parents();
				alert("text3 >>> : " + text3);
				text3.css({"color":"cyan"});
			});
		
		});
	</script>
	<style type="text/css">			
		
	</style>
</head>
<body>
.children() 자식 요소 선택하기
<hr>
<ul>
	<li>
		<span>list1</span>
	</li>
	<li>list2</li>
	<li><span>list3</span></li>
	<li>list4</li>
</ul>
<br>
.parent() 부모 요소 선택하기
<hr>
<p>
	<span class="txt1">
		text1
	</span>
</p>
<p>
	<span class="txt2">
		text2
	</span>
</p>
<br>
.parents() 부모 요소 선택하기
<hr>
<p><span class="txt3">text3</span></p>		
<br>	
</body>
</html>

css_09_selector5.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>jQuery Selector</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
		
		$(document).ready(function(){
			
			$(".sp").on("click", function(){
				$("span").siblings().css({"color":"red"});
			});
			$(".abc").on("click", function(){
				$("ul").finc(".abc").css({"color":"blue"});
			});
		});
	</script>
	<style type="text/css">
	</style>
</head>

<body>
	.siblings() 형제 요소 선택하기, find() 특정 요소 찾아서 선택하기
	<hr>
	<ul>
		<li><span class="sp">test1</span><em>....siblings1</em></li>
		<li><span class="sp">test2</span><em class="abc">....siblings2</em></li>
		<li><span class="sp">test3</span><em>....siblings3</em></li>
	</ul>
</body>
</html>

4교시 (12:30-13:20)

css_09_selector6.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>jQuery Selector</title>
	<script src="http://code.jquery.com/jquery-latest.min.js"></script>
	<script type="text/javascript">
	
		$(document).ready(function(){
			
			// 시간 숫자 조정
			function numPad(s) {
				
				// 문자열로 바꾸기
				let sV = s + "";
				
				// 길이가 1이면 앞에 0 붙이기
				if (1 == sV.length) {
					sV = '0' + sV;
				}
				return sV;
			}
			
			// setInterval(function(){}, second);
			// setInterval(function(){}, 1000); 1초에 한 번씩 실행하시오
			var time = setInterval(function() {
				
				var now = new Date();
				var hr = now.getHours();
				var min = now.getMinutes();
				var sec = now.getSeconds();
				
				$("span").eq(0).text(numPad(hr));
				$("span").eq(1).text(numPad(min));
				$("span").eq(2).text(numPad(sec));
			}, 1000);
			
			$("li").eq(0).on("click", function(){
				$(".box1").hide();
			});
			$("li").eq(1).on("click", function(){
				$(".box1").show();
			});
			
			$("li").eq(2).on("click", function(){
				$(".box2").fadeOut(2000);
			});
			$("li").eq(3).on("click", function(){
				$(".box2").fadeIn(2000);
			});
		});
	</script>
	<style type="text/css">
		p {
			font: bold 100px arial;
			margin: 50px auto;
			text-align: left;
		}
		
		ul li {
			font-size: 30px;
			margin-left: 50px;
		}
		
		div {
			width: 400px;
			height: 400px;
			margin: 50px;
			float: left;
			font-size: 40px;
			color: #fff;
		}
		
		.box1 { background: blue; }
		.box2 { background: red; }
	</style>
</head>

<body>
	.setInterval()
	<hr>
	<p>
		<span>00</span>:<span>00</span>:<span>00</span>
	</p><br>
	.hide(), .show(), .fadeOut(), fadeIn()
	<hr>
	<ul>
		<li>box1 hide</li>
		<li>box1 show</li>
		<li>box2 fadeOut</li>
		<li>box2 fadeIn</li>
	</ul>
	
	<div class="box1">box1</div>
	<div class="box2">box2</div>
</body>
</html>

시간은 흐르고, 글자 누르면 상자가 hide, show, fadeOut, fadeIn 됨

5교시 (14:30-15:20)

css_09_selector6.html
- 시간 수정하는 함수 만들기(위에 추가해두었음)

6교시 (15:30-16:20)

JSP란
JSP : Java Server Page

Java : java 언어를 사용한다.
Server : 서버에서 실행된다.
Page : 웹 페이지(웹 문서 : HTML)에서 실행된다.

Page(웹 문서) 이동 기술이다.
Page에서 Page로 이동하면서 데이터를 전달하는 역할을 한다.

-----------------------------------------
jsp
.NET : 페이지, 문단 단위로 이동 기술
php
-----------------------------------------

이클립스 기준
---------------------
1.  Context/WebContent -> New -> JSP File
2.  확장자 *.jsp
3. HTML, CSS, JavaScript 등 Client Side Script 코드에
자바 코드를 삽입해서 만드는 페이지
4. 서버에서 동작하는 언어 : Server Side Script(Language)
5. 동작 방식 : 최초 컴파일 과정일 때는 매우 느리다.
test.jsp 화일을 요청하면
test.jsp가 서블릿으로 변경 test_jsp.java (서블릿 Servlet)
test_jsp.java 가 컴파일 됨 test_jsp.class (클래스 파일)
test_jsp.class 가 실행 됨
\el_web_work\.metadata\.plugins\org.eclipse.wst.server.core\
tmp0\work\
Catalina\localhost\kosMember\org\apache\jsp\kosmem

C:\00.KOSMO108\30.Web\eclipse_web_1_work\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\work\Catalina\localhost\KosMember\org\apache\jsp\kos_005fjsp
.java 서블릿 파일
.class

   이클립스에서 JSP를 실행할 때 run on server > next > Available / Configured
   이 둘 중 옮기다보면 파일이 사라져서 실행이 안됨 (움직이지 말 것!)

Servers > Tomcat v8.5 ,,,, >  Overview > TImeouts > 이 시간이 넘어가면 연결이 끊어짐

JSP 구성 요소
--------------------------------------------------------
1. 스크립트적인 요소 (프로그래밍적인 요소)

1.1 스크립틀릿 : <% %> : 가장 많이 사용하는 요소
<% 자바 코드 %>

1.2 지시자 : MIME Type, import, JSTL
<%@ page contentType="text/html; charset=UTF-8" %>
<%@ page import="java.util.Date" %>
<%@ include file="file_name.html" %>
<%@ taglib prefix="c" url="http://java.sun.com/jsp/jstl/core" %>

1.3 표현식 : 값을 출력 : 문장 statement 종결 ; __세미콜론은 사용하지 않음__
<%= 변수명 %>
<%= 수식 %>
<%= 메소드 호출문 %>

1.4 선언문 : 메소도 정의 : 별도의 클래스에 구현
<%! public void 메소드명(매개 변수{ 코드 구현 } %>

2. UI 요소 (화면구현 요소)
--------------------------------------------------------
HTML
CSS
JavaScript, jQuery
Ajax
JSON, XML

3. JSP Action Tag
--------------------------------------------------------
<jsp: useBean ~ /> 객체를 생성하는 태그
<jsp: setProperty ~ /> DTO(VO) 객체에 있는 setter Method 호출
<jsp: getProperty ~ /> DTO(VO) 객체에 있는 getter Method 호출
=================================================================== 이것만 공부
<jsp: forward ~ /> request.forward() 방식으로 동적 페이지 전환
<jsp: param ~ /> 페이지 전환시 매개 변수 전달
<jsp: include ~ /> 특정 페이지를 포함
===================================================================

정적인 인클루드 : 안 변화는 페이지이 : 홈페이지 footer 로 사용한다.
<%@ include file="file-name.html" %>
동적인 인클루드 : 데이터를 변경하고 싶으면
<jsp:include page="file.jsp" ?>

액션 포워드 싱글태그
<jsp:forward page="file.jsp" />
액션 포워드 더블태그 : 파라미터를 넘길 수 있다.
<jsp:forward page="file.jsp">
<jsp:param name="id" value="hong" />
</jsp:forward>
액션 인쿨루드 싱글태그
<jsp:include page="file.jsp" />
액션 인쿨루드 더블태그 : 파라미터를 넘길 수 있다.
<jsp:include page="file.jsp">
<jsp:param name="id" value="hong" />
</jsp:include>

4. 내장 객체 (tab된 것만 공부)
--------------------------------------------------------
requet javax.servlet.http.HttpServletRequest 웹 브라우저의 요청 정보를 저장하고 있는 객체
javax.servlet.ServletReqeust
response javax.servlet.http.HttpServletResponse 웹 브라우저의 요청에 대한 응답 정보를 저장하고 있는 객체
javax.servlet.ServletResponse
out javax.servlet.jsp.JspWriter JSP페이지의 출력할 내용을 가지고 있는 출력 스트림 객체
session javax.servlet.http.ServletContext 하나의 웹 브라우저 내에서 정보를 유지하기 위한
세션 정보를 저장하고 있는 객체
application javax.servlet.ServletContext 웹 애플리케이션의 Context의 정보를 담고 있는 객체
pageContext javax.servlet.jsp.PageContext JSP페이지에 대한 정보를 저장하고 있는 객체
page java.lang.Object JSP 페이지를 구현한 자바 클래스 객체
config javax.servlet.ServletConfig JSP 페이지에 대한 설정 정보를 담고 있는 객체
exception java.lang.Throwalbe JSP 페이지에서 예외가 발생한 경우 사용하는 객체

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ 제일 중요
setAttribute(), getAttribute()
---------------------------------------------
request, session, application 내장 객체에서
속성(attribute)값을 저장하고 읽을 수 있는 함수
jsp 페이지 및 서블릿 Servlet 간 정보를 주고 받음

void setAttribute(String key, Object value)
해당 내장 객체의 속성값을 설정하는 메소드,
key 속성명에 value 속성값 지정
java.util.Enumeration getAttributeNames()
해당 내장 객체의 속성명을 일어오는 메소드,
모든 속성의 이름을 얻어옴
Object getAttribute(String key)
key 속성명에 해당하는 속성값 반환
void removeAttribute(String key)
key 속성명에 해당하는 속성 제거
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

5. Scope : Context 내에서 객체 공유하는 내장 객체 영역
--------------------------------------------------------
page
pageContext 내장 객체를 이용하여 바인딩(연결) 객체를 공유
객체를 공유한 jsp 페이지(현재 페이지)에서만 사용 가능

request
request 내장 객체를 이용하여 바인딩(연결) 객체를 공유
객체를 공유한 jsp 페이지(현재 페이지)와 요청한 jsp 페이지에서 사용 가능

session
session 내장 객체를 이용하여 바인딩(연결) 객체를 공유
모든 jsp 페이지에서 사용 가능
세션 속성 값을 설정하여 지정한 시간 또는 웹 브라우저가 열려 있는 동안 사용 가능

application
application 내장 객체를 이용하여 바인딩(연결) 객체를 공유
Context내 모든 jsp 페이지에서 사용 가능
웹 브라우저가 종료되어도 서버가 중지되기 전까지사용 가능

6. 표현식 EL(Expression Language)  (tab된 것만 공부)
--------------------------------------------------------
기본 형식 : ${ 출력값 }
${ param.변수명 } ${ param.addr }
${ 객체이름.속성이름 } ${ mvo.addr }
${ 객체이름 } ${ irum }
${ paramValues.배열이름[인덱스] } ${ paramValues.animal[0] }
${ 수식(계산식, 비교 연산) } ${ param.num1 + param.num2 }
${ 배열이름[인덱스] } ${ study[0] }
${ 배열이름[인덱스] } ${ study[0].irum }

7. JSTL(JSP Standard Tag Library) (tab된 것만 공부: core)
--------------------------------------------------------
JSTL 라이브러리 설치
https://tomcat.apache.org/ - Download - Taglibs -
오른쪽 상단 Apache Standard Taglib 링크 클릭

Standard 1.1.2 버전 다운로드
WebContent\WEB-INF\lib\jstl.jar, standard.jar <- 복사

JSTL Tag 종류 : JSP 문서 상단에 지시자를 작성하고 사용
core : 기본 프로그래밍 Tag (변수, 배열, if, for, switch~case 등)
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

format : 포맷 Tag (날짜, 시간, 통화 기호 등 표시 형식)
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

7교시 (16:30-17:20)

자습

8교시 (17:30-18:30)

자습

Notes

728x90

저작자표시 (새창열림)

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

22-04-12(화) 052일차 [HTML, JavaScript] 페이지 이동 (0)	2022.06.03
22-04-11(월) 051일차 [HTML, JavaScript] jQuery 페이지 넘어가기, RequestDispatcher (0)	2022.06.03
22-04-07(목) 049일차 [HTML, CSS] CSS의 position, table, selector, 부트스트랩 (0)	2022.05.24
22-04-06(수) 048일차 [HTML, CSS] 웹에서 데이터를 가져오기, CSS margin과 float 조절 (0)	2022.05.24
22-04-05(화) 047일차 [CSS] CSS 인라인 스타일, 외부 스타일 시트 적용하기 (0)	2022.05.24

현재글22-04-08(금) 050일차 [HTML, CSS, JSP] 어제 했던 선택자 부분 보완 및 추가와 JSP 개요

A New Life

22-04-08(금) 050일차 [HTML, CSS, JSP] 어제 했던 선택자 부분 보완 및 추가와 JSP 개요

수업내용

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

티스토리툴바

22-04-08(금) 050일차 [HTML, CSS, JSP] 어제 했던 선택자 부분 보완 및 추가와 JSP 개요

수업내용

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

관련글

티스토리툴바