1월 13일 sample4, 5, 6, 7, 8, 과제(work1)

2020. 6. 2. 23:23ㆍ프론트엔드 & 백엔드 개발자 과정/jquery

<< sample4 index >>

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

이름:<input type="text"><br><br>

이메일:<input type="text"><br><br>

<p>여기가 p tag 1입니다</p>

<p>여기가 p tag 2입니다</p>
<br>

<script type="text/javascript">
$(document).ready(function () {
	
	$("input").focus(function () {	// 포커스가 맞춰졌을 때	
		$(this).css("background-color", "#ffff00");
	});
	
	$("input").blur(function () {	// 포커스가 벗어낫을 때
		$(this).css("background-color", "#fff");
	});
	
	$("p").mouseover(function () {
		$(this).css("background-color", "#ff0000");
	});
	
	$("p").mouseout(function () {
		$(this).css("background-color", "#ffffff");
	});
	
	$("p").dblclick(function () {	// 더블클릭
		alert( $(this).text() );			
	});	
});
</script>

</body>
</html>

<< index1 >>

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

<div align="center">
	<div class="test" style="background-color: green; width: 50%; height: 100px; text-align: center;">
	I can do it
	</div>
</div>
<br>
<button type="button" id="hideBtn">감추기</button>
<button type="button" id="showBtn">보여주기</button>
<button type="button" id="toggleBtn">스위치</button>

<script type="text/javascript">
$(function () {		
	$("#hideBtn").click(function () {
		$(".test").hide(2000);	// 2초 동안 실행
	});
	$("#showBtn").click(function () {
		$(".test").show(3000);	// 3초 동안 실행
	});
	$("#toggleBtn").click(function () {	// 한번 누르면 사라지고 다시 누르면 보여주고, hide + show
		$(".test").toggle(1500);	// 1.5초 동안 실행
	});
	
	/* 
	$(".test").mouseenter(function () {	// 마우스가 영역에 들어오면
		$(this).css("background-color", "#0000ff");
	});
	
	$(".test").mouseleave(function () {	// 마우스가 영역에서 나가면
		$(this).css("background-color", "#00ff00");
	}); */
	
	$(".test").hover(function () {	// mouseenter + mouseleave
		$(this).css("background-color", "#ff0000");
	}, function() {			
			$(this).css("background-color", "#00ff00");
	});
});

</script>

</body>
</html>

<< sample5 index >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<!-- 
Link

html
<a href=""			짐(갖고 가는 데이터)이 없이 이동
<form action=""		짐(갖고 가는 데이터)을 갖고 이동

JavaScript
location.href		검사를 하고 나서 (짐을 갖고) 이동
 -->
 
<form action="NewFile.jsp">
	ID:<input type="text" name="_id" id="id" placeholder="id 입력"><br> 
 
 	<!-- <input type="submit" value="버튼제목"> html -->
 	<!-- <button type="button" onclick="btnClick()">버튼제목</button>	JS --> 
 	
 	<button type="button" id="btn">버튼제목</button> 	
</form>

<script type="text/javascript">
function btnClick() {
	var id = document.getElementById("id").value;	// DOM
	if(id == ''){ return; }
	location.href = "NewFile.jsp?id=" + id;
}

$("#btn").click(function () {
//	alert("button click");
	location.href = "NewFile.jsp?id=" + $("#id").val();
});


</script>
 
</body>
</html>

<< NewFile.jsp >>

<%@ 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 = request.getParameter("id");

out.println("id:" + id);
System.out.println("id:" + id);		// 콘솔로 내보내기


%>

</body>
</html>

<< index1 >>

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

<h3>JQuery</h3>

<form>
이름:<input type="text" id="name"><br>
나이:<input type="text" id="age"><br>
주소:<input type="text" id="address"><br>
<button type="button" id="btn">전송</button>
</form>

<script type="text/javascript">
$(function () {
//	$("#btn").click(function () {		
//	});
	
	$("#btn").on("click", function () {
		// 검사
	//	alert("click");
		location.href = "NewFile1.jsp?name=" + $("#name").val()
							+ "&age=" + $("#age").val() + "&address=" + $("#address").val();
	});
});
</script>

<br><br><br>

<form id="frm" action="NewFile1.jsp">
이름:<input type="text" id="_name" name="name"><br>
나이:<input type="text" id="_age" name="age"><br>
주소:<input type="text" id="_address" name="address"><br>
<button type="button" id="_btn">전송</button>
<!-- <input type="submit" value="전송"> -->
</form>

<script type="text/javascript">
$(function () {
	$("#_btn").click(function () {
	//	$("#frm").attr("action", "NewFile1.jsp").submit();	// ==  <form id="frm" action="NewFile1.jsp">	
		$("#frm").submit();	 // 위 form 안에 action을 기입했으면 .submit();만 작성하면 됨
	});		//.attribute, action에서 NewFile1.jsp로 데이터를 넘기고 제출
	
});
</script>

</body>
</html>

<< NewFile1.jsp >>

<%@ 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 name = request.getParameter("name");
String sage = request.getParameter("age");
String address = request.getParameter("address");

int age = Integer.parseInt(sage);	// age도 String으로 넘어와서 parseInt로 형변환

out.println("이름:" + name + "<br>");
out.println("나이:" + age + "<br>");
out.println("주소:" + address + "<br>");

%>

</body>
</html>

<< sample6 index >>

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

<!-- radio -->	<!-- name으로 묶어야 함! -->
<ul>
	<li><input type="radio" name="radio_test" value="사과">사과</li>
	<li><input type="radio" name="radio_test" value="배" checked="checked">배</li>
	<li><input type="radio" name="radio_test" value="바나나">바나나</li>
</ul>
<button type="button" id="choice">선택</button>

<script type="text/javascript">
$(function () {
	
	$("#choice").click(function () {		
		// getter
		var radioVal = $("input[name='radio_test']:checked").val();		
		alert(radioVal);
		
		// setter
		$("input[name='radio_test']").val(["사과"]);		
	});	
});
</script>

<br><br>

<!-- checkbox -->
<input type="checkbox" id="che">그림그리기
<br>
<button type="button" id="mycheck">체크</button>

<script type="text/javascript">
$("#mycheck").click(function () {
	
	// getter
//	var check = $("#che").is(":checked");
//	alert("check:" + check);

	var check = $("input:checkbox[id='che']").is(":checked");
	alert("check:" + check);	
	
	// setter
	$("#che").prop("checked", true);	//.prop : property
});


</script>



</body>
</html>

<< sample7 index >>

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

<!-- 
	Document Object Model
	
	JavaScript : innerHTML, value
	
	JQuery : html(), text(), val(), css(), attr(), prop()
	
		setter -> css("background-color", "#ff0000")
		
				  css({ 
				  		"background-color":"#ff0000",
				  		"border":"3px solid"				  		
				  	});
				  	
		getter -> var v = $("#id").css("background-color");
		따로 따로 가져옴
		
		setter -> $( id, class, name, tag ).val( 값 );	<- input
		
				  $( id, class, name, tag ).css("특성명", "값");
				  
		getter -> $( id, class, name, tag ).val();
		
				  $( id, class, name, tag ).css("특성명");
				  
		// setter		  
		form ->   $( id, class, name, tag ).attr("속성명", "값");
				  $( id, class, name, tag ).submit();
 -->
 
<!-- 일반 Tag -->
<p id="demo">백악관 <b>안보보좌관</b> "트럼프, 김정은에 대화 재개 희망 밝혀"</p>
<button id="btnText">show Text</button>
<button id="btnHtml">show Html</button>

<script type="text/javascript">
$(document).ready(function () {
	$("#btnText").click(function () {
		var text = $("#demo").text();
		alert(text);
	});
	$("#btnHtml").click(function () {
		var html = $("#demo").html();
		alert(html);
	});
});

</script>

<br><br>

<!-- 입력(input, select) -->
<input type="text" id="text" placeholder="입력주제">
<button type="button" id="btnInput">show value</button>


<script type="text/javascript">
$(function () {
	
	$("#btnInput").click(function () {
		var v = $("#text").val();	// getter
		alert(v);
	});	
});
</script>

<br><br>

<!-- attr -->
<p>
	<a href="http://www.naver.com" id="naver">Naver Link</a>
</p>

<button type="button" id="btnAttr">Attribute(속성)</button>

<script type="text/javascript">
$(function () {
	$("#btnAttr").click(function () {
		// getter
		var attrVal = $("#naver").attr("href");
		alert(attrVal);
		
		// setter
		$("#naver").attr("href", "http://www.google.com");
		$("#naver").text("구글 홈페이지");
	});
});
</script>


</body>
</html>

<< sample8 index >> 

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

<!-- createElement -->

<p>로버트 오브라이언 미 백악관 국가안보보좌관은 지난 10일 이 매체와 인터뷰에서 "우리는 북한에 접촉해 지난해 10월 스톡홀름에서 한 협상을 이어가기를 원한다는 의사를 전했다"며 북한과의 대화 재개를 추진하고 있음을 밝혔다.</p>
<p>그는 "여러 채널을 통해 우리가 이 협상들의 재개와 김정은 북한 국방위원장의 한반도 비핵화 약속 이행을 원한다는 뜻을 전달했다"고 말했다.</p>

<ol>
	<li>사과</li>
	<li>배</li>
	<li>바나나</li>
</ol>

<br>

<select id="food">
	<option value="햄버거">햄버거</option>
	<option value="피자">피자</option>
	<option value="치킨">치킨</option>
</select>

<br><br>

<button type="button" id="btn1">추가 텍스트(뒤)</button>
<button type="button" id="btn2">추가 텍스트(앞)</button>

<script type="text/javascript">
$(function () {
	$("#btn1").click(function () {
	//	$("p").append("<br>append 추가 요소(element)입니다");
	//	$("ol").append("<li>포도</li>");
		$("select").append("<option value='스테이크'>스테이크</option>");
	});
	$("#btn2").click(function () {
	//	$("p").prepend("<br>prepend 추가 요소(element)입니다");
	//	$("ol").prepend("<li>오렌지</li>");
		$("select").prepend("<option value='떡볶이'>떡볶이</option>");
	});
});

</script>

</body>
</html>

<< index1 >>

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

<button type="button">Tag Append</button>

<script type="text/javascript">
$(function () {
	
	$("button").click(function () {
		
		// html(text) 추가
		var txt1 = "<p>html p tag append</p>";
		$("body").append(txt1);
		
		// Java Script 추가	DOM
		var txt2 = document.createElement("p");
		txt2.innerHTML = "JS p tag append";
		$("body").append(txt2);
		
		// JQuery 추가
		var txt3 = $("<p></p>").text("JQuery p tag append");
		$("body").append(txt3);		
	});
	
});

</script>



</body>
</html>

<< work1 index01>>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<style type="text/css">
.frame{
	border-left: 8px solid #cccccc;
	border-right: 8px solid #cccccc;
	border-top: 8px solid #cccccc;
	border-bottom: 8px solid #cccccc; 
}
</style>

</head>
<body>

<button id="b1">class의 추가</button>
<button id="b2">class의 삭제</button>
<button id="b3">class의 추가/삭제</button>
<br><br>
<img alt="" src="./images/photo1.jpg" class="pic">

<script type="text/javascript">
$(function () {
	$("#b1").click(function () {
		/* 
	//	$(".pic").css("border", "10px solid #0000ff");
	
		$(".pic").css({
			"border-left":"10px solid #ff0000",
			"border-right":"15px solid #00ff00",
			"border-top":"15px solid #ffff00",
			"border-bottom":"50px solid #0000ff",
		}); */
		
		$(".pic").addClass( "frame" );
	});
	
	$("#b2").click(function () {
		$("img").removeClass( "frame" );
	});
	
	$("#b3").click(function () {
		$(".pic").toggleClass( "frame" );
	});
	
});

</script>

</body>
</html>

<< index >>

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

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

<form id="frm">
이름:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="_name" name="name" size="20"><br><br>
우편번호:<input type="text" name="post1" size="10" maxlength="3">-<input type="text" name="post2" size="10" maxlength="4">
<button type="button">주소변환</button>
<br><br>
주소:<textarea rows="2" cols="50" name="address"></textarea><br><br>
전화번호:<input type="text" name="tel1">-<input type="text" name="tel2">-<input type="text" name="tel3"><br><br>
배달시간:<select name="deltime" multiple="multiple">
			<option value="10">10:00 ~ 12:00</option>
			<option value="12">12:00 ~ 15:00</option>
			<option value="15" selected="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="receipt"><br><br>
메일 매거진을 수신<input type="radio" name="radiomail" value="신청" checked="checked">신청
<input type="radio" name="radiomail" value="신청하지 않음">신청하지 않음
<br><br>
<button type="button" id="choice">확인 화면으로 진행</button>
</form>

<script type="text/javascript">
$(function () {
	$("*").focus(function () {	// == $("input").
		$(this).css("background-color", "#ffff00");
	});
	
	$("*").blur(function () {
		$(this).css("background-color", "#fff");
	});
		
	$("#choice").click(function () {
		
		if($("name").val() == ""){
			alert("이름을 기입해 주십시오");
		}
		else{
			$("#frm").attr("action", "NewFile.jsp");
			$("#frm").submit();
		}		
	});	
});

</script>

</body>
</html>

<< NewFile.jsp >>

<%@ 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 name = request.getParameter("name");
String post1 = request.getParameter("post1");
String post2 = request.getParameter("post2");

String address = request.getParameter("address");

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

String receipt = request.getParameter("receipt");
String radiomail = request.getParameter("radiomail");

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

String tel1 = request.getParameter("tel1");
String tel2 = request.getParameter("tel2");
String tel3 = request.getParameter("tel3");

 
out.println("이름:" + name + "<br>");
out.println("우편번호:" + post1 + "-" + post2 + "<br>");
out.println("주소:" + address + "<br>");
out.println("전화번호:" + tel1 + "-" + tel2 + "-" + tel3 + "<br>");
out.println("배달시간:" + deltime + "<br>");
out.println("영수증 요청:" + receipt + "<br>");
out.println("메일 매거진을 수신:" + radiomail + "<br>");

%>
</body>
</html>

<< index1 >>

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

<h2>room image</h2>

<img alt="" src="./images/b_pic2.jpg" id="pic1">

<script type="text/javascript">
$(function () {
	$("#pic1").hover(
		function () {
			$(this).attr("src", "./images/b_pic1.jpg");
		},
		function () {
			$(this).attr("src", "./images/b_pic2.jpg");
		}
	);
});

</script>

</body>
</html>

<< index2 >>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://code.jquery.com/jquery-3.4.1.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 () {
	
		var pname = $(this).attr("picname");
		alert(pname + "의 사진입니다");		
	});
});

</script>

</body>
</html>

<< index3 >>

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

<h3>mouse로 클릭하면, 이미지를 삭제할 수 있습니다</h3>

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

<script type="text/javascript">
$(function () {
	
	for(i = 1;i < 10; i++){
		var img = $("<img></img>").attr("src", "./images/photo_" + i + ".jpg");
		$(".pic").append(img);
	}
	
	$("img").mouseover(function () {	// 커서가 손가락 모양으로 바뀜
		$(this).css("cursor", "pointer");
	});
	
	$("img").click(function () {
		$(this).remove();
	});
});

</script>

</body>
</html>
​
저작자표시 비영리 변경금지

'프론트엔드 & 백엔드 개발자 과정 > jquery' 카테고리의 다른 글

1월 14일 sample9, 10, 11, post, postDaum, picker, slider, allocTable  (0) 2020.06.03
1월 10일 sample1, sample2, sample3  (0) 2020.06.02

관련글

댓글 0

티스토리툴바