본문 바로가기

반응형
JAVASCRIPT & JQUERY
반응형
60

[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] 셀렉트 option AJAX로 가져오는 방법!! (영상 有) 안녕하세요. 오늘은 셀렉트 옵션값을 제이쿼리와 AJAX 비동기 통신을 이용하여 가져오는 방법을 정리해보겠습니다. 아래는 구현 화면입니다. AJAX를 통해 간단히 만들 수 있지만 제이쿼리 문법을 조금은 알아야합니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 *관람 선택 --선택-- 전시관 프로그램 *프로그램 선택 Colored by Color Scripter cs 여기서는 보통의 select태그의 형태입니다. 특이점은 이름값 resv_program_type인 select태그 (전시관/프로그램 선택 태그) 에 onchange 함수를 넣어서 클릭할때마다 함수가 작동할 수 있도록 합니다. 그리고 프로그램 선택 태그 tr에 display none처리하여 .. 2021. 11. 6.
[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.
[HTML&JQUERY&Java] 태그 추가 삭제 및 다중insert 기능!! (영상 有) 안녕하세요. 오늘은 태그를 추가하고 삭제하는 방법과 추가한 태그 값을 insert하는 방법을 정리해보았습니다. 구현 화면입니다. 여기서 중요한 것은 태그를 추가하거나 삭제할 때, 순번이 알맞게 유지되어야 한다는 점과, 태그 수가 어떻게 됬건 그 값을 서버에서 처리할 수 있도록 다중 처리하는 방법이 중요하겠네요! create.jsp (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 프로젝트명 STEP 1. Data import DATA import.. 2021. 10. 20.
[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.
[JSTL] fn함수 split을 이용한 특정 문자 기준 자르는 실전 방법!! 안녕하세요!!! 오늘은 데이터베이스에서 뽑은 데이터안에 특정 문자를 기준으로 데이터를 뽑는 방법을 정리해보겠습니다. JSTL에서의 함수중에 split이란 함수를 사용할겁니다! (split이란 단어 뜻대로 나뉘는 기능을 합니다) 제가 뽑고 싶은 데이터는 아래 화면에 있는 sr_eq_value란 컬럼 안에 있는 데이터입니다. 두 단어가 콤마(,) 사이를 두고 나눠져 있습니다.. 그래서 저는 콤마를 기준으로 데이터를 하나하나 뽑아보겠습니다!! 우선 HTML 가장 상단에 JSTL 함수선언을 합니다! 1 cs 일단 저의 코드를 소개해드리겠습니다. 저 같은 경우는, 숫자가 0으로 표시된 곳에 sr_eq_value의 값을 순차대로 적용하려 합니다. (split에 응용된 코드니 그냥 참고만 하시면 됩니다... spli.. 2021. 8. 25.
[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.
[JQuery] 쿠키로 아이디 저장하는 방법!! 쿠키로 아이디를 저장하고 아이디를 지우는 방법에 대해 포스팅해보겠습니다. 흔히 말하는 로그인할때 아이디저장 기능입니다. 보통 아래 화면처럼 되어있죠~ 아이디 저장하는 방법에는 여러가지가 있습니다. 서버에서 저장하는 방법도 있지만... 오늘 정리할 스크립트에서 쿠키를 설정하고 지우는 방법도 정리해보겠습니다. 요즘 가장 인기가 있는 JQUERY 를 이용해보았습니다 ㅎㅎ HTML 우선 HTML 소스입니다. 머 흔히 사용하는 로그인 폼이죠 여기서 중요한 것은 form 태그에 onsubmit을 통해서 action되기 전에 스크립트를 거치도록 해야합니다. 즉, 로그인 버튼을 누르면 onsubmit을 통해서 frm_check 함수를 거치고 서버로 이동하게 됩니다. 1 2 3 4 5 6 7 8 9 10 11 12 13.. 2021. 8. 7.
[Jquery] 마우스 hover 시, 확대 기능 방법!! 안녕하세요. 오늘은 이미지에 마우스 hover시, 이미지가 줌(확대)가 되는 기능에 대해 알아보겠습니다. 간단한 방법인데 구글링에서 구체적인 방법이 나오지 않는 것 같아 정리해서 올려봅니다. 제가 구현한 화면입니다. 이미지에 마우스를 올리면 자동으로 줌이 되면서 움직이며 내용을 확인할 수 있습니다. 우선 제이쿼리 사이트에가서 줌 기능에 대한 파일을 받아야합니다. 제이쿼리 사이트 : jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animati.. 2021. 4. 26.

티스토리툴바