본문 바로가기

IT_Developers/Javascript79

console.log - 개발자도구 콘솔 창에 안보이게 하기 브라우저에서 콘솔로그 안찍히게 하기 안녕하세요. 고코더 입니다. 요즘 크롬의 개발자 도구의 편리함으로 alert 로 더이상 로그를 찍어보지 않고 console.log 를 많이 사용 하고 게십니다. 그런데 중요한건 실서버에 올릴 때 사용자들에게는 log를 제공하고 싶지 않아서 다 지우고 올리시고 계시죠. 그럴 필요 없이 아래 코드를 한번 웹에서 실행 해보시면 편리한 방법을 만나실 수 있습니다. ▼해당 코드를 웹에서 실행해 보세요 1234567891011121314151617181920212223242526272829 Colored by Color Scriptercs ▼ 파일을 다운로드 하셔도 좋습니다. ▼ 아래처럼 가운데 log 전에 disableLogger(); : 선언 하면 해당 log는 보이지 않습니.. 2018. 10. 1.
javascript - iframe 안에 함수 function 접근 제어 하기 아이프레임 함수 접근 실행 하기 안녕하세요. 고코더 입니다. iframe을 쓰게 되면 자식 객체의 함수를 실행 해야 할 경우가 있습니다. 이때 자바스크립트로 접근하여 실행 시켜 보는 방법을 알아보겠습니다. ▼ 우선 참고 소스를 보시겠습니다. 123456789101112131415161718 function iframeTest(){ var frame = document.getElementById("ifrm"); var gocoderFrameGo = frame.contentWindow || frame.contentDocument ; gocoderFrameGo.iframefun(); } cs ▼ 방법은 간단합니다. 아래의 기능을 통해 대상을 가져온 후에 실행하면 됩니다. document.getElementBy.. 2018. 7. 10.
jQuery - lazyload() 이미지 동적으로 / 스크롤시 호출 이미지가 화면에 올때 로딩 되게 하기 안녕하세요. 고코더 입니다. 오늘은 동적으로 이미지를 호출하여 페이지 로딩은 빠르게 하고 고객이 원하는 곳에 갔을 때만 해당 이미지를 볼 수 있도록 만들어 보려고 합니다. 모바일을 많이 사용하는 환경에서 이젠 동적 호출은 기본이 되어가고 있습니다. 오늘 써볼 플러그인은 lazyload() 입니다. ▼홈페이지는 아래와 같습니다. https://appelsiini.net/projects/lazyload/ 공식적인 API 의 내용은 읽어보셔서 참고 하시길 바랍니다. 저는 좀 더 익스프레스 하게 알려드리기 위해 샘플을 코딩 해보았습니다. ▼ 아래 내용을 참고해주세요 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 2.. 2018. 2. 12.
javascript - splice() / 배열 다루기 최근 검색어 기능에 필요한 splice() 함수 배열 삽입,삭제 안녕하세요 고코더입니다. "최근 검색어 기능"을 구현할때 필요없는 검색어는 X 버튼을 눌러 삭제하는 기능은 거의 모든 사이트가 기본적으로 제공 하는 기능입니다. ▼어떤 사이트의 최근 검색어 DIV 모습 입니다. 이 기능은 배열을 다루어 필요한 검색어를 보여주는 방법으로 대표적인 배열 다루기 입니다. 이때 splice() 기능을 사용하면 개발시에 복잡한 함수를 만들지 않고 손쉽게 개발이 가능합니다. ▼splice() 예제를 코딩 해보았습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 var arrayData = [1, 2, 3, 4 ]; var spliceResult // 1, 2를 저장한다. = arrayData.splic.. 2018. 2. 5.
jQuery - 예약어 변경 하기 / $.noConflict() 제이쿼리 $ 대신 다른걸로 선언하기 오늘은 jQuery의 예약어를 바꾸는 방법을 알아보겠습니다. 예약어 - 시스템에서 미리 준비해놓은 명명규칙 jQuery의 선언은 아시다 시피 $ , jQuery 두가지가 예약어로 되어 있습니다. ▼아래 예제를 실행하면 1 2 3 4 5 6 7 8 9 10 11 12 jQuery( document ).ready(function() { alert('jQuery'); }); $(document).ready(function() { alert('$'); }); Colored by Color Scripter cs ▼화면과 같은 결과가 보입니다. 그런데 지금은 아무도 안쓰는 프로토타입도 예약어로 $가 되어 있습니다. 함께 쓰면 상당히 혼란스럽겠죠 그래서 jQuery에는 선언 에약어.. 2018. 1. 6.
JavaScript - input 박스에 숫자만 입력 가능하도록 inputbox validtion numbers only 오늘은 자바스크립트 유효성 체크중에 가장 많이 쓰이는 input 박스에 숫자만 입력 하는 방법을 알아보겠습니다. 개발 방법은 많지만 간단한 두가지 방법을 이용해서 구현 해보았습니다. 첫번째 인풋은 함수로 뺴서 숫자 keycode가 아니면 입력하지 못하도록 false를 주었고 12345function inNumber(){ if(event.keyCode57){ event.returnValue=false; }} cs 두번째 인풋은 정규식을 이용해 바로 input 박스에 인라인으로 작성하였습니다. 1 cs ▼ 아래 소스를 확인하시면 쉽게 이해가 가능하실 거라 생각 합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 functio.. 2018. 1. 1.
jQuery - 긴 텍스트 ... 으로 줄이기 / dotdotdot 긴 글 텍스트 축약하기 DIV에 긴 텍스트가 들어가면 크기가 조절이 되거나 일명 글자가 삐져나오죠 그래서 보통 몇 글자 이상이면 ...을 붙혀서 축약 시키도록 코딩을 합니다. 하지만 해당 기능 각 프론트 개발자마다 다르게 구현 해놓아 유지보수가 어렵습니다. 그래서 오늘은 긴 텍스틀 알아서 축약해주는 플러그인을 소개하겠습니다. ▼우선 참조 사이트는 아래입니다. nl을 보아 네덜란드 개발자인거 같은데 홈페이지 부터 매우 이쁘네요 자세한 레퍼런스는 해당 홈페이지에서 둘러보세요 http://dotdotdot.frebsite.nl/ 해당 사이트를 참고해 개발자 분들이 빠르게 익힐 수 있도록 익스프레스하게 예제를 만들어봤습니다. ▼jquery와 해당 dotdotdot.js를 참조하였습니다. 1 2 cs ▼우선 사용.. 2017. 12. 24.
JavaScript - 프론트에서 서버 시간 얻기 자바스크립트에서 서버 시간 가져오기 서버 시간을 가져오는건 당연히 서버 언어가 제공하는 기능을 사용하는게 정석입니다. 하지만 보안의 문제이거나 특별한 이유에서 프론트엔드로 서버시간을 제공해줄 수 없는 경우도 있습니다. 그래서 오늘은 자바스크립트에서 서버 시간을 가져오는 방법을 알아보려고 합니다. 하지만 프론트에서 서버시간을 얻는건 보안상 취약하기 때문에 가벼운 유효성 체크나 중요하지 않은 로직에 이용되는게 맞습니다. 예전 회사에서 해당방식으로 서버시간을 얻어 DB에 기록하는 방법의 대해 보안 취약점으로 지적했으나 무시하고 넘어가 결국 사고가 터진걸 봤네요.. ▼해당 URL에 공개된 소스가 제가 만들어놓은 소스보다 정리가 잘되어 있어 참조하여 대체 하겠습니다. https://stackoverflow.com.. 2017. 12. 22.
jQuery - 게시판 정렬하기 / Table sort 테이블 데이터 정렬 화면에 보이는 데이터를 정렬 하고 싶을때가 있습니다. (혹은 그런 기획이 오면 해야죠) ▼엑셀에 사용하는 그 기능 처럼요 하지만 웹에서는 DB에 order by 명령어를 받아 새로고침 하여 뿌리는 경우가 많아 느리기도 하고 굳이 서버를 다녀와야 할까 싶죠 그럴때 사용할수 있는 플로그인을 하나 소개 하겠습니다. ▼해당 사이트에 tabersorter 라는 플로그인 http://tablesorter.com/ 오늘은 해당 사이트에 나와 있는 내용을 익스프레스하게 압축하여 설명해보겠습니다. Jquery로 테이블에 있는 데이터를 거침없이 정렬 해봅시다. ▼jQuery와 tablesorter를 참조한다. ▼적용 하고 싶은 Table 속성에 .tablesorter() 추가한다. $(document).. 2017. 12. 5.

티스토리툴바