코딩도 합니다/JS (94) 썸네일형 리스트형 [자바스크립트 js] 00시로 만들기 hh-mm, 월 혹은 일을 00으로 만들기, 월을 MM으로 만들기 (YYYY-MM-DD) 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트 시간 단위를 00시로 만드는 방법과 월을 00월로 만드는 방법에 대해 공유하겠습니다. 이 방법은 newDate를 쓰지 않은 방법이며, 맨 상단 이미지처럼 selectbox로 시간이나 월을 선택하도록 할 때 사용할 수 있는 내용입니다. 코드 따라하기 자바스크립트에서 for문을 돌려 하나씩 배열에 넣어주는 방법인데요. 월은 12월까지 있으니까 for문 돌릴 때 i < 13으로 하면 됩니다. 시는 12시가 최대라면 i < 13으로 하면 되고, 24시가 최대라면 i < 25로 돌리면 됩니다. 아래 내용으로 selectbox의 option을 만들어봤는데요. 이렇게 value와 label을 만들어 selectbox에 뿌려.. [자바스크립트 js] new Date()로 가져온 내용 YYYYMMDD 형식으로 날짜 보여주기 (예 :20220105) 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트로 날짜를 나타낼 때 'YYYYMMDD'형식으로 나타내는 방법에 대해 다뤄보겠습니다. 예를 들면, 202215(2022년 1월 5일)을 20220105로 나타내는 거죠. 주석에 설명들을 써놓을 테니, 주석을 참고하시면 코드가 더욱 쉽게 다가올 거예요! new Date()로 가져온 내용 YYYYMMDD 형식으로 변환하는 코드 let today = new Date(); let year = today.getFullYear(); // 년도 let month = today.getMonth() + 1; // 월 => +1 하는 이유는 월이 0부터 시작하기 때문 let date = today.getDate(); // 일 //.. [자바스크립트 js] dataTable 오류 / Cannot reinitialise DataTable A를 눌렀을 때 A의 dataTable이 담긴 모달을, B를 눌렀을 때 B의 dataTable이 담긴 모달을 열려고 할 때 A를 열고 닫은 후에 B를 열면 아래처럼 'Cannot reinitialise DataTable'라는 안내문구가 뜰 때가 있다. DataTables warning: table id=slave - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3 이럴 경우, destroy: true를 추가해주면 모달을 종료하고 열 때마다 각각의 데이터를 보여준다. moreVeiwTableBottom = $('#tblList3').DataTable({ ajax:.. [자바스크립트 js] dataTable data to string / 말줄임(...) 방법 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트 중에서도 제이쿼리로 '말줄임'하는 법에 대해 공유하려 합니다. 말줄임은 보통 한정된 공간에서 텍스트 내용이 너무 길어지면 사용하는데요. 예를 들어, 국민 포털 네이버에서 뉴스탭에 들어가보면 이런 모습을 볼 수 있죠. 빨간색 동그라미로 표시한 부분을 봐주세요. 표시된 부분이 '말줄임'을 사용한 거랍니다. 자, 그럼 말줄임 적용하는 코드를 보여드릴게요. api에서 data를 가져왔다고 가정한 코드입니다. 그리고 더 나아가, dataTable에서 data를 렌더링할 때 해당 코드를 보고 따라하시면 되는데요. 순서대로 설명을 해드릴게요. limit 라는 변수 안에 40을 할당합니다. 글자로 치면 40자가 되겠죠? 이번.. [자바스크립트 / js ] dataTable Modal Reset / 데이터테이블 모달 초기화 $("#preVideo").on("shown.bs.modal", function () { $('#tblList3>tbody').empty(); }); $("#preVideo").on("hidden.bs.modal", function () { $('#tblList3>tbody').empty(); }); [자바스크립트 / js ] 부트스트랩 모달 내용 초기화 / 모달 인풋 초기화 / 모달 셀렉트 초기화 / Bootstrap Modal Reset 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 제이쿼리나 자바스크립트로 작업할 때 자주 사용되는 부트스트랩 모달 초기화 방법에 대해 공유하겠습니다. 예를 들어, 모달 input에 내용을 입력하고 모달을 종료했다가 (혹은 셀렉트 박스에서 옵션을 선택하고 종료했다가) 모달을 다시 열었을 때 입력한 내용이 그대로 보이면 이 포스팅을 참고하여 해결하시기 바랍니다. 지금부터 가독성을 위해 문어체를 사용하여 작성할게요. 모달 초기화 부트스트랩으로 작업 시 사용하면 된다. 모달 종료 후에 다시 모달을 열었을 때, 데이터가 남아 있을 때 사용하면 된다. 아래 코드를 공통적으로 사용하는 js 파일에 입력해주기. // ______________모달 종료 시 입력값 초기화 $('.moda.. [자바스크립트 / JS] ajax 기다리는 동안 로딩화면 / ajax loading ajax 데이터 로딩 기다리는 동안 로딩화면 띄우기 공통적으로 사용하는 js에 아래 코드 입력. // ______________ AJAX 데이터 기다리는 동안 LOADING $(document).ajaxStart(function(){ console.log('ajax-start-------', ); $("#global-loader").show(); }).ajaxStop(function() { console.log('ajax-end-------', ); $("#global-loader").fadeOut("slow"); }); [자바스크립트 / js] alert 중복 실행 시 해결 방법 / ajax 중복 실행 시 해결 방법 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 자바스크립트/제이쿼리로 작업 중에 유용하게 사용되는 alert 중복 실행 방지하는 방법에 대해 공유하겠습니다. alert 중복 실행 시 해결 방법 .off() 사용하기 $("#saveOrder").off('click').click(function(){ if (data.responseJSON.data.length === 0) { alert('순서 저장할 영상이 없습니다. 영상을 등록해 주세요.') } else { console.log('순서 저장!!!') table.page.len(-1).draw() let ROW = $('#tblList tbody tr') console.log('ROW', ROW); let rowData .. [자바스크립트 js / 프로젝트7 ] 리스트 만들기 / localStorage html 알림 리스트 추가하기 등록 알림 등록된 내용 전체 삭제 css *{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: grid; grid-template-columns: 80%; justify-content: center; margin-top: 3rem; background: #fff9c7; } .addItems-container{ background: #ffffff; } .addItems-container, .displayItems-container{ margin: 1rem 0; padding: 2rem; border-radius: 0.5rem; text-align: center; box-shadow: 0 5px 10px #272..