본문 바로가기

Javascript

D-DAY 카운트다운 D-DAY를 만들어야하는데 스크립트로 해야했다. 기존에 만들어둔 자료를 활용할려고 했는데, 테스트하다보니 정확도가 떨어져서 만들다가 뭔가 마음에 안들어서 구글링하니 깔끔한 샘플이 있다. 카운트 다운00일00시00분00초 카운트 다운 00일 00시 00분 00초 숫자는 2자리로 나오게 했다. 필요없으면 그 부분을 삭제해도 된다. 다음은 javascript만으로 만들었다. 카운트 다운00일00시00분00초 참고 페이지https://www.w3schools.com/howto/howto_js_countdown.asphttps://www.w3schools.com/js/js_date_formats.asp 더보기
그래프(차트)를 그려보자 chart.js 웹에서 그래프를 그려보려고 하니, 전에 사용했던게 가물가물해서 찾아보았다. 생긴걸로 보아 사용했던게 아닌듯 하다...http://www.chartjs.org 찾아보니 설치버전이 있는데... 잘 모르겠다. 그냥 파일로 적용해보기로 했다. js파일은 사이트에 있는 링크 중에 아래 링크에서 받았다.https://www.jsdelivr.com/package/npm/chart.js?path=dist 안에 있는 파일 중 Chart.min.js 파일만 올려서 테스트해보려고 한다. 잘 출력되는지 샘플로 일단 테스트 해보자. 잘 보이지만 좀 더 설정이 필요해보인다. 기본적인 구조는 canvas와 태그를 이용하고 있다. canvas에는 그래프의 바탕이되는 X,Y 좌표관련 정보를 넣고 태그로 막대 또는 라인 정보를 표현하는.. 더보기
Naver Maps Javascript API v3를 사용해보자 커뮤니티를 보다가 어떤 사이트에서 네이버 지도를 이용하여 개발된 사이트를 봤는데, 속도가 엄청 빨랐다.어플만 이용하다가 오랜만에 API를 사용한 세이트를 본 것이지만, 뭐 컴퓨터 사양에 따라 다를지도 모르지만,엄청 빨랐다. 그래서 궁금해서 네이버 개발자 사이트에 들어가니 버전 3가 나와있다. 한번 해봐야지. 네이버 API는 초기에 잠깐 해보고 오랜만이라 뭔가 생소하게 바뀐 느낌이 든다. 먼저 Client ID가 필요하니 발급받으러 다음 URL로 들어간다.https://developers.naver.com/register 애플리케이션 등록 페이지이다. 애플리케이션 이름을 넣고 카테고리를 고른 후, 이용목적을 비로그인 오픈API로 하였다. 그러면 서비스 환경 설정이 나오는데, 필요한 부분을 선택하자. 아마도.. 더보기
input 박스 길이제한 요즘은 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글자로 처리된다. 이건 한글을 고려하려면 몇가지 함수가 추가로 필요하다. 단지 문제가 한글이 잘릴 수도 있으니... 구조는 많이 바뀌어야.. 더보기
input 박스에 숫자만 입력하기 숫자만 입력받게 해달라고 요청이와서 전에 만들어둔 소스를 찾았다. 이거 만들 때, 아마도 정규식을 많이 연습중이였던거 같다. 정규식으로 만들었네... 무조건 숫자 처리를 했네... 키 코드를 모두 예외처리할 수 없으니 이렇게 한거 같은데... 정확히 기억은 나지 않는다;;; $('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 .. 더보기
jQuery Attributes vs. Properties 이번에 오랜만에 checkbox를 수정하는 스크립트를 만들어야해서 작업하다보니 attr이 안먹는다. 아래는 기존에 사용하던 방법이다.$('#testCheckbox').attr('checked', true); 이게 jqeury 1.6 이후부터는 attribute와 property가 분리되어서 다르게 된다고 한다. 얼마전까지 1.4.4를 사용했었으므로 몰랐다. 버젼업되면 꼼꼼히 확인해야겠다. 느닷없이 안되서 좀 당황스러웠다. 요즘에는 selecter를 이용해서 값을 가져왔기 때문에 attr로 checked를 가져오지 않아서 몰랐다. 참고로 selecter로 가져오면 다음과 같다.$('input:checkbox[id=testCheckbox]:checked') checked가 되어 있으면 객체를 가져오고 선택이.. 더보기
한글 검사 패턴 기존에 한글 검증하는 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 더보기
IE 호환성 보기 문제점 거의 10년정도 된 CMS를 리뉴얼하다보니 문제가 여러가지 발생했다. 가장 큰 문제가 스크립트 문제다. javascript가 prototype으로 되어있다보니, 최신버젼 ie에서 문제가 많아 호환성보기를 설정하고 사용중이였다. 가장 큰문제가 스크립트 오동작인데, 정말 이해가 안갈정도로 엉뚱한 태그에 엉뚱한 값이 들어간다... 특히 크롬에서는 쓸 수가 없다. 리뉴얼하다보니 스크립트가 맘에 안들어서 jquery로 수정중인데, 여기서 문제가 발생했다. 호환성보기를 설정하면 jquery가 동작을 하지 않는다. 원인을 찾아 삽질하다보니 결론이 나왔는데, ie에서 $을 prototype으로 바꿔버린다. 그래서 jquery가 씹히는 것이다. 왜인지는 모르겠지만 테스트 결과나온 결론이다. 그래서 브라우저에 있는 온갓 .. 더보기
그래프API - taucharts 자바스크립트로 쉽게 그래프를 그려보자. 튜토리얼에서 프로토콜이 빠져있어서 삽질한 것말고는 삽질할게 없을 정도로 간단하다. 코드를 보면 해더에 걸어주자. 그리고 바디에 다음 코드를 넣자. 출처: http://www.taucharts.com/ 더보기
구글 단축URL을 만들자 작업하면서 2번 고생을 하게됬는데, 처음에는 개발자 키를 만드는 것으로 한글지원이 안되서 였고, 두번째는 API사용하는데 약간의 딜레이가 있어서 바로 사용이 안되서 였다. 처음부터 정리해보자. 우전 첫번째로 기본적인 것이지만 구글에 가입되어있어야한다. 그리고 개발자 콘솔에서 API를 관리 할 수 있는데, 단축URL API를 사용할 수 있도록 구글 API에서 설정하자. 그런데 사실 처음에 어떻게 만들었는지 생각이 나지 않는다. 사용하다가 문득 생각이나서 블로깅하다보니 한계가 있다. https://console.developers.google.com/여기에 가보면 다음과같은 화면이 나온다. 이걸 내가 만들었던가... 그래서 다시 만들어보기로 했다. Create project를 눌러보자. 이런 창이 나오는데 .. 더보기

티스토리툴바