오늘은 간단한 자바스크립트 문법에 대한 과제가 있어서 작성해 본 예시들을 정리해 봤습니다
1.for문
for문 의 기본적인 조건입니다
for (초기화; 조건; 반복) {
// 실행할 코드
}
for (var i = 1; i <= 5; i++) {
console.log(i);
}아래 내용은 i=1로 초기화되며 i 가 5 이하인 동안 루프가 계속 실행됩니다
각 반복 후에 "i"는 1씩 증가하고, 루프 본문 내에서 "console.log(i)"를 사용하여 숫자를 출력합니다.
예시 :for을 이용하여 1부터 10까지 숫자 더해보기
let 총합 = 0;
const 숫자리스트 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// for문을 이용하여 숫자리스트의 숫자를 모두 더한 값을 총합 변수에 할당 후 console.log로 출력합니다.
for (i = 0; i < 숫자리스트.length; i++) {
총합 += 숫자리스트[i];
}
console.log(총합); // 결과: 55
각각의 항목 숫자 더해보기
<body>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<script src="5.js"></script>
</body>각각 1,2,3, 에 10씩 더하여보는 예시입니다
const 숫자 = document.querySelectorAll(".number");
for (let i = 0; i < 숫자.length; i++) {
let 현재숫자 = parseInt(숫자[i].textContent);
let 새로운숫자 = 현재숫자 + 10;
숫자[i].textContent = 새로운숫자;
}paresInt 함수를 이용해 {숫자}라는 배열에서 [i] 번째 요소마다 그니까 1,2,3, 을 textContent 를이용하여
텍스트를 가져온 뒤 정수로 변환해 줍니다
이 줄은 숫자 배열의 i번째 요소의 텍스트 내용을 새로운 숫자 값으로 업데이트합니다.
따라서 각 숫자가 10씩 증가된 값으로 표시됩니다. 가끔 코드를 해석하다 보면 뇌정지가 올 때가 있어 상세하게
풀어써 보는 것도 도움은 되는 거 같습니다 그래도 익숙해지다 보니 점점 읽히기는 하네요
2.setTimeout, clearInterval
setTimeout 함수는 JavaScript에서 사용되는 내장 함수 중 하나로,
일정 시간이 지난 후에 함수를 실행하도록 예약하는 데 사용됩니다.
그냥 예시를 보는 게 훨씬 이해가 빠르긴 합니다
setTimeout(() => {
document.querySelector("body").innerHTML = "안녕";
}, 3000);요렇게 js파일에 작성을 해놓으면 3초 =(3000밀리 초) 후에 아무것도 없는 화면에서
그리고 if문 setTimeout, clearInterval을 조합해서
브라우저를 새로고침 시 0부터 시작해 10까지 숫자가 1초에 1씩 증가하도록 만들어보았습니다
(10부터는 더 이상 숫자가 커지지 않게)
let 현재숫자 = 0;
const 최대숫자 = 10;
const 타이머 = setInterval(업데이트숫자, 1000);
function 업데이트숫자() {
if (현재숫자 <= 최대숫자) {
console.log(현재숫자);
현재숫자++;
} else {
clearInterval(타이머);
}
}코드를 해석해 보면 일단 현재숫자를 0으로 최대치를 10으로 맞춰준후
setInterval 함수를 통해 업데이트숫자라는 함수가 (1000밀리 초) 1초에 한 번씩 발생하게 한 후 "타이머"에 할당합니다
업데이트숫자 : 만약 현재숫자가 최대숫자보다 작거나 같으면 계속해서 현재숫자에 +를 하고
그게 아니라면 clearInterval 함수를 통해 타이머작동을 멈춰버립니다
이 때문에 보통 setInterval, clearInterval 같이 사용되는 경우가 많습니다
페이지에 콘솔로그를 찍어보면 딱 10까지 증가합니다
3. 스크롤 이벤트
마지막은 스크롤 이벤트를 만들어보았는데
조건은 이렇습니다
html은 별거 없습니다만
라는 css는 처음 써봤는데요 스크롤 상관없이 화면에서 특정위치를 고정해 줍니다
우측아래 두기 위해 요정도
요런 느낌으로 생성이 됩니다
이벤트 리스너에 항상 쓰던 document가 아니라 window를 사용했는데 이게 한 단계 더 큰 개념입니다
검색해 보니 window 객체는 브라우저 탭에 존재하는 자바스크립트 전역 최상위 객체이다.라고 하네요
좀 더 자세하게 알고 싶다면
자바스크립트 Window / Document 무슨 차이일까?
문득 여태껏 자바스크립트를 사용하면서 window객체와 document객체의 차이에 대해 잘 알지 못했다는 점이 생각나서 공부 후 포스팅한다. 내가 window / document 객체를 참조하는 흔한 작업들은 다음과
nookpi.tistory.com
'scrollY'라는 것도 사용해 보았는데 , 현재 화면에 표시되는 웹 페이지의 수직 스크롤 위치를 나타냅니다. 이 속성은 웹 페이지가 사용자에게 표시되는 브라우저 뷰포트 내에서 수직으로 얼마나 스크롤되었는지를 나타내는 값입니다.
const upButton = document.querySelector(".up-button");
window.addEventListener("scroll", () => {
console.log({ scrollY });
// 1. 스크롤위치가 100px 보다 크면 (위에서 100px 이상 내려오면)
// 2. 버튼이 보이게 한다.
if (scrollY > 100) {
document.querySelector(".up-button").style.display = "block";
} else {
document.querySelector(".up-button").style.display = "none";
}
});
upButton.addEventListener("click", () => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth",
});
});이제 저 'scrollY'를 이용해서 100px 아래로 내려가면 버튼에 스타일 block를 주어 버튼이 보이게 해 주고
아니라면 다시 none를 주어 다시 숨겨줍니다, 마지막으로 버튼에 클릭 이벤트를 부여했는데
window.scrollTo(x, y); 를 이용하여 (이걸 이용하면 특정 스크롤 위치로 이동이 가능합니다 {가로, 세로})
저는 window 그니까 웹페이지 내에 가장 꼭대기 위로 이동시켰습니다 behavior: "smooth" 같이 사용하면
좀 더 부드럽게 스크롤이 복귀합니다
배우고나면 뭔가 알거같은데 막상 또 나중에 쓸려하면 기억이 안나고 그나마 블로그에 정리하다보면
잔상이나마 짙게 남아 나중에 검색할떄 훨씬더 빨리 찾는거같습니다 그래도 한번 해본거니까요 ㅎㅎ
코딩 처음 배울때 외워서 하는거 아니라고그랬는데 구글링 속도만 점점 늘어가고있습니다
'Today I Learned (TIL)' 카테고리의 다른 글
| -배열 메서드- (find,filter,map,sort,),Spread Operator (…) 23.11.10 (0) | 2023.11.10 |
|---|---|
| React Hooks - useState에 대해서 알아보자 23.11.09 (2) | 2023.11.09 |
| CSS-in-Js란? -Styled Components사용법-23.11.07 (0) | 2023.11.07 |
| 리액트 to do list 만들기 23.11.06 (1) | 2023.11.06 |
| 리액트의 불변성 & 순수함수 23.11.05 (0) | 2023.11.05 |
