728x90 자바스크립트24 자바스크립트 - 내 컴퓨터 GPU(그래픽 카드) 정보 가져오기(WebGL) var canvas = document.createElement('canvas'); var gl; var debugInfo; var vendor; var renderer; try { gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); } catch (e) { } if (gl) { debugInfo = gl.getExtension('WEBGL_debug_renderer_info'); vendor = gl.getParameter(debugInfo.UNMASKED_VENDOR_WEBGL); renderer = gl.getParameter(debugInfo.UNMASKED_RENDERER_WEBGL); } console.log(.. 2022. 10. 12. 자바스크립트 - Pure JavaScript HTML5 to (Animated) GIF Conversion HTML5를 GIF로 변환 시키는 라이브러리 https://github.com/antimatter15/jsgif/ GitHub - antimatter15/jsgif: Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS - GitHub - antimatter15/jsgif: Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS github.com 2022. 10. 12. 프론트엔드 - 한줄로 날라온 JavaScript 이쁘게 변환하는 사이트 https://codebeautify.org/javascript-pretty-print Javascript Pretty Print online Online JavaScript Pretty Print to pretty Javascript and Print JavaScript online. codebeautify.org 2022. 10. 12. 자바스크립트 - for in과 for of 차이점 생김새 var arr = [2, 5, 7, 9, 12]; // for in for(const item in arr){ console.log(item); } // for of for(const item of arr){ console.log(item) } 생김새는 이렇게 생겼습니다. 둘 다 너무 똑같이 생겨서 가끔 사용하려고 할 때마다 혼란이 생깁니다. 지금부터 이런 식으로 외우시면 됩니다. for in은 객체(키 값) 순환 for of은 배열 순환 참고로 상단 코드의 실행 결과는 이렇습니다. // for in 0 1 2 3 4 // for of 2 5 7 9 12 for of는 배열의 값을 순서대로 잘 출력하는 반면에 for in은 0, 1, 2, 3 같은 숫자의 순환을 반환합니다. 바로 눈치챈 사람도 있.. 2022. 7. 30. 자바스크립트 - map와 forEach의 차이점 Array.prototype.map() map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 시도해보기 Array.prototype.forEach() forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행합니다. 시도해보기 map 메서드와 forEach 메서드의 차이점 큰 차이점은 return 값을 반환하냐 안 하냐가 있습니다. const map1 = array1.map(x => x * 2); console.log(map1); // [2, 8, 18, 32] 우선 map 같은 경우는 콜백 함수의 실행 결과를 return을 그 결과들을 배열 형태로 변수에 저장합니다. array1.forEach(element => console.l.. 2022. 7. 30. 자바스크립트 - 사용자 고유의 프로필 사진(Identicon) 가끔 커뮤니티 사이트를 이용하다보면 위와 같은 형태의 사용자 프로필들을 확인할 수 있는데 이는 사용자의 고유한 번호로 만들어내는 사용자 식별 프로필 사진이다. 정확한 명칭은 Identicon임. 자바스크립트만을 사용해서 만들었다고 한다. 오픈소스이므로 직접 깃허브에서 다운해서 본인이 운영하는 사이트에다 적용해도된다. https://github.com/stewartlord/identicon.js GitHub - stewartlord/identicon.js: GitHub-style identicons as PNGs or SVGs in JS GitHub-style identicons as PNGs or SVGs in JS . Contribute to stewartlord/identicon.js developm.. 2022. 7. 21. 자바스크립트 - Web Notification API(윈도우 알람 기능) window.onload = function () { // 웹 페이지 로드 후에 알림 권한 확인 if (window.Notification) { Notification.requestPermission(); } } function notify() { if (Notification.permission !== 'granted') { alert('notification is disabled'); } else { var notification = new Notification('Notification title', { icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png', body: 'Notification text', }); notifica.. 2022. 6. 22. 자바스크립트 - alertBox function alertBox(msg, delay = 3000){ var container = document.createElement('div'); container.setAttribute('class', 'alertBox-container'); container.style.width = '100%'; container.style.height = '100px'; container.style.position = 'fixed'; container.style.bottom = '0'; container.style.display = 'flex'; container.style.justifyContent = 'center'; var box = document.createElement('div'); box.styl.. 2022. 4. 10. 자바스크립트 - localStorage에 클래스 변수 저장하기 localStorage.setItem('Todos', JSON.stringify(todosList)); if( localStorage.getItem('Todos') != null && localStorage.getItem('Todos') != undefined && localStorage.getItem('Todos') != '' && localStorage.getItem('Todos') != '[]' ){ todosList = JSON.parse( localStorage.getItem('Todos') ); } 2022. 2. 10. 자바스크립트 - canvas base64 데이터 추출 var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception. 출처: https://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl How To Save Canvas As An Image With canvas.toDataURL()? I'm currently building a HTML5 web app/Phonegap native app.. 2021. 12. 8. 자바스크립트 - html 스크린샷하기 html2canvas https://html2canvas.hertzen.com/ html2canvas - Screenshots with JavaScript Try out html2canvas Test out html2canvas by rendering the viewport from the current page. Capture html2canvas.hertzen.com 2021. 12. 8. 자바스크립트 - XMLHttpRequest 쿠키 값도 함께 보내기 https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials XMLHttpRequest.withCredentials - Web APIs | MDN The XMLHttpRequest.withCredentials property is a boolean value that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. Setting withCredentials has developer.mozi.. 2021. 11. 17. 이전 1 2 다음 728x90
HackLog
