728x90 Frontend/Javascript22 [JavaScript] <script> 태그의 위치 async 속성을 추가한다면, 자바스크립트 코드와 HTML 코드를 동시에 읽습니다. 자바스크립트 코드가 모두 읽혔다면, HTML 파싱을 멈추고 자바스크립트 코드를 실행합니다. 기본 설정에 비해 코드를 읽는 시간은 절약이 되지만, 실행하는 동안은 똑같이 시간이 지연된다는 점에서 유사한 문제점을 가지고 있습니다. 1-3. defer 속성 추가 defer 속성을 추가한다면, async 옵션과 유사하게 자바스크립트 코드와 HTML 코드를 동시에 읽습니다. 하지만 코드가 모두 로딩된 다음에 바로 실행하는 것이 아니라, HTML 파싱이 완료될 때까지 기다리다가 페이지가 모두 로딩이되면 실행됩니다. 2. 태그 내부 2-1. inline 방식 코드가 짧다면 직접적으로 HTML 코드에 자바스크립트 코드를 삽입할 수도 있.. 2024. 2. 12. [JavaScript] toggle() 메서드 toggle() 메서드는 요소에 클래스를 추가하거나 삭제합니다. 만약 요소에 해당 클래스가 존재하지 않는다면 추가하고, 존재한다면 삭제를 하는 on/off 스위치와 유사한 역할을 합니다. 만약 toggle()이 없다면 이전 글에서 정리한 addEventListener()와 조건문을 활용해서 기능을 구현해야 합니다. toggle() 메서드를 활용함으로써 코드가 더 간결해집니다. toggle() 메서드의 또 다른 장점은, 기존에 가지고 있는 클래스들을 유지할 수 있다는 것입니다. 만약 toggle() 을 사용하지 않고 어떤 요소에 새로운 클래스를 설정하면, 먼저 존재하던 클래스들이 사라지게 됩니다. 다음은 toggle() 메서드의 사용 예시입니다. index.html 내용 더보기 h1 Information .. 2024. 2. 4. [JavaScript] addEventListener() 메서드 addEventListener() 메서드는 타겟 요소에서 특정 이벤트가 발생했을 때 어떤 함수가 실행될지를 설정합니다. 타겟 요소는 주로 HTML 요소, Document, 또는 Window입니다. addEventListener() 메서드의 Syntax:eventTarget.addEventListener('eventType', listener) eventType의 대표적인 예시로는 click, load, scroll과 키보드 관련 이벤트, 마우스 관련 이벤트들이 있습니다. 다음은 addEventListener()를 사용한 예시 코드입니다. h1 Information const title = document.querySelector("h1");console.log(title).. 2024. 2. 2. [JavaScript] console.dir() 메서드 console.dir() 메서드는 주어진 요소의 모든 속성들을 출력합니다. 자바스크립트 객체를 다룰 때, console.dir()를 통해서 사용 가능한 속성을 모두 확인할 수 있습니다. console.log()와 다른 점은, log는 HTML의 관점에서 요소를 출력하고 dir는 JSON의 관점에서 요소를 출력한다는 것입니다. 다음은 두 개의 메서드의 실행 결과 예시입니다. 2024. 1. 31. [JavaScript] getElement* 와 querySelector getElement로 시작하는 메서드들과 querySelector는 HTML 페이지에서 주어진 조건에 맞는 요소를 가져옵니다. getElement로 시작하는 메서드들을 먼저 소개하자면, 다음과 같습니다. 메서드명 기능 반환 자료형 getElementById(id) 해당 id 값을 가지고 있는 요소를 반환 HTML 요소 getElementsByClassName(names) 해당 class 값을 가지고 있는 요소들을 반환 HTMLCollection getElementsByName(name) 해당 name 값을 가지고 있는 요소들을 반환 NodeList getElementsByTagName(name) 해당 태그를 사용하는 요소들을 반환 HTMLCollection getElementsByTagNameNS(nam.. 2024. 1. 31. [JavaScript] every(), some() 메서드 자바스크립트에서 every() 메서드는 호출한 배열의 모든 요소들이 주어진 함수에서의 조건을 통과하는지를 확인합니다. 반면, some() 메서드는 호출한 배열의 요소들 중 하나라도 통과하는지를 확인합니다. every() 메서드는 AND 연산에, some() 메서드는 OR 연산에 대응합니다. 다음은 두 메서드들의 사용 예시입니다. function underTwenty(element, index, array) { if(element < 20) { return true; } else { return false; } }; const array_ex = [4, 7, 25, 16, 30]; console.log(array_ex.every(underTwenty)); // Output : false console.lo.. 2023. 9. 11. 이전 1 2 3 4 다음 반응형
