[JavaScript] email 형식 검사하기[JavaScript] email 형식 검사하기

Posted at 2018. 9. 27. 18:30 | Posted in JavaScript & jQuery/JavaScript




■ email 형식 검사하기




# 소스코드

<html>
<head>
<title>:: JAVASCRIPT e-Mail 형식 검사 ::</title>
<script type="text/javascript">
    function inputeIsEmail(mail) {
       
        // 변수를 선언한다.
        var regExp = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

        // 이메일 확인
        // test( ) : 검색한 문자열에 패턴이 있는지 여부를 나타낸다, 문자열이 존재하면 true, 존재하지 않으면 false를 리턴한다.
        if(regExp.test(mail.value) == false) {
            alert("e-mail 형식이 일치하지 않습니다.\n다시 입력하여 주시기 바랍니다.");
            mail.value = "";
            mail.focus();
        } else {
            alert("e-mail 형식에 맞게 입력하였습니다.");
        }
    }
</script>
</head>
<body>
    <input type="email" id="mail" value=""/>
    <input type="button" onClick="inputeIsEmail(mail);" value="검사"/>
</body>
</html>




# 출력결과




Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] Audio 객체를 이용한 음악 재생[JavaScript] Audio 객체를 이용한 음악 재생

Posted at 2018. 9. 27. 15:47 | Posted in JavaScript & jQuery/JavaScript




■ 웹 브라우저에서 MP3 음악 틀기




-. HTML5부터는 플래시와 같은 플러그인을 사용하지 않아도 Audio 태그를 사용할 수 있게 되었다.

-. 자바스크립트의 Audio 객체를 이용해서 음악을 플레이해 보자.



# Audio 객체의 속성

속성 이름

설  명

src

 · 재생하려는 음악 파일 경로

volume

 · 음악의 음량

 · 음량조절은 0부터 1까지 소수점 단위로 조절할 수 있다.(예 : 0.5)

currentTime

 · 음악의 현재 위치(초 단위)




# Audio 객체의 메서드

메서드 이름

설  명

play( )

 · 음악을 재생

pause( )

 · 음악을 일시정지




# 정지(STOP) 기능

-. Audio 객체는 정지(STOP) 메서드가 없다.

-. 음악을 정지하고 처음위치로 이동하고 싶을때는 pause( ) 메서드를 사용하고 currentTime 속성을 0으로 바꿔주어야 한다.




# 소스코드

<html>
<head>
<title>:: JAVASCRIPT 음악 재생 ::</title>
<script type="text/javascript">

    // Audio 객체생성 ①
    // var audio = new Audio('./lucky.mp3');

    // Audio 객체생성 ②
    var audio = new Audio();
    audio.src = "./lucky.mp3";


</script>
</head>
<body>
    <input type="button" onClick="audio.play();" value="PLAY"/>
    <input type="button" onClick="audio.pause();" value="PAUSE"/>
    <input type="number" onChange="audio.currentTime=this.value"/>
    <input type="number" onChange="audio.volume=this.value"/>
</body>
</html>




# 출력결과








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation[JavaScript] 현재 위치를 지도에 찍어주는 Geolocation

Posted at 2018. 9. 13. 13:10 | Posted in JavaScript & jQuery/JavaScript






■ 지오로케이션


-. 지오로케이션은 현재 위치를 찾는 기능이다.
-. 데스크톱의 웹 브라우저를 사용하면 사용자의 IP주소를 사용해서 현재 위치를 찾을 수 있다.
   (현재 데스크톱에서는 인터넷 익스플로러를 제외한 다른 브라우저에서만 사용 가능)
-. GPS가 포함된 스마트폰과 태블릿 PC에서는 GPS를 사용해서 현재 위치를 찾을 수 있다.



 ※ Position 객체의 구조




객체

설명

:: 1단계 객체 ::

 position

 · timestamp, coords 프로퍼티를 가지는 자바스크립트 객체이다.

:: 2단계 객체 ::

 timestamp

 · 위치를 수집한 시간을 표현하는 숫자

 coords

 · 현재의 위치를 정의하는 객체

:: 3단계 객체 ::

 heading

 · 장치가 움직이는 방향을 나타내는 숫자.

 · 이 값은 정북(똑바른 북쪽)에서 벗어난 각을 나타낸다.

 · 0도는 정북향을 나타내며 방향은 시계방향(동쪽은 90도이고, 서쪽은 270도)이다.

 · speed 값이 0이면 heading 값은 NaN이 된다.

 · 장치에서 haeading 정보를 제공할 수 없을 때 이 값은 null 이된다.

 altitude

 · 고도, 해수면을 기준으로 미터 단위

 · null일 수도 있다.

 latitude

 · 위도, 소수점을 포함하는 숫자. (X)

 accuracy

 · 미터로 위도와 경도의 정확도를 나타내는 숫자

 longitude

 · 경도, 소수점을 포함하는 숫자 (Y)

 speed

 · 장치의 속도를 나타내며, 초당 미처 값을 숫자로 나타낸다.

 · 이 값은 null 일 수 도 있다.

 altitudeAccuracy

 · 미터로 고도의 정확도를 나태내는 숫자

 · null일 수도 있다.





# 소스코드

<html>
<head>
<title>:: JAVASCRIPT 지오로케이션 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        // Geolocation 객체를 사용
        if(navigator.geolocation) {
            
            navigator.geolocation.getCurrentPosition(function(position) {
                
                // 위치를 가져오는데 성공할 경우
                jQuery.each(position.coords, function(key, item) {
                    jQuery("<h3></h3>").html("● " + key + " : " + item).appendTo("body");
                });
            }, function(error) {
                
                // 위치를 가져오는데 실패한 경우
                consol.log(error.message);
            });
        } else {
            consol.log("Geolocation을 지원하지 않는 브라우저 입니다.");
        }
    });
</script>
</head>
<body></body>
</html>




# 출력결과












■ 지오로케이션 + 다음 지도 API 연동하기




# 소스코드

<html>
<head>
<title>:: GEOLOCATION + Daum Map API ::</title>
<script type="text/javascript" src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=라이브러리키"></script>
<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        function getLocation(position) {

            var latitud = position.coords.latitude;
            var longitude = position.coords.longitude;
        
            var mapContainer = document.getElementById("map")    // 지도를 표시할 DIV
            var mapOption = {
                  center : new daum.maps.LatLng(latitud, longitude)    // 지도의 중심좌표
                , level : 3    // 지도의 확대레벨
            };
            
            // 지도를 생성
            var map = new daum.maps.Map(mapContainer, mapOption);

            // 마커가 표시될 위치
            var markerPosition = new daum.maps.LatLng(latitud, longitude);

            // 마커를 생성
            var marker = new daum.maps.Marker({ position:markerPosition });

            marker.setMap(map);
        }

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(getLocation, function(error) {
                consol.log(error.message);    
            });
        } else {
            consol.log("Geolocation을 지원하지 않는 브라우저 입니다.");
        }
    });
</script>
</head>
<body>
    <div id="map" style="width:800px;height:400px;"></div>
</body>
</html>




# 출력결과






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 저장소 사용하기[JavaScript] 저장소 사용하기

Posted at 2018. 9. 7. 15:51 | Posted in JavaScript & jQuery/JavaScript





localStorage를 사용한 저장소 기능 사용하기



-. 기존의 자바스크립트는 쿠키를 사용하는 방법 이외에도 수많은 방법을 사용해 데이터를 저장하고자 노력했다.

-. 이전에는 플래시 저장소를 사용하거나 각각의 브라우저에 존재하는 특수한 저장소를 사용했다.

-. 데이터를 오래 지속하는 것은 애플리케이션을 만들 때 꼭 필요한 기능이므로 HTML5부터는 저장소 기능을 기본으로 제공한다.

-. 저장소는 웹 브라우저를 삭제하지 않는이상 데이터를 영구적으로 저장한다.



:: 저장소 기능을 지원하는 브라우저 ::

 인터넷 익스플러(Internet Explorer)

 8 이상

 파이어 폭스(Fire Fox)

 3.5 이상

 사파리(Safari)

 4.0 이상

 크롬(Chrome)

 4.0 이상

 오페라(Opera)

 10.5 이상



# 소스코드

<html>
<head>
<title>:: JavaScript 로컬 저장소 ::</title>
<script language="javascript">

    document.addEventListener("DOMContentLoaded", function() {

        if(window.localStorage) {

            // 해당 예제를 실행하기전 이전 clear( ) 메서드를를 사용하여 작성했던 저장소의 내용을 전부 삭제한다.
            localStorage.clear();
        }
        else {
            alert("로컬 저장소를 사용할 수 없는 브라우저입니다.");
        }
    });

    function printLocalStorage() {

        var output = "";

        // div 태그에 로컬 저장소의 내용을 출력한다.
        for(var key in window.localStorage) {
            output += "<p>";


            // getItem( ) 메서드를 이용하여 key 값의 value 값을 찾는다.
            output += key + " : " + localStorage.getItem(key);
            output += "</p>";
        }

        document.getElementById("output").innerHTML = output;
    }

    function saveLocalStorage() {

        // 변수를 선언한다.
        var key = document.getElementById("key").value;
        var value = document.getElementById("value").value;

        // setItem( ) 메서드를 이용하여 value값을 로컬 저장소에 저장한다.
        localStorage.setItem(key, value);

        // 데이터를 출력한다.
        printLocalStorage();
    }
</script>
</head>
<body>
    <input type="text" id="key" value=""/>
    <input type="text" id="value" value=""/>
    <input type="button" value="저장" onClick="saveLocalStorage();"/>
    <div id="output">
        <!-- 저장된 내용을 출력할 DIV 엘리먼트 -->
    </div>
</body>
</html>




# 출력결과





localStorage 객체의 메서드


메서드 이름

설명

 setItem(key, value)

 · 로컬 저장소에 데이터를 생성한다.

 getItem(key)

 · 로컬 저장소의 데이터를 읽어온다.

 removeItem(key)

 · 로컬 저장소의 지정한 key 값의 데이터를 삭제한다.

 clear()

 · 로컬 저장소의 데이터를 전부 삭제한다.

 key(number)

 · 로컬 저장소의 특정 순서의 데이터를 읽어온다.







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] Session 데이터 읽고, 쓰기[JavaScript] Session 데이터 읽고, 쓰기

Posted at 2018. 9. 4. 19:14 | Posted in JavaScript & jQuery/JavaScript




■ 자바스크립트에서 세션 값 읽어오기



-. 세션은 이 있는 작은 데이터의 조각이다.
-. 세션은 서버클라이언트에서 모두 저장할 수 있다.
-. 세션은 휘발성 데이터로, 브라우저를 종료하는 순간 모든 데이터가 삭제된다.
-. 세션은 같은 브라우저 상에서 동일한 페이지에서 이전 로그인 되었다면, 로그인 정보를 가지고 있는 형식으로 자주 사용된다.






# sessionStorage 객체의 메서드

메서드 이름

설명

 setItem(key, value)

 · 세션에 데이터를 저장한다.

 getItem(key)

 · 세션의 데이터를 읽어온다.

 removeItem(key)

 · 세션에 지정한 key 값의 데이터를 삭제한다.

 clear()

 · 센션의 데이터를 전부 삭제한다.

 key(number)

 · 세션의 특정 순서의 데이터를 읽어온다.





# 소스 코드

<html>
<head>
<title>:: JavaScript Session ::</title>
<script language="javascript">

    document.addEventListener("DOMContentLoaded", function() {


        if(window.sessionStorage) {

            // 해당 예제를 실행하기전 이전 세션의 데이터를 clear( ) 메서드를 사용해 전부 삭제한다.
            sessionStorage.clear();
        }
        else {
            alert("세션을 사용할 수 없는 브라우저입니다.");
        }
    });

    function printSessionStorage() {

        var output = "";

        // div 태그에 로컬 저장소의 내용을 출력한다.
        for(var key in window.sessionStorage) {
            output += "<p>";
            // getItem( ) 메서드를 이용하여 key 값의 value 값을 찾는다.
            output += key + " : " + sessionStorage.getItem(key);
            output += "</p>";
        }

        document.getElementById("output").innerHTML = output;
    }

    function saveSessionStorage() {

        // 변수를 선언한다.
        var key = document.getElementById("key").value;
        var value = document.getElementById("value").value;

        // setItem( ) 메서드를 이용하여 key를 지정하고, value값을 세션에 저장한다.
        sessionStorage.setItem(key, value);

        // 데이터를 출력한다.
        printSessionStorage();
    }
</script>
</head>
<body>
    <input type="text" id="key" value=""/>
    <input type="text" id="value" value=""/>
    <input type="button" value="저장" onClick="saveSessionStorage();"/>
    <div id="output">
        <!-- 저장된 내용을 출력할 DIV 엘리먼트 -->
    </div>
</body>
</html>




# 출력결과







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] Cookie 생성, 삭제 및 읽어오기[JavaScript] Cookie 생성, 삭제 및 읽어오기

Posted at 2018. 9. 3. 01:55 | Posted in JavaScript & jQuery/JavaScript





■ 쿠키 개요




-. 쿠키는 키와 값이 들어 있는 작은 데이터 조각으로 이름, 값, 파기 날짜와 경로 정보를 가진다.
-. 쿠키는 서버와 클라이언트에서 모두 저장하고 사용할 수 있다.
-. 쿠키는 일정 기간 동안 데이터를 저장할 수 있으므로, 일정 기간동안 로그인을 유지하는 페이스북 같은 웹 사이트에서 사용한다.
-. 페이스북이든 네이버든 웹 브라우저로 접속한 후 웹 개발 도구를 열고 우측 상단의 저장소를 클릭하면 쿠키를 확인 할 수 있다.






# 01. 쿠키의 생성


쿠키는 각각의 속성을 다음과 같은 문자열에 넣어 document 객체의 cookie 속성에 입력함으로써 생성할 수 있다.


document.cookie = "Name=Value();Expires=날짜;Domain=도멘인;Path=경로;Secure";



Name 속성과 Value 속성

 · NameValue 속성은 데이터를 저장하고 읽는 데 사용하는 속성이다.

 · 따라서 쿠키를 사용할 때는 NameValue 속성을 반드시 지정해야 한다.

   

Expires 속성

 · Expires 속성은 쿠키의 파기 날짜를 지정하는 속성이다.

 · Expires 속성에는 GMT 형식이나 UTC 형식으로 날짜를 입력해야 한다.

 · 파기 날짜를 입력하지 않으면 브라우저가 종료될 때 쿠키가 삭제된다.


Secure 속성

 · Secure 속성을 지정하면 해당 쿠키는 SSL을 사용해서만 요청할 수 있다.


Domain 속성

 · Domain 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다.

 · 페이지 요청과 비교해서 도메인의 경로와 Domain 속성이 일치하지 않으면, 쿠키에 접근하는 것을 막으므로 Domain 속성은 건드리지 않는다.


Path 속성

 · Path 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다.

 · Path 속성은 일부러 지정하는 경우가 많은데 특정 경로(폴더명)를 설정한다.

 · Path 속성은 /폴더/ 로 설정되는데, 이렇게 설정한 Path 속성이 설정되면 현재 폴더 또는 현재 폴더의 하위에서 접근할 수 있다.

 · Path 속성을 ' / '로 설정하면 도메인 내의 모든 곳에서 접근할 수 있다.

  (쿠키의 범위를 좁게 잡을 수록 보안에는 좋다.)

 



# 소스코드 - 쿠키 생성

 cookie_creation.php

<html>
<head>
<title>:: JavaScript 쿠키 생성 ::</title>
<script type="text/javascript">


    // 변수를 선언
    var date = new Date();
    date.setDate(date.getDate() + 7);

    var willCookie = "";
    willCookie += "CookieName=Value;";
    willCookie += "expires=" + date.toUTCString();

    // 쿠키에 넣는다.
    document.cookie = willCookie;
</script>
</head>
<body>
    <h2>JavaScript를 이용한 쿠키 생성</h2>
</body>
</html>




# 출력 결과 - ① 웹 브라우저




# 출력 결과 - ② 개발자 도구

-. 생성한 Name(이름)과 Value(값) 그리고 Expires(쿠키종료일)이 입력한 값으로 생성된 것을 확인 할 수 있다.

-. 특별히 작성하지 않은 Domain(도메인), Path(경로)의 값이 자동 입력된 것을 확인 할 수 있다.






# 02. 생성한 쿠키 데이터 읽어오기



위와 갖이 만드는 법을 살펴 보았고, 이제는 이렇게 만든 쿠키를 사용하는 방법에 대해서 알아보도록 하자.


쿠키는 document 객체의 cookie 속성을 출력하면 된다.



# 소스 코드

 cookie_identify.php

<html>
<head>
<title>:: JavaScript 쿠키 확인 ::</title>
<script type="text/javascript">
    function cookieIdentify() {
            alert(document.cookie);
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 쿠키 생성한 쿠키를 경고창으로 띄워보자.</h2>
    <input type="button" onClick="cookieIdentify();" value="쿠키확인"/>
</body>
</html>



# 출력 결과



위 출력 결과와 같이 저장했던 쿠키를 확인 할 수 있다.


쿠키를 저장할 때 는 여러 속성을 함께 입력했지만 쿠키를 볼 때는 위 결과값과 같이 간단한 형태가 아니다.


페이지가 분명히 새로고침 됐는데도 이전의 정보를 확인 할 수 있는 것을 알 수 있다. 쿠키는 이렇게 데이터를 지속하고 싶을 때 사용한다.





# 03. 쿠키 제거


쿠키를 생성하고 읽어오는 방법을 알아보았으니 이제 제거하는 방법에 대해 알아보자

쿠키를 제거하고 싶을 때는 Expires 속성을 현재 이전의 날짜로 설정하면 된다.


# 소스 코드

 cookie_remove.php

<html>
<head>
<title>:: JavaScript 쿠키 제거 ::</title>
<script type="text/javascript">
    function cookieRemove() {

        // 변수를 선언한다.
        var date = new Date();
        date.setDate(date.getDate() - 1);

        var willCookie = "";
        willCookie += "CookieName=Value;";
        willCookie += "Expires=" + date.toUTCString();

        // 쿠키를 집어넣는다.
        document.cookie = willCookie;

        // 출력한다.
        alert(document.cookie);
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 생성한 쿠키제거.</h2>
    <input type="button" onClick="cookieRemove();" value="쿠키제거"/>
</body>
</html>





# 출력 결과 - ① 웹 브라우저




# 출력 결과 - ② 개발자 도구












■ 쿠키 읽기




저장한 쿠키를 읽기 위해서는 document객체의 cookie 속성이 여러 쿠키를 한꺼번에 출력하므로 개별적인 쿠키를 읽으려면 약간의 복잡한 과정이 필요하다.



# 01. 테스트용 Cookie 5개 생성하기



# 소스 코드 - 한번에 5개의 쿠키 생성

 cookie_five.php

<html>
<head>
<title>:: JavaScript 쿠키 다섯 개 생성 ::</title>
<script type="text/javascript">
    function cookieFive() {

        // 변수를 선언한다.
        var date = new Date();
        date.setDate(date.getDate() + 7);

        // 5번을 반복한다.
        for(var i = 0; i < 5; i++) {

            var willCookie = "";
            willCookie += "Name" + i + "=Value";
            willCookie += "Expires=" + date.toUTCString();

            // 쿠키를 집어넣는다.
            document.cookie = willCookie;
        }

        // 출력한다.
        alert(document.cookie);
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 생성한 5개의 쿠키 생성.</h2>
    <input type="button" onClick="cookieFive();" value="쿠키생성"/>
</body>
</html>




# 출력 결과






# 02. 생성한 5개의 Cookie 중 1가지 선택 출력하기



이제 쿠키의 Value 속성을 추출해보자.
아래 예제는 Name 속성이 Name4인 쿠키의 Value 속성으로 추출한다.
우선 만들어진 문자열을 세미콜론( ; )을 사용해 분해한다.



# 소스 코드

 cookie_info_output.php

<html>
<head>
<title>:: JavaScript 쿠키 정보출력 ::</title>
<script type="text/javascript">
    function cookieInfoOutpu() {

        // 변수를 선언한다.
        var name = "Name4";
        var cookies = document.cookie.split(";");

        alert(cookies);


        // 쿠키를 추출한다.
        for(var i in cookies) {

            if(cookies[i].search(name) != -1) {

                alert(cookies[i].replace(name + "=", ""));

                // ※ 참고 : 특정 브라우저 문제 발생시 대응 예
                // alert(cookies[i].replace(name + "=", "").replace(/^\S\S*/, "").replace(/^\S\S*$/, ""));
            }
        }
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 쿠키 정보 출력.</h2>
    <input type="button" onClick="cookieInfoOutpu();" value="쿠키정보출력"/>
</body>
</html>

-. 세미콜론을 사용해 분해하면 Name=Value 형태의 문자열로 분해된다.
-. 이때 우리가 원하는 Name 속성을 가진 문자열을 찾아 필요 없는 부분을 제거하고 데이터를 추출한다.




# 출력 결과





※ 참고


 웹 브라우저마다의 차이로 양끝에 공백이 발생할 수 있는데, 이때는 다음과 같은 형태로 첫 위치와 마지막 위치의 공백을 제거해서 사용한다.


cookies[i].replace(name + "=", "").replace(/^\S\S*/, "").replace(/^\S\S*$/, "")







■ 쿠키 함수




지금까지 배운 쿠키와 관련된 모든 내용을 이용해 사용하기 쉬운 쿠키 함수를 만들어 보자.




# 01. 쿠키를 생성하는 함수



# 소스 코드

 set_cookie.php

<html>
<head>
<title>:: JavaScript 쿠키 저장 함수 ::</title>
<script type="text/javascript">
    function setCookie(name, value, day) {

        // 변수를 선언한다.
        var date = new Date();
        date.setDate(date.getDate() + day);

        var willCookie = "";
        willCookie += name + "=" + encodeURIComponent(value) + ";";
        willCookie += "Expires=" + date.toUTCString() + "";

        // 쿠키에 넣습니다.
        document.cookie = willCookie;

        alert(document.cookie);
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 생성한 쿠키 저장 함수.</h2>
    <input type="button" onClick="setCookie('choco', 'chip', 7);" value="쿠키저장"/>
</body>
</html>



# 출력 결과





# 02. 쿠키를 읽어오는 함수



# 소스 코드

 get_cookie.php

<html>
<head>
<title>:: JavaScript 쿠키 출력 함수 ::</title>
<script type="text/javascript">
    function getCookie(name) {

        // 변수를 선언한다.
        var cookies = document.cookie.split(";");

        // 쿠키를 추출한다.
        for(var i in cookies) {
            if(cookies[i].search(name) != -1) {

                alert(decodeURIComponent(cookies[i].replace(name + "=", "")));
            }
        }
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 생성한 쿠키 오픈 함수.</h2>
    <input type="button" onClick="getCookie('choco');" value="쿠키출력"/>
</body>
</html>



# 출력 결과






# 03. 쿠키를 삭제하는 함수



# 소스 코드

 remove_cookie.php

<html>
<head>
<title>:: JavaScript 쿠키 제거 함수 ::</title>
<script type="text/javascript">
    function removeCookie(name) {

        // 변수를 선언한다.
        var date = new Date();
        date.setDate(date.getDate() - 1);

        var willCookie = "";
        willCookie += "CookieName=Value;";
        willCookie += "Expires=" + date.toUTCString();

        // 쿠키를 집어넣는다.
        document.cookie = willCookie;

        alert(name + " 쿠키가 삭제되었습니다.");
    }
</script>
</head>
<body>
    <h2>JavaScript를 이용한 생성한 쿠키 제거 함수.</h2>
    <input type="button" onClick="removeCookie('choco');" value="쿠키제거"/>
</body>
</html>



# 출력 결과






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입[JavaScript] 전화번호 Hyphen(-)기호 자동 삽입

Posted at 2018. 8. 21. 10:04 | Posted in JavaScript & jQuery/JavaScript




■ 휴대폰 번호 하이픈(-)기호 자동 삽입




# 소스코드

<html>
<head>
<title>:: 휴대폰 번호 마이너스(-) 삽입 ::</title>
<script>
function inputPhoneNumber(obj) {


    var number = obj.value.replace(/[^0-9]/g, "");
    var phone = "";


    if(number.length < 4) {
        return number;
    } else if(number.length < 7) {
        phone += number.substr(0, 3);
        phone += "-";
        phone += number.substr(3);
    } else if(number.length < 11) {
        phone += number.substr(0, 3);
        phone += "-";
        phone += number.substr(3, 3);
        phone += "-";
        phone += number.substr(6);
    } else {
        phone += number.substr(0, 3);
        phone += "-";
        phone += number.substr(3, 4);
        phone += "-";
        phone += number.substr(7);
    }
    obj.value = phone;
}
</script>
</head>
<body>
    <h2>휴대폰 번호를 입력해 주세요</h2>
    <input type="text" onKeyup="inputPhoneNumber(this);" maxlength="13" style="text-align:center;"/>
</body>
</html>




# 출력결과









■ 지역번호 서울 예외처리(02)




위의 코드를 구태여 휴대폰 번호라고 굳이 지정한것은.

한국의 특수한 지역번호 사정 때문이다.


휴대폰 번호 : 010-0000-0000

전화 번호 : 031-0000-0000


위와같이 휴대폰 번호나, 전화번호나 문자열의 길이는 기본적으로 13자리로 같지만

단한가지 서울특별시만은 전화번호이 앞 지역번호가 02 두자리이기에 따로 예외 처리가 필요했다.

그래서 아래와같이 전체적으로 사용할 수 있게 코드를 수정해 보았다.



# 소스코드①

<html>
<head>
<title>:: 전화번호 마이너스(-) 삽입 ::</title>
<script>
function inputTelNumber(obj) {

    var number = obj.value.replace(/[^0-9]/g, "");
    var tel = "";

    // 서울 지역번호(02)가 들어오는 경우
    if(number.substring(0, 2).indexOf('02') == 0) {
        if(number.length < 3) {
            return number;
        } else if(number.length < 6) {
            tel += number.substr(0, 2);
            tel += "-";
            tel += number.substr(2);
        } else if(number.length < 10) {
            tel += number.substr(0, 2);
            tel += "-";
            tel += number.substr(2, 3);
            tel += "-";
            tel += number.substr(5);
        } else {
            tel += number.substr(0, 2);
            tel += "-";
            tel += number.substr(2, 4);
            tel += "-";
            tel += number.substr(6);
        }
    
    // 서울 지역번호(02)가 아닌경우
    } else {
        if(number.length < 4) {
            return number;
        } else if(number.length < 7) {
            tel += number.substr(0, 3);
            tel += "-";
            tel += number.substr(3);
        } else if(number.length < 11) {
            tel += number.substr(0, 3);
            tel += "-";
            tel += number.substr(3, 3);
            tel += "-";
            tel += number.substr(6);
        } else {
            tel += number.substr(0, 3);
            tel += "-";
            tel += number.substr(3, 4);
            tel += "-";
            tel += number.substr(7);
        }
    }

    obj.value = tel;
}
</script>
</head>
<body>
    <h2>전화 번호를 입력해 주세요</h2>
    <input type="text" onKeyup="inputTelNumber(this);" maxlength="13" style="text-align:center;"/>
</body>
</html>



위와같이 서울지역번호 02 두자리를 구분하는 if문에서 분기시켜서

해결하였지만. 개인적으로 위의 코드는 너무 길다는 것이 마음에 들지 않아서.

아래와 같이 수정해 보았다.



# 소스코드②

<html>
<head>
<title>:: 전화번호 마이너스(-) 삽입 ::</title>
<script>
function inputTelNumber(obj) {

    var number = obj.value.replace(/[^0-9]/g, "");
    var tel = "";

    // 서울이라는 변수를 선언
    var seoul = 0;

    // 서울 지역번호(02)가 들어가는 경우 1을 삽입
    if(number.substring(0, 2).indexOf('02') == 0) {
        seoul = 1;
    }

    // 문자열을 자르는 기준에서 서울의 값을 뺄쌤(-)한다.
    // 값이 1일경우 -1이 될것이고, 값이 0일경우 변화가 없다.
    if(number.length < (seoul - 4)) {
        return number;
    } else if(number.length < (seoul - 7)) {
        tel += number.substr(0, (seoul - 3));
        tel += "-";
        tel += number.substr(seoul - 3);
    } else if(number.length < (seoul - 11)) {
        tel += number.substr(0, (seoul - 3));
        tel += "-";
        tel += number.substr((seoul - 3), 3);
        tel += "-";
        tel += number.substr(seoul - 6);
    } else {
        tel += number.substr(0, (seoul - 3));
        tel += "-";
        tel += number.substr((seoul - 3), 4);
        tel += "-";
        tel += number.substr(seoul - 7);
    }
    obj.value = tel;
}
</script>
</head>
<body>
    <h2>전화 번호를 입력해 주세요</h2>
    <input type="text" onKeyup="inputTelNumber(this);" maxlength="13" style="text-align:center;"/>
</body>
</html>




# 출력결과 - 지역번호가 서울(02)인 경우




# 출력결과 - 지역번호가 서울(02)이 아닌경우








Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입[JavaScript] 천단위 이상의 입력값에 자동콤마( , ) 삽입

Posted at 2018. 8. 20. 18:07 | Posted in JavaScript & jQuery/JavaScript




■ 천단위 이상의 입력값에 자동콤마( , ) 삽입




# 소스코드

<html>
<head>
<title>:: 천단위 콤마 자동 삽입 ::</title>
<script type="text/javascript">
    function inputNumberAutoComma(obj) {
       
        // 콤마( , )의 경우도 문자로 인식되기때문에 콤마를 따로 제거한다.
        var deleteComma = obj.value.replace(/\,/g, "");

        // 콤마( , )를 제외하고 문자가 입력되었는지를 확인한다.
        if(isFinite(deleteComma) == false) {
            alert("문자는 입력하실 수 없습니다.");
            obj.value = "";
            return false;
        }
       
        // 기존에 들어가있던 콤마( , )를 제거한 이 후의 입력값에 다시 콤마( , )를 삽입한다.
        obj.value = inputNumberWithComma(inputNumberRemoveComma(obj.value));
    }
   
    // 천단위 이상의 숫자에 콤마( , )를 삽입하는 함수
    function inputNumberWithComma(str) {

        str = String(str);
        return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,");
    }

    // 콤마( , )가 들어간 값에 콤마를 제거하는 함수
    function inputNumberRemoveComma(str) {

        str = String(str);
        return str.replace(/[^\d]+/g, "");
    }
</script>
</head>
<body>
    <h2>숫자를 입력해 주세요.</h2>
    <input type="text" onKeyup="inputNumberAutoComma(this);" value="" style="text-align:right;"/>
</body>
</html>




# 출력결과












■ 천단위 자동콤마( , ) 삽입 및 소수점 표현




# 소스코드

<html>
<head>
<title>:: TEXT 박스 자동 콤마 삽입 + 소수점 기호 ::</title>
<script language="javascript">
function inputNumberAutoComma(obj) {
    
    var number = obj.value;
    var integer = obj.value;
    var point = number.indexOf(".");
    var decimal = "";
    var chekcd = "";

    // 첫번째 수부터 소수점 기호( . )를 사용 방지
    if(number.charAt(0) == ".") {
        alert("첫번째 수부터 소수점 기호( . )를 사용할 수 없습니다.");
        obj.value = "";
        return false;
    }
    
    // 소수점이 존재하면 태우는 분기
    if(point > 0) {

        // 소수점 앞 자리값만을 따로 담는다.
        integer = number.substr(0, point);

        // 소수점 아래 자리값만을 따로 담는다.
        decimal = number.substr((point + 1), number.length);
        chekcd = inputNumberisFinit(decimal);

        if(chekcd == "N") {
            alert("문자는 입력하실 수 없습니다.");
            obj.value = "";
            return false;
        }
    }

    // 정수형의 콤마를 제거한다.
    integer = integer.replace(/\,/g, "");
    chekcd = inputNumberisFinit(integer);

    if(chekcd == "N") {
        alert("문자는 입력하실 수 없습니다.");
        obj.value = "";
        return false;
    }

    // 정수형을 한번더 점검한다.
    integer = inputNumberWithComma(inputNumberRemoveComma(integer));
    
    // 소수가 존재하면 나누었던 콤마 기호를 삽입한다.
    if(point > 0) {
        obj.value = integer + "." + decimal;
    }
    
    // 소수가 존재하지 않는다면 콤마값을 넣은 정수만 삽입한다.
    else {
        obj.value = integer;
    }
}

// 천단위 이상의 숫자에 콤마( , )를 삽입하는 함수
function inputNumberWithComma(str) {
    str = String(str);
    return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, "$1,");
}

// 콤마( , )가 들어간 값에 콤마를 제거하는 함수
function inputNumberRemoveComma(str) {
    str = String(str);
    return str.replace(/[^\d]+/g, "");
}

// 문자 여부를 확인하고 문자가 존재하면 N, 존재하지 않으면 Y를 리턴한다.
function inputNumberisFinit(str) {
    if(isFinite(str) == false) {
        return "N";
    } else {
        return "Y";
    }
}
</script>
</head>
<body>
    <h2>숫자를 입력해 주세요.</h2>
    <input type="text" onKeyup="inputNumberAutoComma(this);" value="" style="text-align:right;"/>
</body>
</html>




# 출력결과






Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 시작일 / 종료일 입력값 체크하기[JavaScript] 시작일 / 종료일 입력값 체크하기

Posted at 2018. 8. 20. 10:42 | Posted in JavaScript & jQuery/JavaScript




■ 자바스크립트로 시작일 / 종료일 체크하기




사이트 제작중 검색할 데이터의 시작일과 종료일을 설정하는 경우는 자주 있는 일이다.


그렇다면 검색 조건을 시작일이 종료일보다 이후에 오면 안되고,


종료일이 시작일보다 먼저일 수 없게 예외처리를 해두기 위해 스크립트를 짜게 되었고.


아래와 같이 정리해 두었다.



# 소스코드

<html>
<head>
<title>:: 시작일 / 종료일 체크하기 ::</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style type="text/css">
    .datePicker {
        text-align:center;
        width:80px;    
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {


        jQuery("#startDate, #endDate").datepicker();
        
        // jQuery UI Datepicker 한글 변환
        jQuery.datepicker.regional['ko'] = {
              closeText : "닫기"
            , prevText : ""
            , nextText : ""
            , currentText : "오늘"
            , monthNames : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
            , monthNamesShort : ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
            , dayNames : ["일", "월", "화", "수", "목", "금", "토"]
            , dayNamesShort : ["일", "월", "화", "수", "목", "금", "토"]
            , dayNamesMin : ["일", "월", "화", "수", "목", "금", "토"]
            , weekHeader : "Wk"
            , dateFormat : "yy-mm-dd"
            , firstDay : 0
            , isRTL : false
            , yearSuffix : "&nbsp;년"
            , showMonthAfterYear : true
            , changeMonth : true
            // , changeYear : true
            // , autoSize : true

            , beforeShow:function(input) {
                var position = jQuery(input).position();
                setTimeout(function() {
                    jQuery("#ui-datepicker-div").css({"left":position.left});
               })
            }
        };
        jQuery.datepicker.setDefaults(jQuery.datepicker.regional['ko']);
    });

    function inputDateComparison(obj) {


        // 날짜 입력 엘리먼트 ID는 startDate(시작일), endDate(종료일)로 동일해야 한다.
        var startDate = inputDateSplit(document.getElementById("startDate").value);    // 시작일
        var endDate = inputDateSplit(document.getElementById("endDate").value);        // 종료일
        
        var objDate = inputDateSplit(obj.value);    // 입력한 엘리먼트의 일자
        // 입력일을 확인하는 이유는 현재 작성한 일자가 시작일인지 종료일인지 확인하기 위해서이다.
       
        if(startDate == objDate && startDate > endDate) {

            alert("시작일이 종료일보다 이 후 일수는 없습니다.\n다시 선택하여 주시기 바랍니다.");
            obj.value = document.getElementById("endDate").value;
            obj.focus();
        } else if(endDate == objDate && endDate < startDate) {

            alert("종료일이 시작일보다 이 전 일수는 없습니다.\n다시 선택하여 주시기 바랍니다.");
            obj.value = document.getElementById("startDate").value;
            obj.focus();
        } else {
            return false;
        }
    }

    // 날짜형식에 "-"이 사용된 경우에 한하여 날짜값에서 "-" 기호를 제거한다.
    function inputDateSplit(obj) {


        var dateArray = obj.split("-");
        return dateArray[0] + dateArray[1] + dateArray[2];
    }
</script>
</head>
<body>
    <input type="text" class="datePicker" id="startDate" onChange="inputDateComparison(this);" value=""/>
    &nbsp;~&nbsp;
    <input type="text" class="datePicker" id="endDate" onChange="inputDateComparison(this);" value=""/>
</body>
</html>




# 출력결과





Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기

[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스[JavaScript] 시간(HH:MM)만을 입력하는 텍스트 박스

Posted at 2018. 8. 17. 17:57 | Posted in JavaScript & jQuery/JavaScript




■ 텍스트 박스에 시간 입력시 콜론(HH:MM) 자동 삽입




jQuery 캘린더와 같이 jQuery모듈들 중에도 시간을 선택하게 해주는 모듈들이 상당히 있었으나.

분단위를 세세하게 지정하기 힘든등의 무언가 마음에 들지 않는 부분들이 있어 제작하게 되었다.

HHMM 식으로 콜론없이 쭉 4개의 숫자를 자동으로 입력하면 HH:MM형식으로 숫자가 자동으로 기입되는 그런 구조이다.



# 소스코드

<html>
<head>
<title>:: 시간 자동 콜론 삽입(HH:MM) ::</title>
<style type="text/css">
    .timeBox {
        text-align:center;
        width:60px;    
    }
</style>
<script type="text/javascript">
    function inputTimeColon(time) {


        // replace 함수를 사용하여 콜론( : )을 공백으로 치환한다.
        var replaceTime = time.value.replace(/\:/g, "");


        // 텍스트박스의 입력값이 4~5글자 사이가 되는 경우에만 실행한다.
        if(replaceTime.length >= 4 && replaceTime.length < 5) {

            var hours = replaceTime.substring(0, 2);      // 선언한 변수 hours에 시간값을 담는다.
            var minute = replaceTime.substring(2, 4);    // 선언한 변수 minute에 분을 담는다.


            // isFinite함수를 사용하여 문자가 선언되었는지 확인한다.
            if(isFinite(hours + minute) == false) {
                alert("문자는 입력하실 수 없습니다.");
                time.value = "00:00";
                return false;
            }


            // 두 변수의 시간과 분을 합쳐 입력한 시간이 24시가 넘는지를 체크한다.
            if(hours + minute > 2400) {
                alert("시간은 24시를 넘길 수 없습니다.");
                time.value = "24:00";
                return false;
            }


            // 입력한 분의 값이 60분을 넘는지 체크한다.
            if(minute > 60) {
                alert("분은 60분을 넘길 수 없습니다.");
                time.value = hours + ":00";
                return false;
            }

            time.value = hours + ":" + minute;
        }
    }
</script>
</head>
<body>
    <h2>시간을 입력해 주세요</h2>

    <!-- maxlength의 값을 5로지정하여 다섯자리 이상의 값이 등록되는것을 막는다. -->

    <input type="text" class="timeBox" onKeyup="inputTimeColon(this);" placeholder="HH:MM" maxlength="5"/>
</body>
</html>




# 출력결과 - 정상적인 시간을 입력한 경우








# 예외처리① - 문자를 입력한 경우




# 예외처리② - 24시를 넘긴 시간을 입력한 경우




# 예외처리③ - 60분을 넘긴 시간을 입력한 경우







Name __

Password __

Link (Your Website)

Comment

SECRET | 비밀글로 남기기