Something good can work for you / JavaScript (3) : jQuery 라이브러리 이벤트 처리 + Ajax

JavaScript (3) : jQuery 라이브러리 이벤트 처리 + Ajax

부트캠프(END)/Web2022. 8. 4. 10:08

DOMScript

DOM(Document Object Model)

웹페이지에서 자바스크립트로 요소들을 제어하는 데 사용된다.

웹 개발에서 사용되는 documnet 객체 또한 브라우저에서 제공하는 window객체의 한 요소다.

그리고 그 DOM, window.document 내에 HTML을 구성하는 하나하나의 요소가 담겨 있다.

jQuery는 그 요소들을(HTML DOM Tree) 간단하게 제어하여,

쉽게 이벤트를 처리할 수 있게 돕는 javascript의 라이브러리!

보통 <script> 태그 내에서 $ 기호를 사용하면 거의 jQuery라고 보면 된다.

즉 document.querySelector("")를 $("")처럼 간단하게 나타낼 수 있도록 해 주는 게 jQuery!

jQuery를 사용하기 위해서는 JSP 페이지 <head> 태그 내에 아래 코드를 한 줄 삽입해야 한다.

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>

브라우저가 실행됨과 동시에 그 함수들은 호출되어 준비된 상태가 된다. 다 똑같습니다~

⑴ $(function(){})

⑵ $(document).ready(function(){})

⑶ window.onload=function(){}

<script type="text/javascript">
$(function() {
  원하는 기능
}
$(document).ready(function(){
  원하는 기능
})
window.onload=function(){
  원하는 기능
}
</script>

요소 선택하기

이벤트를 처리하기 위해서는 어떤 요소에서 일어나는 이벤트인지 특정하기 위해 요소를 선택해야 한다.

=> 태그명($(태그명)), 아이디명($(#아이디명)), 클래스명($(.클래스명))
=> 인접 ($(태그명 + 태그명)), 후손($(태그명 태그명)), 자손 ($(태그명>태그명))

$('input[type="button"]')
type이 button인 input 태그를 선택한다. == <input type="button">
$('#id')
id 가 "id"인 태그를 선택한다. == <div id="id">
$('.class')
class가 "class"인 태그를 선택한다. == <div class="class">
$('table > tr') , $('table tr') $('p+div')
table 태그 아래의 tr 태그, p태그의 인접한 div 태그를 선택한다.

데이터 읽기

val() : 태그에 입력된 값을 읽는다.

<input type="text"> 영역에 입력된 값, value속성에 부여된 값(=text)을 읽어 온다.

val()로 가져올 수 있는 것 : <input type=text, password, file, date, select, textarea>

text() : 태그 사이에 들어간 값을 읽는다.

<td>JQuery</td> → $('td').text()

값을 집어 넣고 싶을 때는 $('h1').text("hello") 이렇게.

attr(속성이름) : 속성에 부여된 값을 읽어 온다.

$('a').attr('href') $('img').attr('src')

css() : 요소의 css를 변경한다.

$('a').css("color":"green") → a태그의 글자 색깔을 녹색으로 변경하겠다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
	$(function(){
		$('h1').css("color","red");
		$('#a').css("color","blue");
		$('#b').css("backgroundColor","yellow");
		$('.c').css("color","green");
	})
</script>
</head>
<body>
	<h1>Hello JQuery!</h1>
	<h1 id="a">Hello JQuery!</h1>
	<h1 id="b">Hello JQuery!</h1>
	<h1 class="c">Hello JQuery!</h1>
	<h1 class="c">Hello JQuery!</h1>
</body>
</html>

https://www.w3schools.com/jquery/html_html.asp

어떤 태그 안에 있는 html코드 전체를 가져오는 것도 가능하다.

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">Door</a></li>
  <li><a href="#">Room</a></li>
</ul>

$('ul').html() 하면 ul태그 내에 있는 html을 다 가져 온다.

이벤트 종류

이벤트는 크게 onclick / onmouseover / hover / onchange / onkeydown / onkeyup 등이 있다.

onclick

해당 요소를 클릭했을 때 발생하는 이벤트를 지정할 수 있다.

$("tagName").click(function(){
  처리내용
})
$("tagName").on("click",function(){
  처리내용
})

<예시>

id가 ok인 버튼을 클릭하면 국어, 영어, 수학의 점수를 계산하여 총합을 #print 요소에 출력한다.

또한 만약 #id 요소의 값이 비어 있으면 #note 요소에 아이디를 입력하라는 메시지를 띄워 준다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
	$(function() {
		$('#kor').val(90); //초기값 부여
		$('#ok').on("click", function(){
			let kor=$('#kor').val(); //입력값을 가져 온다.
			let eng=$('#eng').val();
			let math=$('#math').val();
			let total = Number(kor) + Number(eng) + Number(math);
			
			$('#print').text(total);
		})
		$('button').click(function(){
			let id = $('#id').val();
			if(id==""){
				$('#note').text("아이디를 입력하세요.");
			}
		})
		let value=$('a').attr("href"); //속성값 가져오기
		let value2=$('a').text(); //태그사이값 가져오기
		window.alert(value+","+value2);
	})
</script>
</head>
<body>
	<div class="container">
		<div class="row">
			국어:<input type=text id="kor" size=10 class="input-sm"><br>
			영어:<input type=text id="eng" size=10 class="input-sm"><br>
			수학:<input type=text id="math" size=10 class="input-sm"><br>
			<span id="print"></span><input type="button" id="ok" value="계산">
			<br>
			ID:<input type=text id=id size=15 class="input-sm">
			<button class="btn btn-sm btn-primary">로그인</button><br>
			<span id="note" style="color:red"></span>
			<a href="Hello_Href">Hello_text</a>
		</div>
	</div>
</body>
</html>

hover

해당 요소에 커서가 올라갔을 때 발생하는 이벤트를 처리한다.

$("tagName").hover(function(){
   처리내용
})

<예시>

이미지 요소의 기본 불투명도를 0.3으로 세팅하고,

이미지 요소에 커서가 올라가면 "pointer(손가락)" 형태로 변경되도록 하며,

이미지 요소에 커서가 올라가면 불투명도를 1.0으로 변경하게 해 준다. (더 선명하게 보이도록)

그리고 커서가 내려왔을 때는 다시 모든 이미지 요소의 불투명도를 0.3으로 변경한다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function(){
	$('img').css("opacity",0.3);
	$('img').css("cursor","pointer");
	//이벤트 처리
	$('img').hover(function(){
		$(this).css("opacity",1.0);// opacity: 투명 => 0.0~1.0
		// this => 선택된 img (동작하는 태그)
	}, function(){
		$('img').css("opacity",0.3);
	})
})
</script>
<style type="text/css">
	img {
	width:150px;
	height:150px;
	}
</style>
</head>
<body>
	<img src="m (1).png">
	<img src="m (2).png">
	<img src="m (3).png">
	<img src="m (4).png">
	<img src="m (5).png">
	<img src="m (6).png">
	<img src="m (7).png">
</body>
</html>

onchange

select태그에서 많이 나온다.
선택한 옵션이 바뀌었을 때 발생할 이벤트를 제어한다.

<select> 
  $('tagName').change(function(){
  처리내용~
  })
</select>

onkeydown, onkeyup

사용자의 키보드 입력 액션에 따라 발생하는 이벤트를 제어한다.

-down : 이벤트 발생 후 값이 입력됨 - 채팅 기능에서 많이 사용
-up : 값이 입력된 후 이벤트가 발생 - 서치바 기능에서 많이 사용

Ajax

Asynchronous Javascript and XML 의 준말로, 동적인 웹페이지 개발을 위한 기술이다.

Ajax를 활용하면 지금까지 JSP 페이지에서와 달리, 페이지 새로고침 없이 데이터를 처리할 수 있다!

즉, 웹 페이지가 로드된 후에도 서버와 데이터를 주고받을 수 있도록 해 준다.

아래와 같은 형태로 구현할 수 있다.

$.ajax({
  type : 'post', //데이터 전송 방식 결정(POST/GET)
  url : 'function_page.jsp',//처리할 URL 주소 (.do)
  data : {"data1":data1, "data2":data2}, //어떤 데이터를 처리할 건지
  //success/error :  정상수행/에러발생했을때 어떻게 할건지
  success:function(result){
    console.log(result);
  },
  error:function(ex){}
})

더 자세한 개념은 여기 참고! → http://www.tcpschool.com/ajax/intro

<예시>

https://dev-doodoo.tistory.com/194 에서 삭제 기능을 구현한 부분

$.ajax({
    type: 'post',
    url: '../freeboard/delete.do',
    data: {
        "no": no,
        "pwd": pwd
    }, //../freeboard/delete.do?no=1&pwd=1234 이렇게 보내줌
    success: function(result) { //delete.do에 출력한 html을 읽어서 result에 담는다.
        let res = result.trim(); //공백제거 꼭 필요함
        console.log(res);
        if (res == "yes") {
            location.href = "../freeboard/list.do"; //sendRedirect()
        } else {
            alert("비밀번호가 틀립니다.")
            $('#delPwd').val(""); //비밀번호 입력칸 비우기
            $('#delPwd').focus(); //포커스 갖다 놓기
            return;
        }
    },
    error: function(err) {
        alert(err);
    }
})

저작자표시 비영리 변경금지

'부트캠프(END) > Web' 카테고리의 다른 글

JavaScript 기초 (2) : 함수, 내장 객체, 화면 출력 (0)	2022.08.02
JavaScript 기초 (1) : 변수, 연산자, 제어문 (0)	2022.08.01
MyBatis : 기초 (0)	2022.07.29

JavaScript (3) : jQuery 라이브러리 이벤트 처리 + Ajax

DOMScript

요소 선택하기

데이터 읽기

이벤트 종류

Ajax

'부트캠프(END) > Web' 카테고리의 다른 글

티스토리툴바