IT/javascript
-
웹페이지(브라우저 탭)의 숨김,표시 javascript visibilitychange event(자바스크립트 이벤트) 처리IT/javascript 2022. 5. 27. 14:00
웹페이지 닫기시 특별한 처리를 위해서는 beforeunload, unload 이벤트를 사용한다. 그런데, 웹페이지를 보다가 다른 웹사이트를 사용자가 보러 갔을때 특별한 처리를 위해선 어떻게 해야할까? (다른 프로그램을 사용한다던가..) 예를 들어, 비디오 재생 중 사용자가 다른 웹페이지를 보고 있을때 비디오를 멈추고 싶다면? 아래와 같이 visibilitychange 이벤트로 구현이 가능하다. // 이벤트 이름과 이벤트 접근 프로퍼티 명 설정 var hidden, visibilityChange; if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support hidden = "hidden"; visib..
-
자바스크립트(javascript)로 html을 엑셀(excel) 다운로드 시키는 법IT/javascript 2022. 3. 25. 15:18
웹에서 엑셀로 다운로드 시켜주어야 할때가 있다. 보통 백엔드에서 처리해주는데, 현재 페이지에 있는 데이터들이라면, 자바스크립트로 구현이 가능하다. 없는 데이터라던가, 보안 등 특별한 사유가 아니면, 자바스크립트로 처리하는 것이 더 편한다. 단, table 로 작성해야며, 예시는 아래와 같다. var fileName = "테스트"; var sheeet_name = "test sheet"; var tab_text = ''; tab_text = tab_text + ''; //넣을 데이터 구성 tab_text = tab_text + "테스트"; tab_text = tab_text + final_text + ''; var data_type = 'data:application/vnd.ms-excel'; var ua..
-
Bootstrap popover content 에 table 넣기IT/javascript 2022. 1. 6. 07:31
bootstrap 4 에서 popover 에 table 콘텐츠 넣을면 적용이 되지 않는다. 이럴때 아래와 같이 설정 후 popover 를 적용하면 정상적으로 table 콘텐츠가 보여진다. $.fn.popover.Constructor.Default.whiteList.table = []; $.fn.popover.Constructor.Default.whiteList.th = []; $.fn.popover.Constructor.Default.whiteList.tr = []; $.fn.popover.Constructor.Default.whiteList.td = []; $.fn.popover.Constructor.Default.whiteList.div = []; $.fn.popover.Constructor.Defa..
-
Javascript Object(자바스크립트 오브젝트)를 쿼리 스트링(query string) 변환(파라미터 , parameter 변환)IT/javascript 2021. 11. 25. 09:30
자바스크립트 오브젝트를 Get 방식의 파라미터로 전송하고자 하는 경우 쿼리 스트링으로 변환하는 방법이다. const sendObject = { userName: '홍길동', cart: ['상품1','상품2','상품3'], etc: 'add', } const queryStr = new URLSearchParams(sendObject).toString(); console.log(queryStr); //userName=%ED%99%8D%EA%B8%B8%EB%8F%99&cart=%EC%83%81%ED%92%881%2C%EC%83%81%ED%92%882%2C%EC%83%81%ED%92%883&etc=add
-
모던브라우저(크롬,파이어폭스 등) console 사용 방법IT/javascript 2021. 11. 11. 10:20
웹 개발시 브라우저 개발자 도구로 디버깅을 많이 하며, 그 중 console.log() 가 대표적인 기능이다. 하지만, console 에는 더 많은 기능들이 있어서 정리해보았다. 이 문서에서는 개발자도구 언어를 한국어 설정으로, output 예시가 좀 어색한 부분도 있으니 참고하기 바란다. 변수명과 값을 같이 출력하기 :: console.log({ 변수 Or object }); /* 변수명과 값을 같이 출력하기 console.log({변수명}); */ var width = 100; var height = 200; console.log(width); console.log(height); console.log({width}); console.log({height}); // output: // 100 // 2..