'JavaScript'에 해당되는 글 23건

  1. 2011.09.07 쿠키(Cookie)에 아이디를 저장하기..!
  2. 2009.11.04 JavaScript window.open...!
  3. 2009.11.03 JavaScript Radio...!
JavaScript2011. 9. 7. 13:19

쿠키(Cookie)에 아이디를 저장하기..!

로그인을 필요로 하는 웹사이트에서 로그인을 할 때 아이디 저장이라는 체크 박스를 보았을 것이다.

체크 박스에 체크를 하면 그다음 접속 시에 전에 입력한 아이디가 저장 되어 있는..

어떻게 이런일이 벌어질까..?

쿠키에 저장을 해놓고 다음 접속시 쿠키에 있는 값을 불러들여 화면에 표현해 주면 된다.

일단 순서는 아이디를 입력하고 체크 박스에 체크 후 로그인 버튼을 누르게 되면..

체크박스에 체크가 되어 있는지 되어 있지 않은지부터 확인을 하고..

체크가 되어 있다면 입력한 아이디를 쿠키에 저장 하기만 하면 된다.

저장 후 다시 불러 오는것은 화면이 불러와 지는 순간 쿠키에 아이디가 저장이 되어 있는지 되어 있지 않은지를

확인하여 화면에 표현해 주기만 하면 된다.

위의 기능들은 자바스크립트로 구현하였다.

소스코드는 아래와 같다.

// 쿠키에 id를 저장.
    function setsave(name, value, expiredays) {
        alert("cookie Save!!");
        var today = new Date();
        today.setDate(today.getDate() + expiredays);
        document.cookie = name + "=" + escape(value) + "; path=/; expires="
                + today.toGMTString() + ";";
        alert("cookie Save Complete!!");
       
    }
   
    // 버튼 클릭시 실행 function
    function saveId(){
        //if (document.getElementById("idcheck").checked) {
            saveLogin(document.getElementById("userId").value);
        //} else {
            //saveLogin("");
        //}
    }

    // id를 받아와 쿠키에 저장할지 쿠키에서 삭제할지 결정.
    function saveLogin(id) {
        if (id != "") {
            // userid 쿠키에 id 값을 7일간 저장
            setsave("userid", id, 7);
        } else {
            // userid 쿠키 삭제
            setsave("userid", id, -1);
        }
    }
   
    // 화면 로드시 아이디
    function getLogin() {
       
    // userid 쿠키에서 id 값을 가져온다.
        var cook = document.cookie + ";";
        var idx = cook.indexOf("userid", 0);
        var val = "";

        if (idx != -1) {
            cook = cook.substring(idx, cook.length);
            begin = cook.indexOf("=", 0) + 1;
            end = cook.indexOf(";", begin);
            val = unescape(cook.substring(begin, end));
        }

        // 가져온 쿠키값이 있으면
        if (val != "") {
            document.getElementById("userId").value = val;
            document.getElementById("idcheck").checked = true;
        }
    }

<BODY onLoad="getLogin()">
    <input type="button" id="changeColorButton" value="Click~!" onClick="saveId();">
    <input type="text" name="userId" id="userId" />
    <input type="checkbox" name="idcheck" id="idcheck"/>
</BODY>

버튼 클릭시 saveId() function을 실행하여 체크박스가 체크 되어있는지 되어있지 않은지 부터 확인한다.

체크가 되어 있다면 saveLogin(id) function에 입력한 아이디 값을 파라미터로 넘겨준다.

입력한 아이디 값의 유무를 확인하여 쿠키에 저장을 할지를 결정..

쿠키에는 저장할때의 키값과 아이디값 그리고 쿠키에서 저정할 기간을 저장..

이러면 저장은 완료가 된다.

그다음 쿠키에서 아이디값을 불러오는 방법..

화면이 로드 될 때 getLogin() function을 실행하여 쿠키안에 아이디 저장할때 쓰였던 키값이 있는지 없는지를 체크하여

있다면 화면에 보여주면 된다. 덤으로 체크박스에 체크도 해줘야 한다.
저작자표시

'JavaScript' 카테고리의 다른 글

JavaScript의 비교 연산자와 일치 연산자..!  (0) 2012.05.22
Ajax 한글 파라미터..!  (0) 2012.01.30
JavaScript Parameter Encoding..!  (0) 2011.12.20
JavaScript window.open...!  (0) 2009.11.04
JavaScript Radio...!  (0) 2009.11.03
Posted by Z700zZz
JavaScript2009. 11. 4. 16:51

JavaScript window.open...!

JavaScript의 팝업 띄우는 방법중 하나인 window.open...!
부모가 되는 self페이지의 버튼을 누르면 

self가 되는 페이지. 부모 페이지라 보면된다.

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Insert title here</title>

<script type="text/javascript">

function openZipcode(){

window.open("zipcode.html", "Zipcode", "width=300, height=200"); //JavaScript에 whindow.open()을 사용하여 새로운 창을 띄우는 function

}


</script>

</head>

<body>

<form action="" name="frmRegist" id="frmRegist">

<table width="200" border="1">

<tr>

<td>우편번호</td>

<td>

<input type="text" id="zipcode1" name="zipcode1" value="" size="5 maxlength="3" readonly="readonly">

<input type="text" id="zipcode2" name="zipcode2" value="" size="5 maxlength="3" readonly="readonly">

<input type="button" value="우편번호 찾기" onclick="openZipcode();">   //button에 onclick event시 openZipcode() function을 호출한다.

</td>

</tr>

<tr>

<td>주소1</td>

<td>

<input type="text" id="address1" name="address1" value="" size="30 maxlength="50" readonly="readonly">

</td>

</tr>

<tr>

<td>주소2</td>

<td>

<input type="text" id="address2" name="address2" value="" size="30 maxlength="50">

</td>

</tr>

</table>

</form>

</body>

</html>


child가 되는 페이지. 자식 페이지?


<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">

<title>Zipcode Search</title>

<script type="text/javascript">

function insertZipcode(){

var objTbody = document.getElementById("idZipcodeList");

//1. data


//2. check


//3. process

for(var indexI = 0;indexI < 10;indexI++){

var tr = document.createElement("tr");

var td1 = document.createElement("td");

var td2 = document.createElement("td");

var zipcode = "123-456";

var address1 = "서울시 서초구 서초";

td1.innerHTML = "<a href='#' onclick='selectZipcode(\""+ zipcode +"\", \"" + address1 + "\")'>" + "123-456" + "</a>" ;       //a태그를 누르면 selectZipcode function을 실행한다.

td2.innerHTML = "서울시 서초구 서초동 ";

tr.appendChild(td1);

tr.appendChild(td2);

objTbody.appendChild(tr);

}               //여기 까지는 자식이 되는 페이지에 테이블에 tr과 td를 추가하는 function.

//4. print

}


function selectZipcode(zipcode, address1){

//1. data

//2. check


//3. process

var aryZipcode = zipcode.split("-");


var zipcode1 = aryZipcode[0];

var zipcode2 = aryZipcode[1];


var objOpener = opener.document.frmRegist;   //opener를 써서 부모가 되는 페이지에 값을 넣을수 있다.


objOpener.zipcode1.value = zipcode1;

objOpener.zipcode2.value = zipcode2;

objOpener.address1.value = address1;

//4. print

}       //부모가 되는 페이지에 자식이 되는 페이지의 내용을 넣는 function

</script>

</head>


<body onload="insertZipcode();">       //body의 내용이 나오기전 실행이 된다. insertZipcode();를 실행해서 테이블의 tbody에 tr과 td를 추가한다.

<table border="1">


<tr> 

<td>우편번호</td>

<td>주소</td>

</tr>

<tbody id="idZipcodeList">

</tbody>

</table>

</body>

</html>


위의 코드는 미완성이다.

Database를 연동 하지도 않았다.

Database를 연동하면 실제 웹페이지에서 주소 검색하는 그런 프로그램을 만들수 있다.

저작자표시

'JavaScript' 카테고리의 다른 글

JavaScript의 비교 연산자와 일치 연산자..!  (0) 2012.05.22
Ajax 한글 파라미터..!  (0) 2012.01.30
JavaScript Parameter Encoding..!  (0) 2011.12.20
쿠키(Cookie)에 아이디를 저장하기..!  (0) 2011.09.07
JavaScript Radio...!  (0) 2009.11.03
Posted by Z700zZz
JavaScript2009. 11. 3. 20:50

JavaScript Radio...!

JavaScript의 radio의 선택된 값 가지고 오기...!

radio의 속석을 먼저 생각해야 한다.
radio는 name에 지정된 변수명으로 배열에 저장된다고 보면된다.
name="sex"로 적어놨으니 sex[]배열에 저장된다.
코드를 보자.. 설명은 줄마다 주석으로...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>회원 가입</title>
<script type="text/javascript">

function checkIt(objFrm){                      //function에서 form을 변수로 받는다.
    //1. Data
    var arySex = objFrm.sex.length;           //objFrm을 파라미터로 받지 않는다면 document.FormName.ElementName.Method;로 쓸수있다. length는 sex의 배열의 길이를 리턴해준다.

    alert(arySex);                                     //배열의 길이를 alert창으로 출력.

    var sex;                                              //선택된 radio의 value값을 저장할 변수 선언.
    for(var indexI = 0;indexI < arySex; indexI++){                 //arySex배열의 길이만큼 반복문.
        if(objFrm.sex[indexI].checked){                       //반복문이 돌면서 checked Method로 선택된 radio의 값을 sex변수에 저장.
            sex = objFrm.sex[indexI].value;
        }
    }
    alert(sex);                                              //제대로 값이 들어왔는지 alert로 확인.
}

</script>
</head>

<body>

<form name="frmRegist" onsubmit="return checkIt(this)" method="post" action="" >

<table width="800" border="1">
    <tr>
        <td>Sex
        </td>
        <td>
            <input type="radio" id="sex" name="sex" value="M" checked="checked">Male
            <input type="radio" id="sex" name="sex" value="F" >Female
        </td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input type="submit" value="Log On">
            <input type="reset" value="Reset">
           
        </td>
    </tr>
   
</table>
</form>
</body>
</html>

밑에 HTML소스는 설명 생략...!
radio는 배열로 넘어오고 또 체크 되었는지 안되었는지를 checked Method로 검사만 해주면 된다.
저작자표시

'JavaScript' 카테고리의 다른 글

JavaScript의 비교 연산자와 일치 연산자..!  (0) 2012.05.22
Ajax 한글 파라미터..!  (0) 2012.01.30
JavaScript Parameter Encoding..!  (0) 2011.12.20
쿠키(Cookie)에 아이디를 저장하기..!  (0) 2011.09.07
JavaScript window.open...!  (0) 2009.11.04
Posted by Z700zZz

티스토리툴바