본문 바로가기

반응형
제이쿼리
반응형
20

[Jquery] input 실시간 감지 기능 (영상 有) 안녕하세요. 오늘은 제이쿼리를 이용하여 input칸의 실시간 감지 기능으로 작업을 정리해보았습니다. 저는 input칸의 숫자를 실시간으로 합계칸에 더해줄 예정입니다. 영상을 보시면, 각 연령대별로 input칸에 입력하면 합계에 자동 계산이 되어 나오게 됩니다. 간단하니 한번 정리해보죠! HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 *방문총인원 Colored by Color Scripter cs 여기서는 평범한 HTML 태그입니다. 하나 특징이 있다면 제이쿼리에서 ID값을 가져와서 사용할 예정이기에 ID값을 구분해서 넣어주셔야합니다. JQUERY 1 2 3 4 5 6 7 8 9 10 11.. 2021. 11. 17.
[Jquery] 유형별 유효성 검사&활용 사용방법!! 너무나 많이 쓰이는 제이쿼리의 유효성 검사를 유형별로 정리해보겠습니다. 유효성 검사 유형은 대표적으로 input, radio, select, checkbox가 있습니다. (계속계속 업데이트 진행중입니다!) 유효성 검사 input / textarea 1 2 3 4 5 6 7 8 9 10 11 if($("#아이디값").val() == ""){ alert("경고창입니다."); $("#아이디값").focus(); return false; } if($("input[name=이름값]").val() == ""){ alert("경고창입니다."); $("#아이디값").focus(); return false; } Colored by Color Scripter cs 아이다값과 이름값이 없는 경우 radio 1 2 3 4 5.. 2021. 11. 1.
[Jquery] 입력 그룹 값 계산 및 테이블 생성 방법!! (영상 有) 안녕하세요. 오늘은 제이쿼리를 이용하여 테이블의 입력 값의 합계를 계산하는 방법에 대해 정리해보겠습니다. 아래 화면과 같이 group의 입력값에 값을 넣은 뒤, 버튼을 누르면 AJAX로 summary라는 테이블에 입력한 값의 갯수가 출력 되도록 구현해 보았습니다. 모두 jsp파일에 있는 소스들이지만 HTML 과 SCRIPT 부분을 나누어 정리하겠습니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 NO.. 2021. 10. 12.
[JAVA] RSA 암호화 방식 적용 방법 공공기관 프로젝트 진행 도중, 로그인 이용 시에 민감 데이터.. 즉 계정 정보가 평문 전송된다는 지적을 받았습니다. 화면에서 서버로 데이터를 전송할때 데이터가 보여지기에 보안 취약점으로 지적을 받은 겁니다... 확실히 일반 프로젝트에 비해서 공공기간 프로젝트가 여러 심의를 거치는 듯 했습니다. 아래는 'wireshark'라는 프로그램으로 패킷(데이터) 분석이 가능한 프로그램입니다. 이 프로그램으로 확인해 봤더니 정말 아이디랑 패스워드가 나타나더라구요... 정말 깜짝 놀랬습니다...ㅜㅜ 그리고 아래와 같이 조치 권고 사항으로 '통신 암호화 적용' 적용하라는 문구까지 친절히 설명되어 있습니다...... 항상 느끼는 것이지만 프로젝트는 끝나도 끝이 아니네요 ㅜㅜ (2차 인증 OTP 구현방법을 확인하시려면 클릭.. 2021. 9. 2.
[Javascript] SNS 공유 방법!! (카카오톡,페북,트윗,밴드) 안녕하세요. 오늘은 스크립트를 이용하여 SNS (페이스북, 트위터, 밴드, 카카오톡) 연동하는 방법에 대해 이야기해보겠습니다. 흔히 페이지에 많이 사용이 되고, 저 또한 클라이언트에서 직접적으로 문의를 받아 기능을 제작하였습니다. 카카오톡은 별도로 API 키를 발급해야 이용이 가능하기 때문에 두개의 파트로 정리하겠습니다. 페이스북, 트위터, 밴드 SNS 공유 방법 위 3개의 SNS 공유 방법은 의뢰로 간단합니다. 우선 HTML 태그를 만들어야겠죠! ul에 li 형식의 태그를 만들어줍니다. 그리고 각각의 함수를 탈 수 있도록 onclick에 함수명에 이름(facebook, twitter 등)을 넣어줍니다. 1 2 3 4 5 6 7 8 9 10 11 페이스북 트위터 네이버밴드 Colored by Color .. 2021. 8. 13.
[JavaScript] Uncaught SyntaxError: missing ) after argument list 오류해결방법!! 오늘도 자바스크립트 작업중 어김없이 오류가 발생하였습니다. Uncaught SyntaxError: missing ) after argument list 우선적으론 Uncaught SyntaxError: missing ) after argument list라는 오류가 발생했습니다. 자바스크립트에서 발생한 오류로 onclick에서 String 파라미터를 넘겨야하는데 못넘겨서 발생한 오류입니다. 아래 코드로 설명하겠습니다. 저의 경우를 보면 onclick 안에 adresMove란 함수가 있고 안에 String형태의 파라미터가 있지만 따움표로 감싸주지 않아 발생한 에러입니다. 1 content += ''; cs 그래서 아래와 같이 따움표로 감싸주었지만 다시 에러가 발생합니다. Uncaught SyntaxErro.. 2021. 7. 16.
[정규식] input숫자만입력&콤마적용 방법!! 안녕하세요. 오늘은 정규식에서 input창에 숫자만 적히면서 콤마를 붙일수도, 안 붙일수도 있는 정규식을 이야기해보겠습니다. JQUERY 우선 자바스크립트에 함수를 4개 만들어줍니다. 콤마붙이는 함수 / function comma(str) 콤마를 때는 함수 / function uncomma(str) 숫자만 사용할 수 있는 함수 (+콤마) / function inputNumberFormat(obj) 숫자만 사용할 수 있는 함수 (콤마 X) / function inputOnlyNumberFormat(obj) HTML 그리고 HTML에서 input칸에 속성을 넣어줍니다. 아무래도 숫자를 쓰는 칸이기에 무한대로 쓰고 submit을 하면 에러가 나기 십상입니다. 이럴땐 maxlength를 사용하여 입력되는 숫자를.. 2021. 3. 25.
amCharts] am차트 사용 방법!! (feat.데이터연동) 안녕하세요. 오늘은 am차트에 대해 이야기해보겠습니다. am차트를 사용하여 데이터까지 연동하는 형태로 정리하려 합니다. 완성형태입니다. 꽤 깔끔한 디자인입니다. 우선 am차트 사이트로 접속합니다. amCharts = www.amcharts.com/ JavaScript Charts & Maps - amCharts JavaScript / HTML5 charts and maps data-viz libraries for web sites and applications. Fast and responsive. WordPress plugin available. Developed since 2006. www.amcharts.com 차트 홈페이지답게 차트스러운 화면이 나옵니다. 여기서 데모를 클릭해줍니다. 엄청나게 많은.. 2021. 2. 9.
[JQuery] 핸드폰번호 정규식 하이픈 추가 방법 데이터베이스에서 뷰로 나타낼때 데이터베이스에 저장되어 있는 휴대번호 값이 '01068795421' 이라면 '010-6879-5421' 로 하이픈을 넣어 화면에 보여줄 계획입니다. 더블어, 전화번호 정규식처럼 비슷하게 사용되는 여러가지 정규식을 정리해보았으니 참조해주세요~ (비밀번호, 이메일, 일반전화번호) 데이터베이스 값 : 01068795421 정규식을 통한 하이픈 추가 값 : 010-6879-5421 HTML 여기서는 일반적인테이블 형태입니다. 주목할 점은 td에 id값을 넣어주어 제이쿼리 값이 들어갈 수 있도록 합니다. 1 2 3 4 5 6 7 8 9 10 11 12 연락처 cs JQuery 그리고 test변수에 디비값을 넣어줍니다. testDate함수에서는 replace를 사용하여 test변수 뒤.. 2020. 12. 30.

티스토리툴바