분류 전체보기
-
기타 문서Javascript 2024. 4. 1. 13:11
Mutation observer Mutation observer 코드 조각이 DOM에 삽입되면 자동으로 감지하고 강조 표시하는데 사용할 수 있다. Click and edit, please -> contentEditable 속성을 사용하면 해당 div를 편집할 수 있습니다. Selection and Range deleteContents : 삭제 extractContents : 추출 cloneContents : 복제 insertNode : 삽입 surroundContents : removeAllRanges : 삭제 선택하려면 먼저 기존에 있는 선택 항목을 삭제해야한다. 선택 항목이 이미 존재하는 경우 removeAllRanges를 사용해서 비우고 그 다음 범위를 추가한다. *기존 선택을 대체하는 setBas..
-
defer, asyncJavascript 2024. 3. 29. 15:30
defer 1) HTML 화면 다운로드 2) 백그라운드에서 스크립트 다운로드 3) 모두 다운로드 된 후에 최종적으로 화면을 기다렸다가 스크립트를 순서대로 실행 4) 사용자가 화면을 클릭 했을 때 에러를 마주할 일이 적어 안전하다. async 1) HTML 화면 다운로드 (async 특성상 무작위로 먼저 다운로드 되는 순으로 실행) 2) 사용자가 화면을 클릭 했을 때 완전하지 않은 기능들을 우선적으로 마주할 가능성이 있다.(어떤 기능은 클릭되고 어떤 슬라이드는 안되고, async 특성상 먼저 다운로드 된것도 있을 수도 없을 수도 있기 때문)
-
문서와 리소스 로딩카테고리 없음 2024. 3. 28. 14:48
브라우저는 HTML 문서를 읽어 내려갈 때 DOMContentLoaded이 아닌 script가 제일 먼저 실행되고 이후에 dom이 실행된다. 👉🏻 이 경우 두가지 문제점이 발생한다. 1. DOM 요소에 접근할 수 없기 때문에 핸들러를 추가하는게 불가능해짐, 2. 페이지(이미지 등)를 모두 다운받기 이전이기 때문에 화면을 볼 수 없는 현상 발생. window.onload window.onload을 사용하면 스타일, 이미지 등의 리소스들이 모두 로드되었을 때 실행된다. -> 이미지가 먼저 불러와진 이후에 alert창이 실행된다. defer, async 스크립트 위와 같이 script가 먼저 다운로드 되는 동안 화면을 볼 수 없는 에러를 해결할 수 있는 방법이 있다. ✅ defer와 async의 사용이다. d..
-
javascript form 폼 조작Javascript 2024. 3. 27. 21:04
input, textarea input.value / textarea.value / input.checked *textarea.innerHTML은 사용하지 마세요 - 처음 열 당시의 HTML만 저장되어 최신 값을 구할 수 없습니다. select, option Apple Pear Banana 👉🏻 select 에 Banana가 기본으로 선택되어있음. onfocus, onblur : 두 이벤트는 버블링되지 않고 input 필드에서만 트리거 된다. input에 focus 시 form에 변화를 주고 싶다면 onfocus가 아닌 focusin/focusout을 사용해야한다. 이메일: *onblur 대상으로부터 벗어났을 때 해당되었던 대상에서 일어나는 이벤트 input 이벤트(수정이 일어날 때마다 이벤트를 실행하고..
-
Pointer event 포인터 이벤트Javascript 2024. 3. 21. 16:59
더이상 마우스 터치 이벤트를 사용할 필요가 없고 포인터 이벤트로 전환하면 된다. -> mouse 이벤트를 pointer 이벤트로 변경해서 사용. ex) mouseup -> pointerup 이벤트:포인터취소 ✅ 이미지를 마우스로 드래그 했을 때 이미지가 마우스 커서에 잡혀서 끌려오는듯한 현상을 방지하고 싶은 경우 -> CSS에서 .class {touch-action: none} 을 사용해서 이를 방지할 수 있다. 스크롤 방지 ✅ overflow: hidden 사용
-
이벤트 기초Javascript 2024. 3. 14. 11:27
onclick 1. HTML만 사용하는 방법 2. HTML과 자바스크립트를 함께 사용하는 방법 함수를 할당할 때 // 올바른 방법 button.onclick = sayThanks; // 틀린 방법 button.onclick = sayThanks(); -> () 괄호 없이 할당해야한다. / ()의미는 함수를 호출하겠다는 의미이다. ✅ 그런데, HTML 속성값에는 괄호를 넣어서 사용해야한다. addEventListener -> 핸들러를 여러개 할당하기 위해서 사용. element.addEventListener(event, handler, [options]); ✅ addEventListener에 handler 부분에는 함수 뿐만 아니라 객체도 들어갈 수 있다! 클릭해 주세요. ✅ 문서가 다 읽히고 DOM 트리..
-
자바스크립트 문서Javascript 2024. 3. 13. 19:31
스타일과 클래스 .className 을 사용하면 class="name age"의 name, age가 문자열 전체가 모두 불러와진다. .classList를 사용하면 ex).classList.add('who')을 넣으면 'who'만 별개로 추가할 수 있다. - elem.classList.add/remove("class") – class를 추가하거나 제거 - elem.classList.toggle("class") – class가 존재할 경우 class를 제거하고, 그렇지 않은 경우엔 추가 - elem.classList.contains("class") – class 존재 여부에 따라 true/false를 반환 offsetWidth / offsetHeight border, padding 등이 모두 합해진 너비와 ..
-
DOM 기초Javascript 2024. 3. 7. 18:22
for...of는 배열을 순회할 때 사용 for...in은 객체의 속성을 순회할 때 사용 Q. elem.children[0].previousSibling은 항상 null일까요? 텍스트 노드 앞에 있는 내용 첫 번째 자식 요소 다른 자식 요소 이 경우, elem.children[0]은 요소를 나타내고, elem.children[0].previousSibling은 텍스트 노드 "텍스트 노드 앞에 있는 내용"을 나타냅니다. 요소 노드 이외의 노드도 존재할 수 있기 때문에 previousSibling을 사용할 때는 주의가 필요합니다. ✅ console.dir(elem)과 console.log(elem)의 차이 인수가 DOM 요소일 때는 결과가 다릅니다. console.log(elem)는 요소의 DOM 트리를 출..