-
JSP - 기초(1)프로그래밍/JSP 2021. 10. 10.반응형
JSP = Java Server Page의 약자로 jsp 파일에서 자바 코드랑 HTML 코드 둘다 작성이 가능함
<%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <% // 스크립릿(java 코드 영역) - java 주석(자바코드 영역에서만 가능) int s = 0; for(int i = 1; i<=100; i++) { s += i; } %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3> JSP 주석 </h3> <!-- HTML 주석 : 클라이언트에게 전송 됨 --> <%-- JSP 주석 : 클라이언트에게 전송되지 않음 --%> <p> 1에서 100까지 합은 <%=s%> 입니다. </p> </body> </html>대신 자바 코드 입력 위치는 보통은 HTML 선언 위 부분 이고(HTML 안에서도 사용 가능)
항상 코드 시작은 <%으로 시작해서 %>으로 닫아야함.
그리고 만약 자바코드에서 작성한 변수나 이런걸 가져오려면 HTML 코드에서는 <%= 는 을 꼭 붙여줘야함
띄어쓰기 절대 금지
HTML에서의 주석 사용은 똑같이 <%-- 인데 이건 주석을 써도 클라이언트한테는 보이지 않는다.
<%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <%! // 선언부 - 클래스의 선언부에 포함되는 코드 : 필드, 메소드등을 정의 int n; // 필드 public int sum(int num) { // 메소드 int s = 0; for(int i=1; i<=num; i++) { s+=i; } return s; } %> <% // 스크립릿(Scriptlet) : 자바의 메소드 코드 안에 포함되는 소스 - _jspService() 메소드에 포함 됨 int a; // a++; // 에러. a는 초기화 되어 있지 않음 a = 0; a++; n++; // 필드는 초기화하지 않으면 0으로 초기화 되므로 가능 %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>Scripting 요소</h3> <p> 여러번 실행 해보면 선언부 변수와 스크립릿 변수의 차이를 알 수 있다.<br> 선언부 변수는 서버가 재 실행되면 0으로 다시 초기화 되지만<br> 스크립릿 변수(메소드 내의 지역 변수)는 실행할 때 마다 초기화가 된다.<br> </p> <hr> <p> 선언부 변수 : <%=n%> </p> <p> 스크립릿 변수 : <%=a%> </p> <p> 1 ~ 100 까지 합 : <%= sum(100) %> </p> </body> </html>선언부 변수는 <%! 으로 뒤에다 느낌표를 붙이는거로 시작을 하는데
선언부 변수는 서버가 재 시작해야 초기화가 된다 상당히 위험하니까 선언부 변수는 잘 안건드는게 좋다.
무슨 말 이냐면 보통 <% 스크립릿 변수는 인터넷창에서 작업을 하다가 껏다 키면 변수들이 초기화가 되는데
선언부 변수는 서버를 아예 껐다가 켜야지만 초기화가 됨.
<%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>표현식</h3> <p> 자바 코드의 결과를 클라이언트에게 전송하기 위해 사용한다.<br> 표현식은 out.print(코드); 형식의 자바 코드로 변환 된다.<br> 표현식은 서버측에서 실행되고 실행결과(문자열)을 클라이언트에게 전송한다. </p> <hr> <p> 합 : <%= 1+2+3+4+5 %> </p> <p> <% // 스크립 릿 int n = 10; String result = n%2 == 0 ? "짝수" : "홀수"; %> <%= n %>은 <%= result %> 입니다. </p> </body> </html>표현식은 아까 말했던 것 처럼 자바코드의 결과 값이나 변수들을 사용하려면 <%= 뒤에 는을 꼭 붙여야 하는 점.
<!-- page의 contentType 속성 : 클라이언트에게 전송하는 문서의 타입 설정. 생략하면 인코딩은 ISO-8859_1로 설정 --> <%@ page contentType="text/html; charset=UTF-8"%> <!-- page의 import 속성 : 필요한 자바 클래스 import --> <%@ page import="java.util.Calendar"%> <!-- 불필요한 공백 제거 --> <%@ page trimDirectiveWhitespaces="true" %> <% Calendar cal = Calendar.getInstance(); String s = String.format("%tF %tT", cal, cal); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>page 지시어(directive)</h3> <p> page 지시어 : JSP 페이지의 설정 정보 지정 </p> <p> <%= s %> </p> </body> </html>자바처럼 import도 가능하다 골뱅이@를 붙이고 page 단어를 붙여야 한다.
그리고 <%@ page trimDirectiveWhitespaces="true" %> 이 옵션은 jsp에서 자바코드를 사용하면
HTML창에서 위쪽에 공백이 생기는데 그걸 막아주는 코드이다.
<%@ page contentType="text/html; charset=UTF-8"%> <%@ page buffer="1kb" autoFlush="false" %> <%@ page trimDirectiveWhitespaces="true" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>page 지시어(directive)</h3> <p> buffer 속성: 출력할 버퍼의 크기 지정(기본:8kb)<br> autoFlush 속성 : 버퍼가 찬경우 버퍼를 비울지의 여부를 지정(기본:true-버퍼를 비움) </p> <!-- buffer의 크기가 1kb이고 autoFlush="fasle" 환경에서 출력 내용이 4kb가 넘으므로 에러가 발생함. autoFlush="true"로 변경하면 에러가 없어짐 --> <% for(int i=1; i<=1000; i++) { %> 1234 <% } %> </body> </html>이건 jsp에서 출력 버퍼를 설정 할 수 있는건데 버퍼의 크기를 1kb로 주고 autoFlush를 꺼버리면
1kb이상 전달 내용이 있으면 에러가 뜬다.
출력 버퍼를 왜 쓰냐면
jsp는 생성된 페이지는 출력 버퍼에다가 저장을 하고 그 이후에 웹페이지를 출력한다
그렇기 때문에 버퍼의 옵션에 따라 페이지가 뜰수도 안뜰수도 있는것
버퍼를 통해서 웹페이지를 출력하면 전송 속도가 향상되기때문에 쓴다.
<%@ page contentType="text/html; charset=UTF-8"%> <%@ page errorPage="error.jsp" %> <%@ page trimDirectiveWhitespaces="true" %> <% String s = "a"; int n = Integer.parseInt(s); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>page 지시어(directive)</h3> <p> errorPage 속성 : 에러가 발생할 경우 보여줄 페이지 지정</p> <hr> <p> <%= n %></p> </body> </html><%@ page contentType="text/html; charset=UTF-8"%> <%@ page isErrorPage="true" %> <!-- 에러가 발생할때 보여지는 페이지 임을 설정 --> <%@ page trimDirectiveWhitespaces="true" %> <% // 에러 페이지가 아닌 정상적인 페이지임을 설정 response.setStatus(HttpServletResponse.SC_OK); %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>정보</h3> <p> 에러가 발생했습니다. 잠시후 다시 실행 하세요. </p> </body> </html>이건 에러가 떴을때의 페이지를 내가 만든 페이지로 보여 줄 수 있는 방법이다.
에러가 났을때의 페이지를 똑같이 jsp로 만들면 된다.
<%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>include 지시어</h3> <p> JSP 페이지에 다른 페이지의 내용을 포함할 때 사용한다.<br> JSP 파일을 JAVA로 변환할 때 처리하며, 복사&붙여넣기 개념과 유사하다. </p> <hr> <%@ include file="ex07_Inc.jsp" %> <p> <%= name %> 홈페이지 입니다. </p> </body> </html><%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <% String name = "asdasd"; %> <h3>환영 합니다.</h3>include 기능은 JSP페이지에 다른 JSP 페이지의 내용을 가져올때 사용한다.
복사 붙여넣기 개념과 유사하다.
<%@ include file="ex07_Inc.jsp" %> 을 통해서 다른 jsp 파일을 가져오고 가져온 그 파일에 있는 변수 name을 출력한 모습이다.
<%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <% int row = 10; int col = 7; int n = 0; %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>스크립 릿, 표현식 예</h3> <table border="1" style="margin: 30px auto; width: <%=col*50%>px; border-collapse: collapse;"> <% for(int i=1; i<=row; i++) { %> <tr height="30" align="center"> <% for(int j=1; j<=col; j++) { %> <td><%= ++n %></td> <% } %> </tr> <% } %> </table> </body> </html>표현식을 사용할때 HTML 태그 스타일에도 적용이 가능하다.
width를 지정할때 보통 100px 이런식으로 했다면 width: <%= col*50 %> 처럼 사용이 가능하다.
그리고 for문 돌릴때는 스크립릿 열고닫는걸 조심 해야한다.
<% for(int i=1; i<=row; i++) { %> <tr height="30" align="center"> <% for(int j=1; j<=col; j++) { %> <td><%= ++n %></td> <% } %> </tr> <% } %>for 문장 첫줄에 열고 닫고 for문을 완전히 닫는 }를 한번더 스크립릿으로 감싸준걸 볼 수 있다.
<%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <% int row = 10; int col = 7; int n = 0; %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> </head> <body> <h3>스크립 릿, 표현식 예</h3> <p> out 객체 : JSP 내장 객체로 클라이언트에게 정보(문자열)를 전송하는 객체이다. </p> <hr> <table border="1" style="margin: 30px auto; width: <%=col*50%>px; border-collapse: collapse;"> <% for(int i=1; i<=row; i++) { out.print("<tr height='30' align='center'>"); for(int j=1; j<=col; j++) { out.print("<td>"+(++n)+"</td>"); } out.print("</tr>"); } %> </table> </body> </html>만약 위의 방법대로 하는게 싫다면 애초에 처음 과 끝을 <% 표현식으로 열고 닫고
그 안에서 들여쓰기하고 일반적으로 for문 작성하듯이 해도 된다.
<%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <style type="text/css"> p { margin: 0; } </style> </head> <body> <h3>표현식, 스크립릿</h3> <hr> <h3>구구단</h3> <% for(int dan=2; dan<=9; dan++) {%> <p>** <%=dan %>단 **</p> <%for(int n=1; n<=9; n++) {%> <p><%= dan %> * <%= n %> = <%= dan*n %></p> <% } %> <p>-------------</p> <% } %> <hr> <% for(int dan=2; dan<= 9; dan++) { out.print("<p>** " + dan + "단 **</p>"); for(int n=1; n <=9; n++) { out.print("<p>" + dan +" * " + n +" = " + (dan*n) + "</p>"); } out.print("<p>-------------</p>"); } %> </body> </html>2가지의 방법으로 표현한 구구단이다.
같은 결과지만 스크립릿의 표현식이 다르다.
<%@ page contentType="text/html; charset=UTF-8"%> <%@ page trimDirectiveWhitespaces="true" %> <% int row = 10; int col = 10; int n = 0; %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <style type="text/css"> * { margin: 0; padding: 0; box-sizing: border-box; } .layout { margin: 30px auto 5px; width: <%= col*30 %>px; } .table { width: 100%; border-spacing: 0; border-collapse: collapse; } .table td { text-align: center; padding: 3px; } </style> <script type="text/javascript"> function sendOk() { var f = document.frm; var cnt = 0; var arr = []; for(var i=0; i<f.chk.length; i++) { if(f.chk[i].checked) { cnt++; arr.push(f.chk[i].value); } } if(cnt==0) { alert("선택항목이 없습니다."); return; } alert(arr.join()); } </script> </head> <body> <div class="layout"> <form name="frm"> <table class="table"> <% for(int i=1; i<=row; i++) { %> <tr> <% for(int j=1; j<=col; j++) { %> <td> <input type="checkbox" name="chk" value="<%=(++n)%>"> </td> <% } %> </tr> <% } %> </table> <table class="table"> <tr> <td style="text-align: right;"> <button type="button" onclick="sendOk()"> 확인 </button> </td> </tr> </table> </form> </div> </body> </html>자바 코드를 이용해서 체크 박스를 테이블 요소를 만들고.
자바스크립 코드에서 확인 버튼을 눌렀을때 체크한 애들을 알 수 있게 만드는 코드를 짠다.
여러 항목을 체크했을시를 생각해 배열로 처리를 한다.
for문으로 만든 체크박스의 전체 길이를 돌면서 if문으로 체크 박스가 체크 되어 있으면 cnt 변수의 값을 1 증가시키고 배열 변수 arr에 그 체크 박스의 값을 하나씩 넣는다.
반응형'프로그래밍 > JSP' 카테고리의 다른 글
JSP - 게시판 페이징 paging (0) 2021.10.18 JSP - EL / JSTL (0) 2021.10.15 JSP - 달력 (0) 2021.10.14 JSP - Parameter 파라미터 전송하기 (0) 2021.10.12 JSP - 전송 방식의 차이 (GET / POST) (0) 2021.10.11
