코-딩/Javascript8 Javascript - 스크롤 위치 인식하기 scroll이 존재하는 위치의 id, 혹은 class 등을 querySelector로 가지고 온다. let scrollPosition = document.querySelector("#scrollPositionId"); or let scrollPosition = document.querySelector(".scrollPosition.scrollId"); //class가 여러개이면 .을 이용해 이어서 써준다. 가지고 온 변수를 이용해 eventListener를 등록해준다. scrollPosition.addEventListener( "scroll", event => { console.log( scrollPosition.scrollTop ) //현재 스크롤의 세로 위치 console.log( scrollPosi.. 2022. 6. 26. Javascript - MutationObserver(화면 감지) javascript 사용 시 함수를 매번 loop를 태워 돌리기엔 부하가 심하고 특정 상황에 변경만을 감지하여 작동하고 싶을 경우가 있다. 그러한 경우 MutationObserver를 사용하면 된다. MutationObserver( 변경을 감지할 위치, 무엇에대한 변경인지 ) let detectScreen = function () { let target = document.querySelector("html"); let option = { attributes: true, //attributes, childList, characterData 셋 중 하나는 꼭 true여야 한다. childList: true, characterData: true, subtree: true //후손들의 작동까지 감지 } let.. 2022. 4. 15. Javascript - blob & UTF-8 작성된 html 문서를 다운롣 하는 방법. 1. html을 작성한다. 2. blob으로 형태를 변형한다. 3. 임의로 url을 부여한다. 2번 과정에서 간혹 charset=UTF-8로 줘도 먹히지 않고 한글이 깨지는 경우가 존재한다. 이럴 경우 작성된 html을 blob에 넣을 때, 앞에 "\ufeff"를 넣어주면 해결된다. 예시) let html = "" + "" + "안녕!"; let blob = new Blob(["\ufeff" + html], {type: 'text/html; charset=utf-8;'}); let url = window.URL.createObjectURL(blob); window.URL.revokeObjectURL(url); 2022. 4. 14. JavaScript - image src html에서 이미지를 나타내기 위해 사용하는 대표적인 태그는 이다. (canvas를 이용해 그림을 그릴 수 있기도 하다...) 등등으로 많이 나타낸다. 이때, src에 대개 서버에 저장되어 있는 src 위치 혹은 외부 이미지 url을 많이 넣는다. ex) ./assets/.... or https://blahblah... 그 외에는 이미지를 데이터화 하여 src에 넣는 방법이 있다. ex) let imgUrl = "이미지 URL"; let imgBlob = await fetch( imgUrl ).then( r => r.blob() ); let imgDataUrl = await new Promise( resolve => { let reader = new FileReader(); reader.onload = .. 2022. 3. 31. 이전 1 2 다음