본문 바로가기

자바스크립트(javascript)/응용8

[javascript] 응용 기록 4 외부파일로 만든다는 조건 하에텍스트로 바꿔치기 innerText 1) defer스크립트를 외부에 만들 때는 head 안에다 넣더라도 defer라는 옵션을 주면 html 로드와 파싱이 다 끝난 다음에 스크립트를 실행한다.백그라운드에서 스크립트가 로드가 된다. html은 html대로 로드가 돼서 바로 우리 눈에 보이고 동시에 뒤에서 스크립트가 로드가 된다.DOMContented 직전에 생긴다. 2) async비동기적으로 로드가 된다. 실행 순서가 보장되지 않는다. 자기가 다운로드되면 바로 실행된다. html을 반드시 이용해야 하는 스크립트라면 사용하면 안된다.독립적인 플러그인이나 따로 노는 것에 설정해 주는 것이 좋다. 2023. 8. 24.
[javascript] 응용 기록 3 자바스크립트 이벤트정적 > 동적으로 일어나는 일이벤트 등록addEventLister(지정된 이벤트 타입 문자열, 함수, 옵션);이벤트 대상을 지정해 준다.이벤트 등록을 이용한다 - 해당 이벤트가 일어날 때 지정한 함수를 실행한다.* .ilbuni.c -> ilbuni와 c 클래스를 공통으로 가지는 선택자 스크립트 작성 위치1. head 안스크립트를 head에 작성할 경우 하위의 html이 로드가 되지 않았기 때문에 자바스크립트가 실행되지 않는다.> head에 적고 싶다면 로드 이벤트를 사용해야한다.window.addEventListener('load', function(){});window.addEventListener("DOMContentLoaded", function(){}); 2. body 마지막전.. 2023. 8. 24.
[javascript] 응용 기록 2 DOM SCRIPT(Document Object Model)html 요소를 하나의 객체로 바라보는 것 객체 선택하기document.querySelecotr('.ilbuni');여러 개가 있는 거라도 맨 앞의 1개만 가져온다.전부 다 가져오고 싶을 땐 querySelectorAll()를 사용하면 된다.-> Nodelist라는 배열의 형태로 출력이 되기 때문에 특정 요소에 접근하고 싶다면 [인덱스] 형태로 접근하면 된다.괄호 ( ) 안에 css 선택자도 사용할 수 있다. data-data-의 형식으로 시작하면 어떤 속성이든 필요에 따라 임의로 추가할 수 있다. setAttribute변수명.setAttribute( '속성명', 값);-> 해당 변수에 속성: 값이 세팅이 된다. getAttribute변수명.se.. 2023. 8. 24.
[javascript] 응용 기록 var / let / constvar -> let, const을 사용하는 것을 권장한다.let -> 값이 변할 용도로 사용, 갱신이 가능하다.const -> 값이 변하질 않을 용도로 사용, 갱신이 불가능하다.*상수 -> 항상 값이 똑같은 것 스코프(scope)var - 함수 안에 존재할 때 scope가 발생한다.let, const - 블록 { } 단위에서 scope가 발생한다. 2023. 8. 24.