JSP - eclipse

최성현·2023년 7월 31일
JAVA사용법JSP 기본JSP배열for문 배열구구단 배열배열 이미지에러주석출력표현식
0

JSP

목록 보기
2/13

JSP 기본

주석 2가지

<!-- 주석1: 소스보기에도 보인다 -->
<%-- jsp주석: 소스보기에서도 안보인다 --%>

다 맞는데 에러가 있을 경우

<!-- 제대로 써도 오류가 나올 때 있지만 그대로 사용 가능(마우스 올려도 이유가 안뜸) -->

JSP에서 JAVA 사용법

옆에 느낌표 사용하면 위에 표현식 있어도 사용가능 //가끔 에러떠도 !넣으면 정상작동
스크립트릿(scriptlet)
여기서 선언하는 변수는 지역변수로 등록이 된다 (이 퍼센트 밑 지역)
그래서 이곳의 변수를 html에서 사용하려면
선언한 곳보다 아라애서 사용 가능하다
주석도 자바...자바코드 사용이 가능하다

<%! //옆에 느낌표 사용하면 위에 표현식 있어도 사용가능 //가끔 에러떠도 !넣으면 정상작동
	//스크립트릿(scriptlet)
	//여기서 선언하는 변수는 지역변수로 등록이 된다 (이 퍼센트 밑 지역)
	//그래서 이곳의 변수를 html에서 사용하려면
	//선언한 곳보다 아라애서 사용 가능하다
	//주석도 자바...자바코드 사용이 가능하다
	int age=17;
	String name="김영환";
	
	//메서드
	public String getCheck(){
		
		if(age>=20)
			return "성인입니다";
		else
			return "미성년자 입니다";
	}
%>

표현식

자바에 있던 문구들 출력

<%-- <%=name %>님의 나이는 <%=age %>세 입니다 --%>

출력 방법

<h3 class="alert alert-info">멤버변수 출력</h3>
<b>이름: <%=name %></b> <!-- 표현식 -->
<b>나이: <%=age %>세(<%=getCheck() %>)</b>

본문

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<h2>JSP는 HTML5구조에 자바코드를 사용할 수 있는 서버 언어이다</h2>
	<h3>Servlet은 확장자가 java이며 자바클래스 구조에<br>html.css.js도 사용할 수 있다</h3>
	<h3>jsp주석은 2가지 기능</h3>
	<!-- 주석1: 소스보기에도 보인다 -->
	<%-- jsp주석: 소스보기에서도 안보인다 --%>


<!-- 제대로 써도 오류가 나올 때 있지만 그대로 사용 가능(마우스 올려도 이유가 안뜸) -->
<%! //옆에 느낌표 사용하면 위에 표현식 있어도 사용가능 //가끔 에러떠도 !넣으면 정상작동
	//스크립트릿(scriptlet)
	//여기서 선언하는 변수는 지역변수로 등록이 된다 (이 퍼센트 밑 지역)
	//그래서 이곳의 변수를 html에서 사용하려면
	//선언한 곳보다 아라애서 사용 가능하다
	//주석도 자바...자바코드 사용이 가능하다
	int age=17;
	String name="김영환";
	
	//메서드
	public String getCheck(){
		
		if(age>=20)
			return "성인입니다";
		else
			return "미성년자 입니다";
	}
	
%>

<!-- 표현식 -->
<%-- <%=name %>님의 나이는 <%=age %>세 입니다 --%>

<h3 class="alert alert-info">멤버변수 출력</h3>
<b>이름: <%=name %></b> <!-- 표현식 -->
<b>나이: <%=age %>세(<%=getCheck() %>)</b>

</body>
</html>

JSP 배열

JSP JAVA식 선언

<%
	//배열선언
	String colors[]={"green","magenta","gray","yellow","cyan"};
	//제목
	String title="배열출력";
%>

title 출력

<b><%=title %></b>

배열 for문 출력

<table class="table table-bordered" style="width: 200px;">

	<tr>
		<th>번호</th>
		<th>색상</th>
	</tr>
	
	<!-- tr이 반복되야하기 때문에 tr태그 나와서 for문 작성 -->
	<%
		for(int i=0;i<colors.length;i++)
		{%>	<!-- for문 안은 JAVA가 아니기 때문에 꺽쇠를 열고 닫아줘야함 -->
			<tr>
				<td align="center"><%=i+1 %></td>
				<td>
					<!-- 글자에 색 입히고 싶으면 style줘서 꺽쇠=colors[i]퍼센트꺽쇠 배열넣어줘야 -->
					<b style="color: <%=colors[i] %>"><%=colors[i] %></b>
				</td>
			</tr>
		<%}
	%>
</table>

JAVA <%%> 주의점

Java문구를 쓸 때 <%%>로 잘 묶어주고
출력할때는 html을 사용해서 해야한다

본문

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	//배열선언
	String colors[]={"green","magenta","gray","yellow","cyan"};
	//제목
	String title="배열출력";
%>
<b><%=title %></b>

<table class="table table-bordered" style="width: 200px;">

	<tr>
		<th>번호</th>
		<th>색상</th>
	</tr>
	
	<!-- tr이 반복되야하기 때문에 tr태그 나와서 for문 작성 -->
	<%
		for(int i=0;i<colors.length;i++)
		{%>	<!-- for문 안은 JAVA가 아니기 때문에 꺽쇠를 열고 닫아줘야함 -->
			<tr>
				<td align="center"><%=i+1 %></td>
				<td>
					<!-- 글자에 색 입히고 싶으면 style줘서 꺽쇠=colors[i]퍼센트꺽쇠 배열넣어줘야 -->
					<b style="color: <%=colors[i] %>"><%=colors[i] %></b>
				</td>
			</tr>
		<%}
	%>
</table>
</body>
</html>

구구단 배열 출력법

본문

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
	<table class="table table-bordered">
		<tr>
			<td colspan="8" align="center">
				<b style="font-size: 2em;">전체 구구단(가로)</b>
			</td>
		</tr>
		
		<tr>
			<%
				for(int dan=2;dan<=9;dan++)
				{%>
					<td align="center"><%=dan %>단</td>
				<%}
			%>
		</tr>
		
		<%
		for(int i=1;i<=9;i++)
		{%>
			<tr>
				<%
				for(int dan=2;dan<=9;dan++)
				{%>
					<td align="center">
						<%=dan %>X<%=i %>=<%=dan*i %>
					</td>	
				<%}
				%>
			</tr>	
		<%}
		%>
	</table>
</body>
</html>

배열 이미지 출력

3행 3열 생성

/* 3행 3열의 칸을 만들어주기 위한 2중 for문 */
		for(int i=0;i<3;i++) //행
		{%>
			<tr>
			<%
				for(int j=0;j<3;j++) //열
				{%>
					<td>
						<!-- 만들어진 3행3열 칸 안에 값들을 넣어주기 위한 배열안 숫자 n
							 그래서 안에 n증감연산자 사용해서 증가시킴
							 즉, str[0]부터 증가시켜서 9번 반복되니 str[0~8번째 index]-->
						<img src="../image/<%=str[n]%>" width="150" height="150">
					</td>
				<%
					n++;				
				}
			%>
			</tr>	
		<%}

3행 3열에 값 넣기

for(int j=0;j<3;j++) //열
{%>
	<td>
		<!-- 만들어진 3행3열 칸 안에 값들을 넣어주기 위한 배열안 숫자 n
	 		 그래서 안에 n증감연산자 사용해서 증가시킴
	 		 즉, str[0]부터 증가시켜서 9번 반복되니 str[0~8번째 index]-->
		<img src="../image/<%=str[n]%>" width="150" height="150">
    </td>
		<%n++;				
		}
%>

본문

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<%
	String str[]={"15.png","16.png","02.png","20.png","14.png",
					"11.png","08.png","04.png","07.png"};
	int n=0;
%>

<table class="table table-bordered" style="width: 460px;">
	<%
		/* 3행 3열의 칸을 만들어주기 위한 2중 for문 */
		for(int i=0;i<3;i++) //행
		{%>
			<tr>
			<%
				for(int j=0;j<3;j++) //열
				{%>
					<td>
						<!-- 만들어진 3행3열 칸 안에 값들을 넣어주기 위한 배열안 숫자 n
							 그래서 안에 n증감연산자 사용해서 증가시킴
							 즉, str[0]부터 증가시켜서 9번 반복되니 str[0~8번째 index]-->
						<img src="../image/<%=str[n]%>" width="150" height="150">
					</td>
				<%
					n++;				
				}
			%>
			</tr>	
		<%}
	%>
</table>
</body>
</html>

0731 배열 과제

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<title>Insert title here</title>
</head>
<body>
<!-- f1~f20.png 4행 5열(2중for)로 출력 -->
<%
	int n=1;
%>

<table class="table table-bordered" style="width: 400px">
	<%
		for(int i=0;i<4;i++)
		{%>
			<tr>
			<%
				for(int j=0;j<5;j++)
				{%>
					<td>
						<img src="../image/f<%=n%>.png">
						<%-- <img src="../image/<%=(n<10?("0"+n):n)%>.png"> --%>
					</td>
				<%
				n++;
				}
			%>
			</tr>	
		<%}
	%>
</table>

</body>
</html>
profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
이전 포스트

JSP - eclipse

다음 포스트

JSP - eclipse

0개의 댓글