반응형
<<회원가입 기능 추가>>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회 원 가 입</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#joinTitle{font-weight: bold; font-size: 20px;}
.tdalign{text-align: center}
table{margin: 0px auto}
tr{height:25px}
#wrap{width:1007px; margin: 0px auto;}
#joinHeader{width:1007px; height:195px;
background: #FFFFFF url(images/header.png) no-repeat;}
.span{color:#FF0000;}
</style>
<script type="text/javascript">
window.onload=function(){
//옵션 생성
//년
//var b_year=document.getElementById("b_year");
var obj=document.joinFrm;
var b_year=obj.b_year;//1.select 얻기
var date=new Date();
var year_idx=0;
//20살의 나이를 가진 년도에 selected
var flag_year=date.getFullYear()-20+1;
for(var i=1950; i<date.getFullYear()+1; i++){
//2.select의 옵션 생성 Option(보여질값, value값(넘겨줄값))
b_year.options[year_idx]=new Option(i,i);
if(flag_year==i){
b_year.selectedIndex=year_idx;
}//end if;
year_idx++;
}//end for
//b_year.options[50].selected = true;
//b_year.options[50].setAttribute("selected","selected");
//월 설정 1-12
var b_month=obj.b_month;
var month_idx=0;
for(var i=1; i<13; i++){
b_month.options[month_idx]=new Option(i,i);
month_idx++;
}//end for
//일 설정 1-31
var b_day=obj.b_day;
var day_idx=0;
for(var i=1; i<32; i++){
b_day.options[day_idx]=new Option(i,i);
day_idx++;
}//end for
//////////////////////////////////이벤트 등록/////////////////////////////////////////
document.getElementById("idDup").addEventListener("click",popupCenter);
document.getElementById("searchZip").addEventListener("click",popupCenter);
document.getElementById("daumZip").addEventListener("click",execPostcode);
document.getElementById("btnJoin").addEventListener("click",nullCheck);
document.getElementById("pass2").addEventListener("blur",chkPass);
document.getElementById("ssn1").addEventListener("keyup",moveSsn2);
document.getElementById("ssn2").addEventListener("keyup",chkSsn);
}//function-onload
function moveSsn2(){
//주민번호 앞자리에서 6글자가 입력되면 커서를 ssn2로 이동
/* if(document.getElementById("ssn1").value.length==6){
document.joinFrm.ssn2.focus();
}//end if나나!! */
var obj=document.joinFrm;
if(obj.ssn1.value.length==6){
obj.ssn2.focus();
}//end if
if(obj.ssn1.value.replace(/[0-9]/g,"")!=""){
alert("주민번호는 숫자로만 구성됩니다.");
obj.ssn1.value="";
obj.ssn1.focus();
return;
}//end if
}//moveSsn2
function chkSsn(){
//입력한 주민번호의 유효성 검증
//주민 번호의 끝자리가 7자리인지
var obj=document.joinFrm;
if(obj.ssn2.value.length==7){
//주민 번호 첫번째 자리가 숫자로 구성되어있는지?
if(obj.ssn1.value.replace(/[0-9]/g,"")!=""){
alert("주민번호 첫번쨰 칸자리는 숫자로만 구성됩니다.");
obj.ssn1.value="";
obj.ssn1.fucus();
return;
}//end if
//주민 번호 두번째 자리가 숫자로 구성되어있는지?
if(obj.ssn2.value.replace(/[0-9]/g,"")!=""){
alert("주민번호는 두번째칸 자리는 숫자로만 구성됩니다.");
obj.ssn2.value="";
obj.ssn2.fucus();
return;
}//end if
var ssn=obj.ssn1.value+obj.ssn2.value;
//alert(ssn);
var flagNum=[2,3,4,5,6,7,8,9,2,3,4,5];
//주민번호의 각자리에 2,3,4,5,6,7,8,9,2,3,4,5 를 곱한 값의 결과를 모두 더해서 변수에 할당
var temp=0;
for(var i=0; i<flagNum.length; i++){
temp +=ssn.charAt(i)*flagNum[i];
}//end for
//위에서 계산된 값을 11로 나눈 나머지를 11에서 빼고 그 결과를 10으로 나눈 나머지를 구한다.
temp=(11-(temp%11))%10;
//위에서 계산된 결과가 주민번호의 가장마지막 자리와 일치한다면 유효, 그렇지 않다면 무효
if(temp==ssn.charAt(12)){
//alert("유효");
//성별 체크
var genderFlag=ssn.charAt(6);
if(genderFlag%2==0){
//여자
obj.gender[1].checked=true;
}else{
obj.gender[0].checked=true;
}//end else
//생년월일
var ssn_year=parseInt(ssn.substring(0, 2));
var ssn_month=parseInt(ssn.substring(2, 4));//01->1
var ssn_day=parseInt(ssn.substring(4, 6));//01->1
if(genderFlag<=2){//1,2=>1900
ssn_year=1900+ssn_year;
}else if(genderFlag<=4){//=>2000
ssn_year=2000+ssn_year;
}//end else
//생년월일 체크되게 하기
var b_flag=false;
for(var i=0; i<obj.b_year.length; i++){
if(obj.b_year[i].value==ssn_year){
obj.b_year[i].selected=true;
b_flag=true;
break;
}//end if
}///end for
if(!b_flag){//준비된 생년이 없을 때
//옵션을 생성하여 추가하고
obj.b_year.options[obj.b_year.length]=new Option(ssn_year,ssn_year);
//추가된 옵션을 선택해 준다.
obj.b_year[obj.b_year.length-1].selected=true;
}//end if
//월 설정
obj.b_month[ssn_month-1].selected=true;
//일 설정
obj.b_day[ssn_day-1].selected=true;
//나이
var date=new Date();
obj.age.value=date.getFullYear()-ssn_year+1;
}else{
alert("잘못된 주민 번호 입니다.");
}//end else
}//end if
}//chkSsn
//미혼일때 결혼기념일 체크 안되게
function nullCheck(){
//필수 입력값 체크
var obj=document.joinFrm;
if(obj.id.value==""){
alert("아이디는 필수 입력!!");
return;
}//end if
if(obj.pass1.value==""){
alert("비밀번호는 필수 입력!!");
obj.pass1.focus();
return;
}//end if
if(obj.pass2.value==""){
alert("비밀번호 확인은 필수 입력!!");
obj.pass2.focus();
return;
}//end if
if(obj.name.value==""){
alert("이름은 필수 입력!!");
obj.name.focus();
return;
}//end if
if(obj.ssn1.value==""){
alert("주민번호 앞칸은 필수 입력!!");
obj.ssn1.focus();
return;
}//end if
if(obj.ssn2.value==""){
alert("주민번호 뒷칸은 필수 입력!!");
obj.ssn2.focus();
return;
}//end if
if(obj.zipcode1.value==""||obj.zipcode2.value==""||obj.addr1.value==""){
alert("주소를 검색해 주세요!!");
return;
}//end if
if(obj.addr2.value==""){
alert("상세주소는 필수 입력!!");
obj.addr2.focus();
return;
}//end if
//입력값이 모두 입력되었으므로 서버로 전송
obj.submit();//get방식이라 중요정보가 다 주소로 넘어가게된다!-> post로 바뀌어야 한다.
}//nullCheck
function chkPass(){
//비밀번호가 일치 하는지 체크
var obj=document.joinFrm;
if(obj.pass1.value != obj.pass2.value){
alert("비밀번호가 틀립니다.");
obj.pass1.value="";
obj.pass2.value="";
obj.pass1.focus();
return;
}//end if
}//chkPass
function popupCenter(){
var width=0;
var height=0;
var html="";
var id=""
if(this.id=="idDup"){
// alert("아이디 중복확인");
id="idDup";
html="id_dup.html";
width=502;
height=303;
}//end if
if(this.id=="searchZip"){
// alert("우편번호확인");
id="searchZip";
html="search_zip.html";
width=408;
height=419;
}//end if
/* if(this.id=="daumZip"){
// alert("다음");
//postcode.map.daum.net/guide
id="daumZip";
html="daum_zip.html";
width=502;
height=303;
}//end if */
window.open(html,id,"width="+width+",height="+height);
}//popupCenter
</script>
<style type="text/css">
</style>
<!-- script를 body에 넣었을때 에러가 발생하면 사용자는 에러메세지를 계속 클릭한 이후 제공하는 서비스를 볼 수 있다.
script를 head에 넣었다면 에러가 발생하더라도 body는 에러메세지 없이 그대로 제공된다. -->
<script src="http://dmaps.daum.net/map_js_init/postcode.v2.js"></script>
<script>
//본 예제에서는 도로명 주소 표기 방식에 대한 법령에 따라, 내려오는 데이터를 조합하여 올바른 주소를 구성하는 방법을 설명합니다.
function execPostcode() {
new daum.Postcode({
oncomplete: function(data) {
// 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
// 도로명 주소의 노출 규칙에 따라 주소를 표시한다.
// 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
var roadAddr = data.roadAddress; // 도로명 주소 변수
var extraRoadAddr = ''; // 참고 항목 변수
// 법정동명이 있을 경우 추가한다. (법정리는 제외)
// 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
extraRoadAddr += data.bname;
}
// 건물명이 있고, 공동주택일 경우 추가한다.
if(data.buildingName !== '' && data.apartment === 'Y'){
extraRoadAddr += (extraRoadAddr !== '' ? ', ' + data.buildingName : data.buildingName);
}
// 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
if(extraRoadAddr !== ''){
extraRoadAddr = ' (' + extraRoadAddr + ')';
}
// 우편번호와 주소 정보를 해당 필드에 넣는다.
document.getElementById('zipcode').value = data.zonecode;
document.getElementById("roadAddr").value = roadAddr;
//document.getElementById("jibunAddr").value = data.jibunAddress;
// 참고항목 문자열이 있을 경우 해당 필드에 넣는다.
if(roadAddr !== ''){
document.getElementById("extraAddr").value = extraRoadAddr;
} else {
document.getElementById("extraAddr").value = '';
}
/* var guideTextBox = document.getElementById("guide");
// 사용자가 '선택 안함'을 클릭한 경우, 예상 주소라는 표시를 해준다.
if(data.autoRoadAddress) {
var expRoadAddr = data.autoRoadAddress + extraRoadAddr;
guideTextBox.innerHTML = '(예상 도로명 주소 : ' + expRoadAddr + ')';
guideTextBox.style.display = 'block';
} else if(data.autoJibunAddress) {
var expJibunAddr = data.autoJibunAddress;
guideTextBox.innerHTML = '(예상 지번 주소 : ' + expJibunAddr + ')';
guideTextBox.style.display = 'block';
} else {
guideTextBox.innerHTML = '';
guideTextBox.style.display = 'none';
} */
}
}).open();
}
</script>
</head>
<body>
<div id="wrap">
<div id="joinHeader"></div>
<div id="joinContent">
<form action="member.jsp" name="joinFrm">
<table>
<tr>
<td class="tdalign" colspan="2"><span id="joinTitle">회원가입</span></td>
</tr>
<tr>
<td><span class="span">*</span>아이디</td>
<td>
<input type="text" class="inputBox" name="id" readonly="readonly" style="width:100px">
<button type="button" class="btn" id="idDup">중복확인</button>
</td>
</tr>
<tr>
<td><span class="span">*</span>비밀번호</td>
<td><input type="password" class="inputBox" name="pass1" style="width:120px"></td>
</tr>
<tr>
<td><span class="span">*</span>비밀번호 확인</td>
<td><input type="password" class="inputBox" id="pass2" name="pass2" style="width:120px"></td>
</tr>
<tr>
<td><span class="span">*</span>이름</td>
<td><input type="text" class="inputBox" name="name" style="width:120px"></td>
</tr>
<tr>
<td><span class="span">*</span>주민번호</td>
<td><input type="text" class="inputBox" name="ssn1" id="ssn1" style="width:60px" maxlength="6">
<label> - </label>
<input type="password" class="inputBox" name="ssn2" id="ssn2" style="width:70px" maxlength="7"></td>
</tr>
<tr>
<td> 성별</td>
<td><input type="radio" value="남자" name="gender" name="pass">남자
<input type="radio" value="여자" name="gender">여자</td>
</tr>
<tr>
<td> 생년월일</td>
<td>
<select name="b_year" class="inputBox">
</select>
<label>년</label>
<select name="b_month" class="inputBox">
</select>
<label>월</label>
<select name="b_day" class="inputBox">
</select>
<label>일</label>
</td>
</tr>
<tr>
<td> 나이</td>
<td><input type="text" name="age" class="inputBox" style="width:30px"></td>
</tr>
<tr>
<td> 관심언어</td>
<td>
<input type="checkbox" value="Java" name="interestlang">Java
<input type="checkbox" value="C/C++" name="interestlang">C/C++
<input type="checkbox" value="Python" name="interestlang">Python
<input type="checkbox" value="VB" name="interestlang">VB
<input type="checkbox" value="JSP" name="interestlang">JSP
<input type="checkbox" value="Servlet" name="interestlang">Servlet
<input type="checkbox" value="ASP" name="interestlang">ASP
<input type="checkbox" value="php" name="interestlang">php
</td>
</tr>
<tr>
<td> 결혼여부</td>
<td><input type="radio" value="미혼" name="marrigeFlag" checked="checked">미혼
<input type="radio" value="기혼" name="marrigeFlag">기혼</td>
</tr>
<tr>
<td> 결혼기념일</td>
<td><input type="text" maxlength="4" name="m_year" class="inputBox" style="width:40px">년
<input type="text" maxlength="2" name="m_month" class="inputBox" style="width:20px">월
<input type="text" maxlength="2" name="m_day" class="inputBox" style="width:20px">일</td>
</tr>
<tr>
<td><span class="span">*</span>우편번호</td>
<td><input type="text" readonly="readonly" name="zipcode1" class="inputBox" style="width:30px">
<label> - </label>
<input type="text" readonly="readonly" name="zipcode2" class="inputBox" style="width:30px">
변경된<input type="text" readonly="readonly" name="zipcode" id="zipcode" class="inputBox" style="width:50px">
<button type="button" class="btn" id="searchZip">우편번호검색</button>
<button type="button" class="btn" id="daumZip">다음우편번호검색</button></td>
</tr>
<tr>
<td><span class="span">*</span>주소</td>
<td>
<input type="text" readonly="readonly" name="addr1" id="roadAddr" class="inputBox" style="width:200px">
참고 주소 : <input type="text" id="extraAddr" class="inputBox"/>
</td>
</tr>
<tr >
<td><span class="span">*</span>상세주소</td>
<td><input type="text" class="inputBox" name="addr2" style="width:200px"></td>
</tr>
<tr valign="middle">
<td> 가입인사</td>
<td><textarea name="greetings" class="inputBox" style="width:250px; height:100px"></textarea></td>
</tr>
<tr>
<td colspan="2" class="tdalign">
<button type="button" class="btn" id="btnJoin" onclick="">가입</button>
<button type="reset" class="btn">초기화</button>
</td>
</tr>
<tr>
<td colspan="2"><span class="span">*는 필수 입력 사항입니다.</span></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
canvas/storage=>HTML5
*canvas
-
도형을 그리거나 이미지를 다룰때 사용.
-
2D그래픽을 지원
-
플러그인(플래쉬?)같은게 없이도 이미지를 보일수 있다는게 장점(맥의 사파리...)
-
사용법)
-
1.태그 작성(모든 브라우저가 되지 않을 수도)
-
<canvas id="id 값" width="" height=""></canvas>
-
var can=document.getElememtId("id 값");
-
3.2d그래픽을 그리는 객체
-
var ctx=can.getContext("2d");
-
=>ctx로 이미지, 도형,그림,글자를 쓰게 됨
-
ex)ctx.fillRect(x,y,w,h);//사각형 그리기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#can{border:1px solid #333; }
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("rect").addEventListener("click",drawRect);
document.getElementById("img").addEventListener("click",drawImg);
document.getElementById("line").addEventListener("click",drawLine);
}//function
function drawRect(){
//1.canvas 얻기
var can=document.getElementById("can");
//2.2d그래픽을 그릴 수 있는 객체
var ctx=can.getContext("2d");
//초기화 : 그래픽 객체를 초기화->위에 덧입혀 지기때문에 초기화를 하지 않으면 진해진다.
ctx.clearRect(0,0,can.width,can.height);
//4.색변경 : fillStyle="RGB(R,G,B)"|"rgba(R,G,B,투명도)"
ctx.fillStyle="rgb(255,0,0)";//값 0~255
//3.지정한 좌표에 사각형 그리기 : fillRect(x,y,w,h);
ctx.fillRect(10,10,80,40);
ctx.fillStyle="rgba(255,0,0,0.5)";//투명도 : 0.0~1
ctx.fillRect(40,40,80,40);
}//drawRect
function drawImg(){
//1.canvas얻기
var can=document.getElementById("can");
//2.2d 그래픽 객체 얻기
var ctx=can.getContext("2d");
//초기화->그려져있던걸 지우고 그린다.
ctx.clearRect(0,0,can.width,can.height);
//3.이미지 객체 생성
var img=new Image();
//4.이미지 객체의 경로 설정 : img.src="이미지 경로";
img.src="../common/images/img.png";
//5.이미지를 그린다. : ctx.drawImage(이미지 객체,x,y);
//ctx.drawImage(img,100,50);//이미지의 크기대로 그려진다.
//이미지의 크기를 변경하여 그릴 수 있다. ctx.drawImage(이미지 객체,x,y,w,h) : 자원을 너무 많이 사용하게되어 잘 사용하지 않는다.
ctx.drawImage(img,30,30,100,100);
}//drawImg
function drawLine(){
//1.canvas얻기
var can=document.getElementById("can");
//2.2d 그래픽 객체 얻기
var ctx=can.getContext("2d");
//초기화
ctx.clearRect(0,0,can.width,can.height);
//3.선긋기 시작 함수 호출 : ctx.beginPath()
ctx.beginPath();
//3-2시작 좌표 : ctx.moveTo(x1,y1);
ctx.moveTo(25,50);//시작 좌표 재설정
//끝 좌표 : ctx.lineTo(x1,y1);
ctx.lineTo(150,50);//끝 좌표를 재설정하여 선을 그린다.
ctx.lineTo(25,150);//위의 lineTo에서 설정된 좌표를 시작점으로 선을 그린다.
ctx.moveTo(25,50);//좌표가 재설정되고
ctx.lineTo(25,150);//재설정된 좌표에서 끝좌표를 설정하여 선을 그린다.
//3-3선긋기
ctx.stroke();
//3.선긋기 끝 함수 호출 : ctx.closePath()
}//drawLine
</script>
</head>
<body>
<canvas id="can" width="500" height="500"></canvas>
<br/>
<input type="button" value="사각형" class="btn" id="rect"/>
<input type="button" value="이미지" class="btn" id="img"/>
<input type="button" value="선" class="btn" id="line"/>
</body>
</html>
*storage
-
HTML5에서 지원되는 저장객체
-
접속자의 정보를 접속자 브라우저에 저장하는 객체
-
(다음번에 들어왔을때에도 쓸수 있다.)
-
비연결성인 웹에서 접속자의 정보를 저장할 수 있다.
-
=>비연결성:접속자의 요청이 있을때 서버와 연결하고, 요청한 데이터가 응답이 되면 연결이 끊어지는 동작(필요할 때에만 연결)
-
비연결성 특징) 서버의 자원을 절약할 수 있다.(저사양의 서버로도 많은 접속자를 처리할 수 있다.) //부하가 덜걸린다..
-
+클라이언트의 상태를 알 수 없다.
-
이 비연결성의 문제점을 해결하기 위해 session, cookie를 제공 하게 된다.
-
session : 접속자의 정보를 서버측 메모리에 저장
-
cookie : 접속자의 정보를 접속자 HDD에 파일로 저장.=>문자열만 저장가능, File생성(4kb-한정)
-
이 cookie기술을 대체하기 위한 기술!
-
SessionStorage, localStorage 두가지 제공
-
=>브라우저의 저장소에 저장되어 cookie의 단점 보완(약 5Mbyte까지 저장)
-
이름과 값의 쌍(key value pare:kvp)으로 저장
-
SessionStorage
-
Session : 컴퓨터끼리의 연결 상태(호단위(컴퓨터 마다/끼리) 연결)
-
접속자의 정보가 서버에 연결되어 있을 때에만 유지된다.
-
localStorage
-
접속자의 정보가 서버와 연결이 끊어져도 유지된다.
-
윈도우 객체의 자식으로 제공된다.
-
사용법)
-
Storage객체 얻기
-
var 변수명=window.localStorage;
-
.sessionStorage;
-
값 설정
-
변수명.setItem("이름","값"); //서버가 다르면 사용할 수 없다.
-
값 얻기
-
=변수명.getItem("이름");
-
값 삭제
-
변수명.removeItem("이름");
-
모두 삭제
-
변수명.clear();
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#output{height: 80px; width: 500px; border:1px solid #333; }
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("s_set").addEventListener("click",sSet);
document.getElementById("s_get").addEventListener("click",sGet);
document.getElementById("s_remove").addEventListener("click",sRemove);
document.getElementById("l_set").addEventListener("click",lSet);
document.getElementById("l_get").addEventListener("click",lGet);
document.getElementById("l_remove").addEventListener("click",lRemove);
}//function
function sSet(){
//세션 스토리지에 값 설정
window.sessionStorage.setItem("name","노진경");//문자열(String)
window.sessionStorage.setItem("age",20);//숫자(number-실수,정수)
window.sessionStorage.setItem("flag",true);//불린
}//sSet
function sGet(){
var divNode=document.getElementById("output");
var output="<ul>";
//세션 스토리지에 값을 얻어와서 div에 출력
var ses=window.sessionStorage;
var name=ses.getItem("name");
var age=ses.getItem("age");
var flag=ses.getItem("flag");
output+="<li>이름 : "+name+"</li>";
output+="<li>나이 : "+age+"</li>";
output+="<li>flag : "+flag+"</li>";
divNode.innerHTML=output;//동적으로 생성해 넣음?
}//sGet
function sRemove(){
//세션 스토리지의 값 삭제
/* window.sessionStorage.removeItem("name");
window.sessionStorage.removeItem("age");
window.sessionStorage.removeItem("flag"); */
sessionStorage.clear();//모든값을 한번에 지울 수 있다.
}//sRemove
function lSet(){
//로컬 스토리지에 값 설정
window.localStorage.setItem("name","김희철");//문자열(String)
window.localStorage.setItem("age",25);//숫자(number-실수,정수)
window.localStorage.setItem("flag",true);//불린
window.localStorage.setItem("addr","서울시 동작동");
}//lSet
function lGet(){
var divNode=document.getElementById("output");
var output="<ul>";
//local 스토리지에 값을 얻어와서 div에 출력
var loc=window.localStorage;
var name=loc.getItem("name");
var age=loc.getItem("age");
var flag=loc.getItem("flag");
var addr=loc.getItem("addr");
output+="<li>이름 : "+name+"</li>";
output+="<li>나이 : "+age+"</li>";
output+="<li>flag : "+flag+"</li>";
output+="<li>주소 : "+addr+"</li>";
divNode.innerHTML=output;
}//lGet
function lRemove(){
//로컬스토리지의 값 삭제
localStorage.removeItem("name");
localStorage.removeItem("age");
localStorage.removeItem("flag");
localStorage.removeItem("addr");
}//lRemove
</script>
</head>
<body>
<div id="output"></div>
<div>
<input type="button" value="SessionStorage값 설정" class="btn" id="s_set" />
<input type="button" value="SessionStorage값 얻기" class="btn" id="s_get" />
<input type="button" value="SessionStorage값 삭제" class="btn" id="s_remove" />
<input type="button" value="LocalStorage값 설정" class="btn" id="l_set" />
<input type="button" value="LocalStorage값 얻기" class="btn" id="l_get" />
<input type="button" value="LocalStorage값 삭제" class="btn" id="l_remove" />
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").addEventListener("click",setData);
}//function
function setData(){
//사용자가 입력한 값을 계속해서 쓰기 위해 로컬스토리지 설정
var obj=document.frm;
localStorage.setItem("name",obj.name.value);
var img="";
for(var i=0; i<obj.img.length; i++){
if(obj.img[i].checked){
img=obj.img[i].value;
}//end if
}//end for
localStorage.setItem("img",img);
alert("설정 되었습니다.");
}//setData
</script>
</head>
<body>
<form name="frm">
<label>이름</label><input type="text" name="name" class="inputBox"/><br/>
<label>이미지 선택</label>
<table>
<tr>
<td><input type="radio" value="img.png" name="img" checked="checked"/>김</td>
<td><img src="../common/images/img.png" width="80"/></td>
</tr>
<tr>
<td><input type="radio" value="img1_1.png" name="img"/>정</td>
<td><img src="../common/images/img1_1.png" width="80"/></td>
</tr>
<tr>
<td><input type="radio" value="img2.jpg" name="img"/>이</td>
<td><img src="../common/images/img2.jpg" width="80"/></td>
</tr>
</table>
<input type="button" value="입력" id="btn" class="btn"/>
<a href="use_storage1.html">페이지 이동</a>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload= function(){
//로컬스토리지의 값 얻기
var name=localStorage.getItem("name");
var img=localStorage.getItem("img");
if(name==null){
alert("저장된 정보가 없습니다.");
location.href="use_storage.html";
}//end if
var msg="";
if(img=="img.png"){
msg="무엇인가 고민하고있는";
}//end if
if(img=="img1_1.png"){
msg="어떤 춤을 춰야할지 고민하는)";
}//end if
if(img=="img2.jpg"){
msg="그날의 피로는 그날";
}//end if
document.getElementById("img").src="../common/images/"+img;
document.getElementById("name").innerHTML="<strong>"+name+"</strong>";
document.getElementById("spec").innerHTML="<strong>"+msg+"</strong>";
}//function
</script>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3"><img id="img" height="80"/></td>
<td>라벨영역</td><td>데이터영역</td>
</tr>
<tr>
<td>이름</td><td><span id="name"></span></td>
</tr>
<tr>
<td>특징</td><td><span id="spec"></span></td>
</tr>
</table>
</body>
</html>
*JSON(JavaScript Object Notation)
-
자바스트립트에서 값을 저장하기 위해 사용하는 데이터형 (이 기종 언어간에 값을 주고받는용도로 많이 사용한다)
-
다양한 데이터를 저장할 수 있다(number, String, boolean, json)
-
간단한 문법으로 사용할 수 있다.
-
JSONObject, JSONArray 두가지 형태로 사용할 수 있다.
-
eval 함수를 사용하여 객체를 만들고 사용한다(문자열->객체)
-
이름과 값의 쌍으로 되어있고 이름으로 값을 조회할 수 있다.
-
문법)
-
{이름 : 값}//JSON object(만들때에는 문자열로)
-
//이름은 '로 감싸고, 형에 따라 '또는 "를 직접사용한다.
-
ex)
-
//1.JSONObject형태의 문자열 생성
-
var text="{'name':'김정윤','age':20,'bool':true}";//지금은 json object형태를 가진 문자열
-
//2.eval함수로 문자열을 JSONObject 객체로 생성
-
var json.obj=eval("("+text+")");//괄호를 넣지 않으면 만들어지지 않는다.
-
//3.이름으로 값을 얻는다. : 객체명.이름
-
json_obj.name, json.obj.age, json.obj.bool 로 얻을 수 있다.(map 이랑 비슷)//간편하게 쓸수 있어 많이 쓴다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
#output{height: 80px; width: 500px; overflow: auto; border:1px solid #333; }
/* overflow:넘치면 스크롤바 생성 */
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("btn").addEventListener("click",useJson);
}//function
function useJson(){
//JSON : JavaScript Object Notation
//1.JSONObject 형태의 문자열을 생성
var data="{'name':'김','age':20,'job':'뛰어난 자바개발자','flag':true,'pubDate':'2019-02-19'}";
//alert(data);//지금은 그대로 출력
//2.eval함수를 사용하여 JSONObject객체를 생성한다.
var json_obj=eval("("+data+")");
//alert(json_obj.name+"/"+json_obj.age);
//3.값 얻기
var output=document.getElementById("output");
output.innerHTML="이름 :"+json_obj.name+"<br/>나이 :"+json_obj.age+"<br/>job :"+json_obj.job+
"<br/>flag :"+json_obj.flag+"<br/>생성일 :"+json_obj.pubDate;
}//useJson
</script>
</head>
<body>
<div id="output"></div>
<input type="button" value="JSONObject 사용" class="btn" id="btn"/>
</body>
</html>
반응형
'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글
| 83일차-jQuery_selector/Event Handling/DOM (0) | 2019.03.03 |
|---|---|
| 82일차-JavaScript_closure/class (0) | 2019.03.03 |
| 80일차-javaScript_회원가입 유효성 검증(더해야 함) (0) | 2019.02.20 |
| 79일차-javaScript_페이지 이동 방법과 popup창 (0) | 2019.02.19 |
| 78일차-JavaScript+a (0) | 2019.02.18 |