자바39일차

달달한스위츠·2024년 4월 8일

자바배우기

목록 보기
36/43

오늘의 코드

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
  font-size: 150%;
}
select {
  font-size: 100%;
  width : 250px;
  height: 50px;
}
</style>
<meta charset="UTF-8">
<title>EL 예제</title>
</head>
<body>
  <h1>게시판 생성기</h1>
  <form action="05_result.jsp">
    <p>타이틀 입력</p>
    <input type="text" name="title">
    <hr>
    <p>게시판 글자색</p>
    <select name="fontColor">
      <option>글자색 선택</option>
      <option value="lightgreen" style="color : lightgreen;">lightgreen</option>
      <option value="lightblue" style="color : lightblue;">lightblue</option>
      <option value="purple" style="color : purple;">purple</option>
    </select>
    
    <hr>
    <p>게시판 글자 크기</p>
    <select name="fontSize">
      <option>글자 크기 선택</option>
      <option value="100%" style="font-size: 100%">100%</option>
      <option value="150%" style="font-size: 150%">150%</option>
      <option value="200%" style="font-size: 200%">200%</option>
    </select>
    
    <hr>
    <p>게시판 경계선 모양</p>
    <select name="boardStyle">
      <option>경계선 모양 선택</option>
      <option value="double">double</option>
      <option value="dashed">dashed</option>
      <option value="dotted">dotted</option>
    </select>
    
    <hr> 
    <p>게시판 경계선 색</p>
    <select name="boardColor">
      <option>경계선 색 선택</option>
      <option value="red" style="font-size: 300%; color : red">------ (red)</option>
      <option value="blue" style="font-size: 300%; color : blue">------ (blue)</option>
      <option value="green" style="font-size: 300%; color : green">------ (green)</option>
    </select>
    
    <hr>
    <p>링크</p>
    <input type="checkbox" name="link" value="01_basic.jsp">basic.jsp
    <input type="checkbox" name="link" value="02_operator.jsp">operator.jsp
    <input type="checkbox" name="link" value="03_parameter.jsp">parameter.jsp
    
    <hr>
    <input type="submit" value="전송">
  </form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table, th, td {
	border-style: ${param.boardStyle
}
;
border-style
:
 
${
param
.boardColor
}
;
border-width
:
 
1px
;

	
font-size
:
 
${
param
.fontSize
}
color
:
 
${
param
.fontColor
}
;
}
</style>
<meta charset="UTF-8">
<title>${param.title }</title>
</head>
<body>
	<h2>${param.title }</h2>
	<table>
		<thead>
			<tr>
				<th>번호</th>
				<th>링크 주소</th>
				<th>비고</th>
			</tr>
		</thead>

		<tbody>
			<%
			String[] linkList = request.getParameterValues("link");
			%>

			<%
			for (int i = 0; i < linkList.length; i++) {
			%>
				<tr>
					<td><%=i + 1 %></td>
					<td><a href=""><%=linkList[i] %></a></td>
					<td>-</td>
				</tr>
			<%
				}
			%>

		</tbody>
	</table>
</body>
</html>

JSTL을 배움

<%@ 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>
	<%--
		* JSTL(JSP Standard Tag Library)
		- JSP 태그의 경우 HTML 태그의 가독성을 떨어트림
		- 이를 해결하기 위해 JSTL을 사용
		- JSP의 다양한 커스텀 태그를 모아놓은 라이브러리
		- 반복 , 조건, SQL 등 다양한 기능을 사용
		
		* JSTL Tag
		- core : 변수 지원, 흐름 제어, URL 처리 등. 접두어 - c
		- xml : xml 코어, 흐름 제어, xml 변환. 접두어 - x
		- 데이터베이스 : SQL. 접두어 - SQL.
		
		* JSTL 라이브러리 추가
		- http://tomcat.apache.org/taglibs/standard/ 접속
		- version standard 1.1 Getting the Taglib download 링크 클릭
		- binaries/jakarta-taglibs-standard-1.1.2.zip 다운로드
		- jakarta-taglib-standard-1.1.2/lib 경로의 jstl.jar,
			standard.jar 파일을 해당 프로젝트의 WEB-INF/lib 폴더에 저장
		- 필요한 taglib을 uri로 지정
	 --%>
	
</body>
</html>
<%@ 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>JSTL Core</title>
</head>
<body>
	<h2>JSTL Core 연습</h2>
	<c:set var="name1" value="도우너" />
	<p>name1의 값 : ${name1 }</p>
	<c:set var="name2" value="${name1 }" />
	<p>name2의 값 : ${name2 }</p>
	
	<c:out value="<script>alert('test');</script>"></c:out>
	
	<c:remove var="name1"/>
	<p>name1의 값 : ${name1 }</p>
	
</body>
</html>
<%@ 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>JSTL if</title>
</head>
<body>
	<%--
	* <c:if> 태그
	- 자바의 if문과 유사한 기늠
	- <c:if test="조건">실행무</c:if>
	 --%>
	<c:if test="true">
	 	<h2>항상 실행</h2>
	 </c:if>
	  <c:if test="false">
	 	<h2>실행 안됨</h2>
	 </c:if>
	 <c:if test="${param.name == 'test' }">
	 	<p>결과 값이 true</p>
	 </c:if>
	 
	 <%--
	 * <c:choose> 태그
	 - 자바의 switch문과 if-else 문을 섞음
	  --%>
	  
	<ul>
	  <c:choose>
	  	<c:when test="${param.flag == 0 }">
	  		<li>파라미터 flag의 값은 0입니다.</li>
	  	</c:when>
	  	<c:when test="${param.flag == 1 }">
	  		<li>파라미터 flag의 값은 1입니다.</li>
	  	</c:when>
	  	<c:when test="${param.flag == 2 }">
	  		<li>파라미터 flag의 값은 2입니다.</li>
	  	</c:when>
	  	<c:otherwise>
	  		<li>파라미터 flag의 값을 0, 1, 2 중에 입력하세요!</li>
	  	</c:otherwise>
	  </c:choose>
	
	</ul>	 
	 
</body>
</html>
<%@page import="edu.web.jstl01.ContactVO"%>
<%@page import="java.util.ArrayList"%>
<%@ 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>JSTL ForEach</title>
</head>
<body>
	<%--
	* <c:forEach> 태그
	- 자바의 for문, for-each문의 형태
	- 배열, 컬렉션, 맵 등에 저장되어 있는 값을 순차적으로 처리
	- 기본 형태
	<c:forEach var="변수" items="아이템"
		begin="시작값" end="끝값" step="중간값">
		${변수}
		</c:forEach>
		- items : array, collection, map 형태의 데이터를 적용
		- begin(생략 가능) : 시작 인덱스
		- end(생략 가능) : 끝 인덱스
		- step(생략 가능) : 인덱스 증감
	 --%>
	
	<h2>1부터 100까지 홀수의 합</h2>
	<c:set var="sum" value="0" />
	<c:forEach var="i" begin="1" end="100" step="2">
		<c:set var="sum" value="${sum + i }" />
	</c:forEach>
	<p>합 : ${sum }</p>
	
	<h2>구구단</h2>
	<c:forEach var="i" begin="2" end="9">
		<c:forEach var="j" begin="1" end="9">
			${i } * ${j } = ${i * j }<br>
		</c:forEach>
	</c:forEach>
	
	<%
		String[] sports = {"야구", "축구", "스쿼시", "테니스"};
		request.setAttribute("sports", sports);
	%>
	
	<h2>배열에서 데이터 출력</h2>
	<c:forEach var="s" items="${sports }" varStatus="status">
		현재 인덱스 값 : ${status.index }<br>
		문자열 값 : ${s }<br>
		루프 실행 횟수 : ${status.count }<br>
		begin 값 : ${status.begin }<br>
		end 값 : ${status.end }<br>
		step 값 : ${status.step }<br>
	</c:forEach>
	
	<%
		ArrayList<ContactVO> list = new ArrayList<>();
		ContactVO vo = null;
		
		for(int i = 0; i < 5; i++) {
			String name = "학생" + (i + 1);
			String phone = "010-1111-111" + (i + 1);
			String email = "test" + (i + 1) + "@test.com";
			vo = new ContactVO(name, phone, email);
			list.add(vo);
			
		}
		request.setAttribute("list", list);
		
	%>
	
	<c:forEach var="vo" items="${list }">
		<p>이름 : ${vo.name }</p>
		<p>이름 : ${vo.phone }</p>
		<p>이름 : ${vo.email }</p>
	</c:forEach>
	
	
</body>
</html>

Ajax 시작
JOSN를 배워 보자

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON Syntax</title>
</head>
<body>
	<!-- 
		* JSON(JavaScript Object Notation)
		- 데이터 전송을 위한 표준 데이터 포멧
		- 데이터를 저장하고 교환하기 위한 문법
		- JSON은 텍스트이며, 자바스크립트 객체 표기 방식과 형식이 유사
		- 자바스크립트 객체를 JSON으로 변환 가능하며, JSON을 서버로 전송 가능
		- 서버에서 받아온 JSON을 자바스크립트 객체로 변환 또한 가능
		- 기본적으로 자바스크립트 객체 문법과 비슷함
		
		* JSON을 사용하는 이유
		- 자바스크립트 객체 표기법의 표준
		- 경량 데이터 교환 형태
		- 이해하기 쉬움
		- 언어 독립적(JSON 형태는 텍스트이므로, 모든 언어에서 읽을 수 있음)
		
	 -->
	
	
	<div id="output"></div>
	<script type="text/javascript">
		// 자바스크립트 객체 사용
		let person = {
				name : "mok",
				age : 20,
				city : "incheon"
		};
		
		// JSON 문자열
		let str = {"name" : "mok"};
		
		console.log(typeof(person));
		console.log(str);
		
		document.getElementById("output").innerHTML += person + '<br>';
		document.getElementById("output").innerHTML += str;
		
	</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON Type</title>
</head>
<body>
	<h1>JSON 데이터 타입</h1>
	<div id="output"></div>
	
	<script type="text/javascript">
		// * JSON 데이터 타입
		// - 문자열
		// - 숫자
		// - 객체
		// - 배열
		// - 논리형
		// - null
		
		// 문자열 
		let str = {"name" : "mok"};
		// 숫자
		let num = {"age" : 20};
		// 객체
		let obj = {
				"employee" : {"name" : "mok", "age" : 20, "city" : "서울"}
		};
		
		document.getElementById("output").innerHTML += obj + "<br>";
		document.getElementById("output").innerHTML += obj.employee.name + "<br>";
		document.getElementById("output").innerHTML += obj.employee.age + "<br>";
	</script>

</body>
</html>




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON parse</title>
</head>
<body>
   <h1>JSON parse</h1>
   <div id="output"></div>
   <script type="text/javascript">
      // * JSON은 문자열 형태로 데이터가 교환됨
      //    따라서, 전송이 끝난 뒤 사용을 위해서는 원래 타입으로 변경해야 한다.
      //   주로 ajax로 데이터를 통신할 때 사용
      
      // 웹 서버에서 클라이언트로 데이터를 전송받은 경우(server to client)
      
      let txt =
          '{"name" : "mok", "age" : 20, "city" : "인천", "birth" :"2024-04-08"}';
      console.log(typeof txt);
      let obj = JSON.parse(txt); // JSON을 JavaScript 객체로 변환
      console.log(typeof obj);
      console.log(typeof obj.birth);
       
      
      // 날짜 타입은 변환을 따로 수행해야 함
      obj.birth = new Date(obj.birth); // 문자열 -> Date
      
      document.getElementById("output").innerHTML
         = obj.name + ', ' + obj.birth;
      
   </script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>JSON Stringify</h1>
	<div id="output"></div>
	<script type="text/javascript">
		// *JSON.stringify() : 자바스크립트 객체를 문자열로 변환
		// - 자바스크립트 배열도 JSON 문자열로 변경 가능
		
		let obj = {
				name : "mok",
				age : 20,
				city : "Inchoen"
		};
		
		let myJSON = JSON.stringify(obj); // JSON 객체(문자열)로 변환
		console.log(typeof(myJSON));
		document.getElementById("output").innerHTML
		= myJSON;
		
	</script>
	
</body>
</html>

Ajax 다루기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax 기초</title>
</head>
<body>
	<!-- 
		* AJAX : Asynchronous JavaScript and XML
		- AJAX를 사용하는 이유
		1) 웹 페이지가 로드된 후 서버에서 데이터를 불러오기 위해
		2) 새로고침 없이 페이지를 업데이트
		3) 백그라운드에서 웹 서버에 데이터 전송
		
		* XML(Extensible Markup Language)
		
		
	 -->
	 <div id="output">
	 	<h2>XMLHttpRequest Object</h2>
	 	<button type="button" onclick="loadDoc()">내용변경</button>
	 	
	 </div>
	 <script type="text/javascript">
	 	function loadDoc() {
			let xhttp = new XMLHttpRequest(); // 브라우저 내장 request 객체
			xhttp.onreadystatechange = function() {
				console.log(this.readyState);
				console.log(this.status);
				// readState 속성이 변경될 때 호출할 함수를 정의
				if(this.readyState == 4 && this.status == 200) { // 404는 없음(찾을수 없음)
					console.log(this);
					document.getElementById("output").innerHTML
						= this.responseText;
					// this.reponseText : 응답 데이터를 문자열로 변환
				}
			};
			
			xhttp.open("GET", "01_demo_test.txt", true);
			// open(method, url, async) : xhttp에 보낸 정보 세팅
			// method : 요청 타입 GET or POST
			// url : 파일 또는 요청 서버 위치
			// async : true(비동기) or false(동기)
			
			xhttp.send(); // 보내는 거
			
		} // end loadDoc()
	 
	 </script>
	
</body>
</html>

01_demo_test.txt 파일작성

<h2>안녕?</h2>
<p id="p1">봄날씨입니다~</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest GET/POST</title>
</head>
<body>
	<h2>XMLHttpRequest</h2>
	<button type="button" onclick="loadDocGet()">get 데이터 요청</button>
	<button type="button" onclick="loadDocPost()">post 데이터 요청</button>
	<div id="output"></div>
	
	
	<script type="text/javascript">
	 	function loadDocGet() {
			let xhttp = new XMLHttpRequest(); // 브라우저 내장 request 객체
			xhttp.onreadystatechange = function() {
				console.log(this.readyState);
				console.log(this.status);
				// readState 속성이 변경될 때 호출할 함수를 정의
				if(this.readyState == 4 && this.status == 200) { // 404는 없음(찾을수 없음)
					console.log(this);
					document.getElementById("output").innerHTML
						= this.responseText;
					// this.reponseText : 응답 데이터를 문자열로 변환
				}
			};
			
			xhttp.open("GET", "02_date.jsp?method=get&content=Hello", true);
			
			xhttp.send(); // 보내는 거
			
		} // end loadDocGet()
	 
		function loadDocPost() {
			let xhttp = new XMLHttpRequest(); // 브라우저 내장 request 객체
			xhttp.onreadystatechange = function() {
				console.log(this.readyState);
				console.log(this.status);
				// readState 속성이 변경될 때 호출할 함수를 정의
				if(this.readyState == 4 && this.status == 200) { // 404는 없음(찾을수 없음)
					console.log(this);
					document.getElementById("output").innerHTML
						= this.responseText;
					// this.reponseText : 응답 데이터를 문자열로 변환
				}
			};
			
			xhttp.open("POST", "02_date.jsp", true);
			xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			// send에 집어 넣는 다(비공개)
			xhttp.send("method=post&content=Hello"); // 보내는 거
			
		} // end loadDocPost()
	 
		
	 </script>
	
</body>
</html>

02_date.jsp 파일 작성

<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<% Date date = new Date(); %>
<p>오늘 날짜 : <%=date.toString() %></p>
<p>${param.method }</p>
<p>${param.content } </p>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XML 파일 호출</title>
<style type="text/css">
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
}
</style>
</head>
<body>
  <h2>XML 파일 호출</h2>
  <button type="button" onclick="loadDoc()">CD 컬렉션 호출</button>
  <br>
  <table id="output"></table>
  <script type="text/javascript">
      function loadDoc() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            console.log(this);
            myFunction(this); // 리턴 정보를 this가 가지고 있고, myFunction에 인자값으로 전달
          }
        }
        xhttp.open("GET", "03_cd_catalog.xml", true);
        xhttp.send();
      }
      
      function myFunction(xml) {
        var xmlDoc = xml.responseXML; // 리턴된 정보에서 xml파일 정보로 저장
        var table = "<tr><th>Artist</th><th>Title</th><th>Country</th></tr>";
        var x = xmlDoc.getElementsByTagName("CD");
        var i;
        
        for (i = 0; i < x.length; i++){
          table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td>"
          			+ "<td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td>"
          			+ "<td>" + x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</td></tr>";
        }
        
        document.getElementById("output").innerHTML = table;
      }

    </script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XML 파일 호출</title>
<style type="text/css">
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 5px;
}
</style>
</head>
<body>
  <h2>XML 파일 호출</h2>
  <button type="button" onclick="loadDoc()">CD 컬렉션 호출</button>
  <br>
  <table id="output"></table>
  <script type="text/javascript">
      function loadDoc() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            console.log(this);
            myFunction(this); // 리턴 정보를 this가 가지고 있고, myFunction에 인자값으로 전달
          }
        }
        xhttp.open("GET", "03_cd_catalog.xml", true);
        xhttp.send();
      }
      
      function myFunction(xml) {
        var xmlDoc = xml.responseXML; // 리턴된 정보에서 xml파일 정보로 저장
        var table = "<tr><th>Artist</th><th>Title</th><th>Country</th></tr>";
        var x = xmlDoc.getElementsByTagName("CD");
        var i;
        
        for (i = 0; i < x.length; i++){
          table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td>"
          			+ "<td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td>"
          			+ "<td>" + x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</td></tr>";
        }
        
        document.getElementById("output").innerHTML = table;
      }

    </script>

</body>
</html>

많은 코드라 작성만

<CATALOG>
<CD>
  <TITLE>Empire Burlesque</TITLE>
  <ARTIST>Bob Dylan</ARTIST>
  <COUNTRY>USA</COUNTRY>
  <COMPANY>Columbia</COMPANY>
  <PRICE>10.90</PRICE>
  <YEAR>1985</YEAR>
</CD>
<CD>
  <TITLE>Hide your heart</TITLE>
  <ARTIST>Bonnie Tyler</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>CBS Records</COMPANY>
  <PRICE>9.90</PRICE>
  <YEAR>1988</YEAR>
</CD>
<CD>
  <TITLE>Greatest Hits</TITLE>
  <ARTIST>Dolly Parton</ARTIST>
  <COUNTRY>USA</COUNTRY>
  <COMPANY>RCA</COMPANY>
  <PRICE>9.90</PRICE>
  <YEAR>1982</YEAR>
</CD>
<CD>
  <TITLE>Still got the blues</TITLE>
  <ARTIST>Gary Moore</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>Virgin records</COMPANY>
  <PRICE>10.20</PRICE>
  <YEAR>1990</YEAR>
</CD>
<CD>
  <TITLE>Eros</TITLE>
  <ARTIST>Eros Ramazzotti</ARTIST>
  <COUNTRY>EU</COUNTRY>
  <COMPANY>BMG</COMPANY>
  <PRICE>9.90</PRICE>
  <YEAR>1997</YEAR>
</CD>
<CD>
  <TITLE>One night only</TITLE>
  <ARTIST>Bee Gees</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>Polydor</COMPANY>
  <PRICE>10.90</PRICE>
  <YEAR>1998</YEAR>
</CD>
<CD>
  <TITLE>Sylvias Mother</TITLE>
  <ARTIST>Dr.Hook</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>CBS</COMPANY>
  <PRICE>8.10</PRICE>
  <YEAR>1973</YEAR>
</CD>
<CD>
  <TITLE>Maggie May</TITLE>
  <ARTIST>Rod Stewart</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>Pickwick</COMPANY>
  <PRICE>8.50</PRICE>
  <YEAR>1990</YEAR>
</CD>
<CD>
  <TITLE>Romanza</TITLE>
  <ARTIST>Andrea Bocelli</ARTIST>
  <COUNTRY>EU</COUNTRY>
  <COMPANY>Polydor</COMPANY>
  <PRICE>10.80</PRICE>
  <YEAR>1996</YEAR>
</CD>
<CD>
  <TITLE>When a man loves a woman</TITLE>
  <ARTIST>Percy Sledge</ARTIST>
  <COUNTRY>USA</COUNTRY>
  <COMPANY>Atlantic</COMPANY>
  <PRICE>8.70</PRICE>
  <YEAR>1987</YEAR>
</CD>
<CD>
  <TITLE>Black angel</TITLE>
  <ARTIST>Savage Rose</ARTIST>
  <COUNTRY>EU</COUNTRY>
  <COMPANY>Mega</COMPANY>
  <PRICE>10.90</PRICE>
  <YEAR>1995</YEAR>
</CD>
<CD>
  <TITLE>1999 Grammy Nominees</TITLE>
  <ARTIST>Many</ARTIST>
  <COUNTRY>USA</COUNTRY>
  <COMPANY>Grammy</COMPANY>
  <PRICE>10.20</PRICE>
  <YEAR>1999</YEAR>
</CD>
<CD>
  <TITLE>For the good times</TITLE>
  <ARTIST>Kenny Rogers</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>Mucik Master</COMPANY>
  <PRICE>8.70</PRICE>
  <YEAR>1995</YEAR>
</CD>
<CD>
  <TITLE>Big Willie style</TITLE>
  <ARTIST>Will Smith</ARTIST>
  <COUNTRY>USA</COUNTRY>
  <COMPANY>Columbia</COMPANY>
  <PRICE>9.90</PRICE>
  <YEAR>1997</YEAR>
</CD>
<CD>
  <TITLE>Tupelo Honey</TITLE>
  <ARTIST>Van Morrison</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>Polydor</COMPANY>
  <PRICE>8.20</PRICE>
  <YEAR>1971</YEAR>
</CD>
<CD>
  <TITLE>Soulsville</TITLE>
  <ARTIST>Jorn Hoel</ARTIST>
  <COUNTRY>Norway</COUNTRY>
  <COMPANY>WEA</COMPANY>
  <PRICE>7.90</PRICE>
  <YEAR>1996</YEAR>
</CD>
<CD>
  <TITLE>The very best of</TITLE>
  <ARTIST>Cat Stevens</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>Island</COMPANY>
  <PRICE>8.90</PRICE>
  <YEAR>1990</YEAR>
</CD>
<CD>
  <TITLE>Stop</TITLE>
  <ARTIST>Sam Brown</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>A and M</COMPANY>
  <PRICE>8.90</PRICE>
  <YEAR>1988</YEAR>
</CD>
<CD>
  <TITLE>Bridge of Spies</TITLE>
  <ARTIST>T'Pau</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>Siren</COMPANY>
  <PRICE>7.90</PRICE>
  <YEAR>1987</YEAR>
</CD>
<CD>
  <TITLE>Private Dancer</TITLE>
  <ARTIST>Tina Turner</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>Capitol</COMPANY>
  <PRICE>8.90</PRICE>
  <YEAR>1983</YEAR>
</CD>
<CD>
  <TITLE>Midt om natten</TITLE>
  <ARTIST>Kim Larsen</ARTIST>
  <COUNTRY>EU</COUNTRY>
  <COMPANY>Medley</COMPANY>
  <PRICE>7.80</PRICE>
  <YEAR>1983</YEAR>
</CD>
<CD>
  <TITLE>Pavarotti Gala Concert</TITLE>
  <ARTIST>Luciano Pavarotti</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>DECCA</COMPANY>
  <PRICE>9.90</PRICE>
  <YEAR>1991</YEAR>
</CD>
<CD>
  <TITLE>The dock of the bay</TITLE>
  <ARTIST>Otis Redding</ARTIST>
  <COUNTRY>USA</COUNTRY>
  <COMPANY>Stax Records</COMPANY>
  <PRICE>7.90</PRICE>
  <YEAR>1968</YEAR>
</CD>
<CD>
  <TITLE>Picture book</TITLE>
  <ARTIST>Simply Red</ARTIST>
  <COUNTRY>EU</COUNTRY>
  <COMPANY>Elektra</COMPANY>
  <PRICE>7.20</PRICE>
  <YEAR>1985</YEAR>
</CD>
<CD>
  <TITLE>Red</TITLE>
  <ARTIST>The Communards</ARTIST>
  <COUNTRY>UK</COUNTRY>
  <COMPANY>London</COMPANY>
  <PRICE>7.80</PRICE>
  <YEAR>1987</YEAR>
</CD>
<CD>
  <TITLE>Unchain my heart</TITLE>
  <ARTIST>Joe Cocker</ARTIST>
  <COUNTRY>USA</COUNTRY>
  <COMPANY>EMI</COMPANY>
  <PRICE>8.20</PRICE>
  <YEAR>1987</YEAR>
</CD>
</CATALOG>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>글자 추천</title>
</head>
<body>
	<h2>아레에 글을 입력해 주세요.</h2>
	<p>
		첫 글자 : <input type="text" id="txt" onkeyup="showHint(this.value)">
	</p>
	<p>
		추천 : <span id="txtHint"></span>
	</p>

	<script type="text/javascript">
		function showHint(str) {
			// GET 방식으로 04_get_hint.jsp 페이지에 데이터 전송하고
			// 결과를 추천 span에 출력
			
			let xhttp = new XMLHttpRequest(); // 브라우저 내장 request 객체
			xhttp.onreadystatechange = function() {
				// readState 속성이 변경될 때 호출할 함수를 정의
				if(this.readyState == 4 && this.status == 200) { // 404는 없음(찾을수 없음)
					document.getElementById("txtHint").innerHTML = "";
					console.log(this);
					document.getElementById("txtHint").innerHTML
						= this.responseText;
					// this.reponseText : 응답 데이터를 문자열로 변환
				}
			};
			// var txt = document.getElementById("txt").value;
			xhttp.open("GET", "04_get_hint.jsp?txt="+str, true);
			xhttp.send(); // 보내는 거
			
		} // end showHint()
	</script>


</body>
</html>

04_get_hint.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 
	전송된 데이터가
	만약 'a'로 시작하면 "apple"
		'b'로 시작하면 "banana"
		'c'로 시작하면 "coconut"
	그게 아니면 "not fruits"를 출력해라!
 -->
 	<c:choose>
	  	<c:when test="${param.txt == 'a' }">
	  		<p>apple</p>
	  	</c:when>
	  	<c:when test="${param.txt == 'b' }">
	  		<p>banana</p>
	  	</c:when>
	  	<c:when test="${param.txt == 'c' }">
	  		<p>coconut</p>
	  	</c:when>
	  	<c:otherwise>
	  		<p>not fruits</p>
	  	</c:otherwise>
	  </c:choose>
 <%-- <%if(param.method == "a") { %>
<p>apple</p>
<%} else if(param.method == "b") { %>
<p>banana</p>
<%} else if(param.method == "c") { %>
<p>coconut</p>
<%} else {%>
<P>not fruits</P>
<% } %> --%>
profile
달달한스위츠
이전 포스트

자바38일차

다음 포스트

자바40일차

0개의 댓글