Cloud 기반 웹 DevOps 프로젝트 개발자 과정

문이빈·2023년 7월 6일
0
post-thumbnail

Java Script

DOM에서 노드 추가•삭제 하기

웹 문서에서 처음 화면에는 내요이 보이지 않다가 클릭이나 이벤트가 발생하면 내용이 나타나는 경우가 있다.
이러한 동작은 CSS의 display속성을 사용해서 만들 수도 있지만 DOM트리에 새로운 노드를 추가하는 방법도 있다.
※주의 : 노드를 추가하면 단순히 요소 노드뿐 아니라 텍스트와 속성 노드도 함께 추가해야 한다.

노드 리스트

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
    <html lang='ko'>
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>노드 리스트</title>
    <link rel="stylesheet" href="../css/nodelist.css">
</head>
<body>
  <h1>Web Programming</h1>
    <ul id="itemList">
      <li>HTML</li>
      <li>CSS</li>
      <li>Javascript</li>
    </ul>
</body>
</html>

document.quertySelectorAll("li")는 문서에서 모든 <li> 요소를 선택하는 코드입니다.

document.quertySelectorAll("li")[1]의 결과 값으로는 두번째 텍스트인 CSS가 나타난다.


링크를 클릭하면 텍스트 표시하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
    <html lang='ko'>
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM</title>

<style type="text/css">
#container{
width: 500px;
margin: 10px auto;
padding: 20px;
}

#info{
margin-top: 20px;}

img{
width: 100px;
height: 100px;
}

</style>

  <script type="text/javascript">
    function addP(){
//    	alert(1) -> 더 보기를 눌렀을 때 작동 잘 하나 확인하려고 해봄
    	
    	//p태그 만들기
    	var newP = document.createElement("p")
    	//텍스트 노드 만들기
    	var textNode = document.createTextNode
    	("DOM은 Document Object Model의 줄임말 입니다.")
    	//p 태그에 텍스트 노드 붙이기
    	newP.appendChild(textNode);
    	//info 안에 p태그 완정본을 추가
    	document.getElementById("info").appendChild(newP);
    }
  </script>
</head>
<body>

  <div id="container"></div>
    <h1>DOM을 공부합시다.</h1>
    <img alt="" src="../images/easys-2.jpg">
      <a href="#" onclick="javascript:addP(); this.onclick='';">더보기</a>
        <div id="info"></div>
</body>
</html>

더보기를 클릭하면 DOM은 Document Object Model의 줄임말 입니다. 가 나타난다.

<a href="#">

버튼을 누를 때 마다 함수를 계속적으로 호출하므로 한번 누르고나서 더이상 호출 못하게 할 경우

this.onclick='빈칸'을 추가해서 함수 호출을 지운다.


링크를 클릭하면 텍스트와 이미지 표시하기

  1. 요소 노드 만들기 createElement()메서드
  2. 속성 노드 만들기 createAttribute()메서드
  3. 속성 노드 연결하기 setAttributeNode()메서드
  4. 자식 노드 연결하기 appendChild()메서드
</style>

  <script type="text/javascript">
    function addContents(){
    	
    	//p태그 만들기
    	var newP = document.createElement("p")
    	//텍스트 노드 만들기
    	var textNode = document.createTextNode
    	("DOM은 Document Object Model의 줄임말 입니다.")
    	//p 태그에 텍스트 노드 붙이기
    	newP.appendChild(textNode);
    	
    	// 이미지 태그 만들고, 속성src, alt 만들고 이미지 주소를 넣고...속성에 추가함.
    	var newImg = document.createElement("img");
    	var srcNode = document.createAttribute("src");
    	var altNode = document.createAttribute("alt");
    	
    	srcNode.value = "../images/dom.jpg";
    	altNode.value = "돔 트리 예제 이미지";
    	newImg.setAttributeNode(srcNode);
    	newImg.setAttributeNode(altNode);
    	
    	//info 안에 p태그 완정본을 추가
    	document.getElementById("info").appendChild(newP);
    	document.getElementById("info").appendChild(newImg);
    }
  </script>
</head>
<body>
  <div id="container"></div>
    <h1>DOM을 공부합시다.</h1>
      <a href="#" onclick="javascript:addContents(); this.onclick='';">더보기</a>
        <div id="info"></div>
</body>
</html>
  1. var newP = document.createElement("p"): newP라는 변수에 <p> 요소를 생성합니다. 이 요소는 나중에 정보를 담을 <p> 요소입니다.
  2. var textNode = document.createTextNode : textNode라는 변수에는 텍스트 노드를 생성합니다.
  3. newP.appendChild(textNode) : newP 요소에 textNode 텍스트 노드를 자식 요소로 추가합니다. 이렇게 함으로써 <p> 요소에 텍스트 내용이 포함됩니다.
  4. var newImg = document.createElement("img") : newImg라는 변수에 <img> 요소를 생성합니다. 이 요소는 이미지를 나타내는 태그입니다.
  5. var srcNode = document.createAttribute("src")는 srcNod 변수에 src 속성 노드를 생성함.
    var altNode document.createAttribute("alt") : 는 altNode라는 변수에 alt 속성 노드를 생성함.
    이 속성 노드는 이미지의 속성을 나타냅니다.
  6. srcNode.value = "../images/dom.jpg"와 altNode.value = "돔 트리 예제 이미지" : srcNode에는 "../images/dom.jpg"라는 이미지 주소를, altNode에는 "돔 트리 예제 이미지"라는 대체 텍스트를 설정합니다.
  7. newImg.setAttributeNode(srcNode) newImg 요소에 srcNode속성 노드를 설정합니다.
    newImg.setAttributeNode(altNode) : newImg 요소에altNode 속성 노드를 설정합니다.
    이렇게 함으로써 이미지 요소에 이미지 주소와 대체 텍스트가 포함됩니다.
  8. document.getElementById("info").appendChild(newP)"info"라는 id를 가진 요소를 찾아서 해당 요소에 newP 요소를 추가합니다.
    document.getElementById("info").appendChild(newImg) : "info"라는 id를 가진 요소를 찾아서 해당 요소에 newImg 요소를 추가합니다.
    이렇게 함으로써 <p> 요소와 이미지 요소가 "info" 요소 내에 추가됩니다.


텍스트 필드에 입력한 값을 화면에 표시하기

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
    <html lang='ko'>
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Programming</title>
<link rel="stylesheet" href="../css/nodelist.css">

  <script type="text/javascript">
    function newRegister(){
    	/* item이라는 li태그를 만들고 subject라는 태그 안에 적혀 있는 값을 받아서
    	   새로운 리스트로 추가 */
    	
    	var newItem = document.createElement("li");          // 새로운 li 요소 노드 추가
    	var subject = document.querySelector("#subject");    // input 태그 선택
    /*추가*/if(subject.value.length==0){
	          alert("주제를 입력하시오.");
	          subject.focus();
	          return false;  
          }
    	 
    	// 텍스트 필드 값을 받아봐서 그걸로 텍스트 노드 만들기
    	var newText = document.createTextNode(subject.value);
    	
    	newItem.appendChild(newText);                        // 텍스트 노드를 자식 노드로 연결
    	
    	var itemList = document.querySelector("#itemList");  // 부모 노드를 가져옴
    	itemList.appendChild(newItem);                       // 새로 만든 요소 노드를 부모 노드에 추가
    	
    	subject.value="";                                    // 다음 입력을 위해 텍스트 필드 비우기
    }
  </script>
</head>
<body>
  <div id="container">
    <h1>Web Programming</h1>
      <p>공부할 주제를 기록해 보세요</p>
        <form action="" method="post">
          <input type="text" id="subject" autofocus="autofocus">
            <button onclick="javascript:newRegister(); return false">추가</button>
        </form>
        <hr>
          <ul id="itemList"></ul>
  </div>
</body>
</html>
  1. newRegister() 함수는 "추가" 버튼이 클릭될 때 호출됩니다.
  2. var newItem = document.createElement("li") : 새로운 <li> 요소 노드를 생성합니다.
  3. var subject = document.querySelector("#subject") : 주제를 입력하는 <input> 요소를 선택합니다.
    querySelector() 메서드를 사용하여 id가 "subject"인 요소를 찾습니다.
  4. if(subject.value.length==0) : 주제 입력 필드가 비어 있는지 확인합니다. 비어 있다면 알림을 표시하고 함수를 종료합니다.
    subject.focus()를 사용하여 다시 주제 입력 필드에 초점을 맞춥니다. 그리고 return false를 사용하여 함수를 종료합니다. 이렇게 함으로써 주제를 입력하지 않았을 때 리스트에 아무 내용도 추가되지 않습니다
  5. var newText = document.createTextNode(subject.value) : newText 변수에는 입력된 주제(subject.value)를 텍스트 노드로 생성합니다. 이렇게 하면 입력된 주제가 텍스트 노드로 만들어집니다.
  6. newItem.appendChild(newText) : newItem 요소에 newText 텍스트 노드를 자식 노드로 추가합니다. <li> 요소에 주제 텍스트가 포함됩니다.
  7. var itemList = document.querySelector("#itemList"): itemList 변수에는 리스트의 부모 요소를 선택합니다. querySelector() 메서드를 사용하여 id가 "itemList"인 요소를 찾습니다.
  8. itemList.appendChild(newItem) : : itemList 변수에는 리스트의 부모 요소를 선택합니다. querySelector() : itemList 요소에 newItem 요소를 추가합니다. 이렇게 함으로써 새로운 <li> 요소가 리스트에 추가됩니다.
  9. subject.value=""는 주제 입력 필드를 비워서 다음 입력을 위해 준비합니다.

css 파일

@charset "UTF-8";
*{box-sizing: border-box;
}
#container{
	width: 500px;
	margin: 20px auto;
	padding: 20px;
}
input[type="text"]{
	width: 300px;
	float: left;
	height: 30px;
	padding-left: 30px;
	margin-right: 10px;
}
button{
	width: 60px;
	height: 30px;
	float: left;
	background: #222;
	color: #fff;
	margin-left: 2px;
	margin-right: 1px;
}
hr{
	clear: both;
	display: none;
}
ul{
	list-style: none;
	padding-top: 50px;
}
li{
	line-height: 2.5;
}
li:hover{
	cursor:pointer;
}


아무것도 작성하지 않고 추가를 눌었을때

+삭제 버튼도 추가
css 변경

#container{
	width: 600px;
	margin: 20px auto;
	padding: 20px;
}

input[type="text"]{
	width: 370px;
	float: left;
	height: 30px;
	padding-left: 30px;
	margin-right: 10px;
}

button{
	width: 60px;
	height: 30px;
	float: left;
	background: #222;
	color: #fff;
	margin-left: 2px;
	margin-right: 1px;

로직 추가 (주제를 삭제하는 deleteItem() 함수를 추가)

function deleteItem(){
    	// 지울 때 li를 갖고 와서 배열에 담긴게 없으면 추가먼저 하시오.
    	var items = document.querySelectorAll("li");
    	    if(item.length==0){
    	    	alert("주제를 먼저 추가 하시오.")
    	    	return false; 
    }
  </script>
</head>
<body>
  <div id="container">
    <h1>Web Programming</h1>
      <p>공부할 주제를 기록해 보세요</p>
        <form action="" method="post">
          <input type="text" id="subject" autofocus="autofocus">
            <button onclick="javascript:newRegister(); return false">추가</button>
            <button onclick="javascript:deleteItem(); return false">삭제</button>
        </form>
        <hr>
          <ul id="itemList"></ul>
  </div>
  1. var items = document.querySelectorAll("li") : items 변수에 문서 내의 모든 <li> 요소를 선택하여 NodeList로 저장합니다. NodeList는 유사 배열 객체로, 선택된 요소들의 컬렉션을 나타냅니다.
  2. if(items.length==0) : 이 조건문은 NodeList인 items의 길이가 0인지 확인합니다. 즉, 주제를 입력한 <li> 요소가 없는 경우입니다. 길이가 0이라면 주제를 먼저 추가하라는 알림을 표시하고, return false를 사용하여 함수를 종료합니다.


항목을 클릭하여 삭제

// 해당 리스트 항복을 클릭하면 그 항목을 삭제 하려고 함
    	var items = document.querySelectorAll("li");
    	// 각 항목에 click 리스너 걸어주기
    	for(let i=0; i<items.length; i++){                   // 항목 클릭했을 때 실행할 함수
    		items[i].addEventListener("click", function(){
    			if(this.parentNode)// 부모노드 있다면~
    			  this.parentNode.removeChild(this);          // 부모노드로 올라가서 자식노드 삭제
    		});
  1. var items = document.querySelectorAll("li") : items 변수에 문서 내의 모든 <li> 요소를 선택하여 NodeList로 저장합니다. 이것은 삭제할 항목들을 나타냅니다.
  2. for(let i=0; i<items.length; i++) : items에 있는 각 항목에 대해 반복문을 실행합니다.
  3. items[i].addEventListener("click", function() { ... }) : 각 항목에 클릭 이벤트 리스너를 추가합니다. 클릭 이벤트가 발생했을 때 실행될 함수를 작성합니다.
  4. if(this.parentNode) this.parentNode.removeChild(this) : 이 조건문은 클릭된 항목의 부모 노드가 존재하는지 확인합니다. 존재한다면, 해당 항목을 부모 노드에서 제거합니다. 이를 통해 클릭된 항목을 삭제합니다.

jQuery

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>연습</title>
<!-- 다운로드 된 jquery 사용 -->
 <script type="text/javascript" src="../jquery/jquery-3.6.0.min.js"></script>
 
<!--  CDN방식 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

 <script type="text/javascript">
   //코드 작성
   //문서 준비 되자마자 함수 실행  -  window.onload와 비슷하다.
   $(document).ready(function () {
	alert(1)
	});
 </script>
</head>
<body>

아무런 이벤트가 발생하지 않아도 바로 alert가 뜬다.


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery 연습1</title>
<!--  CDN방식 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
	  // h1 태그를 모두 추출(document.querySelectorAll('h1') 과 유사)
	  var $headers = $('h1');
	  
	  // h1의 개수만큼 반복문 돌려서 특정위에서 짝수만 배경색 적용
	  for(let i=0; i<$headers.length; i++){
		  if(i%2==1){ //실제 2번째 4번째 선택하기 위해 조건 줌
			  // i 번째 엘리먼트 선택해서 domE에 담기
			  var domE = $headers.get(i);
		      // 배경색 지정 해당 엘리먼트의 css속성 변경
		      $(dom#).css('backgroundColor','blue');
		  }
	  }
});
</script>
</head>
<body>
  <h1>Header A</h1>
  <h1>Header B</h1>
  <h1>Header C</h1>
  <h1>Header D</h1>
</body>
</html>

또 다른 방식

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
  <script type="text/javascript">
  /*
  자바스크립트의 Array객체의 forEach객체와 비슷 그런데 메소드 인수의 순서가 반대
  forEach
  [].forEach(function (item, index)) {
  });
  jQuery의 each()메소드
  $().each(function (index, item){
  });
  */
  
  $(document).ready(function() {
	  //h1모두 추출하고 each로 반복 돌리기
	  $('h1').each(function(index, element) {
		  //짝수번째 h1의 배경색 css적용
		  if(index%2 == 1){
			  //배경색 변경
			  $(this).css('backgroundColor', 'blue');
		  }
	  });
  });
  </script>
</head>
<body>
  <h1>Header A</h1>
  <h1>Header B</h1>
  <h1>Header C</h1>
  <h1>Header D</h1>
</body>
</html>

결론

<script type="text/javascript">
  $(document).ready(function() {
	  var $headers = $('h1');
	  
	  for(let i=0; i<$headers.length; i++){
		  if(i%2==1){ 
			  var domE = $headers.get(i);
		      $(dom#).css('backgroundColor','blue');
		  }
	  }
});
</script>

또는

<script type="text/javascript">
  $(document).ready(function() {
	  $('h1').each(function(index, element) {
		  if(index%2 == 1){
			  $(this).css('backgroundColor', 'blue');
		  }
	  });
  });
</script>


jQuery ajax

<title>회원정보1</title>
<link rel="stylesheet" href="css/member1.css">
<script type="text/javascript" src="js/member1.js"></script>
</head>
<body>
<% request.setCharacterEncoding("UTF-8"); %>
<form action="MemberGet.jsp" method="post">
  <div id="container">
    <h3 style="text-align: center;">회원정보 입력</h3>
    
      <div class = "inputTag">아이디: &nbsp;&nbsp;
        <input name="id" value="" size="10" required="required"></div> <!-- required=빈칸이면 못 넘어가! -->
        
      <div class = "inputTag">이   름: &nbsp;&nbsp;&nbsp;&nbsp;
        <input name="name" value="" size="10" required="required"></div>
      <div class = "inputTag"><input type="submit" value="전송" onclick="javascript:validate1();"/></div>
  </div>
</form>
</body>
</html>

본문에 있던 style을 css파일로 옮기고

<script type="text/javascript" src="js/member1.js"></script>
<div class = "inputTag"><input type="submit" value="전송"/>


MemberReg.jsp

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

<title>회원정보1</title>
<link rel="stylesheet" href="css/member1.css">
<script type="text/javascript" src="js/member1.js"></script>
</head>
<body>
<% request.setCharacterEncoding("UTF-8"); %>
<form action="MemberGet.jsp" method="post" id="regData">
  <div id="container">
    <h3 style="text-align: center;">회원정보 입력</h3>
    
      <div class = "inputTag">아이디: &nbsp;&nbsp;
        <input id="id" name="id" value="" size="10" required="required" autofocus="autofocus">
        <button onclick="javascript:idCheck()">아이디 중복체크</button>
      </div> <!-- required=빈칸이면 못 넘어가! -->
        
      <div class = "inputTag">이   름: &nbsp;&nbsp;&nbsp;&nbsp;
        <input name="name" value="" size="10" required="required" autofocus="autofocus">
      </div>
      
      <div style="text-align: center;">
        <input type="button" value="전송" onclick="javascript:validate1();"/>
      </div>
  </div>
</form>
</body>
</html>

DbIdchek.jsp

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
Class.forName("com.mysql.cj.jdbc.Driver");
Connection conn=
DriverManager.getConnection("jdbc:mysql://localhost:3306/boarddb","root","1234");
PreparedStatement pstmt = null;
ResultSet rs = null;
if(conn!=null){
	String uid = request.getParameter("id");
	String sql = "select count(id) as cnt from member where id = ?";
	pstmt = conn.prepareStatement(sql);
	pstmt.setString(1,uid);
	rs = pstmt.executeQuery();
	if(rs.next()){
		if(rs.getInt("cnt")!=0) request.setAttribute("cnt", 1);
		else request.setAttribute("cnt", 0);
	}
	}else{
		out.println("연결실패");
}
if(rs != null) rs.close();
if(pstmt != null) pstmt.close();
if(conn != null) conn.close();
%>

<input type="button" value="닫기" onclick="javascript:window.close();"/>
<script type="text/javascript">
	 var c=<%=request.getAttribute("cnt")%>
	     if(c==1){
	    	 alert("중복된 아이디 입니다.")
	    	 // 
	     }else if(c==0){
	    	 alert("사용가능한 아이디 입니다.")
	     }
</script>

memeber1.js

/**
 * member1의 자바스크립트
 */
// 전역변수
chk=false;

// id와 이름이 비어있지 않게 확인하는 메소드로 사용할거임
function validate1(){
		if(!chk){
		alert("아이디 중복체크 하시오")
		return false;
	}
	// 아이디 중복 체크 하고 전송
	var formTag = document.querySelector("#regData");
	var inputTag = document.querySelectorAll("input");
	
	for(let i=0; i<inputTag.length; i++){
		if(inputTag[i].value.length==0){
			alert("아이디와 이름을 확인하여 입력하시오");
			return false;
		}
	}
	formTag.submit();
}
function idCheck(){
	var id = document.getElementById("id");
	if(id.value.trim().length==0){
		alert("id 입력하세요");
		id.focus();
		chk = false;
		return false
		}else{
			//팝업으로 아이디 체크를 불러주고 결과를 받기
			const popup = window.open("DbIdchek.jsp?id="+id.value,
			                          "popup", "width=500,height=300");
                                }
                           }




내장객체 이기 때문에 request를 하면 바로 쓸 수 있다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내장객체</title>
</head>
<body>
  <form action="Process.jsp" method="post">
    <p>
      이름 : <input type="text" name="name">
      <input type="submit" value="전송">
    </p>
  </form>
</body>
</html>
  1. <form action="Process.jsp" method="post"> : HTML 폼 요소를 사용하여 데이터를 입력하고 전송할 목적지를 Process.jsp 파일로 설정합니다.
  2. <input type="text" name="name"> : 사용자가 이름을 입력할 수 있는 텍스트 필드를 생성하고, name 속성을 지정하여 Process.jsp로 전송될 때 해당 이름으로 파라미터가 전달되도록 합니다.
  3. <input type="submit" value="전송"> : 전송 버튼을 생성합니다. 버튼을 클릭하면 폼이 Process.jsp로 전송됩니다.
---Process.jsp파일---

<title>도착지</title>
</head>
<body>
  <% 
  // 요청(request)이라는 객체에서 넘어온 파라메터 중 name이라는 파라메터 값 가져와서
  // name이라는 String 타입에 저장
  String name = request.getParameter("name"); 
  String hostValue = request.getHeader("host");
  String alValue = request.getHeader("accept-language");
  %>
    <p>이름 : <%= name %></p>
    <p>호스트명 : <%= hostValue %></p>
    <p>설정된 언어 : <%= alValue %></p>
</body>
</html>
  1. String name = request.getParameter("name"); : request 객체의 getParameter() 메서드를 사용하여 전송된 파라미터 중 이름(name) 파라미터 값을 가져와서 name 변수에 저장합니다.
  2. String hostValue = request.getHeader("host"); : request 객체의 getHeader() 메서드를 사용하여 요청 헤더의 host 값을 가져와서 hostValue 변수에 저장합니다.
    String alValue = request.getHeader("accept-language"); : request 객체의 getHeader() 메서드를 사용하여 요청 헤더의 accept-language 값을 가져와서 alValue 변수에 저장합니다.
  3. <%= name %>: JSP 태그(<% %>) 내에 사용된 <%= %>는 변수 값을 출력하는 표현식입니다. 해당 위치에는 name 변수의 값이 출력됩니다.
  4. <%= hostValue %> : 변수 hostValue 의 값을 출력합니다. 요청 헤더의 host 값을 출력합니다.
    <%= alValue %> : 변수 alValue의 값을 출력합니다. 요청 헤더의 accept-language 값을 출력합니다.



<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내장객체 연습1</title>
</head>
<body>
  <form action="Request01Process.jsp" method="post">
    <p>아이디 : <input type="text" name="id">
    <p>비밀번호 : <input type="password" name="passwd">
    <p><input type="submit" value="전송">
  </form>
</body>
</html>

---Request01Process.jsp파일---

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내장객체 이용해서 받기</title>
</head>
<body> 
<!-- 요청(request)이라는 객체에서 넘어온 파라메터 중 name이라는 파라메터 값 가져와서 -->
<!-- name이라는 String 타입에 저장 -->
  <% String id = request.getParameter("id"); %>
  <% String passwd = request.getParameter("passwd"); %>
  
    <p>이름 : <%= id %></p>
    <p>비밀번호 : <%= passwd %></p>
</body>
</html>



<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Implicit objects</title>
</head>
<body>
  <form action="Request02Process.jsp" method="post">
    <p>
      이름 : <input type="text" name="name">
      <input type="submit" value="전송">
  </form>
</body>
</html>

---Request02Process.jsp파일---

<body> 
    <p>클라이언트 IP : <%= request.getRemoteAddr() %></p>
    <p>요청 정보 길이 : <%= request.getContentLength() %></p>
    <p>요청 정보 인코딩 : <%= request.getCharacterEncoding() %></p>
    <p>요청 정보 콘텐츠 유형 : <%= request.getContentType() %></p>
    <p>요청 정보 프로토콜 : <%= request.getProtocol() %></p>
    <p>요청 정보 전송 방식 : <%= request.getMethod() %></p>
    <p>요청 URI : <%= request.getRequestURI() %></p>
    <p>콘텍스트 경로 : <%= request.getContextPath() %></p>
    <p>서버 이름 : <%= request.getServerName() %></p>
    <p>서버 포트 : <%= request.getServerPort() %></p>
    <p>쿼리문 : <%= request.getQueryString() %></p>
</body>

0개의 댓글