본문 바로가기

👨‍💻 코딩 도서관

🌠 자바 서버 페이지 JSP/🪐 제이 쿼리 jQuery

제이 쿼리 - 초급 문제/풀이 1️⃣📝

by Meteora_ 2021. 3. 8.

728x90

문제 풀이에 필요한 이미지 Download

문제 이미지.zip

문제 1 -

문제 풀이 ->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>
<body>

<h1>Life on the water</h1>

<img alt="" src="./images/photo1.jpg" class="photo">
<img alt="" src="./images/photo2.jpg" class="photo">
<br>
<img alt="" src="./images/photo3.jpg" class="photo">
<img alt="" src="./images/photo4.jpg" class="photo">

<script type="text/javascript">
$(document).ready(function() {
	/*
	$(".photo").click(function() {
		
	});
	*/
	$(".photo").on("click", function () {
		$(this).css("border", "solid 5px #ff0000");
	});
});


</script>

</body>

</html>

문제 2 -

문제 풀이 ->

HTML 파일

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h1>송부 정보의 입력</h1>

<form id="sendFrm">

이름:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="name" id="_name" size="20">
<br><br>
우편번호:&nbsp;<input type="text" name="postNum1" id="_postNum1" size="10" maxlength="3">-<input type="text" name="postNum2" id="_postNum2" size="10" maxlength="4">
<button type="button">주소변환</button>
<br><br>
주소:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<textarea rows="2" cols="50" id="_address" name="address"></textarea>
<br><br>
배달시간:
<select name="trans" id="_trans" multiple="multiple">
	<option value="10">10:00 ~ 12:00</option>
	<option value="12">12:00 ~ 15:00</option>
	<option value="15" selected>15:00 ~ 17:00</option>
	<option value="17">17:00 ~ 20:00</option>
	<option value="0">지정하지 않음</option>
</select>
<br><br>
영수증 요청:<input type="checkbox" name="money" id="_money">	<!-- on -->
<br><br>
매거진 수신:
<input type="radio" name="maga" id="_maga" value="신청" checked="checked">신청
<input type="radio" name="maga" id="_maga" value="신청하지 않음">신청하지 않음 
<br><br>

<button type="button" id="btn">전송</button>

</form>

<script type="text/javascript">
$(function () {

	$("*").focus(function () {
		$(this).css("background-color", "green");
	});
	
	$("*").blur(function () {
		$(this).css("background-color", "#ffffff");
	});
	
	$("#btn").click(function () {
		
		// 빈칸 첵크
		if( $("#_name").val() == "" ){
			alert('이름을 기입해 주십시오');			
		}
		else{
		/*	
			location.href = "NewFile.jsp?"
			
			let name = $("#_name").val();
			alert(name);
			
			let postNum1 = $("#_postNum1").val();	
			alert(postNum1);
			
			let postNum2 = $("#_postNum2").val();	
			alert(postNum2);
						
			let address = $("#_address").val();
			alert(address);

			let trans = $("#_trans").val();
			alert(trans);
			
			let money = $("#_money").val();
			alert(money);
			
			let maga = $("#_maga").val();
			alert(maga);
		*/	
		//	location.href = "NewFile.jsp?name=" + $("#_name").val()
				
		//	$("#sendFrm").attr("action", "NewFile.jsp").submit();	
		
			$("#sendFrm").attr("action", "NewFile.jsp");
			$("#sendFrm").attr("target", "_blank");
			$("#sendFrm").submit();	// 실제 이동
		}		
	});	
	
});
</script>

</body>
</html>

JSP 파일

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

<%

String name = request.getParameter("name");
String postNum1 = request.getParameter("postNum1");
String postNum2 = request.getParameter("postNum2");
String address = request.getParameter("address");

String trans[] = request.getParameterValues("trans");

String money = request.getParameter("money");
String maga = request.getParameter("maga");

%>    

<%
out.println(name + "<br>");
out.println(postNum1 + "<br>");
out.println(postNum2 + "<br>");
out.println(address + "<br>");

if(trans != null && trans.length > 0){
	for(int i = 0;i < trans.length; i++){
		out.println(trans[i] + "<br>");
	}
}

out.println(money + "<br>");
out.println(maga + "<br>");
%>

문제 3 -

문제 풀이 ->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h1>room image</h1>

<img alt="" src="./images/photo_a.jpg" id="pic">

<script type="text/javascript">
$(function () {
	/*
	let num = 0;	
	$("#pic").click(function () {		
		if(num == 0){
			$(this).attr("src", "./images/photo_b.jpg");	
			num = 1;
		}
		else{
			$(this).attr("src", "./images/photo_a.jpg");			
			num = 0;
		}			
	});
	*/
	
	$("#pic").hover(
		function () {	// mouseover
			$(this).attr("src", "./images/photo_b.jpg");
		},
		function () {	// mouseout
			$(this).attr("src", "./images/photo_a.jpg");
		}		
	);
	
	
});
</script>


</body>
</html>

문제 4 -

문제 풀이->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h1>사진들</h1>

<img alt="" src="images/img01.jpg" picname="성 자비에르 성당(외관)">
<img alt="" src="images/img02.jpg" picname="성 자비에르 성당(내관)">
<img alt="" src="images/img03.jpg" picname="낡은 건물">
<img alt="" src="images/img04.jpg" picname="가로등">

<script type="text/javascript">
$(document).ready(function() {
	
	$("img").click(function() {
		let picname = $(this).attr('picname');
		alert(picname);		
	});
	
});

</script>

</body>
</html>

문제 5 -

문제 6 - 연계

문제풀이->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<h1>이미지 자동 삽입</h1>

<div class="pic">
</div>

<script type="text/javascript">
$(function () {
	
	for(i = 1;i < 10; i++){	// 1 ~ 9 
		
	//	let img = $("<img></img>").attr("src", "images/photo_" + i + ".jpg").attr("class", "photo");
	
		let img = $("<img></img>").attr({ 	
											"src":"images/photo_" + i + ".jpg",
											"class": "photo"
										});
	
	//	let img = "<img src='images/photo_" + i + ".jpg'></img>";
	
		$(".pic").append(img);
	}
	
	$(".photo").click(function () {
		$(this).remove();
	});
	
});


</script>




</body>
</html>

저작자표시

'🌠 자바 서버 페이지 JSP > 🪐 제이 쿼리 jQuery' 카테고리의 다른 글

8️⃣ 제이 쿼리 - 버튼을 클릭하면, 숨겨진 텍스트박스 + 버튼 보이기 (0)	2021.03.08
7️⃣ 제이 쿼리 - 버튼을 누르면 텍스트 아래 추가 (0)	2021.03.08
5️⃣ 제이 쿼리 - List , Option + Oppend, Prepend 적용 (0)	2021.03.05
4️⃣ 제이 쿼리 - 버튼 + 2차원 배열 이용한 테이블 자동 생성 (0)	2021.03.05
3️⃣ 제이 쿼리 - CSS, MouseOver, 속성 추가 (0)	2021.03.05

댓글

티스토리툴바