본문 바로가기

전체 글

(40)
[자바스크립트 파일 링크] HTML script async와 defer 차이점 1. head 안에 js 파일 링크하기 요약 : 브라우저는 한줄씩 파싱하여 DOM 요소로 변경하는데, js 파일이 보이면 다운로드 받고 나서 다시 다음 줄을 파싱하게 됨 단점 : js 파일크기가 크다면 가져오고 실행하는데 오래걸림 순서 : html의 document에서 link:css, script:src 로 css와 js 파일을 연결한다. 이때 브라우저는 DOM을 한줄씩 parsing 한다. 그러다가 script 태그에 링크된 .js 파일이 있다면, 다운로드를 하려고 parsing한 html을 멈추고 필요한 자바스크립트 파일을 서버에서 받아온다. js파일을 실행한 후 html의 그 다음 줄을 parsing한다. 이러한 방식은 js 파일 크기가 클때는 사용자가 오랫동안 기다려야 하는 단점이 있어서 ht..
[자바스크립트 문법] addEventListener 이벤트 등록하기 addEventListener로 Event 등록하기 - addEventListener 메소드로 이벤트 타겟(target)의 이벤트(event)가 발생할 때 실행할 함수(callback 함수)를 등록할 수 있다. // 이벤트 등록시 target.addEventListener("event type", eventListener); title.addEventListener("click", titleClick); // 이벤트 제거시 title.removeEventListener("click", titleClick); // == addEventListener과 같은 기능이지만, remove로 이벤트 제거하는 편이 더 나음 title.onClick = titleClick; [ target ] document, ele..
[자바스크립트 문법] filter()메소드와 forEach() 반복문 filter() filter()는 콜백함수에서 리턴 값이 true인 것만 모아서 새 배열로 만드는 함수이다. 일반적으로 배열에서 특정 원소를 거를 때, 사용한다. 배열에서 조건에 맞는 원소만 제거하고 싶을 때 const numbers = [1, 2, 3, 4, 5]; function filterNumber(num){ return num !== 3; }; numbers.filter(filterNumber); // [1, 2, 4, 5] - filter()은 값이 true인 것만 새 배열로 만든다. 즉, 위 코드에서 배열에서 삭제하고 싶은 원소 '3'과 같지 않은 함수를 만들어서 filter에 콜백함수로 넣는다. 조건에 맞는 원소만 제거 후 새로운 배열 변수로 저장 const newArr = numbers...