본문 바로가기
KOSA FullStack 교육/front

KOSA fullstack 교육(JQuery form, LocalStorage)

로미로미로 2025. 6. 18. 14:51

JQuery Form에 대한 예제이다. 

Form 예제 1)

각각 링크로 들어가는 a 태그를 준비한다.

<h2><a href="http://www.jquery.com">JQuery</a></h2>
<h2><a href="http://www.w3schools.com">w3school</a></h2>

 

여기서 만약 링크에 school이 포함된 링크를 누르면

 

이러한 화면이 뜨도록 코드를 구현해보자 

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

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
	//a태그 중 school이 포함된 링크를 클릭하면 
	$('a[href*="school"]').on('click', function(e){
		alert($(this).html()+' 사이트로 이동하시겠습니까?');
	});
});
</script>
</head>
<body>
<h2><a href="http://www.jquery.com">JQuery</a></h2>
<h2><a href="http://www.w3schools.com">w3school</a></h2>
</body>
</html>

 

Form 예제 2) select

처음에 버튼과 select폼을 다음과 같이 생성한다.

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

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
	
});
</script>
</head>
<body>
<input type="button" value="버튼 클릭시 동적으로 문자열 생성" id="createBtn">
<select id="createSel">
	<option>SK 텔레콤 서비스 대학로점</option>
	<option>SK 텔레콤 서비스 구로점</option>
	<option>SK 텔레콤 서비스 삼성대로점</option>
	<option>SK 텔레콤 서비스 방배점</option>
	<option>SK 텔레콤 서비스 사당점</option>
</select>
<div id="resultView"></div>
</body>
</html>

 

여기서 버튼을 클릭하면 버튼의 value를 div영역에 출력해보자.

<script>
$(function(){
	//1. 버튼 클릭하면 함수 호출 
	$('#createBtn').on('click', function(){
		//2. 버튼의 타이틀을 받아와서 div 영역에 출력
		let title = $(this).val();
		$('#resultView').html(title);
        //$('#resultView').append(title); 누를때마다 이어서 나온다
	});

});

 

append()를 썼을 때랑 html을 썼을 때가 다르다는 것을 알 수 있다. 

html을 써서 append처럼 동작하도록 코드를 바꿔보자.

 

<script>
$(function(){
	//1. 버튼 클릭하면 함수 호출 
	$('#createBtn').on('click', function(){
		//2. 버튼의 타이틀을 받아와서 div 영역에 출력
		let title = $(this).val() +'<br>';
		//$('#resultView').html(title);
		//3.html() 사용해서 append()를 썼을때와 동일하게 출력되도록 
		let content = $('#resultView').html();
		$('#resultView').html(content + title);
	});

});
</script>

 

이제 진짜 예제 문제를 풀어보자 .

select에서 아이템을 선택하면 한 줄씩 선택한 것들이 출력되도록 해보자.

 

<script>
	//4. select 폼에서 option값을 변경할때마다 이벤트를 호출 
	//resultView영역에 선택된 option 값이 계속 출력되도록 html() 사용
	$('#createSel').on('change', function(){
		let content = $(this).val() + '<br>';
		let original = $('#resultView').html();
		$('#resultView').html(original + content);
	});
</script>

 

Form 예제 3) 배열 

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

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
	$('#eachBtn').click(function(){
		let arr=["aaa","bbb"];
		arr.push("ccc");
		arr.push("ddd");
		arr.push("fff");
		
		let str = "";
	})
});
</script>
</head>
<body>
<input type="button" value="배열에 each() 적용하기" id="eachBtn">
</body>
</html>

기본 세팅 해놓고 시작한다.

현재 배열 arr에 aaa ~ fff까지 들어가있다.

얘네를 하나씩 뽑아서 str에 추가해보자 

$.each(arr,(index,item)=>{
});

 

다음과 같은 each문을 사용한다.

<script>
$(function(){
	$('#eachBtn').click(function(){
		let arr=["aaa","bbb"];
		arr.push("ccc");
		arr.push("ddd");
		arr.push("fff");
		
		let str = "";
		$.each(arr,(index,item)=>{
			str += item+" ";
		});
		
		alert(str);
		
	})
});
</script>

 

Form 예제 4) select 와 배열 

동적으로 폼 생성하는 것을 해 볼 것이다

옵션 생성을 누르면 오른쪽에 배열의 요소 하나하나가 select의 option에 들어가도록 구현해보자

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>동적으로 폼 생성하기</title>
<style>

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
	$('#addOptionBtn').on('click', function(){
		let arr = ["쿠로미", "마멜", "시나모롤", "포챠코", "폼폼푸린"];
		//arr의 각 요소로 <option>의 value값 생성
		//let option, #friends.append(option)
		$.each(arr, (index, item)=>{
			let option = "<option value="+item+">"+item+"</option>";
			$('#friends').append(option);
		});
	});
});
</script>
</head>
<body>
<input type="button" value="옵션 생성" id="addOptionBtn">
<input type="button" value="옵션 삭제" id="delOptionBtn">
<select id="friends">
</select>
</body>
</html>

이렇게 되면 옵션 생성 누를때마다 늘어나기 때문에 한 번만 작동하도록 고쳐야 한다. 

 

두 가지 방법이 있는데 첫번째 방법은 

<script>
$(function(){
	$('#addOptionBtn').one('click', function(){
		let arr = ["쿠로미", "마멜", "시나모롤", "포챠코", "폼폼푸린"];
		//arr의 각 요소로 <option>의 value값 생성
		//let option, #friends.append(option)
		$.each(arr, (index, item)=>{
			let option = "<option value="+item+">"+item+"</option>";
			$('#friends').append(option);
		});
		
	});
});
</script>

.on이 아닌 .one으로 바꾸는 방법과

 

<script>
$(function(){
	$('#addOptionBtn').on('click', function(){
		let arr = ["쿠로미", "마멜", "시나모롤", "포챠코", "폼폼푸린"];
		//arr의 각 요소로 <option>의 value값 생성
		//let option, #friends.append(option)
		$.each(arr, (index, item)=>{
			let option = "<option value="+item+">"+item+"</option>";
			$('#friends').append(option);
		});
		
		$('#addOptionBtn').unbind();
	});
});
</script>

unbind 함수를 사용하는 것이다.

 

이제 옵션 삭제도 구현해보자.

<script>
$(function(){
	$('#addOptionBtn').on('click', function(){
		let arr = ["쿠로미", "마멜", "시나모롤", "포챠코", "폼폼푸린"];
		//arr의 각 요소로 <option>의 value값 생성
		//let option, #friends.append(option)
		$.each(arr, (index, item)=>{
			let option = "<option value="+item+">"+item+"</option>";
			$('#friends').append(option);
		});
		
		$('#addOptionBtn').unbind();
	});
	
	$('#delOptionBtn').on('click', function(){
		$('#friends>option').remove();
	});
	
});
</script>

 

 

Form 예제 5) 폼에 입력된 값을 서버로 전달

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

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
});
</script>
</head>
<body>
<form action="Pros">
아이디 <input type="text" name="userId" id="userId"><br>
이름 <input type="text" name="name" id="name"><br>
주소 <input type="text" name="address" id="address"><br>
<input type="submit" value="DataSend" onclick="send()">
</form>
</body>
</html>

다음과 같이 폼을 생성해놓고, 폼에 입력한 값을 서버로 전달해보자 

 

자바 스크립트에서 페이지를 연결할 때

location.href=""; 

를 사용한다. 

 

결과 페이지로 이동해서 받을 것이기 때문에, 같은 경로에 result.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>
<h2>결과페이지</h2>
<b>
${param.name}님이 사는 곳은<br>
${param.addr} 입니다
</b>
</body>
</html>

 

정답 코드를 완성해보자 

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

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
	$('[type=button]').on('click', ()=>{
		let id = $('#userId').val();
		let name = $('#name').val();
		let addr = $('#address').val();
		//자바 스크립트에서 서버로 페이지를 연결..
		location.href="jq05_result.jsp?id="+id+"&name="+name+"&addr="+addr;
        //location.href = `jq05_result.jsp?id=${id}&name=${name}&addr=${addr}`;
	});//on
});
</script>
</head>
<body>
<form action="Pros">
아이디 <input type="text" name="userId" id="userId"><br>
이름 <input type="text" name="name" id="name"><br>
주소 <input type="text" name="address" id="address"><br>
<input type="button" value="DataSend">
</form>
</body>
</html>

Form 예제 6) 체크박스에 체크된 값을 서버로 전달

기본 세팅을 해놓고 script를 짜보자

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

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
	
});
</script>
</head>
<body>
<form action="jq06_result.jsp" id="frm">
	ID <input type="text" name="id" id="id"><p>
	NAME <input type="text" name="name" id="name"><p>
	
	<strong>당신의 취미를 있는대로 다 고르세요</strong><br>
	
	<input type="checkbox" name="hobby" value="fishing">낚시<br>
	<input type="checkbox" name="hobby" value="music">음악듣기<br>
	<input type="checkbox" name="hobby" value="lol">리그오브레전드<br>
	<input type="checkbox" name="hobby" value="lolche">롤토체스<br>
	
	<input type="submit" value="ServerSend">
</form>
</body>
</html>

결과 페이지인 jq06_result.jsp를 생성한다

 

현재 버튼을 누르면 바로 이동한다. 하지만 JQuery로 이동시켜보자!

 

이번엔 다음과 같은 submit함수를 사용할 것이다.

<script>
$(function(){
	$('#frm').submit((e)=>{
		
	})
});
</script>

 

submit() 이벤트 VS click() 이벤트

 

<script>
$(function(){
	$('#frm').submit((e)=>{
		//1. id,name폼의 공란을 확인. 
		//공란일때 aler창으로 메시지 띄우고, 마우스 포커스 맞추고, 페이지 안넘어가도록 하기
		//2. checkbox 하나 이상의 취미를 선택하도록. 만약 선택 안했다면 알아서 메시지 띄우고
		//하나 이상의 취미가 선택되었다면 $.each로 메시지 띄운다
		//3. 서버로 전송하기 직전 confirm창 사용해서 3개의 취미를 선택하셨습니다. 전송하시겠습니까? 띄우기
		//확인 누르면 -> result페이지
		//취소 누르면 -> 현재 페이지
	})
});
</script>

 

구현해보자!

<script>
$(function(){
	$('#frm').submit((e)=>{
		//1. id,name폼의 공란을 확인. 
		//공란일때 alert창으로 메시지 띄우고, 마우스 포커스 맞추고, 페이지 안넘어가도록 하기
		if($('#name').val().trim() == "" || $('#id').val().trim() == ""){
			alert("id 혹은 name을 입력해주십시오");
			$('#id').focus();
			e.preventDefault();
		}
		//2. checkbox 하나 이상의 취미를 선택하도록. 만약 선택 안했다면 알아서 메시지 띄우고
		//하나 이상의 취미가 선택되었다면 $.each로 메시지 띄운다
		
		let checked = $('[name=hobby]:checked');
		//alert(checked.length); 배열인 것 확인
		if(checked.length == 0){
			e.preventDefault();
			alert("하나 이상의 취미를 선택해주세요");
		}else{
			let str = "";
			$.each(checked, (index, item)=>{
				str += item.value + " ";
                //str += $(item).val();
			});
			alert(str+"을 선택하셨습니다");
			//3. 서버로 전송하기 직전 confirm창 사용해서 3개의 취미를 선택하셨습니다. 전송하시겠습니까? 띄우기
			//확인 누르면 -> result페이지
			//취소 누르면 -> 현재 페이지
			if (!confirm("총 " + checked.length + "개의 취미를 선택하셨습니다. 전송하시겠습니까?")) {
			    alert("전송이 취소되었습니다.");
			    e.preventDefault();
			    return;
			}
		}
	});
});
</script>

 

 

LocalStorage

서버에 정보를 저장하는 저장소(=Attribute)는 총 세가지가 있다.

  1. HttpServletRequest
  2. HttpSession
  3. ServletContext

셋의 차이는 scope, 즉 저장되는 기간에 있다. 

 

브라우저에 데이타를 저장하는 저장소(=Web Storage)는 두가지가 있다

  1. LocalStorage: 브라우저에 영구적으로 저장됨 (명시적으로 삭제 전까지) 
  2. sessionStorage: **브라우저 탭(세션)**이 살아있는 동안만 저장됨

 

여기서 LocalStorage를 알아보장

 

저장 방식: localStorage.setItem("key","value")

-> 단, 객체 저장이 안되고 문자열로만 저장이 된다. 

 

삭제 방식: localStorage.removeItem("key")

 

모두 삭제: localStorage.clear();

 

조회: localStorage.getItem("key")

 

갯수 조회: localStorage.length

 

여기서 유의할 점인 객체 저장 방식은?

객체를 저장하려면 json형식으로 저장해야 한다.
{"name","Jams"}

 

LocalStorage에 json 데이타를 넣고/ 가져오려면 

1) Json데이타를 직렬화 시킨다(serialization) -> JSON.stringify(객체)

2) Json데이타를 역직렬화 시킨다(deserialization)

       ✓원래 객체 덩어리로 다시 원상복귀.. 원본 데이타를 그대로 얻는다 - JSON.parse

 

 

LocalStorage실습

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

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function saveBtn(){
	localStorage.setItem("key1","안녕");
	localStorage.setItem("key2","쿠로미야");
	localStorage.setItem("key3","히히");
}
function delBtn(){
	localStorage.removeItem("key3");
}
function delAllBtn(){
	localStorage.clear();
}
function showBtn(){
	let info = localStorage.getItem("key1")+", ";
	localStorage.getItem("key2")+", ";
	localStorage.getItem("key3");
	alert(info);
}

</script>
</head>
<body>
<button id="saveBtn" onclick="saveBtn()">저장</button>
<button id="delBtn" onclick="delBtn()">삭제</button>
<button id="delAllBtn" onclick="delAllBtn()">모두삭제</button>
<button id="showBtn" onclick="showBtn()">조회</button>

</body>
</html>

 

브라우저의 Application -> local storage -> 웹 주소 누르면 확인 가능

 

local Storage에 객체를 저장해보자

 

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

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
	
});
</script>
</head>
<body>
<div class="main">
ID	<input type="text" id = "id">
PW	<input type="text" id = "pw">
<button id="login-Btn">LOGIN</button>
</div>

<script>
const idForm = document.getElementById("id");
const pwdForm = document.getElementById("pw");
const loginBtn = document.getElementById("login-Btn");

loginBtn.addEventListener('click',()=>{
	let userInfo = {id:idForm.value, pwd:pwdForm.value};
	localStorage.setItem("userInfo",JSON.stringify(userInfo));
	
	let result = JSON.parse(localStorage.getItem("userInfo"));
	console.log(result);
});

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

 

 

ON 함수 

 

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

</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(function(){
	
});
</script>
</head>
<body>
<div id="present">
<h1>Syntax :: $('selector').on('click', '#hello', hello)</h1>
<p>아이디값이 hello인 영역을 클릭하면 hello 함수가 그때 호출 될 것이다</p>
<p>지금은 hello 영역이 보이지 않고 나중에 동적으로 그 영역이 만들어집니다.</p>
<p>결론 : on은 미래에 동적으로 생성되는 영역을 클릭할 경우를 위해서 만들어 진 함수이다. 
</div>
<div id="future">

</div>

</body>
</html>
selector 요소 안에서, id가 hello인 요소가 클릭되면 hello 함수를 실행하라.

네모 영역을 누르면 함수가 실행되도록 script를 추가해보자 

<script>
$(function(){
	$('#present').on('click',()=>{
		//future영역에 h2크기로 KOSA MSA 3차 Frontend project Start! 이부착되도록..
		$('#future').append(`<h2> KOSA MSA 3차 Frontend Project Start`);
	});
});
</script>

여기서 이제 h2 의 id속성에 hello 를 주고, 색상을 입혀보자

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#present{
	border: 2px solid #ddd;
}
.color{
	color: crimson;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

</script>
</head>
<body>
<div id="present">
<h1>Syntax :: $('selector').on('click', '#hello', hello)</h1>
<p>아이디값이 hello인 영역을 클릭하면 hello 함수가 그때 호출 될 것이다</p>
<p>지금은 hello 영역이 보이지 않고 나중에 동적으로 그 영역이 만들어집니다.</p>
<p>결론 : on은 미래에 동적으로 생성되는 영역을 클릭할 경우를 위해서 만들어 진 함수이다. 
</div>
<div id="future">

</div>
<script>
$(function(){
	$('#present').on('click',()=>{
		//future영역에 h2크기로 KOSA MSA 3차 Frontend project Start! 이부착되도록..
		$('#future').append(`<h2 id="hello"> KOSA MSA 3차 Frontend Project Start`)
					.addClass('color');
	});
});
</script>
</body>
</html>

 

네모를 클릭하면 아래 문장이 나온다. 그 때 또 클릭했을 때 새로운 동작을 하도록 해보자 

on은 이러한 동작을 하기 위해 탄생한 아이임

<전체 완성 코드>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#present{
	border: 2px solid #ddd;
}
.color{
	color: crimson;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>

</script>
</head>
<body>
<div id="present">
<h1>Syntax :: $('selector').on('click', '#hello', hello)</h1>
<p>아이디값이 hello인 영역을 클릭하면 hello 함수가 그때 호출 될 것이다</p>
<p>지금은 hello 영역이 보이지 않고 나중에 동적으로 그 영역이 만들어집니다.</p>
<p>결론 : on은 미래에 동적으로 생성되는 영역을 클릭할 경우를 위해서 만들어 진 함수이다. 
</div>
<div id="future">

</div>
<script>
$(function(){
	$('#present').on('click',()=>{
		//future영역에 h2크기로 KOSA MSA 3차 Frontend project Start! 이부착되도록..
		$('#future').append(`<h2 id="hello"> KOSA MSA 3차 Frontend Project Start`)
					.addClass('color');
	});
	
	$('#future').on('click', '#hello', hello);
});

function hello(){
	alert("쉬고 갑시다!!");
}
</script>
</body>
</html>

 

'KOSA FullStack 교육 > front' 카테고리의 다른 글

JQuery Template 설정(이클립스 환경)  (0) 2025.06.18
KOSA full stack 교육(JQuery)  (1) 2025.06.17
KOSA fullstack 교육(ChartJS, event)  (2) 2025.06.16
KOSA fullstack 교육(Javascript Basic, Chart JS)  (2) 2025.06.13

'KOSA FullStack 교육/front' Related Articles

티스토리툴바