본문 바로가기
728x90

js10

[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] splice()와 slice() 메서드 정리 이번 글에서는 자바스크립트에서 배열을 변경할 수 있는 메서드들인 splice()와 slice()에 대해서 알려드리겠습니다. 우선, splice() 메서드는 배열에 요소를 추가, 교체, 또는 기존의 요소를 삭제할 수 있게 합니다. 메서드의 구문은 다음과 같습니다. exArr.splice(startIndex) exArr.splice(startIndex, deleteCount) exArr.splice(startIndex, deleteCount, item0, item1, ..., itemN) ▶ startIndex (필수) 첫 번째 매개변수는 배열의 변경이 시작되는 위치를 지정합니다. 다른 선택적인 매개변수와는 달리 필수이기 때문에, 만약 생략된다면 배열은 그대로 유지됩니다. - startIndex >= exA.. 2023. 8. 17.
[JavaScript] 난수 생성하기 - Math.random() Math.random() 메서드는 0 이상 1미만의 부동소수점의 난수를 생성합니다. 난수 생성에 사용되는 시드 값은 난수 생성 알고리즘에 의해 결정되기 때문에, 특정 값으로 지정하거나 변경이 불가능합니다. ※ 주의 : Math.random() 메서드는 보안 상 안전한 난수를 제공하지는 않습니다. 보안/암호와 관련되어서는 사용하지 않는 것이 권장됩니다. Math.random() 메서드의 사용 방법 자체는 간단합니다. Math.random() // 0.5834082844933923 Math.random() // 0.4934202120749698 메서드를 활용하면 다양한 유형의 랜덤 숫자를 구할 수 있습니다. 1) 두 값 사이의 랜덤 숫자 추출 아래 예시의 코드는 min 이상 max 미만의 구간에서 랜덤한 숫.. 2023. 8. 9.
[JavaScript] 프로미스(Promise) 자바스크립트에서 프로미스(Promise)란, 비동기식으로 처리되는 코드의 결과를 담게 되는 객체입니다. 실행되는 코드의 결과 값에 따라서 어떠한 동작을 실행할지 정할 수 있기 때문에 코드 로직을 더 섬세하게 작성하는 것이 가능해집니다. 보통 네트워크 통신이나 파일을 읽을 때 사용되는데, 데이터를 읽지 못한 상황에서도 데이터를 표시하려고 하면 발생하는 오류를 프로미스를 통해 예방할 수 있기 때문입니다. 프로미스는 세 가지 상태를 가질 수 있습니다. 1) 대기(Pending) : 프로미스가 선언되면 가지게 되는 초기 값으로, 비동기 처리 연산이 완료되기까지 대기하고 있는 상태입니다. 2) 이행(Fulfilled) : 비동기 처리 연산이 성공적으로 완료된 상태입니다. 3) 거절(Rejected) : 비동기 처.. 2023. 8. 8.
반응형

티스토리툴바