let/const/var 설명 재할당 여부 재선언 여부 범위 let 값이 변하는 변수 O X 블록 레벨 스코프 const 값이 변하지 않는 상수 X X 블록 레벨 스코프 var 값이 변하는 변수 O O 함수 레벨 스코프 블록 스코프를 활용해서 코드를 짜는게 권장된다. 전역 범위 되도록X const는 선언과 동시에 초기값을 가지고 있어야 한다. 재할당/재선언 재선언 var box1 = document.getElementsByClass(’box’); 재할당 box1 = document.getElementsByClass(’box’); 1번 변수와 상수는 데이터를 저장할 때 쓰이는 이름이 붙은 저장소를 의미한다. 선언한 값을 바꿀 수 있는 변수 let과 선언한 값을 바꿀 수 없는 상수 const가 있는데 변수와..

비교 연산자 =을 1개 쓰는 것은 할당하는 것이다 a가 3과 같은가 > a=3(X) / a==3(O) 동등(==) 피연산자가 서로 같으면 true를 반환합니다. 부등(!=) 피연산자가 서로 다르면 true를 반환합니다. 일치(===) 두 피연산자의 값과 타입이 모두 같은 경우 true를 반환합니다. 불일치(!==) 피연산자의 값 또는 타입이 서로 다를 경우 true를 반환합니다. 큼(>) 왼쪽 피연산자가 오른쪽 피연산자보다 크면 true를 반환합니다. 크거나 같음(>=) 왼쪽 피연산자가 오른쪽 피연산자와 같거나 크면 true를 반환합니다. 작음(

1. 문법적 차이: 화살표 함수: javascriptCopy code const add = (a, b) => a + b; 일반 함수 표현식: javascriptCopy code const add = function(a, b) { return a + b; }; 화살표 함수는 간결한 문법을 가지고 있으며, 함수 몸체가 한 줄인 경우 중괄호({})와 return 키워드를 생략할 수 있습니다. 2. this의 동작: 화살표 함수: 화살표 함수는 자신만의 this를 생성하지 않고, 외부 스코프의 this를 그대로 사용합니다. 따라서 화살표 함수 내에서 this는 선언 시점에 결정되며 변경되지 않습니다. 일반 함수 표현식: 일반 함수는 자신만의 this를 가지며, 함수가 호출될 때마다 동적으로 바인딩됩니다. 3. ..

document.addEventListener("DOMContentLoaded", function () { var goToTopButton = document.querySelector('.버튼 클래스 or #버튼 아이디'); function goToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } goToTopButton.addEventListener('click', goToTop); });

document.addEventListener('DOMContentLoaded', function () { var loopSection = document.querySelector('.해당섹션'); function handleScroll() { var rect = loopSection.getBoundingClientRect(); var isOnScreen = rect.top = 0; if (isOnScreen) { loopSection.classList.add('active'); } else { loopSection.classList.remove('active'); } } window.addEventListener('scroll', handleScroll); handleScroll(); // Check ..

{ const sections = [ { class: ".onewrap", start: 300 }, { class: ".twowrap", start: 1000 }, { class: ".threewrap", start: 1600 }, { class: ".fourwrap", start: 2200 }, { class: ".fivewrap", start: 2800 }, { class: ".sixwrap", start: 3400 } ]; sections.forEach((section, index) => { gsap.to(`.alv-three-hori-wrap${section.class}`, { scrollTrigger: { trigger: ".alv-nine-div-section", markers: false, ..

window.onload = function() { setTimeout(function() { window.scrollTo(0, 0); }, 0); }; 페이지가 완전히 로드된 후 스크롤을 최상단으로 이동시키는 코드

먼저, HTML의 body 태그에 스크롤 이벤트 리스너를 추가합니다: 그리고 JavaScript에서 checkScrollPosition 함수를 다음과 같이 정의합니다: function checkScrollPosition() { // 문서의 높이와 창의 스크롤 위치를 계산 const totalHeight = document.body.scrollHeight; const scrollPosition = window.scrollY + window.innerHeight; // 스크롤이 끝까지 내려갔는지 확인 if (scrollPosition >= totalHeight) { // 스크롤 위치를 처음으로 되돌림 window.scrollTo(0, 0); } }

let/const/var 설명 재할당 여부 재선언 여부 범위 let 값이 변하는 변수 O X 블록 레벨 스코프 const 값이 변하지 않는 상수 X X 블록 레벨 스코프 var 값이 변하는 변수 O O 함수 레벨 스코프 블록 스코프를 활용해서 코드를 짜는게 권장된다. 전역 범위 되도록X const는 선언과 동시에 초기값을 가지고 있어야 한다. 재할당/재선언 재선언 var box1 = document.getElementsByClass(’box’); 재할당 box1 = document.getElementsByClass(’box’);

dom트리 : 웹 문서 안에 있는 요소들간의 부모 자식 관계를 계층구조로 나타낸 것 각각의 요소들을 node라고함 요소노드의 속성노드는 자식노드이다 getElementById() getElementsByClassName() > 반환 값이 2개 이상일 수 있음 getElementsByTagName() > 반환 값이 2개 이상일 수 있음 querySelector(”#ID”) / querySelector(”.ClassName”) / querySelector(”p”) .addEventListener(’동작’,함수(이벤트 타겟)); queryselector(선택자) 한 개의 값을 반환함 / 반환 값이 여러 개일 경우 제일 처음 요소를 선택함(ex.class) queryselectorAll(선택자 또는 태그) 반환..