개발하는 '정'/JS15 [JQUERY] onClick, onChange 동적 추가 및 삭제 jquery onClick, onChange 동적 추가 //추가 $("#tagName").on({ "change" : function() { //function }, "click" : function() { //function }, }); $("...").onChange({..}) 과 같이 따로 사용할 수도 있다. 삭제는 off를 쓴다. //삭제 $("#tagName").off("click"); $("#tagName").off("change"); 2024. 1. 20. javascript 현재 날짜 구하기 / 날짜 더하고 빼기 / date format (YYYY-mm-dd) javascript 현재 날짜 구하기 / 날짜 더하고 빼기 / date format (YYYY-mm-dd) javascript에는 date 객체의 포맷을 설정할 수 있는 함수가 없다. 그러므로 연/월/일을 각각 구해 계산한 후, 문자열 형태로 원하는 포맷처럼 나열하여 사용해야한다. 1. 현재 날짜 구하기 1) 현재 날짜 구하기 let date = new Date(); //Tue Oct 17 2023 09:41:29 GMT+0900 (한국 표준시) new Date를 사용하면 현재 날짜를 "Tue Oct 17 2023 09:41:29 GMT+0900 (한국 표준시)" 와 같이 구할 수 있다. 2) 연/월/일/시간/분/초 각각 구하기 let date = new Date(); console.log("date :.. 2023. 10. 17. jquery input 비밀번호 표시, 숨김 기능 구현 jquery input 비밀번호 표시, 숨김 기능 구현 아래와 같이 로그인이나 회원가입 시에 비밀번호를 표시하거나 숨기는 기능을 사용하곤 한다. input password를 사용하면 쉽게 처리할 수 있다. 1. type이 password인 input과 비밀번호 표시/숨김 버튼을 생성한다. 비밀번호 표시 이 때, 버튼 onClick에 비밀번호 표시/숨김 함수를 포함한다. 2. jquery로 비밀번호 표시/숨김 함수를 작성한다. function showPwd(e) { if ($(e).text() == "주민번호표시") { $("#pwd").attr('type','text'); $(e).text("주민번호숨김"); } else { $("#pwd").attr('type','password'); $(e).text.. 2023. 10. 12. 모달창에서 카카오지도API 잘림 현상 대처법 모달창에서 카카오지도API 잘림 오류 대처법 아래 사진과 같이, 동일한 소스여도 일반 HTML 페이지에서는 지도가 잘 보이지만, 모달창에서 불러올 때는 지도가 잘리는 경우가 있다. 원인은 호출 시점의 문제로, 동적으로 display나 크기가 바뀌거나 모달창 호출하는 등 변경이 생긴 경우에, 지도를 다시 호출해주어야한다. 카카오지도api에서 map을 다시 호출하는 함수는 map.relayout(); 에 해당한다. 아래는 예시이다. 지도열기 openModal로 모달창을 호출한 후, relayout 함수로 map을 다시 호출하는 예시이다. 만약 마커핀이 있거나, 중심점이 있는 경우에도 다시 재설정해주어야한다. 이 때는 setCenter(); 함수를 사용한다. function relayout() { map.re.. 2023. 10. 11. 자바스크립트로 카운트다운하기 자바스크립트로 카운트다운하기 1. 자바스크립트 function updateTimer() { const dday = Date.parse("2023/11/19 12:30:00"); const now = new Date(); const diff = dday - now; const day = Math.floor(diff/(1000 * 60 * 60 * 24)); const hour = Math.floor(diff/(1000 * 60 * 60)); const min = Math.floor(diff/(1000 * 60)); const sec = Math.floor(diff/1000); const d = days; const h = hour - day * 24; const m = min - hour * 60; con.. 2023. 10. 4. JQUERY 두 테이블 간에 <tr> 주고 받기 JQUERY 두 테이블 간에 주고 받기 테이블이 두개있을 때, 각 테이블끼리 tr을 주고 받는 기능을 jquery로 구현해보았다. tr 위치 이동은 1번 테이블의 tr을 2번 테이블로 이동시킨다는 의미로 사용하였다. * 예시 아래와 같이 구조가 동일한 테이블이 있다고 가정한다. 번호 이름 1 A 2 B 번호 이름 3 C 4 D jquery는 아래와 같이 구성된다. function moveItem(e, val) { var tbl1 = $(e).parents('table').attr('id'); var tbl2 = ''; if (tbl1 == 'table_A') tbl2 = 'table_B'; else tbl2 = 'table_A'; $('input[type="checkbox"]').prop('checked.. 2023. 8. 22. chart.js radar 차트 겹치는 경우 미표시 chart.js radar 차트 겹치는 경우 미표시 https://www.chartjs.org/docs/latest/samples/other-charts/radar-skip-points.html Radar skip points | Chart.js Last Updated: 11/14/2022, 11:17:20 PM www.chartjs.org var chartData = { type: 'radar', data: { labels: dataname.label, datasets: [{ label: 'A dataset', data: data_a, /// }, { label: 'B dataset', data: data_b, /// }] } } for (var i = 0; i < data_a.length; ++i) .. 2022. 11. 23. Chart.js 로 쉽게 그래프 그리기 +예제 무료 그래프 API를 찾다가 발견한 Chart.js 오픈소스이며, 디자인이 깔끔하고 문서 정리가 잘 되어있다. 무엇보다 이벤트, 애니메이션 등 다양한 커스터마이징이 가능해서 바로 가져왔다! Chart.js 공식 사이트 [https://www.chartjs.org/] Chart.js | Open source HTML5 Charts for your website New in 2.0 New chart axis types Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease. www.chartjs.org Chart.js는 막대그래프, 꺾은선 그래프는 물론 레이더, 버블 등 특별한 그래프도 지원.. 2022. 9. 20. [JQUERY] datalist 숨겨진 값 저장하기 / datalist data-value > JQUERY datalist 숨겨진 값 저장하기 / datalist data-value 1. HTML 숨겨진 값을 저장할 hidden 인풋을 생성해두고 실제로 노출되는 값을 value에, 숨겨놓을 값을 data-value에 작성한다. 2. JQUERY $(document).on('change', 'input', function(){ //모든 input 변경 감지 var options = $('datalist')[0].options; var val = $(this).val(); for (var i=0;i 2022. 9. 7. 이전 1 2 다음 반응형
