Jam's story
[JSP] JSP 페이지의 구성요소 본문
- 디렉티브 (Directive) == 지시자: 3가지
- <%@ page 지시자 %>
- <%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
- jsp 페이지에 대한 정보를 선언하는 부분
- jsp 페이지 (WAS) -> 텍스트형식의 html 문서 생성. charset=UTF-8
- <%@ include 지시자 %>
- <%@ taglib 지시자 %>
- <%@ page 지시자 %>
- 스크립트 요소 (3가지)
- jsp 페이지 문서 내용을 동적으로 생성하기 위해서 사용되는 스크립트
- 스크립트릿 (Scriptlet) <% 자바코딩 %>
- 표현식 (Expression) <%= 변수명 %>
- 선언부 (Declaration) <%! 변수선언, 메서드선언 %>
- 표현언어 (Expression Language: EL) != 표현식
- jsp 기본 내장 객체 9가지 - request, response, session, application, page 등등
- 정적 데이터
- 표준 액션 태그 (Action Tag)
- jsp: 접두사가 붙어있는 태그 == [표준] 액션태그 <jsp:태그명></jsp:태그명>
- 커스텀 태그 + JSTL (자바(J) 표준(S) 태그(T) 라이브러리(L)) <logon></logon>
% 가 붙으면 서버에서 실행된다.
taglib tag library
ex02_html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<title>2022. 6. 14.-오후 2:48:05</title>
</head>
<body>
<h3></h3>
jsp=java Server page
<form action="ex02_ok.jsp" method="get">
이름:<input type="text" name="name" autofocus="autofocus" tabindex="1"><br>
나이: <input type="text" name="age" tabindex="2"><br>
<input type="submit" tabindex="3">
<input type="reset">
</form>
<script>
$(function(){
$("form").submit(function(event){
if($(":text[name=name]").val().trim()==""){
alert("이름 입력 필수 사항");
event.preventDefault();
$(":text[name=name").focus();
return;
}
if($(":text[name=age]").val().trim()==""){
alert("나이 입력 필수 사항");
event.preventDefault();
$(":text[name=age").focus();
return;
}
});
});
</script>
</body>
</html>event.preventDefault();
1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우
2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨)
ex02_ok.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String name =request.getParameter("name");
int age=Integer.parseInt(request.getParameter("age"));
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<title>2022. 6. 14.-오후 2:48:10</title>
</head>
<body>
<h3></h3>
<%--
전송된 name: <%=name %><br>
전송된 age:<%=age %><br>
--%>
name: ${param.name }<br>
age:${param.age }<br>
</body>
</html>
ex03.jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<title>2022. 6. 14.-오후 3:28:49</title>
</head>
<body>
<h3></h3>
<%
//scriptlet-자바코딩
String addr="서울 강남구 역삼동 11번지";
%>
>주소: <%= addr %><br>
>상세주소: <input type="text"><br>
</body>
</html>
1+2+3+4+5+6+7+8+9+10 =55
ex04.jsp
<%
int sum = 0;
for(int i = 1; i <= 10; i++) {
sum += i;
out.append(i != 10 ? i + "+" : i + "");
}
out.append("=" + sum);
%>
<!-- 1+2+3+....+9+10 -->
<%
int sum=0;
for(int i=1; i<=10; i++){
/* append는 int형을 쓸 수 없다. -> string 으로 */
// out.append(i!=10? i+"+": i+"");
out.print(i);
if(i !=10){
%>+<%
}
sum+=i; }%>=<%=sum %>
</body>
이렇게 끊을 줄 알아야 한다.
<% // 스크립트릿 : 서버에서 실행 스크립트
// ex04_02.jsp Jasper 컴파일 -> ex04_02.java -> ex04_02.class
int sum = 0;
for( int i = 1 ; i <= 10 ; i++){
// out.append( i +"" );
%>
<%= i %>
<%
if( i != 10 ){
//out.append( "+");
%>
+
<%
} // if
sum += i;
} // for
//out.append("=" + sum);
%>
=<%= sum %>
<%-- 1.
<%
int sum = 0;
for( int i = 1 ; i <= 10 ; i++){
out.append( i +"" );
if( i != 10 ){
out.append( "+");
} // if
sum += i;
} // for
out.append("=" + sum);
%>
--%> js , jquery 사용해서 정수를 입력하고 엔터를 치면 demo 라는 p 요소에 출력
클라이언트(브라우저)에서 출력.
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022. 6. 14. - 오후 3:59:56</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/SiSt.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<h3>ex05.jsp</h3>
<!-- 4:11 수업 시작 -->
<pre>
js , jquery 사용해서 정수를 입력하고 엔터를 치면 demo 라는 p 요소에 출력
클라이언트(브라우저)에서 출력.
</pre>
정수 입력 : <input type="text" name="n" value="5">
<p id="demo">
1+2+3+4+5=15
</p>
<script>
$(function (){
$(":text[name=n]").keyup(function(event) {
if( event.which == 13 ){
var n = $(this).val();
var sum = 0;
$("#demo").text( "" );
for (var i = 1; i <= n ; i++) {
$("#demo").text( function ( index, text ){
// index 변수
// text 변수 : #demo text
// console.log( index + " / " + text + " : " + i );
return text + i + "+";
});
sum += i;
} // for
$("#demo").text(function (index, text){
return text +"=" + sum;
});
}// if
});
/* 1번 풀이
$(":text[name=n]").keyup(function(event) {
// event.keyCode == 13
if( event.which == 13 ){
var n = $(this).val();
var sum = 0;
var content = "";
for (var i = 1; i <= n ; i++) {
content += i + "+";
sum += i;
} // for
// $("#demo").html();
content += "=" + sum;
$("#demo").text( content );
}// if
});
*/
});
</script>
</body>
</html>HTTP 상태 500 오류 - 내부 서버 오류 jsp 코딩 x
'JSP' 카테고리의 다른 글
| [JSP] 입력한 정수만큼의 합을 출력 , 계산기만들기 (0) | 2022.06.19 |
|---|---|
| [JSP] method "get" 과 "post"의 차이 (0) | 2022.06.19 |
| [JSP] 서블릿과 서블릿 맵핑 (0) | 2022.06.19 |
| [JSP] 자동 import -> shift+ctrl+o 작동 안할때 (0) | 2022.06.19 |
| [JSP] input 값 넘기기 (0) | 2022.05.19 |
'JSP' Related Articles
more
Comments