본문 바로가기

반응형
JavaScript
반응형
11

[jQuery] onkeyup을 통한 실시간 Replace방법! (숫자만/특정문자만/영상有) 안녕하세요. 오늘은 onkeyup을 통해 숫자만 또는 특정 문자만 입력하여 실시간으로 유효성 검사할 수 있는, Replace방법에 대해 알아보겠습니다. 영상을 준비했으니 영상을 보시죠~~~ 참고로 onkeyup은 사용자가 키보드의 키를 눌렀다가 땠을때 발생하는 이벤트입니다! 단위수는 오로지 숫자만 감지할 수 있도록 설정하였으며, 성취도는 A,B,C만 입력될 수 있도록 설정하였습니다. 숫자 replace 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function checkNum(objEv){ var numPattern = /([^0-9])/; var v = objEv.value; numPattern = v.match(numPattern).. 2021. 12. 8.
[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.
[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.
[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] 로딩창 설정 방법 (+LoadingOverlay사용법)(영상 有) 안녕하세요. 오늘은 프로젝트에서 로딩시에 화면을 나타내는 로딩 페이지를 이야기해보겠습니다. 스크립트 함수나 AJAX 사용 시, 로딩시간이 있는 경우, 사용자 입장에서 화면이 움직이지 않을 경우 문제가 있다고 생각할 수도 있기 때문에 코드가 도는동안 화면에 로딩이라는 표시를 해줘야합니다. 제가 만든 프로젝트를 예를 들어보겠습니다. (2021년 8월 25일 하단에 LoadingOverlay plugin 사용방법을 추가하였습니다.) 박스안에 정보를 클릭을하면 함수가 돌아가는데 정보량이 많다보니 시간이 좀 걸립니다.. 그래서 아래와 같은 로딩창이 필요한 이유입니다. 크게 로딩실행함수와 종료함수 두가지로 나뉩니다. 로딩실행함수 해석하자면 문서의 높이와 바디부분의 넓이를 변수에 담습니다. 그리고 mask에 로딩창의.. 2021. 6. 2.
[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.
[Jquery&Javascript] 페이지 URL 복사 방법!! 안녕하세요 오늘은 스프링에서 제위쿼리를 이용한 URL주소 복사 (클립보드) 사용 방법에 대해 알아보겠습니다. HTML에서 버튼 생성과 스크립트에서 코드 몇줄이면 간단히 만들 수 있습니다. HTML a태그를 통해 onclick으로 함수를 호출합니다. 저는 URL주소복사란 이름의 버튼을 A태그를 통해 만들 예정입니다. URL주소복사 JAVASCRIPT a태그에서 호출한 함수인 clip을 작성해줍니다. url을 변수로 만들고 textarea라는 변수에 textarea의 요소를 생성해줍니다. 이 것을 body의 가장 아래, 즉 바로 위에 textarea를 추가해줍니다. (임시 공간이기 때문에 위치는 상관이 없습니다.) url에는 현재 주소값을 넣어줍니다. textarea 값에 url를 넣어주고, textarea.. 2021. 4. 8.
[Java&Javascript] 데이터베이스 숫자 값을 콤마 붙여 가져오고 빼서 내보내는 방법!! (2021년 5월 20일 자바 방법을 추가하였습니다.) 안녕하세요. 오늘은 데이터베이스에 있는 숫자데이터를 콤마 붙여서 사용하고 빼내서 다시 데이터베이스에 넣는 방법에 대해 알아보겠습니다. 데이터베이스에 콤마가 아닌 상태에서 콤마 데이터가 넘어가면 오류가 발생하기 때문에 빈번히 사용됩니다. 아래와 같이 데이터베이스에 숫자값이 있습니다. 이것을 콤마 찍히게 html상에서 보여줘야합니다. HTML input 칸을 만들어줍니다. id값과 name값을 넣어줍니다.. 원 Javascript 데이터베이스 콤마 붙여 가져오는 방법과 내보내는 방법을 나눠하겠습니다. 데이터베이스로부터 콤마 붙여 가져오는 방법 script 스크립트 안에 getMoneyFormat 함수를 작성합니다. 이 함수안에는 콤마를 붙이는 정규식이 .. 2021. 2. 24.

티스토리툴바