HTML+CSS+JavaScript

[HTML5+CSS3+Javascript 웹프로그래밍]12장 실습문제

stonesy 2021. 11. 26. 14:34
728x90

1.2개의 웹 페이지를 작성하라. 첫 번째 웹 페이지에서는 이름과 학번을 입력받아 세션 스토리지를 저장한다. 그리고 ' 이름으로 학번 검색 페이지로'의 링크를 클릭하면 두번째 페이지를 로드한다. 이 페이지에서는 이름을 입력받고 버튼을 클릭하면 세션 스토리지에서 검색하여 학번을 출력한다. 이름과 학번은 여러 개 저장 가능하다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이름으로 학번 검색</title>
<script>
function store(){
	if(!window.sessionStorage){
		alert("세션 스토리지를 지원하지 않습니다.");
		return;
	}
	var name = document.getElementById("name");
	var sid = document.getElementById("sid");
	sessionStorage.setItem(name.value, sid.value);
}
</script>
</head>
<body>
	<h3>이름으로 학번 저장</h3>
	<hr>
	<form>
		<label>저장할 이름 <input id="name" type="text" size="10"></label><br>
		<label>저장된 학번 <input id="sid" type="text" size="10"></label>
		<input type="button" value="스토리지에서 저장" onclick="store()">
	</form><br>
	<a href="practice12-1-2.html" target="_self">이름과 학번 검색 페이지로</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이름으로 학번 검색</title>
<script>
function search() {
	if(!window.sessionStorage){ 
		alert("지원하지 않습니다."); 
		return;
	}
	
	var name = document.getElementById("name").value;
	var sid = sessionStorage.getItem(name);
	if(sid == null) {
		alert(name + " 학생이 없습니다."); return;
	}

	document.getElementById("sid").value = sid;
}
</script>
</head>
<body>
	<h3>이름으로 학번 검색</h3>
	<hr>
	<form>
		<label>검색할 이름 <input id="name" type="text" size="10"></label><br>
		<label>검색된 학번 <input id="sid" type="text" size="10"></label>
		<input type="button" value="스토리지에서 검색" onclick="search()">
	</form><br>
	<a href="practice12-1.html" target="_self">이름과 학번 저장 페이지로</a>
</body>
</html>

 

2. 본문의 '실습: 4' 세션 스토리지 응용'절에서 만든 sessionStorage.html을 2개의 페이지로 분할 작성하여 한 페이지에는 구입 리스트를 저장하고 다른 페이지에는 구입 리스트에서 품목명을 입력하여 개수를 검색하도록 수정하라.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>세션 스토리지에 구입 리스트 저장</title>
	<script>
		var item = document.getElementById("item");
		var count = document.getElementById("count");

		function store(){
			if(!window.sessionStorage){
				alert("세션 스토리지를 지원하지 않습니다.");
				return;
			}
			sessionStorage.setItem(item.value,count.value);
		}
	</script>
</head>
<body>
	<h3>세션 스토리지에 구입 리스트 저장</h3>
	<hr>
	<form>
		<label>품목명: <input id="item" type="text" size="10"></label>
		<label>개수: <input id="count" type="text" size="10"></label>
		<input type="button" value="저장" onclick="store()">
	</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>세션 스토리지에 구입 리스트 저장</title>
	<script>
		function search() {
			if(!window.sessionStorage){ 
				alert("지원하지 않습니다."); 
				return;
			}
	
			var item = document.getElementById("item").value;
			var count = sessionStorage.getItem(item);
			if(count == null) {
				alert(item + " 학생이 없습니다."); return;
			}

			document.getElementById("count").value = count;
		}
	</script>
</head>
<body>
	<h3>세션 스토리지에 구입 리스트 검색</h3>
	<hr>
	<form>
		<label>품목명: <input id="item" type="text" size="10"></label>
		<label>개수: <input id="count" type="text" size="10"></label>
		<input type="button" value="검색" onclick="search()">
	</form>
</body>
</html>

 

3.로컬 스토리지를 이용하여 간단한 메모를 기록해두는 포스트잇 웹 페이지를 만들고자 한다. 2개의 웹 페이지를 작성하라. 첫 페이지에서 제목과 메모를 입력받아 '저장' 버튼을 누르면 로컬 스토리지에 저장하고, '보기'버튼을 누르면 새 윈도우를 열고 두 번째 페이지를 출력한다. 이 페이지에서는 로컬 스토리지에 있는 포스트잇을 모두 출력한다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>포스트잇</title>
	<script>
		function store(){
			if(!window.localStorage){
				alert("로컬스토리지를 지원하지 않습니다."); 
				return;
			}
			var title = document.getElementById("title");
			var content = document.getElementById("content");
			localStorage.setItem(title.value,content.value);
		}
		function show(){
			var win = window.open();
			win.document.write("<h3>포스트잇 출력</h3><hr><table id='mytable' style='background:aliceblue'>");
			for(var i=0;i<localStorage.length;i++){
				var mytable=win.document.getElementById('mytable');
				var newtr = document.createElement("tr");
				var td1 = document.createElement("td");
				var th2 = document.createElement("th");
				var td3 = document.createElement("td");
				td1.style.border="1px solid green";
				td1.innerHTML=i+1;
				th2.innerHTML=localStorage.key(i);
				th2.style.width="100px";
				td3.innerHTML=localStorage.getItem(localStorage.key(i));
				td3.style.width="100px";
				newtr.appendChild(td1);
				newtr.appendChild(th2);
				newtr.appendChild(td3);
				mytable.appendChild(newtr);
			}
			win.document.write("</table>");
			win.document.close();
		}
	</script>
</head>
<body>
	<h3>포스트잇</h3>
	<hr>
	<form>
		<label>제목 <input id="title" type="text"></label><br>
		<label>메모입력<br><textarea id="content"></textarea></label><br>
		<input type="button" value="저장" onclick="store()"> 
		<input type="button" value="보기" onclick="show()">
	</form>
</body>
</html>

 

728x90

'HTML+CSS+JavaScript' 카테고리의 다른 글

[HTML5+CSS3+Javascript 웹프로그래밍]13장 실습문제  (0) 2021.12.02
[HTML5+CSS3+Javascript 웹프로그래밍]13장 이론문제  (0) 2021.12.02
[HTML5+CSS3+Javascript 웹프로그래밍]12장 연습문제  (0) 2021.11.26
[HTML5+CSS3+Javascript 웹프로그래밍]11장 실습문제  (0) 2021.11.26
[HTML5+CSS3+Javascript 웹프로그래밍]10장 실습문제  (0) 2021.11.25

'HTML+CSS+JavaScript'의 다른글

  • 현재글[HTML5+CSS3+Javascript 웹프로그래밍]12장 실습문제

관련글

댓글

티스토리툴바