Javascript15 setTimeOut setTimeOut은 JavaScript에서 제공하는 내장 함수 중 하나로, 일정 시간이 지난 후에 함수를 실행시킵니다. 이 함수는 비동기적으로 실행되어, 타이머가 만료되기 전에 다른 코드가 먼저 실행될 수 있습니다. setTimeout 함수는 두 개의 인자를 받습니다. 첫 번째 인자로 실행할 함수를 받으며, 두 번째 인자로 일정 시간(ms)을 받습니다. setTimeout(callback, delay); 여기서 callback은 실행할 함수를 가리키며, delay는 일정 시간을 가리킵니다. delay는 밀리초 단위로 입력되며, 1000밀리초는 1초를 의미합니다. 예를 들어, 아래와 같이 setTimeout 함수를 사용하면, 3초 후에 sayHello 함수가 실행됩니다. function sayHello(.. 2023. 7. 16. Intersection Observer API를 통한 스크롤 이벤트 구현 Intersection Observer API는 웹 페이지의 특정 요소가 뷰포트나 다른 요소와 교차하는지 관찰하는 데 사용됩니다. 예를 들어, 사용자가 웹 페이지를 스크롤 할 때 특정 요소가 화면에 보이는지 확인하는데 사용할 수 있습니다. 이는 Infinite Scroll(무한 스크롤), Lazy Loading(지연된 이미지 로딩), Animation Triggering(애니메이션 트리거링) 등에 유용하게 사용됩니다. 타겟 요소와 상위 요소 또는 최상위 document의 viewport 사이의 intersection 내의 변화를 비동기적으로 관찰하여 이벤트를 실행시키는 방법입니다. 기존의 scroll 이벤트나 wheel 이벤트를 통해 Intersection을 구현했지만 반복되는 이벤트 호출등으로 성능상의.. 2023. 7. 4. 자바스크립트 대괄호 표기법 자바스크립트에서 대괄호 표기법(square bracket notation)은 객체의 속성에 접근하거나 배열의 요소에 접근하는 데 사용됩니다. 대괄호 표기법을 통해 속성에 접근하면 그 속성에 할당된 값을 출력하게 됩니다. 속성은 같지만 속성값을 다르게 하여 구분자로 사용하려는 경우 유용하게 사용됩니다. 특히 DOM을 다룰 때 각각의 DOM의 Class나 Id로 따로 구분해서 변수에 할당하는 방법이 아닌 각각의 DOM에 작성된 속성값을 구분자로 사용할때 스크립트의 양을 줄이는데 좋습니다. 객체에서 사용 아래의 예처럼 객체의 키 값인 name이나 age에 접근하면 각각의 key 값에 할당되어 있는 값들이 출력됩니다. 객체는 키와 값으로 구분되어 있기 때문에 키를 속성으로 구분해서 생각하면 됩니다. 속성역할을 .. 2023. 7. 1. Javascript 한줄 함수 모음 한줄로 구현 가능한 자바스크립트 함수 모음입니다. 원하는 기능을 만들어 놓고 필요한 경우 메서드처럼 사용하기 위한 한줄 함수들입니다. 1. 배열 중복 항목을 제거합니다. const uniqueArr = [...new Set(arr)]; 2. 첫글자 대문자 만들기 const capitalize = (str) => `${str.charAt(0).toUpperCase()}${str.slice(1)}`; const name = "robert"; capitalize(name) // "Robert"; 3. 퍼센트 계산 const calculatePercent = (value, total) => Math.round((value / total) * 100) const questionsCorrect = 6; const .. 2023. 6. 12. JavaScript에서 배열을 병합하는 5가지 방법 for 루프 사용 배열에서 요소를 다른 배열로 병합하려면 먼저 모든 배열 요소를 반복합니다(루프를 돌아야 함). 루프 내에서 배열에서 각 요소를 검색한 다음 다른 배열에 삽입합니다. const merge = (first, second) => { for(let i=0; i { arr.push(item); return arr; }, arr1); console.log(merged); 2023. 6. 1. [JS BOM] 자바스크립트 Browser 정보 활용 Navigator 객체를 사용하여 브라우저 정보 가져오기 window 객체에는 Navigator 객체에 대한 참조를 반환하는 Navigator 속성이 있습니다. Navigator 객체는 사용 중인 브라우저에 대한 정보를 포함하고 있습니다. userAgent 속성을 사용하면 사용 중인 브라우저와 운영 체제에 대한 정보를 반환합니다. 예를 들어, 다음과 같은 코드를 실행하면 Safari 10 버전을 Mac OS에서 사용하고 있다는 정보가 표시됩니다. window.navigator.userAgent >>"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/602.4.8 (KHTML, like Gecko) Version/10.0.3 Safari/602.4... 2023. 5. 30. 이전 1 2 3 다음
