[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기[jQuery] data( ) 메서드를 통한 값 읽고. 쓰기

Posted at 2018. 9. 17. 11:07 | Posted in JavaScript & jQuery/jQuery
반응형





참고① http://dolgo.net/php/questions/113

참고② http://www.nextree.co.kr/p10155





■ data() 메서드를 통해 엘리먼트를 변수처럼 사용하기




자바스크립트 상에서 PHP, JSP등의 코드를 포함하여 쓰는것은 그렇게 좋은 코딩방법이라고 하기 힘들다.

필자도 그래서 <script> 상에서 <?=?>(PHP의 경우), <%=%>(JSP)의 경우를 사용하는것을 최대한 자제하고.

PHP의 경우

<input type="hidden" name="print" value="<?=$변수명?>"/>

JSP의 경우

<input type="hidden" name="print" value="<%=변수명%>"/>


위와같이 hidden 타입에 필요한 값을 담아서 사용해왔었다.


# 소스코드

<html>
<head>
<title>:: HIDDEN 데이터 가져오기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        alert(
              "이름 : " + jQuery(".memberName").eq(0).val()
            + "\n출생 : " + jQuery(".memberBirth").eq(0).val()
        )
    });
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>소속</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input type="hidden" class="memberName" value="안지현"/>
                <input type="hidden" class="memberBirth" value="1997-10-13"/>
                01
            </td>
            <td>안지현</td>
            <td>넥센 히어로즈</td>
        </tr>
        <tr>
            <td>02</td>
            <td>조연주</td>
            <td>한화 이글스</td>
        </tr>
        <tr>
            <td>03</td>
            <td>박기량</td>
            <td>롳데 자이언츠</td>
        </tr>
    </tbody>
</table>
</body>
</html>




# 출력결과




하지만 최근 jQuerydata( ) 메소드에대해 알게 되어서 이렇게 정리하게 되었다.





#01. data() 메서드를 통한 데이터 읽어오기




# 소스코드

<html>
<head>
<title>:: jQuery DATA 가져오기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        alert(
              "이름 : " + jQuery("tbody > tr").eq(1).data("member_name")
            + "\n출생 : " + jQuery("tbody > tr").eq(1).data("member_birth")
        )
    });
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>소속</th>
        </tr>
    </thead>
    <tbody>
        <td>01</td>
        <td>안지현</td>
        <td>넥센 히어로즈</td>
        <!-- data-member_name 과같이 중간에 대문자가 들어가는 카멜 표기법은 사용할 수 없다. -->
        <tr
            data-member_name = "조연주"
            data-member_birth = "1999-06-04"
        >
            <td>
                02
            </td>
            <td>조연주</td>
            <td>한화 이글스</td>
        </tr>
        <tr>
            <td>03</td>
            <td>박기량</td>
            <td>롳데 자이언츠</td>
        </tr>
    </tbody>
</table>
</body>
</html>




# 출력결과



위와 같이 data-* 로 선언한 값들을 손쉽게 가져올 수 있는 것을 확인 할 수 있다.


사실 어떻게 쓰든 사용자에게만 보여주지 않을뿐으로,


사용하는 목적은 type="hidden"과 data-*의 방식은 크게 다를 것이 없겠지만.


type="hidden" form 태그를 통해 데이터를 submit 하는 방식으로 전송할때 hidden으로 선언한 데이터를 전송할 수 있다는 것에서


이점이 있을 것이고,


data-*는 클라이언트 페이지에서 스크립트와 AJAX를 통해 다룰 데이터를 삽입하면 유용할 것이고,


반복문등을 통한 다수의 게시글 리스트등을 뿌려주는곳에서 데이터의 삽입이 조금더 편하게 제작이 가능할 것으로 보이기 때문에


위에 적은 각각의 장점을 용도에 맞게 사용하려 한다.









#02. data() 메서드를 통한 데이터 변경하기




# 소스코드

<html>
<head>
<title>:: jQuery DATA 변경하기 ::</title>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("tbody > tr").eq(2).data("member_name", "박기량");
        jQuery("tbody > tr").eq(2).data("member_birth", "1991-02-18");

        alert(
              "이름 : " + jQuery("tbody > tr").eq(2).data("member_name")
            + "\n출생 : " + jQuery("tbody > tr").eq(2).data("member_birth")
        )
    });
</script>
</head>
<body>
<table border="1" width="500px" align="center" style="border-collapse:collapse;border:1px #000000 solid;text-align:center;">
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>소속</th>
        </tr>
    </thead>
    <tbody>
        <td>01</td>
        <td>안지현</td>
        <td>넥센 히어로즈</td>
        <tr>
            <td>02</td>
            <td>조연주</td>
            <td>한화 이글스</td>
        </tr>
        <tr
            data-member_name = "치어리더"
            data-member_birth = "0000-00-00"
        >
            <td>03</td>
            <td>박기량</td>
            <td>롳데 자이언츠</td>
        </tr>
    </tbody>
</table>
</body>
</html>




# 출력결과







반응형
//

[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>




# 출력결과






반응형
//

[jQuery] jQuery 셀렉터 정리[jQuery] jQuery 셀렉터 정리

Posted at 2018. 9. 10. 13:21 | Posted in JavaScript & jQuery/jQuery
반응형




■ jQuery 셀렉터 정리




#01. CSS 셀렉터


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 태그 셀렉터

 jQuery("태그명")

 · 특정 태그

 아이디(id) 셀렉터

 jQuery("#ID명")

 · 특정 ID를 속성으로 갖는 태그

 네임(name) 셀렉터

 jQuery("태그속성[name=Name명]")

 · 특정 Name을 속성으로 갖는 태그

 클래스(class) 셀렉터

 jQuery(".Class명")

 · 특정 클래스를 속성으로 갖는 태그

 자손 셀렉터

 jQuery("태그1 태그2")

 · 특정 태그의 안쪽에 있는 태그

 유니버셜 셀렉터

 jQuery("*")

 · 전체 태그

 그룹 셀렉터

 jQuery("셀렉터1, 셀렉터2")

 · 복수의 셀렉터




#02. jQuery 독자 필터


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 first 필터

 jQuery("태그").first()

 · 지정한 태그의 첫태그

 last 필터

 jQuery("태그").last()

 · 지정한 태그의 마지막 태그

 even 필터

 jQuery("태그:even")

 · 지정한 태그의 짝수 번째 태그

 odd 필터

 jQuery("태그:odd")

 · 지정한 태그의 홀수 번째 태그

 eq 필터

 jQuery("태그").eq(번호),

 · 지정한 번호의 태그(번호는 0부터 시작)

 gt 필터

 jQuery("태그").gt(번호)

 · 지정한 태그보다 뒤의 태그(index + 1번째 요소)

 lt 필터

 jQuery("태그").lt(번호)

 · 지정한 태그보다 앞의 태그(index 미만의 요소)

 header 필터

 jQuery("태그:header")

 · h1 ~ h6까지의 heading 태그

 contatin 필터

 jQuery("태그:contatin(문자열)")

 · 특정 문자열을 포함하고 있는 태그

 has 필터

 jQuery("태그:has(태그2)")

 · 특정 태그를 호함하고 있는 태그

 parent 필터

 jQuery("태그").parent()

 · 자식 태그 혹은 문자열을 포함하고 있는 태그

 animated 필터

 jQuery("태그:animated")

 · 애니메이션 중의 모든 요소를 취득

 contains 필터

 jQuery("태그:contains(문자열)")

 · 특정문자열을 포함한 요소를 취득

 empty 필터

 jQuery("태그").empty()

 · 특정 태그의 문자열을 삭제




#03. CSS2에서 추가된 셀렉터


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 자손 셀렉터

 jQuery("부모 태그명 자손 태그명")

 · 부모 태그의 모든 자손 요소의 자손 태그명을 취득

 자식 셀렉터

 jQuery("부모 태그명 > 자식 태그명")

 · 부모 태그의 바로 밑에 자식 태그

 인접 셀렉터

 jQuery("태그1 + 태그2")

 · 특정 태그의 다음 태그

 형제 셀렉터

 jQuery("태그1 ~ 태그2")

 · 특정 태그의 형제 요소 태그2를 취득

 first-child 유사클래스

 jQuery("태그:first-child")

 · 동일 태그 안의 첫 태그




#04. CSS3에서 추가된 셀렉터


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 간접 셀렉터

 jQuery("태그1 ~ 태그2")

 · 특정 태그의 뒤에 나타나는 태그

 부정유사 클래스

 jQuery("태그1").not(태그2)

 · 특정 태그 안에서 태그2를 제외한 태그

 empty 클래스

 jQuery("태그:empty")

 · 자식태그 혹은 문자열을 포함하지 않는 태그

 nth-child 유사 클래스

 jQuery("태그:nth-child(번호)")

 · 특정 태그 안에서 지정한 번호의 태그

 last-child 유사 클래스

 jQuery("태그:last-child")

 · 동일 태그안의 가장 마지막 태그

 only-child 유사 클래스

 jQuery("태그:only-child")

 · 특정 태그가 하나만 포함된 태그




#05. CSS의 속성 셀렉터


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 [attribute]

 jQuery("[속성명]")

 · 특정 속성을 가진 태그

 [attribute = 'value']

 jQuery("[속성명 = '값']")

 · 특정 속성이 지정한 값을 가진 태그

 [attribute != 'value']

 jQuery("태그명[속성명 != '값']")

 · 특정 속성이 지정한 값을 갖지 않는 태그

 [attribute ^= 'value']

 jQuery("태그명[속성명 ^= '값']")

 · 특정 속성이 지정한 값으로 시작되는 태그

 [attribute $= 'value']

 jQuery("[속성명 $= '값']")

 · 특정 속성이 지정한 값으로 끝나는 태그

 [attribute *= 'value']

 jQuery("[속성명 *= '값']")

 · 특정 속성이 지정한 값을 포함하고 있는 태그

 [attributeFilter1]

 [attributeFilter2]

 jQuery("[태그셀렉터1][태그셀렉터2")

 · 복수 속성 셀렉터에 해당하는 태그




#06. 요소의 조작


:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 append(c) 내부

 jQuery("태그").append(c)

 · 요소 c를 현재 요소의 자식 요소 뒤에 추가

 append(함수) 내부

 jQuery("태그").append(함수)

 · 함수의 결과를 현재 요소의 자식 요소 뒤에 추가

  ※ 함수는 인수로서 인덱스 번호,

  현재의 자식 요소를 나타내는 HTML 문자열을 받아

  추가해야 할 HTML 문자열을 돌려준다.

 prepend(c) 내부

 jQuery("태그").prepend(c)

 · 요소 c를 현재 요소의 자식 요소 선두에 추가

 prepend(함수) 내부

 jQuery("태그").prepend(함수)

 · 함수의 결과를 현재 요소의 자식 요소 선두에 추가

  ※ 함수는 인수로서 인덱스 번호,

  현재의 자식 요소를 나타내는 HTML 문자열을 받아

  추가해야 할 HTML 문자열을 돌려준다.

 appendTo(c) 내부

 jQuery("태그").appendTo(c)

 · 현재 요소를 요소 c의 자식 요소 뒤에 추가(append의 역)

 prependTo(c) 내부

 jQuery("태그").prependTo(c)

 · 특정 속성이 지정한 값을 포함하고 있는 태그

 after(c) 외부

 jQuery("태그").after(c)

 · 요소 c를 현재 요소의 뒤에 추가

 after(함수) 외부

 jQuery("태그").after(함수)

 · 함수 결과를 현재 요소의 뒤에 추가

  ※ 함수는 인수로서 인덱스 번호를 받아 추가해야할

  HTML 문자열을 돌려준다.

 before(c) 외부

 jQuery("태그").after(c)

 · 요소 c를 현재 요소의 앞에 추가

 before(함수) 외부

 jQuery("태그").after(함수)

 · 함수 결과를 현재 요소의 앞에 추가

  ※ 함수는 인수로서 인덱스 번호를 받아 추가해야할

  HTML 문자열을 돌려준다.

 insertAfter(c) 랩

 jQuery("태그").insertAfter(c)

 · 현재 요소를 c의 뒤에 추가(after의 역)

 insertBefore(c) 랩

 jQuery("태그").insertBefore(c)

 · 현재 요소를 c의 앞에 추가(before의 역)

 wrap(html | elem) 랩

 

 · 현재 요소를 지정한 HTML 문자열 / 요소를 둘러싼다.

 wrap(함수) 랩

 

 · 현재 요소를 함수의 결과로 둘러 싼다.

 wrapAll(html | elem) 랩


 · 현재 요소 전체를 지정한 HTML 문자열 / 요소로 둘러싼다.

 wraplnner(html | elem) 랩

 

 · 현재 요소의 내용을 함수의 결과로 둘러싼다.

 unwrap() 랩

 

 · 현재 요소를 둘러싸고 있는 요소를 제거

 replaceWith(c) 치환외부

 

 · 현재 요소를 요소 c로 치환

 replaceWith(함수) 치환외부

 

 · 현재 요소를 함수의 결과로 치환

 replaceAll(c)

 

 · 현재 요소로 요소 c를 치환

 empty() 삭제

 

 · 현재 요소의 안에 있는 모든 요소를 삭제

 remove([exp])

 

 · 현재 요소를 삭제(인수 exp로 필터링 가능)

 detach([exp])

 

 · 현재 요소를 이벤트 리스너를 유지한 채로 파기

   (인수 exp로 필터링 가능)

 clone([flag])
 

 · 현재 요소를 카피

   (인수 flag가 true의 경우는 이벤트 리스너도 정리해 카피)




#07. 요소세트에 영향을 주는 조작

:: 명칭 ::

:: 서식 ::

:: 지정 대상 ::

 add()

 

 

 andSelf(0

 

 

 children()

 

 

 filter()

 

 

 find()

 

 

 map()

 

 

 next()

 

 

 nextAll()

  

 not()

  

 parent()

  

 parents()

  

 prev()

  

 prevAll()

  

 siblings

  

 slice

  

 clone

  






반응형
//

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

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







반응형
//