DEV/javascript
-
Javascript Data 속성(Data Attribute) 값으로 요소(Element) 찾기DEV/javascript 2022. 11. 29. 10:00
Javascript 의 Data 속성값(Data Attribute Value)로 HTML의 요소(Element)를 찾아야 하는 경우가 존재한다. querySelector를 이용하여 찾을 수 있다. (querySelector는 해당 첫 요소를, querySelectorAll은 모든 요소를 가져온다.) // Javascript 방식 // "data-test" 속성이 "test-button" 인 값을 불러온다. // (*아래 예시는 selectAll이라 모두 가져온다. 한 값만 가져오는 경우 querySelector 사용) document.querySelectorAll('[data-test="test-button"]');
-
jQuery ajax 사용 예시 (jQuery를 이용한...)DEV/javascript 2022. 11. 23. 15:02
jQuery를 이용한 ajax를 사용해 보았다. $.ajax({ headers: { "Content-Type": "application/json;charset=UTF-8", "Authorization": 토큰값 등... }, url: 사용할 URL..., type: 'GET',// 'GET', 'POST' 등... async: true,// 동기 - 비동기 여부. false : 다음 코드로 안넘어감, true : 다음으로 넘김 success: function (data) { // 성공 후 동작 console.log("DATA : ", data); } }); jQuery 사용법 https://seokbong.tistory.com/9 jQuery 다운로드 및 사용 방법 성격 급한 사람들을 위한 CDN ( C..
-
Javascript 클립보드에 문자열 저장하기(복사)DEV/javascript 2022. 11. 14. 10:31
Javascript에서 클립보드에 문자열을 복사(ctrl + c)해야 하는 경우 다음과 같이 사용이 가능하다. 붙여넣기는 당연히 ctrl + v 이다. /** * [클립보드에 저장] * - 해당 데이터를 복사합니다. * @param {String} data */ const copyToClipBoard = (data) => { window.navigator.clipboard.writeText(data).then(() => { console.log(`copied to clipboard : ${data}`); }); } + 예외처리 function copyToClipboard(text) { // Clipboard API를 지원하는지 확인 if (navigator.clipboard) { // 텍스트를 클립보드에..
-
Javascript 커스텀 로딩(Custom Modal Loading)DEV/javascript 2022. 10. 31. 17:33
중국 개발자가 만든 커스텀 로딩(모달 로딩) 이다. 단순하게 로딩만 사용하고 싶다면 최하단 Custom Loading (Modal)에 있는 js와 css로만 구성하면 된다. 사용은 다음과 같이 사용. test.js // Loading 시작 let loading = new Loading(); // 아래 옵션변경과 함께 사용 가능 // let loading = new Loading(getLoadingSet()); // Loading 종료 loading.out(); /****************************************************** * 로딩 설정값 반환 (옵션 변경) * @param {string} title **************************************..