본문 바로가기

Tried. Failed. Logged.

728x90

🖥️프론트엔드/HTML | CSS | JAVASCRIPT28

자바스크립트 - text to speech(text2speech)(SpeechSynthesisUtterance) function say(m) { var msg = new SpeechSynthesisUtterance(); var voices = window.speechSynthesis.getVoices(); msg.voice = voices[10]; msg.voiceURI = "native"; msg.volume = 1; msg.rate = 1; msg.pitch = 0.8; msg.text = m; msg.lang = 'en-US'; speechSynthesis.speak(msg); } 출처: https://stackoverflow.com/questions/15653145/using-google-text-to-speech-in-javascript Using Google Text-To-Speech in Javascr.. 2022. 11. 5.

자바스크립트 - 내 컴퓨터 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.

html - debugger(개발자 도구 방지) 비활성화 https://janger.tistory.com/222 html - 개발자 도구 막기(사용하기 힘들게) (function () { (function a() { try { (function b(i) { if (('' + (i / i)).length !== 1 || i % 20 === 0) { (function () { }).constructor('debugger')() } else { debugger } b(++i) } )(0) } catch (e) { s.. janger.tistory.com (function anonymous( ) { debugger }) 위 같은 개발자 도구를 막으려고 일부로 debugger로 브레이크 포인트를 주는 스크립트가 존재할 경우 개발자 도구에서 Sources 탭에 들어간 다.. 2022. 8. 16.

CSS - 인라인 코드 블럭 대충 이런것입니다. /* 인라인 코드 블럭 */ code { padding: 0.25rem; background-color: #F1F1F1; border-radius: 5px; box-shadow: 0.25px 0.25px 10px rgb(156, 156, 156); font-family: "Consolas", "Sans Mono", "Courier", "monospace"; font-size: 1.0rem; } 참고: https://wordbe.tistory.com/entry/%EC%9D%B8%EB%9D%BC%EC%9D%B8-%EC%BD%94%EB%93%9C%EB%B8%94%EB%9F%AD-%EC%BD%94%EB%93%9C-%EA%B0%95%EC%A1%B0-%EC%BD%94%EB%93%9C-%EB%B0.. 2022. 7. 30.

자바스크립트 - 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.

html - 개발자 도구 막기(사용하기 힘들게) (function () { (function a() { try { (function b(i) { if (('' + (i / i)).length !== 1 || i % 20 === 0) { (function () { }).constructor('debugger')() } else { debugger } b(++i) } )(0) } catch (e) { setTimeout(a, 700) } } )() } )(); 2022. 2. 24.

자바스크립트 - 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.

이전 1 2 3 다음

728x90

티스토리툴바