• Home
  • About
    • Young's Github Pages photo

      一日不作一日不食

    • About
    • Github
  • Posts
    • All Posts
    • All Tags
  • Projects

JavaScript 정리 11

19 Feb 2019

Reading time ~7 minutes

JavaScript 정리 11 - 회원가입 유효성 검증, canvas, Storage, JSON

회원가입 유효성 검증 - SSN 검증

  • 어제 이어서 작업
document.getElementById("ssn1").addEventListtener("keyup",  moveToSsn2);
document.getElementById("ssn2").addEventListtener("keyup",  chkSsn);
  • ssn1이 6글자가 되면 ssn2로 이동
// 주민번호 앞자리에서 6글자가 입력되면 커서를 Ssn2로 이동
function moveToSsn2() {
     if(document.getElementById("ssn1").value.length == 6) {
           document.getElementById("ssn2").focus();
     }
}
  • ssn2가 7글자면 주민번호 검증알고리즘으로 검증, 성별, 생년월일, 나이 채울 것
//입력한 주민번호의 유효성 검증
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.focus();
         return;
      }//end if

      //주민번호 첫번째 자리가 숫자로 구성되어있는지?
      if(obj.ssn2.value.replace(/[0-9]/g,"")!=""){
         alert("주민번호 두번째 자리는 숫자로만 구성됩니다.");
         obj.ssn2.value="";
         obj.ssn2.focus();
         return;
      }//end if

      var ssn=obj.ssn1.value+obj.ssn2.value;
      
      // 주민번호 검증 알고리즘
      var flagNum=[2,3,4,5,6,7,8,9,2,3,4,5];
      
      var temp=0;
      //주민번호의 각 자리에 2,3,4,5,6,7,8,9,2,3,4,5 를 곱한 값의  결과를 모두 더해서
      //변수에 할당
      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)){ 

         //성별체크
         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));  //88
         var ssn_month=parseInt(ssn.substring(2,4)); //01->1
         var ssn_day=parseInt(ssn.substring(4,6));   //01->1

         //생년월일.
         if(genderFlag<=2){ //1900
            ssn_year=1900+ssn_year;
         }else if(genderFlag<=4){ //2000
            ssn_year=2000+ssn_year;
         }//end if

         //생년월일체크.
         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 if
}

회원가입 유효성 검증 - 필수 입력사항 체크

  • 아이디, 비밀번호, 이름, 주민번호, 주소, 상세주소 입력 체크
document.getElementById("btnJoin").addEventListener("click",  nullCheck);

function nullCheck() {
   var obj=document.joinFrm;
   
   if(obj.id.value ==""){
      alert("아이디는 필수 입력!!!");
      obj.id.focus();
      return;
   }
   if(obj.pass1.value ==""){
      alert("비밀번호는 필수 입력!!!");
      obj.pass1.focus();
      return;
   }
   if(obj.pass2.value ==""){
      alert("비밀번호 확인은 필수 입력!!!");
      obj.pass2.focus();
      return;
   }
   if(obj.name.value ==""){
      alert("이름은 필수 입력!!!");
      obj.name.focus();
      return;
   }
   if(obj.ssn1.value ==""){
      alert("주민번호 첫자리는 필수 입력!!!");
      obj.ssn1.focus();
      return;
   }
   if(obj.ssn2.value ==""){
      alert("주민번호 두번째자리는 필수 입력!!!");
      obj.ssn2.focus();
      return;
   }
   if(obj.zipcode1.value ==""||obj.zipcode2.value  ==""||obj.addr1.value ==""){
      alert("주소를 검색해 주세요");
      return;
   }
   if(obj.addr2.value ==""){
      alert("상세주소는 필수 입력!!!");
      obj.addr2.focus();
      return;
   }
   //입력값이 모두 입력되었으면 서버로 전송
   obj.submit();
   
}//nullCheck

canvas

  • 도형을 그리거나 이미지를 다룰 때 사용
  • 2D 그래픽을 지원, 브라우저에 플러그인이 없어도 그래픽 묘사가능
    • canvas로 Flash가 없어도 움직이는 영상을 제작 가능
  • audio나 video 태그처럼 모든 브라우저에서 지원하지 않을 수 있다
  • canvas태그는 css로 width나 height를 주지 않는다.
    • 태그에 직접 입력
  • 사용 예
<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>

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")

     //초기화: 그래픽 객체를 초기화 (x, y, 넓이, 높이)
     ctx.clearRect(0,0,can.width, can.height); 

     //4. 색변경 :속성 fillStyle="rgb(R,G,B)"
     // fillStyle="rgba(R,G,B,alpha(투명도))"
     ctx.fillStyle="rgb(255,0,0)";

     //3. 지정한 좌표에 사각형 그리기fillRect(x,y,w,h)
     ctx.fillRect(10,10,80,40);

     //4. 색변경 :속성 fillStyle="rgb(R,G,B)"
     // fillStyle="rgba(R,G,B,alpha(투명도))"
     ctx.fillStyle="rgb(255,0,0,0.2)"//투명도 0.0~1까지 설정
     ctx.fillRect(40,40,80,40);
}

01

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);

     // 이미지 크기를 변경하여 그린다. 
     // HTML에서 이미지 크기 변경 시 자원을 많이 소모(비권장)
     // drawImgage(img객체, x, y, 넓이, 높이)
     ctx.drawImage(img,30,30,100,100);
}

02

function drawLine() {
     //1. canvas 얻기
     var can= document.getElementById("can");

     //2. 2d 그래픽을 그릴 수 있는 객체
     var ctx=can.getContext("2d")
     ctx.clearRect(0,0,can.width,can.height);//can 초기화

     //3. 선긋기 시작함수호출: ctx.beginPath()
     ctx.beginPath();

     //시작좌표: ctx.moveTo(x1,y1)
     ctx.moveTo(25, 50); //시작 좌표 재설정

     //끝좌표: ctx.lineTo(x1,y1)
     ctx.lineTo(150, 50); //끝좌표를 설정하여 선을 그린다
     ctx.lineTo(25, 150);// 위에서 설정된 좌표를 시작점으로 선을  그린다.

     //마지막선이 설정되지 않으면 자동으로 채워준다.
     
     ctx.moveTo(25, 50); // 좌표 시작점을 재설정
     ctx.lineTo(25, 150);// 재설정된 좌표에서 설정된 좌표로 선을 연결.

     ctx.stroke(); // stroke함수로 선을 긋는다.

     //3. 선긋기 끝 함수 호출: ctx.closePath()
     ctx.closePath();
}

03

Storage

  • 웹은 비연결성, 멱등성
    • 비연결성
      • 접속자의 요청이 있을 때 서버와 연결하고 요청한 데이터가 응답되면 연결이 서버와 연결이 끊어진다.
      • 웹은 클라이언트가 필요할 때만 서버에 연결, 서버의 자원을 절약할 수 있다.
        • 저사양의 서버로도 많은 접속자를 처리가능
      • 게임은 서버와 계속 연결이 되어 있어야함,(연결성) 자원을 많이 점유한다.
      • 비연결성의 단점은 클라이언트의 상태를 알 수 없다.(몇 명이 접속했는지 모른다.)
      • 비연결성을 해결하기 위해 서버에서는 session과 cookie를 제공
        • session은 접속자의 정보를 서버측 메모리에 저장
        • 접속자의 정보를 접속자의 HDD에 파일로 저장하는 것이 cookie
        • storage는 cookie를 대체하기 위한 기술
          • session storage, local storage가 존재
  • HTML5에서 지원되는 저장객체
    • 접속자의 정보를 접속자 브라우저에 저장하는 객체
    • 비연결성인 웹에서 접속자의 정보를 저장가능
  • cookie는 객체는 저장 안되고 문자열만 저장 가능.
    • 최대 크기가 4KB 파일로 생성이 된다.
  • Storage를 쓰면 브라우저의 저장소에 저장이 됨.
    • 크롬 개발자도구 인스펙터에서 확인 가능
      • Application - Storage
      • 스토리지 값 직접 변경, 삭제 가능
    • 쿠키와 저장공간이 다르다.
    • 쿠키와 다르게 문자열뿐만 아니라 다양한 데이터를 최대 5MB까지 저장가능
    • 키, 값의 쌍(KVP, key value pair, entity)으로 저장된다.

04

  • Sesstion Stroage
    • 컴퓨터끼리의 연결을 session이라고 함.
    • 접속자의 정보가 서버에 연결되어 있을 때만 유지된다.
  • Local Storage
    • 서버와 연결이 끊어져도 접속자의 정보가 계속 유지가 된다.
  • 스토리지 사용 예
    • 로그인 유지
      • 로그인 된 상태가 서버측 세션에 저장됨
      • 그 상태를 내 브라우저 스토리지에 저장해 둠
      • Local Storage 사용하면 다음에 접속 시 로그인한 상태를 계속 사용가능
      • Session Stroage면 다음 접속 시 다시 로그인을 해야 함.
    • 장바구니
      • 다음 접속했을 때도 상품 유지 Local Storage
      • 다음 접속 때 초기화 Session Storage
    • 연결된 상태로 잠깐 쓸 땐 Session Storage
    • 계속 정보를 유지할 땐 Local Storage
  • 쿠키는 1년까지 유지됨
    • Storage는 사용자가 지워야 사라진다.
  • 사용법
    • storage는 window객체의 자식으로 제공이 된다.
// 1. Storage 객체 얻기
var ls = window.localStorage;
var ss = window.sessionStorage;

// 2. 이름, 값 할당
ls.setItem("키","값");
ss.setItem("키","값");

// 3. 값 얻기
ls.getItem("키");
ss.getItem("키");

// 4. 값 삭제
ls.removeItem("키");
ss.removeItem("키");

// 5. 모두 삭제
ls.clear();
ss.clear();
  • storage 예제
<body>
<div id="output"></div>
<input type="button" value="SessionStroage값설정"  class="btn" id="s_set"/>
<input type="button" value="SessionStroage값얻기"  class="btn" id="s_get"/>
<input type="button" value="SessionStroage값삭제"  class="btn" id="s_remove"/>
     
<input type="button" value="LocalStroage값설정" class="btn"  id="l_set"/>
<input type="button" value="LocalStroage값얻기" class="btn"  id="<input type="button" value="LocalStroage값삭제" class="btn"  id="l_remove"/>
</body>

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 sSet() {
     // 세션스토리지에 값 설정
     // 스토리지는 문자열만 저장할 수 있는 쿠키와 다르게 다양한 데이터를 저장가능
     window.sessionStorage.setItem("name", "노진경"); // string
     window.sessionStorage.setItem("age", 20); // number
     window.sessionStorage.setItem("flag", true) // boolean
}

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;
}

function sRemove() {
     //window.sessionStorage.removeItem("name");
     //window.sessionStorage.removeItem("age");
     //window.sessionStorage.removeItem("flag");
     sessionStorage.clear(); //모든값 지우기
}

function lSet() {
     // 로컬스토리지에 값 설정
     window.localStorage.setItem("name", "김희철") // string
     window.localStorage.setItem("age", 25) // number
     window.localStorage.setItem("flag", true) // boolean
     window.localStorage.setItem("addr", "서울시 동작구  동작동")
}

function lGet() {
     var divNode = document.getElementById("output");
     var output="<ul>";
     //로컬스토리지에 값을 얻어와서 div출력
     var los=window.localStorage;
     var name= los.getItem("name");
     var age= los.getItem("age");
     var flag= los.getItem("flag");
     var addr= los.getItem("addr");
     output+="<li>이름: "+name+"</li>";
     output+="<li>나이: "+age+"</li>";
     output+="<li>flag: "+flag+"</li>";
     output+="<li>주소: "+addr+"</li>";
     
     divNode.innerHTML= output;
}

function lRemove() {
     localStorage.removeItem("name");
     localStorage.removeItem("age");
     localStorage.removeItem("flag");
     localStorage.removeItem("addr");
}

05

06

JSON

  • JSON은 JavaScript Object Notation의 약자
    • 원래 JavsScript에서 값을 저장하기 위해 사용하는 데이터형으로 시작됨
    • 하지만 주로 이기종 언어간 데이터 전달용으로 사용된다.
  • 데이터를 XML처럼 JSON으로도 전달가능
    • XML보다 코드량 적다.
    • 파싱비용이 XML보다 적다.
    • 네트워크 트래픽이 줄고 속도가 빨라지고 전력소모량이 준다.
    • 공공데이터는 XML과 JSON으로 모두 제공된다.
  • 다양한 데이터를 저장할 수 있다.
    • XML은 마크업 언어로 문자열 데이터만 저장가능
    • JavaScript에서 발생하는 number, string, boolean, JSON안에 JSON을 넣어 보낼 수 있음.
    • JSON을 배열로 만들 수도 있다.
  • 간단한 문법으로 사용가능
  • JSON은 이름와 값의 쌍으로 구성
    • 이름으로 값을 조회할 수 있다.
    • 이름은 ‘로 감싼다.
    • 값은 형에 따라 ‘또는 “를 직접 사용
  • JSON은 두가지 형태로 사용가능
    • JSONObject 와 JSONArray
    • closure의 형태가 JSONObject와 같다.
  • JSONObject
    • JSON 형태의 문자열을 생성 후 eval()을 사용하여 객체를 만듦
// 1. JSONObject 형태의 문자열을 만들고
var data = "{ '이름' : '값', '이름2' : '값2', ... }";

// 2. eval()로 문자열을 JSONObject로 생성
var json_obj = eval("("+data+")");

// 3. 이름으로 값을 얻음
json_obj.이름;
  • JSON 사용 예
<body>
     <div id="output"></div>
     <input type="button" value="JSONObject 사용" class="btn"  id="btn"/>
</body>

window.onload=function(){
     document.getElementById("btn").addEventListener("click",  useJson);
}

function useJson() {
     // JSON: JavaScript Object Notation
     // 1. JSONObject 형태의 문자열을 생성
     var data=
     "{'name':'김건하','age':30,'job':'뛰어난  자바개발자','flag':true,'pubDate':'2019-02-19'}";                

     // 2. eval 함수를 사용하여 JSONObject객체를 생성한다.
     var json_obj = eval("("+data+")");
     
     //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;
}

07


JavaScript