본문 바로가기

js

(11)
일정 시간 뒤에 코드를 실행하는 setTimeout과 setInterval setTimeout과 setIntervalJavaScript에서는 일정 시간 뒤에 코드가 실행되거나, 일정 간격으로 반복 실행되도록 만들 수 있습니다. 그때 사용하는 대표적인 함수가 setTimeout과 setInterval입니다.📌 setTimeout – 일정 시간 후 한 번만 실행setTimeout(function, delay); function: 나중에 실행할 함수 delay: 대기 시간 (밀리초, 1000ms = 1초)✅ 예시console.log("시작");setTimeout(() => { console.log("3초 후 실행");}, 3000);console.log("끝");📤 출력:시작끝3초 후 실행setTimeout은 비동기적으로 동작하므로, 다음 줄의 코드가 먼저 실행됩니다.📌 ..
배열 메서드 forEach, map, fill, filter, reduce 📘 JavaScript 배열 메서드JavaScript에서는 배열을 다룰 수 있는 다양한 메서드가 제공됩니다. 그 중에서도 자주 쓰이는 forEach, map, fill, filter, reduce 메서드를 한 번에 정리해보겠습니다.✅ 1. forEach()설명: 배열의 각 요소에 대해 주어진 함수를 실행합니다.용도: 반복 작업 (출력, 로직 수행 등)반환값: 없음const fruits = ['apple', 'banana', 'cherry'];fruits.forEach(function(fruit, index) { console.log(`${index + 1}: ${fruit}`);});💡 반환값이 없으므로, 새로운 배열을 만들고 싶을 때는 map()을 사용하세요.✅ 2. map()설명: 배열의 각 요..
DOM 요소 선택 방법 getElementById, querySelector, querySelectorAll 📌 DOM 요소 선택 방법 정리✅ 1. getElementById()id 속성으로 하나만 선택할 때 사용빠르고 간단하지만 id만 가능const element = document.getElementById("myId");✅ 2. querySelector()CSS 선택자 방식 사용 가능클래스, 태그, 조합 등 가능 (첫 번째 요소만 반환)const element = document.querySelector(".my-class");const element2 = document.querySelector("div > p");✅ 3. querySelectorAll()CSS 선택자 방식으로 모든 요소 선택NodeList 반환 (배열처럼 forEach 사용 가능)const elements = document.quer..
DOM 조작이란 🧱 DOM이란?✅ DOM = Document Object ModelHTML 문서를 자바스크립트가 다룰 수 있는 "객체" 형태로 만든 구조즉, HTML을 트리 구조로 변환한 거야예:    안녕!   DOM이 뭔가요?  이런 HTML은 자바스크립트 입장에서 보면: document.body document.querySelector('h1') document.querySelector('p').textContent 🔧 DOM 조작이란?"자바스크립트를 이용해서 HTML 요소나 내용을 추가/수정/삭제/이동하는 것" 🛠️ 자주 하는 DOM 조작 예시작업                                          예시 요소 찾기document.getElementById(), querySelector..
HTML 요소에 내용 추가하는 3가지 방법 — append, textContent, innerHTML ✨ 추천 사용 상황✅ append() : 요소나 텍스트를 안전하게 덧붙이고 싶을 때✅ textContent : 태그 없이 순수 텍스트만 다룰 때✅ innerHTML : HTML 구조나 스타일을 같이 넣고 싶을 때 📘 append vs textContent vs innerHTML 요약메서드           설명                                    태그 해석                                                  추가 방식 append()요소나 텍스트를 뒤에 추가❌ 텍스트에 HTML 태그 써도 그대로 나옴요소 또는 문자열 가능(여러 개도 가능)textContent텍스트만 넣기❌ HTML 태그 무시됨기존 내용에 텍스트만 추가/대체innerHTMLH..
indexOf, lastIndexOf, includes 배열이나 문자열에서 특정 값 찾기 🔎 indexOf() 개념✅ 배열 버전array.indexOf(searchElement[, fromIndex]) searchElement: 찾고 싶은 값fromIndex (선택): 검색을 시작할 위치 (기본은 0)결과값: 찾은 값의 인덱스(위치) 반환못 찾으면 -1 반환 ✅ 문자열 버전 string.indexOf(searchValue[, fromIndex])   📦 배열 예시 const fruits = ['apple', 'banana', 'cherry']; console.log(fruits.indexOf('banana')); // 1 console.log(fruits.indexOf('grape'));  // -1  📦 문자열 예시 const message = "hello world"; console..
배열의 내용을 합치고 나누는 join과 split 🧩 join() — 배열 → 문자열📌 개념:배열의 요소들을 하나의 문자열로 합칠 때 사용해.📌 문법:array.join(separator)  separator는 요소 사이에 들어갈 구분자 (생략하면 기본값은 ,) ✅ 예시 1 : const fruits = ['apple', 'banana', 'cherry']; const result = fruits.join(', '); console.log(result); // "apple, banana, cherry"  ✅ 예시 2 : const nums = [1, 2, 3]; console.log(nums.join('-')); // "1-2-3" console.log(nums.join(''));  // "123" 🧩 split() — 문자열 → 배열📌 개념:..
랜덤으로 숫자 뽑기 Math.random() 문법Math.random() 0 이상 1 미만의 랜덤한 소수를 반환함(즉, 0  console.log(Math.random()); // 0.345983215... console.log(Math.random()); // 0.918274328...  ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ 📦  실용 예제들 🎯 1. 0~9 사이의 정수 랜덤값const randomNum = Math.floor(Math.random() * 10); // 0~9  🎯 2. 1~100 사이의 정수const random100 = Math.floor(Math.random() * 100) + 1; // 1~100  🎯 3. 배열에서 랜덤 요소 뽑기const colors = ['red', 'green', 'blue']; const rand..