반응형 IT/자바스크립트10 자바스크립트 IndexedDB 코드 IndexedDB는 서버가 아닌 클라이언트 측(웹 브라우저)에 데이터를 저장할 수 있는 기술이다. 많은 양의 데이터를 영구적으로 저장 할 수 있으며, 비동기식으로 key - value 객체(Object) 형태로 데이터를 저장하게 된다.(※ 참고: IndexedDB의 용량 제한은 하드디스크(HDD)의 50% 이다.)# 데이터베이스(DB) 생성# 객체 저장소(Object Store) 생성 (여러개의 객체 저장소 생성 가능)let DB;let DB_VERSION = 1; // 데이터베이스 버전.let DB_NAME = 'INDEXED_DB'; // 데이터베이스 이름.let OBJECT_STORE_NAME = 'OBJECT_STORE'; // 객체 저장소 이름.// 데이터베이스 생성.let CREATE_DB.. 2024. 4. 29. 자바스크립트 "모바일 스와이프" 기능 코드 let swipeWidth = 75; //스와이프 간격 설정let touchstartX = 0;let touchDeltaX = 0;document.addEventListener('touchstart', function(e){ touchstartX = e.targetTouches[0].pageX; document.addEventListener('touchmove', function(e){ touchDeltaX = e.targetTouches[0].pageX - touchstartX; });})document.addEventListener('touchend', function(){ if(Math.abs(touchDeltaX)>=swipeWidth){ if(.. 2024. 4. 29. HTML 데이터 속성(data-)에서 JSON 사용하기 HTML 데이터 속성(data-)에서 JSON을 사용하려면 아래와 같은 코드를 사용하면 된다. ※ 주의할 점은 HTML 데이터 속성(data-)값의 바깥 영역을 작은 따옴표( ' )로 감싸고, JSON 데이터의 key값과 value값을 큰 따옴표( " )로 감싸 주어야 한다. 그리고 JSON 데이터의 마지막에는 콤마/쉼표( , )를 찍지 않는다. 꼭 아래와 같은 JSON 코드 형식에 맞게 작성해 주어야만 에러 없이 자바스크립트에서 JSON 파싱이 가능하다. 2024. 4. 29. 자바스크립트 MutationObserver MutationObserver API는 DOM 요소의 "속성", "텍스트", "자식 노드"가 변경 되었는지를 감시하는 API 이다.[MutationObserver 옵션]subtree: 대상(target) 노드만 관찰 할건지.. 하위 모든 자식 요소들도 관찰할건지 여부 (true, false)childList: 자식 노드가 변경 및 추가, 제거 되었는지 관찰 여부 (true, false)characterData: 텍스트 노드가 변경되었는지 관찰 여부 (true, false)characterDataOldValue: 텍스트가 변경되기 이전의 값을 가져올건지 여부 (true, false)attributes: 속성값이 변경 되었는지 관찰 여부 (true, false)attributeFilter: 특정 속성만.. 2024. 4. 29. 자바스크립트 localStorage 로컬스토리지(localStorage)는 웹 브라우저에 데이터값을 반영구적으로 저장할수 있는 기능이다. 웹브라우저가 종료 되어도 데이터값이 그데로 유지가 되며 최대 5MB까지 저장 가능하다. [데이터 저장]localStorage.key값 = "value값";localStorage["key값"] = "value값";localStorage.setItem("key값", "value값"); [데이터 불러오기]let value = localStorage.key값;let value = localStorage["key값"];let value = localStorage.getItem("key값"); [데이터 삭제]localStorage.removeItem("key값"); [모든 데이터 삭제]localStorage.cle.. 2024. 4. 29. 자바스크립트 setInterval, clearInterval setInterval 함수는 설정된 시간마다 계속 반복 되는 함수이다. let interval = setInterval(function(){ // 실행 코드 작성 (1000 == 1초 마다 실행) }, 1000); setInterval 함수 실행를 중단 하려면 clearInterval를 실행하면 된다.clearInterval(interval); 2024. 4. 29. 자바스크립트 setTimeout, clearTimeout setTimeout 함수는 설정된 시간이 경과되면 단 한번만 실행 되는 함수이다.let setTime = setTimeout(function(){ //실행 코드 작성 (3000 == 3초 뒤에 실행)}, 3000); setTimeout 함수 실행을 (중간에) 취소하려면 clearTimeout 을 실행하면 된다.clearTimeout(setTime);[jQuery 코드]$(document).delay(3000).queue(function(next){ //실행 코드 작성 (3000 == 3초 뒤에 실행) next(); }); 2024. 4. 29. 자바스크립트 matchMedia matchMedia는 "CSS 미디어쿼리"와 마찬가지로 웹 브라우저의 특정 화면 크기를 감지할 수 있는 코드 입니다. let mediaQuery = window.matchMedia("(max-width: 720px)");mediaQuery.addListener(mediaQueryAction);mediaQueryAction(mediaQuery);function mediaQueryAction(mq){ if(mq.matches){ //720px 이하 }else{ //720px 이상 }} 2024. 4. 29. 자바스크립트 Resize Event Resize Event는 "웹 브라우저" 화면 크기가 변경될 때 실행되는 이벤트이며, 주로 반응형 웹을 제작할 때 사용 됩니다.let resizeEvent= null;window.addEventListener("resize", function(){ clearTimeout(resizeEvent); resizeEvent = setTimeout(resizeEnd, 300); // 0.3초 뒤에 실행});function resizeEnd(){ //실행 코드 작성 let width = document.body.clientWidth; console.log(width);} [jQuery 코드]$(window).resize(function(){ if(this.resizeTO){ clear.. 2024. 4. 29. 자바스크립트 Multiple Click Event # Multiple Click Event그룹화 된 요소에 "클릭 이벤트(addEventListener)"를 하나 하나씩 적용한 것 보다 forEach 문을 활용하면 좀 더 간결한 코드로 작성할 수 있다. 버튼0 버튼1 버튼2 [jQuery 코드]$('.btn-group button').click(function(){ var index = $(this).index(); switch(index){ case 0: break; case 1: break; case 2: break; } }); 2024. 4. 29. 이전 1 다음 반응형
