본문 바로가기
JSP

230207_기본

by 경 훈 2023. 2. 7.

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
	function drawImage() {
		var sel = document.getElementById("fruit");
		var img = document.getElementById("image");
		img.src = sel.options[sel.selectedIndex].value;
	}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>select 객체에서 선택한 과일 출력</h3>
	<hr>
	과일을 선택하면 이미지가 출력됩니다.<p>
	<form>
		<select id="fruit" onchange="drawImage()">
			<option value="image/mango.jpg">망고
			<option value="image/apple.jpg" selected>사과
			<option value="image/watermelon.jpg">수박
			<option value="image/melon.jpg">참외
			<option value="image/grape.jpg">포도
		</select>
		<br>
		<img id ="image" src="image/apple.jpg" width="400px" height="300px">
	</form>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
	span{
	  transition:font-size 5s;
	  <!--처음부터 확장되기까지의 걸리는 시간 -->
	}
	span:hover {
	   font-size: 500%;
	}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h3>꽝! 이라는 글자가 500% 까지 확대하기</h3>
	<hr>
	<p><span>꽝!</span>글자에 마우스를 올려보세요!!
	글씨가 확대됩니다! 바로 에니메이션 기능입니다</p>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
@keyframes koko {
from {width: 20px}
to{width: 100px}
}
img {
animation-name:koko;
animation-duration:5s;
animation-iteration-count:infinite;
<!-- infinite 무한반복 -->
}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<img src="image/apple.jpg" width="20px">
	<p>꽝!이라는 글자가 5초동안에 100%~500%
	또는 500%~100%로 확대,축소되는 프로그램
	반복횟수는 무한 반복이나 지정횟수만큼!!</p>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("p1").click(function () {
			$("#test").hide();
		});
		$("p2").click(function () {
			$("#test").show();
		});
	});
	
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2 id="test">이제부터 우리는 !!</h2>
	<p1>감추기</p1>
	<p2>보이기</p2>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	function hide() {
		$("#test").hide();
	};
	function show() {
		$("#test").show();
	};
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h2 id="test">이제부터 우리는 !!</h2>
	<form>
		<input type="button" value="감추기" onclick="hide()">
		<input type="button" value="보이기" onclick="show()">
	</form>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("p").click(function () {
			$(this).hide();
		})
		$("p2").click(function () {
			$("p").show();
		})
	});
	function show2() {
		$("p").show();
	}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>첫번째!! 여기를 클릭하세요</p>
	<p>두번째!! 여기를 클릭하세요</p>
	<p>세번째!! 여기를 클릭하세요</p>
	<p2>보이기</p2>
	<input type="button" value="보이기" onclick="show2()">
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	function hide() {
		$("p").hide();
	}
	function hide1() {
		$("#p1").hide();
	}
	function hide2() {
		$("#p2").hide();
	}
	function hide3() {
		$("#p3").hide();
	}
	function show() {
		$("p").show();
	}
	function show1() {
		$("#p1").show();
	}
	function show2() {
		$("#p2").show();
	}
	function show3() {
		$("#p3").show();
	}
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p id=p1 onclick="hide1()">첫번째!! 여기를 클릭하세요</p>
	<p id=p2 onclick="hide2()">두번째!! 여기를 클릭하세요</p>
	<p id=p3 onclick="hide3()">세번째!! 여기를 클릭하세요</p>
	<input type="button" value="1번감추기" onclick="hide1()">
	<input type="button" value="2번감추기" onclick="hide2()">
	<input type="button" value="3번감추기" onclick="hide3()"><br>
	<input type="button" value="1번보이기" onclick="show1()">
	<input type="button" value="2번보이기" onclick="show2()">
	<input type="button" value="3번보이기" onclick="show3()"><br>
	<input type="button" value="전부감추기" onclick="hide()">
	<input type="button" value="전부보이기" onclick="show()">
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("button").click(function () {
			//$("#d1").show();
			//$("#d1").fadeIn("slow");
			$("#d1").fadeIn(5000);
		});
	});
</script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<button>여기를 클릭하면 칼라상자가 보입니다!!</button>
	<div id="d1" style="width: 80px;height: 80px;
	display: none;background-color: red"></div>
</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("#id1").click(function () {
			$("#bg").slideToggle("slow");
		});
	});
</script>
<style type="text/css">
#id1,#bg {
	padding: 55px;
	text-align: center;
}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="id1">여기를 클릭하면 화면이 올라가고 내려갑니다!!</div>
	<div id="bg" style="background-size: core;">
		<img src="image/bg2.png" width="100%" height="200px">
	</div>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("button").click(function () {
			$("div").animate({left:"+=500px"},2000);
			$("div").animate({top:"+=500px"},2000);
			$("div").animate({left:"-=500px"},2000);
			$("div").animate({top:"-=500px"},2000);
		});
	});
</script>
<style type="text/css">

</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<button>여기를 클릭하면 사과가 움직임을 시작!!</button>
	<br>
	<div style="position: relative;">
		<img src="image/apple.jpg" width="40px" height="40px">
	</div>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("#b1").click(function () {
			$("p").append("<br>내용추가요!!");
		});
		$("#b2").click(function () {
			$("ol").append("<li>item</li>");
		});
	});
</script>
<style type="text/css">

</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<p>내용입니다</p>
	<p1>항목입니다</p1>
	<ol>
		<li>item1</li>
		<li>item2</li>
		<li>item3</li>
	</ol>
	<button id="b1">내용추가</button>
	<button id="b2">항목추가</button>
</body>
</html>

 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("#aaa").click(function () {
			$("#id1").width(500).height(500);
		});
		$("#bbb").click(function () {
			$("#id1").width(50).height(50);
		});
	});
</script>
<style type="text/css">
#id1 {
	width: 300px;
	height: 100px;
	padding: 10px;
	background-size: cover;
}
</style>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<div id="id1" style="background-image: url('image/apple.jpg');">
	</div>
	<button id="aaa">확대</button>
	<button id="bbb">축소</button>
</body>
</html>
<%@ 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>
	<form action="session1.jsp" method="post">
		아이디 : <input type="text" name="id"><br>
		패스워드 : <input type="password" name="pw"><br>
		<input type="submit" value="전송">
	</form>
</body>
</html>

 

<%@ 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>
	<%!
	String id,pw;
	%>
	<%
	request.setCharacterEncoding("utf-8");
	id = request.getParameter("id");
	pw = request.getParameter("pw");
	if(id==null) {
		response.sendRedirect("login.jsp");
	}
	else {
		out.println("아이디 : "+id+"<br>");
		out.println("패스워드 : "+pw+"<br>");
		//정보저장가능한 내장객체 자동생성 session, HttpSession
		/* session.setAttribute("id", id); //넘겨받은 아이디 값을 저장
		session.setAttribute("pw", pw);
		session.setMaxInactiveInterval(15); //★서버를 15초 중지하면  */
		//HttpSession방식 선호★
		HttpSession hs = request.getSession();
		hs.setAttribute("id", id);
		hs.setAttribute("pw", pw);
		hs.setMaxInactiveInterval(15); //★서버를 15초 중지하면
		out.print("<a href='session2.jsp'><button>세션2가기</button></a>");
	}
	%>
</body>
</html>

 

<%@ 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>
	<%!
	String id,pw;
	%>
	<%
	request.setCharacterEncoding("utf-8");
	/* id=(String)session.getAttribute("id");
	pw=(String)session.getAttribute("pw"); */
	HttpSession hs = request.getSession();
	id = (String)hs.getAttribute("id");
	pw = (String)hs.getAttribute("pw");
	if(id==null) {
		out.print("로그아웃이나 시간초과해서 다시 로그인"+"<br>");
		out.print("<a href='login.jsp'><button>로그인가기</button></a>");
	}
	else {
		out.print("당신의 아이디 : "+id+"<br>");
		out.print("당신의 패스워드 : "+pw);
	}
	%>
	<br>
	<a href="session3.jsp"><button>다른정보확인</button></a>
</body>
</html>

 

<%@ 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>
	나보기가 역겨워<br>
	가실 때에는<br>
	말없이 고이 보내 드리우리다<br>
	<a href="session2.jsp"><button>세션2로가기</button></a><br>
	<a href="logout.jsp"><button>로그아웃</button></a>
</body>
</html>

 

<%@ 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>
	<%
	//session.invalidate();
	HttpSession hs = request.getSession();
	hs.invalidate();
	%>
	<a href="session2.jsp"><button>세션2가기</button></a>
</body>
</html>

'JSP' 카테고리의 다른 글

230209_서블릿  (0) 2023.02.09
230208_서블릿  (0) 2023.02.08
230206_기본  (0) 2023.02.06
230203_DB  (0) 2023.02.03
230202_DB  (0) 2023.02.02

관련글

댓글

티스토리툴바