본문 바로가기
수업내용

[Day41][Jquery] 자바스크립트와 제이쿼리 / bind / val / hide / show / each / is(":checked") / unbind / Math.random() / mouseover / mouseout

clapdev 2019. 10. 23. 17:38

Ⅰ. 자바스크립트와 제이쿼리

 

-- Dynamic Web Project(JqueryStudy) - Next(build\WEB-INF\classes) - Next 체크하고 생성

-- Jquery library를 받아온다.

-- Dynamic Web Project(JqueryStudy)에 Folder(eventHandling) 생성

-- Folder(eventHandling)에 Folder(chap01)와 Html File(testJavascript, testJquery) 생성

 

chap01 testJavascript.html head

<script type="text/javascript">
window.onload = function() {
	myTest("안녕하세요? 자바 스크립트");
	
	window.open("popupContents.html", "myPopup", "left=100px, top=100px, width=400px, height=350px");
}
function myTest(val) {
	document.getElementById("test").innerHTML = val;
}
</script>

 

chap01 testJavascript.html body

<span id="test" style="color: blue;"></span>

 

 

chap01 testJquery.html head

<script type="text/javascript" src="/JqueryStudy/js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
	$(function() {
	myTest("안녕하세요? jQuery");
	myExam("반갑습니다. 제이쿼리~~~")

	window.open("popupContents.html", "myPopup", "left=100px, top=100px, width=400px, height=350px");
});
	
function myTest(val) {
	document.getElementById("test").innerHTML = val;
}
	
function myExam(val) {
	$("#example").html(val);
}
</script>

 

chap01 testJquery.html body

<span id="test" style="color: red;"></span>
<br/>
<span id="example" style="color: green;"></span>

 

 

-- Html File(testJquery) 복사하여 Html File(testJquery2) 생성

 

chap01 testJquery.html head

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		myTest("환영합니다 jQuery");
		myExam("신기하네요 제이쿼리~~~")
		
		window.open("popupContents.html", "myPopup", "left=100px, top=100px, width=400px, height=350px");
	});
	
	function myTest(val) {
		document.getElementById("test").innerHTML = val;
	}
	
	function myExam(val) {
		$("#example").html(val);
	}
</script>

 

chap01 testJquery2.html body

<span id="test" style="color: red;"></span>
<br/>
<span id="example" style="color: green;"></span>

 

 

$(function() {
	myTest("안녕하세요? jQuery");
	myExam("반갑습니다. 제이쿼리~~~")
});

 

$(document).ready(function() {
	myTest("안녕하세요? jQuery");
	myExam("반갑습니다. 제이쿼리~~~")
});

 

-- 첫 번째 방법과 두 번째 방법이 같다.

 

Ⅱ. bind

-- 버튼을 클릭했을 때 어떤 버튼을 클릭했는지 확인하기

 

-- Folder(chap2)와 Html File(01bind) 생성

 

chap2 01bind.html head

<style type="text/css">
	div#firstdiv, div#result {
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}
	
	div#result {
		margin-top: 20px;
	}

	span.buttons {
		border: solid 2px orange;
		display: inline-block;
		width: 100px;
		margin: 20px;
		padding: 5px;
		background-color: yellowgreen;
		color: white;
		font-size: 15pt;
		cursor: pointer;
	}
	
	span.bold {
		font-weight: bold;
	}
	
	span.italic {
		font-style: italic;
	}
</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-3.3.1.min.js"></script>

<script type="text/javascript">
	$(function(){
		$(".bold").bind("click", function(){
			$("#result").html("<span style='font-weight: bold;'>" +$('.bold').text() + "버튼을 클릭하셨군요</span>");
			
		});
	});
</script>

 

chap2 01bind.html body

<div id="firstdiv">
	<span class="buttons bold">굵게</span>
	<span class="buttons italic">기울임꼴</span>
	<span class="buttons">지우기</span>
</div>
<div id="result"></div>

 

 

 

chap2 01bind.head script $(function{})

$(".italic").bind("click", function(){
	$("#result").html("<span style='font-style: italic;'>" +$('.italic').text() + "버튼을 클릭하셨군요</span>");
})

 

 

 

chap2 01bind.html head script $(function{})

$(".clear").bind("click", function(){
	$("#result").html("");
})

 

chap2 01bind.html body

<span class="buttons clear">지우기</span>

 

-- chap2 Html File(01bind)복사하여 Html File(02bind) 생성

 

chap02 02bind.html head script $(function{})

var manes = "민규,정한,승관,호시,원우,우지";
var womanes = "배주현,강슬기,손승완,박수영,김예림,수진";
		
$(".man").bind("click", function(){
	var manArr = manes.split(",");
	var html = "<ol>";
	for(var i=0; i<manArr.length; i++){
		html += "<li>"+manArr[i]+"</li>";
	}
			
	html += "</ol>";
		
	$("#result").html(html);
});

 

chap02 02bind.html body

<div id="firstdiv">
	<span class="buttons man">남자</span>
	<span class="buttons woman">여자</span>
	<span class="buttons clear">지우기</span>
</div>
<div id="result"></div>

 

 

 

chap02 02bind.html head script $(function{})

$(".woman").bind("click", function(){
	var womanArr = womanes.split(",");
	var html = "<ul>";
	for(var i=0; i<womanArr.length; i++){
		html += "<li style='list-style-type: circle;'>"+womanArr[i]+"</li>";
	}
			
	html += "</ul>";
			
	$("#result").html(html);
});

 

 

-- JavaScriptStudy의 chap2 Html File(01) 복사하여 chap02에 Html File(03bind) 생성

 

문제 ▷▷ javascript로 만들어진 것을 jquery로 바꾸어 만들어 보자.

 

Ⅲ. val(), hide(), show()

 

-- Folder(chap3)와 Html File(01val) 생성

-- O와 X image felie이 있는 Folder(images) 추가

 

chap3 01val.html head

<style type="text/css">
	.answerCheck{
		margin: 20px;
		}
</style>


<script type="text/javascript" src="/JqueryStudy/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		$(".answerCheck").hide();
		
		$("#btnOK").bind("click", function(){
			var userAnswer = $("#answer").val().trim();
			
			if(userAnswer == "17"){
				$(".okAnswer").show();
			}
			else {
				$(".failAnswer").show();
			}
		});
		
		$("#btnRestart").bind("click", function(){
			$(".answerCheck").hide();
		});
	});
	
</script>
chap3 01val.html body

<form name="frm">
	문제 : 2+5*3=<input type="text" name="answer" id="answer"/>
	<br/><br/>
	<button type="button" id="btnOK">정답확인</button>
	<button type="reset" id="btnRestart">다시시작</button>
</form>
	
<div class="answerCheck okAnswer"><img src="images/ok.png"/></div>
<div class="answerCheck failAnswer"><img src="images/no.png"/></div>

 

Ⅳ. each

 

4지 선다 문제 만들기

 

-- chap3에 Html File(01val) 복사하여 Html File(02val) 생성

 

chap3 02val.html head

<style type="text/css">
	.answerCheck{
		margin: 20px;
		}
		
	label {
		margin: 10px;
	}
</style>


<script type="text/javascript" src="/JqueryStudy/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	
	$(function(){
		$(".answerCheck").hide()
        
		$("input:checkbox[name=answer]").bind("click",function(){
			
			$("input:checkbox[name=answer]").prop("checked")
			$(this).prop("checked", true);
		})
		
		$("#btnOK").bind("click",function(){
			
			var flag = false;
			
			$("input:checkbox[name=answer]").each(function(){
				if($(this).prop("checked") && $(this).val() == "3"){
					$(".okAnswer").show();
					flag = true;
					return false;
				}		
			});
			
			if(!flag){
				$(".failAnswer").show();
			}
			
		});
		
		$("#btnRestart").bind("click", function(){
			$(".answerCheck").hide();
		});
		
	});
	
</script>

 

chap3 02val.html body

<form>
	[문제] 다음 중 8+5*3은 얼마입니까?<br/>
	<ol>
		<li><label for="answer1">20</label><input type="checkbox" name="answer" id="answer1" value="1"/></li>
		<li><label for="answer2">30</label><input type="checkbox" name="answer" id="answer2" value="2"/></li>
		<li><label for="answer3">23</label><input type="checkbox" name="answer" id="answer3" value="3"/></li>
		<li><label for="answer4">45</label><input type="checkbox" name="answer" id="answer4" value="4"/></li>
	</ol>
	<button type="button" id="btnOK">정답확인</button>
	<button type="reset" id="btnRestart">다시시작</button>
</form>
	
<div class="answerCheck okAnswer"><img src="images/ok.png"/></div>
<div class="answerCheck failAnswer"><img src="images/no.png"/></div>

 

-- chap3에 Html File(02val) 복사하여 Html File(03val) 생성

 

-- 체크박스에서 체크유무를 알아볼 때 $(this).prop("checked") 또는 $(this).is(":checked") 를 사용한다.

 

chap3 02val.html head script

$(function(){
		
		$(".answerCheck").hide()
		
		$("input:checkbox[name=answer]").bind("click",function(){
			
			$("input:checkbox[name=answer]").is(":checked")
			$(this).prop("checked", true);
		})
		
		$("#btnOK").bind("click",function(){
			
			var flag = false;
			
			$("input:checkbox[name=answer]").each(function(){
				if($(this).is(":checked") && $(this).val() == "3"){
					$(".okAnswer").show();
					flag = true;
					return false; 
				}		
			});
			
			if(!flag){
				$(".failAnswer").show();
			}
			
		});
		
		$("#btnRestart").bind("click", function(){
			$(".answerCheck").hide();
		});
		
	});

 

-- 위의 결과와 동일하게 나타난다.

 

-- Folder(chap04)의 Html File(01_target_unbind) 생성

 

행운의 숫자 맞추기

 

chap04 01_target_unbind.html head

<style type="text/css">
	div#firstdiv, div#result {
		width: 80%;
		margin: 0 auto;
		text-align: center;
	}
	
	div#result {
		margin-top: 20px;
		font-size: 16pt;
	}

	span.buttons {
		display: inline-block;
		width: 100px;
		margin: 20px;
		padding: 5px;
		background-color: yellowgreen;
		color: white;
		font-size: 15pt;
		cursor: pointer;
	}
	
	h2 {
		text-align: center;
	}
</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		
		$("#result").hide();
		$(".buttons").bind("click", function(){
			var $target = $(event.target); 
			
			if($target.is(".lucky")) {
				var html = "<span style='color: red;'>당첨!! 축하합니다. </span>";
				
				$("#result").html(html);
			}
			
			$("#result").show();
			
			$(".buttons").unbind("click");
		});
	}); 
</script>

 

chap04 01_target_unbind.html body

<h2>행운의 숫자를 클릭하세요!!(오로지 기회는 1번만)</h2>
<div id=firstdiv>
	<span class="buttons">1</span>
	<span class="buttons">2</span>
	<span class="buttons">3</span>
	<span class="buttons lucky">4</span>
	<span class="buttons">5</span>
</div>
<div id="result">다음 기회에...</div>

 

 

 

1~10까지 난수 발생시켜 행운의 숫자 맞추기

 

-- -- Folder(chap04)에 Html File(01_target_unbind) 복사하여 Html File(02_random) 생성

 

chap04 02_random.html head script

$(function(){
		
	$("#result").hide();
	$(".buttons").bind("click", function(){
			
		var randomNum = Math.floor(Math.random()*(5-1+1)) + 1;
		console.log(randomNum);
				
		var data = $(event.target).text(); 
			
		if(parseInt(data) == parseInt(randomNum)) {
			
			var html = "<span style='color: red;'>당첨!! 축하합니다. </span>";
				
			$("#result").html(html);
		}
			
		$("#result").show();
			
		$(".buttons").unbind("click");
			
	});
});

 

 

 

이름 버튼을 클릭하면 이미지 띄우기

 

-- Folder(chap5)와 Html File(mouseOvermouseOut) 생성

-- Folder(chap5)에 image file이 3개 들어 있는 Folder(images) 추가

 

chap05 mouseOvermouseOut head

<style type="text/css">

div#container {
	   width: 80%;
	   margin: 0 auto;
}

span.buttons {
		display: inline-block;
		border: 2px solid navy;
		margin: 20px;
		padding: 5px;
		background-color: skyblue;
		color: white;
		font-size: 15pt;
		cursor: pointer;
		width: 100px;
		text-align: center;
	}
	
span.name {
	font-size: 12pt;
	font-weight: bold;
	color: blue;
}	

div#comment {
	position: relative;
	left: 44%;
}

</style>

<script type="text/javascript" src="/JqueryStudy/js/jquery-2.0.0.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		$(".buttons").bind("mouseover", function(){
			var $target = $(event.target);
			
			if($target.is(".picture1")){
				$("div#face").html(setImage('kimth.jpg'));
				$("div#comment").html(setComment('김태희',25)); 
				$("div#seconddiv").show();
			}
			
			else if($target.is(".picture2")){
				$("div#face").html(setImage('iyou.jpg'));
				$("div#comment").html(setComment('아이유',27)); 
				$("div#seconddiv").show();
			}
			
			else if($target.is(".picture3")){
				$("div#face").html(setImage('parkby.jpg'));
				$("div#comment").html(setComment('박보영',30)); 
				$("div#seconddiv").show();
			}
		});
		
	$(".buttons").bind("mouseout", function(){
			$("div#seconddiv").hide();
		});
	    
	});
	
	
	// == 사진을 불러와서 img 태그로 만들어서 넘겨주는 함수 만들기 ==
	function setImage(imgFilename){
		var result = "<img src='images/"+imgFilename+"' />";
		return result;
	}
	
	// == 프로필(약력)에 대한 문자열을 받아와서 span 태그로 만들어서 넘겨주는 함수 만들기 == //
	function setComment(name, age){
		var result = "1.성명: <span class='name'>"+name+"</span><br/>2.나이: "+age+"세";
		return result;
	}
	
</script>

 

chap05 mouseOvermouseOut body

<div id="container" align="center">
	<div id="firstdiv">
		<span class="buttons picture1">김태희</span>
		<span class="buttons picture2">아이유</span>
		<span class="buttons picture3">박보영</span>
	</div>
		
	<div id="seconddiv">
		<div id="face" style="margin-bottom: 3%;"></div>
		<div id="comment" align="left"></div>
	</div>
</div>

'수업내용' 카테고리의 다른 글

[Day47][JSP] filter / exception / 회원가입(JSP, Oracle)  (0) 2019.11.01
[Day43][Jquery] transition / fadeIn / fadeOut / slideUp / slideDown / toggleClass / length / siblings / parent / children / find  (0) 2019.10.28
[Day40][Javascript] join / 팝업창 / 우편번호 검색  (0) 2019.10.22
[Day39][Javascript] 정규 표현식 / 배열 / split  (0) 2019.10.21
[Day38][JavaScript] 데이터 타입 / 선택자 잡기 / window.onload  (0) 2019.10.18

'수업내용' Related Articles

티스토리툴바