국비교육(22-23)

37일차(3)/jsp(27) : jQuery 기초

서리/Seori 2022. 11. 29. 23:46

37일차(3)/jsp(27) : jQuery 기초

 

 

- jQuery는 javascript Library 이다.

- 예전에는 많이 썼는데 브라우저들이 최신으로 업데이트되면서 이전보다는 활용도가 다소 떨어진 상태이다.
- 하지만 아직도 많이 쓴다! 이전 기능들을 유지보수하는 데에도 많이 사용된다.
- javascript의 기초만 있다면 쉽게 사용할 수 있다.

 

 

* 홈페이지: https://jquery.com/

- write less, do more

- 코드를 효율적으로 축약해서 작성할 수 있다.

 


* javascript로 주로 하는 작업은?
1) 어떤 이벤트에 실행할 함수 등록
2) 어떤 요소의 클래스 제거
3) 어떤 요소의 클래스 추가
4) 어떤 요소에 입력한 value값 읽어오기 등

- 다른 라이브러리 없이 순수 javascript로 할 수 있는 작업들
- 하지만 이런 작업들도 어떤 라이브러리를 사용하면 훨씬 편리하게, 적은 양의 코딩으로 할 수 있다.

 

- jQuery도 누군가 미리 해 놓은 javascript 코딩을 가져다가 쓰는 것이라고 생각하면 된다.

 

- signup_form에 있는 작업을 jQuery를사용해서 작업해 볼 예정 (회원가입 폼)


 

/test_jquery/ <hello.jsp> 생성

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/hello.jsp</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
	<h3>jquery 테스트</h3>
	<p id="one"></p>
	<p id="two"></p>
	<div>div1</div>
	<div>div2</div>
	<div>div3</div>
	<div>div4</div>
	<div>div5</div>
	<input type="text" id="inputMsg" />
	<button id="sendBtn">전송</button>
	<script>
		//위의 모든 div의 innertext를 바나나로 바꾸려면?
		/*		
		const divs=document.querySelectorAll("div");
		for(let i=0;i<divs.length;i++){
			divs[i].innerText="바나나";
		}
		*/
		
		//전송 버튼을 눌렀을 때 실행할 함수 등록
		$("#sendBtn").on("click",function(){
			alert("전송합니다.");
		});
		
	</script>
</body>
</html>

 

- jQuery 홈페이지에서 Google CDN 사용

 

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

- 이 한 줄을 복사해서 jsp 파일안에 넣어주기! (script 위치에 넣어주면 된다)

 

- 브라우저의 Source에서 jQuery가 들어있다는 것을 확인 가능

 

 

- p 안에 innerText로 "바나나"라는 값을 넣고 싶을 경우,

 원래는 위와 같이 넣어야하지만, jquery를 활용한다면?

 

$("#one").text("바나나");

- jQuery의 $() 을 사용해서 위와 같이 작성할 수 있다.

- 같은 동작임에도 코드의 양이 반으로 줄어든 것을 확인할 수 있다.

 

- 단, 위의 google cdn jquery 링크가 들어가 있지 않으면 동작하지 않는다.

 

 

- $( ) 를 사용해서 어떤 것을 선택한다(선택자).

- $( ) 가 document.querySelector의 역할을 한다.

- 원하는 문서객체를 선택하는 것이 간단하다.

 

- innerText : .text

- style : .css

→ 함수명이 일반적인 javascript 보다 직관적이다.

 

 

- 한번 선택자를 선택하고 나면 .action( ).action( ) 형태로 체인형으로 묶을 수 있다.

- 훨씬 짧고 간단해진 코드!

 


 

* 특정 요소를 모두 선택해서 바꾸고 싶을 경우

 

const divs=document.querySelectorAll("div");
    for(let i=0;i<divs.length;i++){
        divs[i].innerText="바나나";
}

- div{div$}*5 가 있다고 할 때, 각 div요소의 모든 값을 바꾸고 싶다면 일반적으로 작성하는 코드

 

$("div").text("바나나");

- jQuery $() 로 작성한 코드. 모든 div요소를 선택해서 적용할 수 있다.

 

- 특정 선택자로 선택된 요소가 여러 개라면 반복문을 따로 돌 필요가 없다.

 선택된 모든 요소에 일괄적으로 적용된다.

 

- 작성해야 하는 코드의 양이 매우 줄어들고, 간편하고 금방 배울 수 있다.

 

 

* 선택한 요소에 여러 동작을 적용하고 싶을 경우

$().action1().action2().action3()....

- 동작 여러개를 이어서 체인 형태로 작성할 수 있다.

 

 

* jQuery문을 잘 사용하려면...

 

1) 원하는 요소를 어떻게 선택할 것인가를 알기 (선택자selector 작성법)

- CSS선택자와 동일하게 사용한다.(요소, .class,  #id, >자손선택 등)

 

2) 어떤 동작action이 있는지 익혀서 사용하기

- 2~30개 정도의 동작만 익히면 된다.

 

- 각각 값을 읽어오기, 넣어주기 기능이다. 구분하기!

 

$("#inputMsg").val("딸기"); : ()안의 값을 해당 요소에 넣어주는 기능
$("#inputMsg").val(); : $()안에서 선택한 요소의 값을 읽어오는 기능

- val(); 안에 값을 넣으면 넣어주는 기능, 값 없이 val(); 하면 읽어오는 기능


$("#sendBtn").on("click",function(){ });
- $() : document.querySelector 를 대신하는 역할
- .on : 이벤트 리스너를 등록하는 코드. 안에 이벤트와 함수를 넣어주면 된다.
- $() 안에 선택되는 요소가 여러개일 경우 일괄 적용할 수 있어 폭발적으로 효율성이 높아진다.

 

- .on(" ") 에 이벤트명만 신경써서 적어주면 해당 요소에 특정 상황에 실행되는 이벤트리스너를 등록할 수 있다.

 

 

- javascript의 함수는 반드시 무언가가 리턴된다.(undefined라도 리턴된다)

- $() 형태로 요소를 선택했을 때에도 어떤 타입이 리턴된다. → [ ] 배열로 리턴되는 것을 확인 가능!

 

- p요소의 참조값, div요소의 참조값, id가 one인 요소의 참조값, ... 등등이 순서대로 들어있다.

- 문서객체의 참조값이 배열안에 들어있는 형태.

- 이것은 javascript의 기본 배열이 아닌 jquery의 특별한 기능이 합쳐진 특수한 배열이다.

 

- 기존 js배열에서는 .push, .length 등의 기능을 사용할 수 있지만, .text, .val, .css 등의 기능은 없다.

- 하지만 $() 에서 반환해주는 배열에는 이런 기능이 있다! 배열은 배열인데, 좀 특별한 기능을 갖고있는 배열이라고 보면 된다.

 

 

- 배열에 모든 div의 값이 순서대로 들어있는 것을 볼 수 있다

- 위와 아래가 배열의 내용은같으나, 그러나 jquery로 생성한 $() 쪽에는 여러가지 특수한 기능이 들어있다.

 

- 각각을 a와 b라는 변수에 담는다고 하면, 둘다 배열의 모양을 띠고 있기는 하지만

 a. 으로 사용할 수 있는 함수와 b. 로 사용할 수 있는 함수에는 차이가 있다.

(a에서만 text(), val(), 등의 함수를 사용할 수 있다.)

 

- 만약 innerText를 수정하고 싶다면,

  a는 한번에 일괄 수정할 수 있다. b는 하나하나(또는 반복문으로) 수정해 주어야 한다.

 

- 비슷하게 보이지만 사용법은 완전히 다르다.

 a에는 . 점을 찍어서 사용할 수 있는 기능이 매우 많다.

- jquery의 cdn을 로딩해서 사용하기 때문에 이런 기능이 추가된 것이다!

 

- jquery API 에서 들어있는 함수(기능)을 검색해서 사용할 수 있다. (링크)

 


 

<hello.jsp> 수정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>/test_jquery/hello.jsp</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
	<h3>jquery 테스트</h3>
	<p id="one"></p>
	<p id="two"></p>
	<div>div1</div>
	<div class="my-class">div2</div>
	<div>div3</div>
	<div class="my-class">div4</div>
	<div>div5</div>
	<input class="my-class" type="text" id="inputMsg" />
	<button id="sendBtn">전송</button>
	<script>		
		/*		
			$( "선택자" ).action1().action2()...와 같은 형태로 jQuery를 사용한다.
			
			$( ) 함수는 jQuery의 기능이 추가된 배열을 리턴한다.
			
			$( ) 함수가 리턴하는 배열에는 "선택자"에 부탁하는 문서 객체(body,p,div,input 등)의 참조값이 들어있다.
			
			$( ).action1() 처럼 특정 동작을 하면 $( ) 함수가 리턴한 배열 안에 들어 있는 모든 문서 객체에 동작이 적용된다.
			
			$( ).action1().action2()... 처럼 chain 형태의 동작은 가능할 때도 있고 아닐 때도 있다.
			만일 어떤 동작이 무언가를 읽어오는 동작이면 뒤에 chain 형태의 동작은 불가능하다.						
		*/
		
		//id가 one인 요소의 innerText를 "바나나", 글자의 색을 blue로 조작하기
		$("#one").text("바나나").css("color", "blue");
		
		//id가 two인 요소의 innerText를 여러분의 이름, 글자의 크기를 20px, 배경색을 yellow로 조작해보세요.
		$("#two").text("홍길동").css("font-size","20px").css("background-color","yellow");
		
		//모든 div요소의 글자색을 pink로 바꾸기
		$("div").css("color", "pink");
		
		/*
			이벤트 리스너 함수를 등록하는 방법
			
			$("선택자").on("이벤트명", 콜백 함수);
		*/
		
		$("#sendBtn").on("click",function(){
			//아이디가 inputMsg인 요소에 입력한 값을 읽어와서 msg라는 변수에 넣는다.
			const msg=$("inputMsg").val();
			alert(msg+" 를 전송합니다.");
		});
	</script>
</body>
</html>

 

$("#one") → [ p#one ] 배열이 리턴된다.

- .action이 붙는다면 저 배열 안에서 선택된 모든 값에 대한 동작을 말한다!

 

$("#one").text("바나나").css("color", "blue");

- () 안에 아이템은 하나가 들어올 수도 있고,(바나나)

  여러 개가 들어올 수도 있다.("color", "blue")

 

- 해당 script 안에 들어있는 코드는 페이지 로딩 시점에 바로 동작한다!

 

- console에서 이벤트 발생시 해당 요소의 값이 변하는 것을 볼 수 있다.

- .text는 innerText를 조작하고, .css는 style을 조작한다.

 

- $("요소명") $("클래스명") 등으로 여러 개를 한 번에 선택 가능!(배열)

- console에서 테스트해보면 무엇이 선택되는지 볼 수 있다.

 

 

- 무언가를 읽어오는 동작 뒤에서는 .action() 을 할 수 없다!

 

- 마지막은 사용이 불가능하다. 읽어온 값 .val() 은 어떤 변수에 담아서 사용하거나 해야 한다.

- 읽어온 값에는 .동작 함수를 쓸수없다.

 

- 위에서는 연두색, 빨간색, 파란색이 가리키는 주체가 전부 같다. → #inputMsg 요소 배열[ ]

- 각각 $(), val, css라는 함수가 리턴해준 값이 모두 같은 것.

 

- 하지만 마지막의 경우, String이 반환된 것이다. [ ] 이 아니므로 여기에 .action 을 붙어서 동작할 수 없다.