반응형 JAVASCRIPT & JQUERY 반응형 60 [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. [정규식] 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. [Jquery] selectbox & radio 선택 유지하는 방법 안녕하세요. 오늘은 삼항조건연산자를 통해 selectbox&radio 선택 유지 방법에 대해 이야기해보겠습니다. 조건부 삼항 연사자란, JavaScript에서 세 개의 피 연산자를 취할 수 있는 유일한 연산자 입니다. 이렇게 정의하니 저도 모르겠군요... 코드를 보면서 설명해보겠습니다. 삼항연산자 식은 이렇습니다. (조건) ? (참일 때 실행할 코드) : (거짓일 때 실행할 코드); 실제에 응용한다면.. 보통의 select문에서 항목중에 선택을 하게 되면 VO안에 담기게 되죠. 아래 문구를 해석하면 1 $("select[name=road_x1]").val((("${searchVO.road_x1}" == '') ? "" : "${searchVO.road_x1}")).prop("selected", true).. 2021. 3. 24. [Java&Javascript] 데이터베이스 숫자 값을 콤마 붙여 가져오고 빼서 내보내는 방법!! (2021년 5월 20일 자바 방법을 추가하였습니다.) 안녕하세요. 오늘은 데이터베이스에 있는 숫자데이터를 콤마 붙여서 사용하고 빼내서 다시 데이터베이스에 넣는 방법에 대해 알아보겠습니다. 데이터베이스에 콤마가 아닌 상태에서 콤마 데이터가 넘어가면 오류가 발생하기 때문에 빈번히 사용됩니다. 아래와 같이 데이터베이스에 숫자값이 있습니다. 이것을 콤마 찍히게 html상에서 보여줘야합니다. HTML input 칸을 만들어줍니다. id값과 name값을 넣어줍니다.. 원 Javascript 데이터베이스 콤마 붙여 가져오는 방법과 내보내는 방법을 나눠하겠습니다. 데이터베이스로부터 콤마 붙여 가져오는 방법 script 스크립트 안에 getMoneyFormat 함수를 작성합니다. 이 함수안에는 콤마를 붙이는 정규식이 .. 2021. 2. 24. 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] 현재날짜와 다음달날짜 구하는방법 (feat.포맷변경/체크박스) 안녕하세요. 오늘은 제이쿼리에서 날짜포맷을 변경하여 원하는태그에 값을 넣어주는 방법에 대해 알아보겠습니다. 저는 특정한 체크박스를 누르면 제이쿼리에서 계산한 날짜가 들어갈 수 있도록 하였습니다. 여기서 만료예정 버튼을 누르면 사진과 같이 제가 계산한 날짜와 포맷에 맞추어 값이 들어갑니다. 저는 현재일과 다음달 날짜를 계산하였고 포맷도 yyyy-mm-dd 형태로 설정하였습니다. HTML 디자인과 상관없이 코드분석만 하기 때문에 쓸때없는 코드는 다 빼고 핵심적인 부분만 넣겠습니다. 처음 input칸의 id값인 searchCoSdate, 두번째 input칸의 id값인 searchCoEdate, 세번째 checkbox칸의 id값 expiry와 value="Y", 그리고 함수 dateFigure();가 포인트입니.. 2021. 2. 3. [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. [JQuery]URL 정규표현식 및 유효성검사 방법 안녕하세요. 오늘은 URL만을 입력할 수 있는 정규식표현과 이에따른 유효성검사를 알아보겠습니다. 우선 정규표현식이란 문자열의 특정 패턴을 찾고, 찾은 패턴을 가지고 추출, 삭제, 치환 등 문자열을 컨트롤 할 수 있는 표현식이라 할 수 있습니다. 또한 유효성검사란 이름의 셀 값을 사용자가 지정한 포맷에 맞는지 자동으로 확인해주는 기능입니다. 저는 url만을 입력해주는 칸이 필요해서 만들어보았습니다. URL주소를 입력할 경우 등록하시겠습니까란 알림창이나오고 잘못입력할 경우 경고 알람창이 뜨도록 하였습니다. HTML 입력할 수 있도록 input을 생성하고 등록버튼과 취소버튼을 생성합니다. 등록버튼에 onclick으로 함수를 넣어 유효성검사를 할 수 있도록 합니다. 1 2 3 4 5 6 7 8 9 10 11 1.. 2020. 12. 29. [Jquery]체크박스 전체선택 및 전체해제 또는 특정선택 제어기능 안녕하세요. 오늘은 체크박스 관련된 제이쿼리를 소개하려합니다. 아래 사진과 같이 전체를 선택하면 전부 선택하는 기능은 화면상으로 복잡할 여지가 있습니다. 해서, 복수로 선택하되, 전체를 눌렀을 경우 모두 해제되고 ‘전체’만 선택될 수 있도록 하는 제이쿼리를 정리해보려 합니다. 번외로 특정선택을 할 수 있는 제어기능도 정리하려 합니다. Jsp 1 2 3 4 5 전체 테스트1 테스트2 테스트3 테스트4 cs 우선 jsp에서는 input type에 체크박스를 넣어 체크박스 형태를 만들어줍니다. 문을 통해서 특정 값일 경우 checked를 할 수 있도록 합니다. Onclick 함수 기능은 아래에서 별도로 소개하겠습니다. Jquery 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18.. 2020. 12. 22. 이전 1 2 3 4 5 6 7 다음
