javascript25 jQuery - 제이쿼리로 QR코드 만들기 jquery QRcode 오늘은 QR코드를 만들어 볼려고 합니다. 바코드 자체도 훌륭하지만 보통 숫자만 쓸 수 있고 영어까지 포함한 바코드 체계를 쓰면 양 옆으로 너무 길어지는 형상이 있습니다. 그래서 나온게 3차원 바코드 QR코드죠 7089글자가 인식 가능하니 사실상 현재로는 가능한 충분한 데이터를 그 작은 네모안에 표현할 수 있습니다. 그래서 오늘은 QR코드를 jquery로 만드는 방법을 알아보려고 합니다. ▼개발자 사이트는 아래와 같습니다. http://jeromeetienne.github.io/jquery-qrcode/ 우리 익스프레스 강의를 들어온 개발자 분들에게 간단한 예제릴 만들어 봤습니다. ▼ 아래 파일을 모두 다운로드 해서 gocoder_qrcode.html를 실행시켜보면 됩니다. ▼ 소.. 2017. 12. 2. jQuery | Plugin - select 박스 검색 가능하게 검색 가능한 select 박스 셀렉트 박스의 옵션이 많아지면 스크롤 길이도 어마 어마 하고 불편합니다.오름순으로 정렬 하여 데이터를 나열하면 되지만.우리의 클라이언트들은 참을성이 많지가 않습니다. 그래서 오늘은 아주 쓸만한 컴포넌트를 준비했습니다.select2 라는 jquery 플러그인이다.아래 홈페이지에서 자세한 정보를 찾아보자.https://select2.org/ 하지만 익스프레스하게 알려드리기 위해아주 기초적이고 간단하게 코딩을 해보았습니다. ▼우선 아래처럼select2.css , select2.js를 참조 시키자 그리고 jquery는 기본12cs ▼참고로 jquery 참조 URL은 외웁시다.1cs http://code.jquery.com/jquery.min.jshttp://code.jquery.c.. 2017. 11. 2. Javascript - 아이폰,안드로이드 기기 체크 자바스크립트로 아이폰 체크하기 이젠 아이폰 점유율이 절반 가까운 이 시점에윈도우와 안드로이드만을 두고 개발하는 시대가 끝난거 같습니다. 간단한 예로 어플도 아이폰과 안드로이드 두개를 만들어놓고접속하는 기기단말을 보고 분기하여 안드로이드일땐 플레이 스토어 어플로아이폰일땐 아이툰즈 어플로 링크를 보내줘야 할것 입니다. 그래서 오늘은 이 체크하는 방법을 아래처럼 다뤄봤다. navigator : 브라우저 전반에 걸친 정보를 제공하는 객체이다.platform : 브라우저를 실행하는 플랫폼 (기기) 가 무엇인지 말해준다. 아래처럼 아주 간단하게 코딩이 완성 되었습니다.그밖에도 navigator 객체를 이용하여 클라이언트의 접속 환경을 알아낼 수 있습니다. var UserAgent = navigator.platfor.. 2017. 11. 2. jQuery - 바코드(barcode) 만들기 자바스크립트로 바코드 만들기 간단하게 스크립트로 바코드를 만들수 있는 방법이다. ▼해당 사이트를 참조하였다. http://barcode-coder.com/en/barcode-jquery-plugin-201.html ▼아래는 해당 URL을 보고 만든 샘플 아래 소스를 갖다 써도 되고 아래 파일을 다운받아 한폴더에서 실행하면 충분한 레퍼런스가 될거라 생각됩니다. $("#bcTarget").barcode("1234567890128", "codabar"); // 바코드 타입 // codabar // code11 (code 11) // code39 (code 39) // code93 (code 93) // code128 (code 128) // ean8 (ean 8) // ean13 (ean 13) // std2.. 2017. 9. 4. JavaScript - select 박스의 option value, text 가져오기 셀렉트 박스의 옵션 값과 텍스트 값 가져오기 셀렉트 박스를 다룰 때 간단하지만 자주 찾고 자주 까먹는 방법입니다. options[target.selectedIndex].text : 셀렉트 박스 옵션 사이에 있는 텍스트 값을 가져온다options[target.selectedIndex].value : 셀렉트 박스 value 의 값을 가져온다. ▼ 아래처럼 하면은 셀렉트박스의 text 값과 value 값을 가져오는 방법이 됩니다. A B C var target = document.getElementById("selectBox"); alert('선택된 옵션 text 값=' + target.options[target.selectedIndex].text); // 옵션 text 값 alert('선택된 옵션 value.. 2017. 8. 31. JavaScript - select readonly 적용 셀렉트 박스 값 변경하지 못하게 하기 (readonly) select박스는 알다시피 readonly가 먹지가 않습니다.그렇다고 disabled 를 하면 post로 넘어온 값을 받을 수 없습니다.disabled로 인해 얼어 버린 select 박스는 고객 입장에서는 문제가 생겼나라는 생각이 듭니다. 그래서 오늘은 select box의 readonly 효과를 흉내내는 방법을 구현해봤다. ▼아래와 같이 onFocus와 onChange를 이용해Readonly 와 같은 효과를 낼 수 있다. 1 2 3 ▼다른 값을 선택한다고 해도 최초의 selected 된것을 하면 기존의 값 그대로 다시 선택 된다. 마무리가을이네요^^ 취미가 있으신가요? 일도 좋지만 재밌어 하는것에도 미쳐보세요 2017. 8. 30. Javascript - 자바스크립트 암호화, 압축하기 / packer 패커로 자바스크립트 암호화, 압축하기 .js는 공개되어 있다. HTML을 동적으로 만들어주는 역할을 하는 프론트 언어이기 때문입니다. 공개 되어 있다는건 노출되어 있고 누구나 열어 볼 수 있습니다. 보안의 취약점을 만들어 낼 수 있습니다. http://dean.edwards.name/packer/딘 에드워드라는 사람이 개발한 자바크립트 압축 프로그램입니다. 큰 기업에서는 이런 컴포넌트를 직접 개발해 쓰겠고 nodejs로 압축하겠지만소기업이나 개인에게는 이렇게 무료로 제공되는 모듈이 효율적일 수 있겠습니다. 사용법은 아주 간단합니다.체크하면 해당에 맞게 자바스크립트가 화면에서 바로 저런식으로 output이 됩니다. Base62 encode : 암호화 - 자바스크립트를 확인 할 수 없게 암호화 합니다. Sh.. 2017. 8. 30. 이전 1 2 3 다음
