Developer Calssess

JQuery에서 ID를 이용하여 HTML 태그의 click 기능을 구현할 때 HTML에 있는 특정 값을 가져와서 사용해야 할 경우가 있다. Django 템플릿을 이용하는 예를 들면, 템플릿에서 모델 객체의 값들(poll.id 와 같은)을 태그의 text 으로 보여주는 것이 아니라 JavaScript 에서 그 값을 처리하기 위해 필요한 경우 JQuery 에서 해당 값을 가져오기 위해서는 HTML 태그에 Custom 속성을 지정하는 방법이 있다.

사용 방법

JQuery 문서에 예시가 잘 나와있다.

<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>

HTML 커스텀 속성을 지정하고자 하는 태그에 data-name="value" 형태로 속성 이름과 값을 지정하면,

 
$( "div" ).data( "role" ) === "page";
$( "div" ).data( "lastValue" ) === 43;
$( "div" ).data( "hidden" ) === true;
$( "div" ).data( "options" ).name === "John";

JQuery를 이용하여 위와 같이 .data() 함수를 이용하여 편하게 사용할 수 있다.
.data(name) 와 같이 호출하면 HTML에서 속성 값으로 지정한 value를 반환한다.

커스텀 속성 값을 변경하거나 제거하고 싶으면 아래와 같이 할 수 있다.

$( "div" ).data( "change", 86 );
$( "div" ).removeData( "blah" );

출처 : https://cjh5414.github.io/html-jquery-add-custom-attribute/

현재 접속한 기기의 IP를 받아오는 소스

<script type="text/javascript" src="http://jsgetip.appspot.com"></script>
<script>
    $(document).ready(function(){
        var check_ip = ip();           // 접속한 기기의 IP를 가져온다
        alert(check_ip);                
    });
</script>

특정 IP 만 허용 & 차단하기

<script type="text/javascript" src="http://jsgetip.appspot.com"></script>
<script>
    $(document).ready(function(){
        var check_ip = ip();           // 접속한 기기의 IP를 가져온다
        var AllowIP = ["49.166.205.145","192.168.35.172","58.124.178.106","175.208.239.21","223.38.17.123"];     // 허용할 IP 배열
        var DenyIP = ["223.38.17.123"];     // 차단할 IP 배열
        var i = 0;
                 
        for (var i in AllowIP){
            if (AllowIP[i] == check_ip) {
                    // 허용 IP에 대한 이벤트
            }
        }
        for (var i in DenyIP){
            if (DenyIP[i] == check_ip) {
                    // 차단 IP에 대한 이벤트
            }
        }
    });
</script>

IP로 접속 국가 확인

<script>
var ip = "";
var hostname = "";
var city = "";
var region = "";
var country = "";
var loc = "";
var org = "";
  
$.getJSON("http://ipinfo.io", function(data) {
    ip = data.ip // 접속자 ip
    hostname = data.hostname // 접속자 hostname
    city = data.city // 접속자 도시
    region = data.region // 접속자 지역
    country = data.country // 접속자 국가
    loc = data.loc // 접속 위도, 경도
    org = data.org // ISP (인터넷 서비스 제공사업자)
     
    // 지역별 분기
    if(country == "KR"){
        console.log(data);
    } else if(country == "CN"){
        console.log(data);
    } else {
        console.log(data);
    }
});
</script>

국가 코드는 링크의 json을 참조하시면 됩니다. http://country.io/names.json

출처: https://sbss.tistory.com/11

깃헙 공식 레포

https://github.com/inorganik/CountUp.js

데모페이지

https://inorganik.github.io/countUp.js/

스크린샷과 같이 데모 테스트를 해볼 수도있으며 소스코드도 바로 제공해준다.

[OS및 브라우저별 userAgent값]

Windows XP IE8  (IE7모드로 호환성보기)

           Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0;

Windows XP IE8  (IE8 모드로 보기)

           Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0;

Windows Vista IE8 (IE7모드로 호환성보기)

           Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0)

Windows Vista IE8 (IE8 모드로 보기)

           Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0)

IE8 on Windows 7 (Window 7 에서 IE8)

           Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

64-bit IE on 64-bit Windows: (64bit 비스타에서 64bit IE8)

           Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Win64; x64; Trident/4.0)

32-bit IE on 64-bit Windows: (64bit 비스타에서 32bit IE8)

           Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; WOW64; Trident/4.0)

IE11 on Windows 7

   Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko

IE11 on 64-bit Windows 8.1 Update

   Mozilla/5.0 (Windows NT 6.3; Win64, x64; Trident/7.0; Touch; rv:11.0) like Gecko

IE11 for the desktop on 64-bit Windows 8.1 Update

   Mozilla/5.0 (Windows NT 6.3; WOW64; Trident/7.0; Touch; rv:11.0) like Gecko

IE11 for the desktop on 64-bit Windows 8.1 Update with enterprise mode enabled

  Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; Tablet PC 2.0)

IE11 for the desktop on 64-bit Windows 8.1 Update with compatibility view enabled

   Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.3; Trident/7.0; Touch)

Microsoft Edge for Windows 10 Insider Preview

   Mozilla/5.0 (Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

Microsoft Edge for Windows Phone

   Mozilla/5.0 (Windows Phone 10.0; Android 4.2.1; DEVICE INFO) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Mobile Safari/537.36 Edge/12.0

Internet Explorer for Windows Phone 8.1 Update

   Mozilla/5.0 (Mobile; Windows Phone 8.1; Android 4.0; ARM; Trident/7.0; Touch; rv:11.0; IEMobile/11.0; NOKIA; Lumia 520) like iPhone OS 7_0_3 Mac OS X AppleWebKit/537 (KHTML, like Gecko) Mobile Safari/537

IE11 on a Lumia 928 running Windows Phone 8.1, mobile version

   Mozilla/5.0 (Windows Phone 8.1; ARM; Trident/7.0; Touch; rv:11;

 IEMobile/11.0; NOKIA; Lumia 928) like Gecko

   IE on a Lumia 920 running Windows Phone 8.0, mobile version

Mozilla/5.0 (compatible; MSIE 10.0; Windows Phone 8.0; Trident/6.0; 

   IEMobile/10.0; ARM; Touch; rv:11; NOKIA; Lumia 920) like Gecko

IE on a Lumia 920 running Windows Phone 8.0, desktop version

   Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; ARM; Touch; WPDesktop)

IE on Xbox One

   Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0; Xbox; Xbox One)

IE on Xbox 360

   Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; Xbox)

[자바스크립트]

<script>

var agent = navigator.userAgent.toLowerCase(); //현재 브라우저 정보를 소문자로 받아온다.

if(agent.indexOf("windows nt 5.1") >= 0) // OS 식별

alert("Windows XP");

else if(agent.indexOf("windows nt 6.0") >=0)

alert("Windows Vista");

else if(agent.indexOf("windows nt 6.1") >= 0)

alert("Windows 7");

else if(agent.indexOf("windows nt 6.3") >= 0) // windows 10

alert("windows 10");

else if(agent.indexOf("windows phone 8.1") >= 0)

alert("Windows Phone 8.1");

else if(agent.indexOf("windows PHONE 10.0") >= 0)

alert("Windows Phone 10.0");

else if(agent.indexOf("android") >= 0 )

alert("Android");

else if(agent.indexOf("iphone") >= 0 )

alert("IPhone");

else if(agent.indexOf("ipad") >= 0 )

alert("IPad");

else if(agent.indexOf("ipod") >= 0 )

alert("IPod");

else if(agent.indexOf("mac") >= 0 )

alert("mac");

else

alert(agent);

if(agent.indexOf("msie 7") >= 0) // 브라우저 식별

alert("IE 7");

else if(agent.indexOf("msie 8") >= 0)

alert("IE 8");

else if(agent.indexOf("msie 9") >= 0)

alert("IE 9");

else if(agent.indexOf("msie 10") >= 0) // IE 10

if(agent.indexOf("Touch") >= 0) // IE10 on a machine with touch-capable hardware

alert("IE 10 on Touch");

else

alert("IE 10");

else if(agent.indexOf("rv:11.0") >= 0)

alert("IE 11");

else if(agent.indexOf("edge/12.0") >= 0)

alert("Spartan");

else if(agent.indexOf("chrome") >= 0)

alert("Chrome");

else if(agent.indexOf("safari") >= 0)

alert("Safari");

else if(agent.indexOf("firefox") >= 0)

alert("Firefox");

else if(agent.indexOf("opera") >= 0)

alert("Opera");

else

alert(agent);

if(agent.indexOf("win64") >= 0) // 처리방식 식별

alert("64bit")

else if(agent.indexOf("wow64") >= 0)

alert("32-bit IE on 64-bit");

else if(agent.indexOf("arm") >= 0)

alert("Windows RT");

else

alert("32bit");

</script>

출처 : http://soke.tistory.com/3