'Javascript'에 해당되는 글 44건

  1. 2018.03.12 그래프(차트)를 그려보자 chart.js
  2. 2017.01.06 Naver Maps Javascript API v3를 사용해보자
  3. 2016.08.17 input 박스 길이제한
  4. 2016.08.17 input 박스에 숫자만 입력하기 (1)
  5. 2016.02.15 jQuery Attributes vs. Properties
  6. 2016.01.13 한글 검사 패턴
  7. 2015.09.02 IE 호환성 보기 문제점
  8. 2015.03.19 그래프API - taucharts
  9. 2014.02.28 구글 단축URL을 만들자
  10. 2014.01.20 객체 안의 프로퍼티 접근

그래프(차트)를 그려보자 chart.js

Javascript 2018.03.12 16:11

웹에서 그래프를 그려보려고 하니, 전에 사용했던게 가물가물해서 찾아보았다. 생긴걸로 보아 사용했던게 아닌듯 하다...

http://www.chartjs.org


찾아보니 설치버전이 있는데... 잘 모르겠다. 그냥 파일로 적용해보기로 했다.


js파일은 사이트에 있는 링크 중에 아래 링크에서 받았다.

https://www.jsdelivr.com/package/npm/chart.js?path=dist


안에 있는 파일 중 Chart.min.js 파일만 올려서 테스트해보려고 한다.


Chart.min.js

chart.js-2.7.2.tgz

Chart.min.js

잘 출력되는지 샘플로 일단 테스트 해보자.

<canvas id="myChart" width="200px" height="100px"></canvas>

<script>

var ctx = document.getElementById("myChart");

var myChart = new Chart(ctx, {

    type: 'bar',

    data: {

        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],

        datasets: [{

            label: '그래프 테스트',

            data: [12, 19, 3, 5, 2, 3],

            backgroundColor: [

                'rgba(255, 99, 132, 0.2)',

                'rgba(54, 162, 235, 0.2)',

                'rgba(255, 206, 86, 0.2)',

                'rgba(75, 192, 192, 0.2)',

                'rgba(153, 102, 255, 0.2)',

                'rgba(255, 159, 64, 0.2)'

            ],

            borderColor: [

                'rgba(255,99,132,1)',

                'rgba(54, 162, 235, 1)',

                'rgba(255, 206, 86, 1)',

                'rgba(75, 192, 192, 1)',

                'rgba(153, 102, 255, 1)',

                'rgba(255, 159, 64, 1)'

            ],

            borderWidth: 1

        }]

    },

    options: {

        scales: {

            yAxes: [{

                ticks: {

                    beginAtZero:true

                }

            }]

        }

    }

});

</script>




<테스트 출력 결과>


잘 보이지만 좀 더 설정이 필요해보인다.


기본적인 구조는 canvas와 태그를 이용하고 있다. 

canvas에는 그래프의 바탕이되는 X,Y 좌표관련 정보를 넣고 태그로 막대 또는 라인 정보를 표현하는 방식이다.

부하는 얼마나 걸릴지 모르겠으나 일단은 괜찮아보인다.


그래프 모양은 다음과 같은 모양이 있는 것 같다.

  • line
  • bar
  • radar
  • polar area
  • doughnut and pie
  • bubble


왜 같다라고 했냐면 각각 설정값에 따라 조금모양이 좀 달라져서 전부 볼수가 없었다. 제대로 볼려면 시간을 좀 투자해봐야 할듯하다. 사이트를 보면 알겠지만, 여기 문서를 보면 조금 어렵게 설명이 잘 되어있다.

http://www.chartjs.org/docs/latest/


다음은 샘플인데, 샘플을 보는게 가장 빠를듯 하다.

http://www.chartjs.org/samples/latest/


라이센스는 MIT license를 따른다고 하니, 자유롭게 사용해도 될듯하다.








'Javascript' 카테고리의 다른 글

그래프(차트)를 그려보자 chart.js  (0) 2018.03.12
Naver Maps Javascript API v3를 사용해보자  (0) 2017.01.06
한글 검사 패턴  (0) 2016.01.13
IE 호환성 보기 문제점  (0) 2015.09.02
그래프API - taucharts  (0) 2015.03.19
구글 단축URL을 만들자  (0) 2014.02.28
Trackback 0 : Comment 0

Naver Maps Javascript API v3를 사용해보자

Javascript 2017.01.06 13:54

커뮤니티를 보다가 어떤 사이트에서 네이버 지도를 이용하여 개발된 사이트를 봤는데, 속도가 엄청 빨랐다.

어플만 이용하다가 오랜만에 API를 사용한 세이트를 본 것이지만, 뭐 컴퓨터 사양에 따라 다를지도 모르지만,

엄청 빨랐다. 그래서 궁금해서 네이버 개발자 사이트에 들어가니 버전 3가 나와있다. 한번 해봐야지.


네이버 API는 초기에 잠깐 해보고 오랜만이라 뭔가 생소하게 바뀐 느낌이 든다. 먼저 Client ID가 필요하니 발급받으러 다음 URL로 들어간다.

https://developers.naver.com/register


애플리케이션 등록 페이지이다. 애플리케이션 이름을 넣고 카테고리를 고른 후, 이용목적을 비로그인 오픈API로 하였다. 그러면 서비스 환경 설정이 나오는데, 필요한 부분을 선택하자. 아마도 다른 API와 비슷하다면 웹에서 사용할 경우 웹서비스 URL이 다르면 사용이 불가능할 가능성이 있으니 여기 등록해주자. 휴대폰 인증을 받으면 등록이 된다. 등록 후에 내 애플리케이션 관리 화면에서 Client DI를 확인할 수 있다.


API 사용은 아래 경로에서 확인할 수 있다.

https://navermaps.github.io/maps.js/docs/tutorial-0-Getting-Started.html


페이지에 아래 코드만 넣으면 결과를 확인할 수 있다.

<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=YOUR_CLIENT_ID"></script>

<div id="map" style="width:100%;height:400px;"></div>

<script type="text/javascript">

var mapOptions = {

    center: new naver.maps.LatLng(37.3595704, 127.105399),

    zoom: 10

}

var map = new naver.maps.Map('map', mapOptions );

</script>


결과 화면


여기까지만 하면 바로 지도를 불러올 수 있다. 붉은 글씨로된 YOUR_CLIENT_ID만 본인 걸로 바꿔주면 된다. 

옵션을 간단하게 보면, center는 시작위치의 좌표값이고 zoom은 지도의 초기 줌 레벨이다. 지도가 생성되는 div의 사이즈가 가로 100% 세로 400px이기 때문에 초기 생성 사이즈는 여기에 맞춰 생성되는 것으로 보이나 옵션으로 지도의 초기 크기도 지정할 수 있다.


몇가지 예제를 보니 이런저런 기능이 많다. 예제도 있고 좋은데, 단지 예제에 주석이 없는게 아쉽다.



'Javascript' 카테고리의 다른 글

그래프(차트)를 그려보자 chart.js  (0) 2018.03.12
Naver Maps Javascript API v3를 사용해보자  (0) 2017.01.06
한글 검사 패턴  (0) 2016.01.13
IE 호환성 보기 문제점  (0) 2015.09.02
그래프API - taucharts  (0) 2015.03.19
구글 단축URL을 만들자  (0) 2014.02.28
Trackback 0 : Comment 0

input 박스 길이제한

Javascript/jQuery 2016.08.17 15:19

요즘은 maxlength를 이용하여 간단히 길이 제한이 가능하다. 하지만 가끔씩 alert으로 안내를 해주기 바라는 분들이 계시다. 그래서 전에 만들었던 소스를 찾아서 다시 가져왔다.


$('#keyword').bind('keyup',function(e){

if($('#keyword').val().length>10){

alert('키워드는 10자 이내로 입력 가능합니다.');

$('#keyword').val($('#keyword').val().substr(0,10));

}

});


input 박스에 10자 이상 들어가면 alert을 띄우고 10자를 잘라서 넣어준다. 참고로 한글도 1글자로 처리된다. 이건 한글을 고려하려면 몇가지 함수가 추가로 필요하다. 단지 문제가 한글이 잘릴 수도 있으니... 구조는 많이 바뀌어야하겠다. 깔끔하게는 처리가 어려우니 패스...

'Javascript > jQuery' 카테고리의 다른 글

input 박스 길이제한  (0) 2016.08.17
input 박스에 숫자만 입력하기  (1) 2016.08.17
jQuery Attributes vs. Properties  (0) 2016.02.15
타이머 만들기  (0) 2013.03.12
달력 만들기  (0) 2013.01.17
단축키를 눌러 특정위치로 이동  (0) 2012.11.22
Trackback 0 : Comment 0

input 박스에 숫자만 입력하기

Javascript/jQuery 2016.08.17 15:01

숫자만 입력받게 해달라고 요청이와서 전에 만들어둔 소스를 찾았다. 이거 만들 때, 아마도 정규식을 많이 연습중이였던거 같다. 정규식으로 만들었네... 무조건 숫자 처리를 했네... 키 코드를 모두 예외처리할 수 없으니 이렇게 한거 같은데... 정확히 기억은 나지 않는다;;;


$('input').bind('keyup',function(e){

event = e || window.event;

var keyID = (event.which) ? event.which : event.keyCode;

if ( keyID == 8 || keyID == 46 || keyID == 37 || keyID == 39 ){

 // 백스페이스, DELETE, 좌 화살표, 우 화살표

return;

}else{

event.target.value = event.target.value.replace(/[^0-9]/g, "");

}

});


내 기억에 어떤 소스를 보다가 맘에 안들어 고치다보니 이렇게 됬던거 같은데... 잘 동작하니 넘어가자;; 크롬,오페라,파폭, ie11에서는 확인했지만 다른 버젼은 확인하지 못했다. ie11 개발자 모드에서 버젼을 낮추면 스크립트 에러가 나서 확인할 방법이 없다... 참고로 전에 ie8까지는 테스트 했었으니 되겠지...


동작은 간단하다. 이벤트를 받아서 백스페이스, DELETE, 좌 화살표, 우 화살표 키는 넘기고 다른 모든키는 숫자 처리해서 다시 값을 집어넣는다. 아마도 한글 문제 때문에 이렇게 된거 같기도 하고... 무조건 숫자 처리를 해서 값을 다시 넣게끔 하는 소스이다. 시간이 지나니 히스토리가 희미해져서 안타깝다. ㅠㅠ



'Javascript > jQuery' 카테고리의 다른 글

input 박스 길이제한  (0) 2016.08.17
input 박스에 숫자만 입력하기  (1) 2016.08.17
jQuery Attributes vs. Properties  (0) 2016.02.15
타이머 만들기  (0) 2013.03.12
달력 만들기  (0) 2013.01.17
단축키를 눌러 특정위치로 이동  (0) 2012.11.22
Trackback 0 : Comment 1

jQuery Attributes vs. Properties

Javascript/jQuery 2016.02.15 17:06

이번에 오랜만에 checkbox를 수정하는 스크립트를 만들어야해서 작업하다보니 attr이 안먹는다. 아래는 기존에 사용하던 방법이다.

$('#testCheckbox').attr('checked', true);


이게 jqeury 1.6 이후부터는 attribute와 property가 분리되어서 다르게 된다고 한다. 얼마전까지 1.4.4를 사용했었으므로 몰랐다. 버젼업되면 꼼꼼히 확인해야겠다. 느닷없이 안되서 좀 당황스러웠다. 요즘에는 selecter를 이용해서 값을 가져왔기 때문에 attr로 checked를 가져오지 않아서 몰랐다. 참고로 selecter로 가져오면 다음과 같다.

$('input:checkbox[id=testCheckbox]:checked')


checked가 되어 있으면 객체를 가져오고 선택이 되있지 않으면 객체를 가져오지 않는다. 하지만 이제는 값을 수정해야하므로 분리되어 나온 것이 prop이다. 위에 안되는 소스를 바꾸면 다음과 같다.

$('#testCheckbox').prop('checked', true);


attr에서 prop으로 함수명이 바뀐 것이 전부다. 인터넷을 보면 차이점에 대해 이래저래 말들이 많다. 그런데 뭐 잘 모르겠다. 두 함수를 다시 이전 사용법으로 테스트를 해보자. 좀 더 알기 쉽게 크롬에서 개발자 툴에 있는 Elements 탭의 tag를 보자. 


attr 함수로 값을 수정하면 크롬의 Elements 탭에서 보이는 소스가 바뀐다. Tag에 checked="checked" 라는 문구가 추가되어 있을 것이다. 이제 prop을 이용해서 적용을 해보자. tag 상의 변화는 없다. 가져올 경우에도 각각 값을 가져온다.이것으로 봐서 attr은 html tag에 바로 적용되는 것으로 작용하고 있다. 그리고 prop은 눈으로는 확인이 불가능하다. 또 jquery 문서에 보니 prop의 반환 자료형이 boolean이다. 그러므로 true, false 두가지 값 만으로 사용할 수 있겠다. attr은 속성의 정의를 말하고 prop은 tag에 관계된 원소라고 보면 될거 같다. 비슷한 구조인 disabled도 prop으로 정의하면 된다.


정리해보면 attr은 html DOM 구조에 바로 적용되어지는 것이고 prop은 boolean 자료형을 갖는 Tag의 원소이다. w3schools사이트에서 찾아보니 attr로 정의하는 것은 attribute라고 되어 있고 prop으로 정의하는 것은 elements라고 되어있다. 좀 더 깊게 찾아보고 싶지만, 너무 깊게 들어가면 해볼 것이 많아져서 여기까지로 결론을 내려야겠다.


참고

http://api.jquery.com/prop/

http://www.w3schools.com/jquery/jquery_ref_selectors.asp


'Javascript > jQuery' 카테고리의 다른 글

input 박스 길이제한  (0) 2016.08.17
input 박스에 숫자만 입력하기  (1) 2016.08.17
jQuery Attributes vs. Properties  (0) 2016.02.15
타이머 만들기  (0) 2013.03.12
달력 만들기  (0) 2013.01.17
단축키를 눌러 특정위치로 이동  (0) 2012.11.22
Trackback 0 : Comment 0

한글 검사 패턴

Javascript 2016.01.13 16:39

기존에 한글 검증하는 javascript 정규식을 만들었으나 euc-kr에서 검증하는 패턴이 저장되지 않는다.

var regkorean = /^[\가-\힣+]*$/;

if(regkorean.test(str)){

return true;

}else{

return false;

}


이렇게 만들어 사용했으나 힣 이라는 단어가 euc-kr 형식의 파일에서는 저장할 수 없다.

그래서 찾아보니 유니코드로 만들어 사용하는 방법이 있다.

var regkorean = /^[\uac00-\ud7a3+]*$/;

if(regkorean.test(str)){

return true;

}else{

return false;

}


이렇게 함수를 만들어 사용하니 잘 동작한다.


출처: http://okky.kr/article/230790

'Javascript' 카테고리의 다른 글

그래프(차트)를 그려보자 chart.js  (0) 2018.03.12
Naver Maps Javascript API v3를 사용해보자  (0) 2017.01.06
한글 검사 패턴  (0) 2016.01.13
IE 호환성 보기 문제점  (0) 2015.09.02
그래프API - taucharts  (0) 2015.03.19
구글 단축URL을 만들자  (0) 2014.02.28
Trackback 0 : Comment 0

IE 호환성 보기 문제점

Javascript 2015.09.02 12:14

거의 10년정도 된 CMS를 리뉴얼하다보니 문제가 여러가지 발생했다. 가장 큰 문제가 스크립트 문제다.


javascript가 prototype으로 되어있다보니, 최신버젼 ie에서 문제가 많아 호환성보기를 설정하고 사용중이였다. 가장 큰문제가 스크립트 오동작인데, 정말 이해가 안갈정도로 엉뚱한 태그에 엉뚱한 값이 들어간다... 특히 크롬에서는 쓸 수가 없다. 리뉴얼하다보니 스크립트가 맘에 안들어서 jquery로 수정중인데, 여기서 문제가 발생했다.


호환성보기를 설정하면 jquery가 동작을 하지 않는다. 원인을 찾아 삽질하다보니 결론이 나왔는데, ie에서 $을 prototype으로 바꿔버린다. 그래서 jquery가 씹히는 것이다. 왜인지는 모르겠지만 테스트 결과나온 결론이다. 그래서 브라우저에 있는 온갓 데이터를 지워보았으나 해결되지 않아서 결국 빠르게 리뉴얼하는 방법뿐이 없었다. 결국 ie와 크롬을 병행해가며 사용하면서 거의 마무리가 되어가는 중이다. 완전히 마무리가 되면 ie에서 호환성 보기를 삭제하고 다시 테스트를 진행해야한다. ie는 절대로 방심할 수 없는 브라우저니까...


삽질하지 말자!


참고로 크롬도 최근들어 문제가 종종 발생한다. 이제 믿고쓰는 크롬의 시대도 끝난 것같다. 바쁠 때 힘들게 처리하느라 시간이 없어 정리하지 못했지만, 이제 크롬도 방심할 수 없다. 기존에 개발해서 테스트 끝난 것이 갑자기 동작을 하지 않으니... 갑갑할 뿐이다.

'Javascript' 카테고리의 다른 글

Naver Maps Javascript API v3를 사용해보자  (0) 2017.01.06
한글 검사 패턴  (0) 2016.01.13
IE 호환성 보기 문제점  (0) 2015.09.02
그래프API - taucharts  (0) 2015.03.19
구글 단축URL을 만들자  (0) 2014.02.28
객체 안의 프로퍼티 접근  (0) 2014.01.20
Trackback 0 : Comment 0

그래프API - taucharts

Javascript 2015.03.19 17:53

자바스크립트로 쉽게 그래프를 그려보자.

튜토리얼에서 프로토콜이 빠져있어서 삽질한 것말고는 삽질할게 없을 정도로 간단하다.

코드를 보면

<script src="http://cdn.jsdelivr.net/d3js/latest/d3.min.js" charset="utf-8"></script>

<script src="http://cdn.jsdelivr.net/underscorejs/latest/underscore-min.js" type="text/javascript"></script>

<script src="http://cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">


해더에 걸어주자. 그리고 바디에 다음 코드를 넣자.

<div id="line"></div>

<script type="text/javascript">

var datasource = [{

  type:'us', count:20, date:'12-2013'

},{

  type:'us', count:10, date:'01-2014'

},{

  type:'bug', count:15, date:'02-2014'

},{

  type:'bug', count:23, date:'05-2014'

}];


var chart = new tauCharts.Chart({

    data: datasource,

    type: 'line',

    x: 'date',

    y: 'count',

    color: 'type' // there will be two lines with different colors on the chart

});


window.onload = function(){

chart.renderTo('#line');

}

</script>


출처: http://www.taucharts.com/


'Javascript' 카테고리의 다른 글

한글 검사 패턴  (0) 2016.01.13
IE 호환성 보기 문제점  (0) 2015.09.02
그래프API - taucharts  (0) 2015.03.19
구글 단축URL을 만들자  (0) 2014.02.28
객체 안의 프로퍼티 접근  (0) 2014.01.20
javascript Boolean 값  (0) 2014.01.20
Trackback 0 : Comment 0

구글 단축URL을 만들자

Javascript 2014.02.28 12:37

작업하면서 2번 고생을 하게됬는데, 처음에는 개발자 키를 만드는 것으로 한글지원이 안되서 였고, 두번째는 API사용하는데 약간의 딜레이가 있어서 바로 사용이 안되서 였다. 처음부터 정리해보자.


우전 첫번째로 기본적인 것이지만 구글에 가입되어있어야한다. 그리고 개발자 콘솔에서 API를 관리 할 수 있는데, 단축URL API를 사용할 수 있도록 구글 API에서 설정하자. 그런데 사실 처음에 어떻게 만들었는지 생각이 나지 않는다. 사용하다가 문득 생각이나서 블로깅하다보니 한계가 있다.


https://console.developers.google.com/

여기에 가보면 다음과같은 화면이 나온다.



이걸 내가 만들었던가... 그래서 다시 만들어보기로 했다. Create project를 눌러보자.



이런 창이 나오는데 Project ID는 자동으로 생성해주므로 그대로 사용했다. 그럼 생성이되는데 시간이 좀 걸린다.



Test Project가 만들어졌다. 기존과 좀 다르네... 이제 Test Project를 클릭하고 들어가보자.



[APIs & auth > APIs]로 이동해서 URL Shortener API를 켜면 내 계정으로 단축URL관리가 가능해진다. 하지만 처음에는 기본으로 몇개 켜져있는데 그냥 OFF시켰다. 그리고 APIs 바로 아래 메뉴인 Credentials로 들어가보면 key를 확인할 수가 있다.


여기서 API key가 필요하다. 이게 있어야 단축URL을 생성할 수 있다. 처음에는 없을 것이다. 옆에 보이는 Create New Key를 클릭해서 만들면 된다. 나는 browser key로 만들었다.


https://developers.google.com/api-client-library/javascript/samples/samples

이 사이트에 가면 설명이 있다. 내가 사용한 방법으로 설명을 하자면 다음과 같다.


<script src="https://apis.google.com/js/client.js?onload=load"></script>

위 스크립트를 페이지에 넣는다. 여기서 주의할 점은 load이다. onload라고 써있는 걸 보면 감이 오는 사람도 있겠지만, script를 호출하면 페이지 내의 load함수를 호출하게 되어있다. 여기서 로딩시간이 약간 발생되는데 성급한 사람이라면 로딩기전에 버튼을 클릭할 수 있으니 거기에 대비해서 스크립트를 작성해야겠다.


function load() {

  gapi.client.setApiKey('YOUR API KEY');

}

이제 load함수를 작성했다. 난 여기서 API Key 설정만 했다. 여러가지 생각해봤는데 여기선 이것만 하는게 제일 무난하겠다.


function createShortenUrl(longUrl, callback){

_longUrl = longUrl;

_shortenUrl = longUrl;


gapi.client.load('urlshortener', 'v1', function(){

gapi.client.urlshortener.url.insert({"resource": {'longUrl': longUrl}}).execute(function(resp){

console.log('Shorten URL: ' + resp.id);

_shortenUrl = resp.id;

if( typeof(callback) == 'function'){

callback(resp.id);

}

});

});

}

이렇게 만들었다. 위에 걸어논 sample 페이지와는 약간 다르지만 잘 된다. 하나의 함수에 모든걸 때려넣으면 소스가 길어지는데, 난 그런걸 싫어하므로 callback을 만들었다. 고맘게도 같은 URL을 단축URL로 만들면 동일한 단축URL이 나온다. 그래서 따로 관리할 필요는 없다. 


리포트에서 보면 사용량을 확인할 수 있다. 사용량이 많은 곳에서는 유료결제가 필요하니 잘 알아보고 사용하면 되겠다.











'Javascript' 카테고리의 다른 글

IE 호환성 보기 문제점  (0) 2015.09.02
그래프API - taucharts  (0) 2015.03.19
구글 단축URL을 만들자  (0) 2014.02.28
객체 안의 프로퍼티 접근  (0) 2014.01.20
javascript Boolean 값  (0) 2014.01.20
D-DAY 계산 및 파폭, 사파리 버그  (0) 2013.01.16
Trackback 0 : Comment 0

객체 안의 프로퍼티 접근

Javascript 2014.01.20 18:35

객체의 프로퍼티에 접근하는 방법에는 크게 2가지가 있다.  "." 연산자를 이용하던가 "[]"를 이용하는 것이다. 예를들면 다음과 같다.

  • object.property;
  • object['property'];
  • object.method();
  • object['method']();
장단점이 있겠지만 "."를 사용하는게 간단하고 보통 그렇게 사용하고 있다. 하지만 "[]"를 이용함면 프로퍼티명을 id와 같은 텍스트로 선택할 수 있다. 별로 사용할 일은 없겠지만, 생각하기에 따라 여러가지 확장성을 고려해서 작업이 가능하게 되겠다.


'Javascript' 카테고리의 다른 글

그래프API - taucharts  (0) 2015.03.19
구글 단축URL을 만들자  (0) 2014.02.28
객체 안의 프로퍼티 접근  (0) 2014.01.20
javascript Boolean 값  (0) 2014.01.20
D-DAY 계산 및 파폭, 사파리 버그  (0) 2013.01.16
소셜네트워크에 글올리기  (0) 2012.12.10
Trackback 0 : Comment 0

티스토리 툴바