JS 바닐라 자바스크립트

🏷️ 챕터 1 - 기본

1. console.log()

콘솔 출력 함수

console.log("출력 예제");

2. alert(), prompt(), confirm()

브라우저 기본 팝업 함수

alert("알림창 띄우기");

let name = prompt("이름을 입력하세요");
console.log("입력한 이름:", name);

let isDelete = confirm("정말 삭제하시겠습니까?");
console.log(isDelete); // 확인:true, 취소:false

3. 문자열 관련 메서드

3-1. length

• 문자열 길이 확인

let txt = "Hello";
console.log(txt.length); // 5

3-2. toUpperCase(), toLowerCase()

• 대소문자 변환

console.log("hello".toUpperCase()); // HELLO
console.log("WORLD".toLowerCase()); // world

3-3. includes()

• 문자열 포함 여부 확인

console.log("javascript".includes("java")); // true

3-4. slice()

• 문자열 자르기

let str = "abcdef";
console.log(str.slice(0, 3)); // abc

4. 배열 관련 메서드

4-1. push(), pop()

• 배열 끝에 추가 / 끝에서 제거

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1,2,3,4]

arr.pop();
console.log(arr); // [1,2,3]

4-2. shift(), unshift()

• 배열 앞에서 제거 / 앞에 추가

arr.shift();
console.log(arr); // [2,3]

arr.unshift(0);
console.log(arr); // [0,2,3]

4-3. forEach()

• 배열 요소를 하나씩 순회

["a", "b", "c"].forEach(item => {
  console.log(item);
});

4-4. map()

• 배열을 가공하여 새로운 배열 반환

let nums = [1, 2, 3];
let doubled = nums.map(n => n * 2);
console.log(doubled); // [2,4,6]

4-5. filter()

• 조건에 맞는 요소만 걸러서 새로운 배열 반환

let even = [1, 2, 3, 4].filter(n => n % 2 === 0);
console.log(even); // [2,4]

5. 수학 관련 (Math 객체)

5-1. Math.random()

• 0 이상 1 미만의 랜덤 숫자

console.log(Math.random()); // 0~1 사이

5-2. Math.floor(), Math.ceil(), Math.round()

• 내림 / 올림 / 반올림

console.log(Math.floor(4.9)); // 4
console.log(Math.ceil(4.1));  // 5
console.log(Math.round(4.5)); // 5

5-3. 랜덤 정수 구하기

let random = Math.floor(Math.random() * 10) + 1; // 1~10
console.log(random);

6. 날짜 관련 (Date 객체)

오늘 날짜 출력

let today = new Date();
console.log(today.toDateString()); // 예: Mon Jul 22 2025

7. JSON 관련

객체를 문자열로 변환 / 다시 객체로 변환

let obj = { name: "홍길동", age: 20 };
let json = JSON.stringify(obj); 
console.log(json); // {"name":"홍길동","age":20}

let parsed = JSON.parse(json);
console.log(parsed.name); // 홍길동

🏷️ 챕터 2 - 심화

1. 이벤트 관련

1-1. addEventListener()

• 특정 요소에 이벤트를 등록

const btn = document.querySelector("#btn");
btn.addEventListener("click", () => {
  alert("버튼이 클릭되었습니다!");
});

1-2. setAttribute()

• HTML 속성 추가/변경

const img = document.querySelector("#photo");
img.setAttribute("src", "image.jpg");

1-3. classList.add(), classList.remove(), classList.toggle()

• 클래스 조작

const box = document.querySelector(".box");
box.classList.add("active");   // 클래스 추가
box.classList.remove("active");// 클래스 제거
box.classList.toggle("active");// 토글 (있으면 제거, 없으면 추가)

2. 타이머 관련

2-1. setTimeout()

• 일정 시간 후 함수 실행

setTimeout(() => {
  console.log("3초 후 실행됩니다");
}, 3000);

2-2. setInterval() / clearInterval()

• 일정 간격으로 반복 실행, 중지 가능

let count = 0;
let timer = setInterval(() => {
  console.log("카운트:", ++count);
  if (count === 5) clearInterval(timer); // 5가 되면 멈춤
}, 1000);

3. 비동기 통신 (기초)

3-1. fetch()

• API 호출 시 사용

fetch("https://jsonplaceholder.typicode.com/posts/1")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("에러:", error));

3-2. async / await

• 비동기 코드를 더 간단하게 작성

async function getData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("에러:", error);
  }
}

getData();

4. 객체 관련

4-1. Object.keys(), Object.values()

• 객체의 키/값만 배열로 가져오기

const user = { name: "홍길동", age: 20 };
console.log(Object.keys(user));   // ["name", "age"]
console.log(Object.values(user)); // ["홍길동", 20]

5. 배열 고급 (정렬/찾기)

5-1. find(), findIndex()

• 조건에 맞는 첫 번째 요소 또는 인덱스 찾기

const arr = [10, 20, 30, 40];
console.log(arr.find(n => n > 25));      // 30
console.log(arr.findIndex(n => n > 25)); // 2

5-2. sort()

• 배열 정렬 (숫자는 주의해서 사용)

let nums = [3, 1, 4, 2];
nums.sort((a, b) => a - b);
console.log(nums); // [1,2,3,4]

6. 로컬 스토리지

브라우저에 데이터 저장 → 새로고침해도 유지

localStorage.setItem("user", "홍길동");
console.log(localStorage.getItem("user")); // 홍길동
localStorage.removeItem("user"); // 삭제

🏷️ 챕터 3 - 이벤트 리스너

1. 마우스 관련

1-1. click

• 클릭 시 실행

element.addEventListener("click", () => {
  console.log("클릭되었습니다!");
});

1-2. dblclick

• 더블 클릭 시 실행

element.addEventListener("dblclick", () => {
  console.log("더블 클릭!");
});

1-3. mouseenter / mouseleave

• 마우스가 요소 위로 올라올 때 / 벗어날 때

element.addEventListener("mouseenter", () => {
  console.log("마우스가 들어왔습니다.");
});
element.addEventListener("mouseleave", () => {
  console.log("마우스가 나갔습니다.");
});

1-4. mousemove

• 마우스가 움직일 때 (좌표값 확인 가능)

element.addEventListener("mousemove", (e) => {
  console.log("X:", e.clientX, "Y:", e.clientY);
});

2. 키보드 관련

2-1. keydown / keyup

• 키를 누를 때 / 뗄 때

document.addEventListener("keydown", (e) => {
  console.log("누른 키:", e.key);
});

document.addEventListener("keyup", () => {
  console.log("키에서 손을 뗐습니다.");
});

2-2. keypress (※ 최근엔 keydown 사용 권장)

document.addEventListener("keypress", (e) => {
  console.log("입력된 키:", e.key);
});

3. 입력 폼 관련

3-1. input

• 입력값이 바뀔 때마다 실행

const input = document.querySelector("#name");
input.addEventListener("input", () => {
  console.log("입력값:", input.value);
});

3-2. change

• 값이 바뀌고 포커스를 잃었을 때 실행 (주로 select, checkbox에서 사용)

const select = document.querySelector("#city");
select.addEventListener("change", () => {
  console.log("선택된 값:", select.value);
});

3-3. submit

• 폼이 제출될 때 실행 (새로고침 방지 가능)

const form = document.querySelector("#myForm");
form.addEventListener("submit", (e) => {
  e.preventDefault(); // 기본 제출(새로고침) 방지
  console.log("폼이 제출되었습니다!");
});

4. 윈도우/문서 관련

4-1. load

• 페이지가 모두 로드된 후 실행

window.addEventListener("load", () => {
  console.log("페이지가 완전히 로드되었습니다.");
});

4-2. scroll

• 스크롤이 움직일 때

window.addEventListener("scroll", () => {
  console.log("스크롤 위치:", window.scrollY);
});

4-3. resize

• 창 크기가 바뀔 때

window.addEventListener("resize", () => {
  console.log("창 크기:", window.innerWidth, window.innerHeight);
});

5. 기타 유용한 이벤트

5-1. contextmenu

• 오른쪽 마우스 클릭 메뉴

element.addEventListener("contextmenu", (e) => {
  e.preventDefault(); // 기본 메뉴 막기
  console.log("오른쪽 클릭됨");
});

5-2. focus / blur

• 포커스가 들어올 때 / 나갈 때

const inputBox = document.querySelector("#input");
inputBox.addEventListener("focus", () => {
  console.log("포커스 들어옴");
});
inputBox.addEventListener("blur", () => {
  console.log("포커스 벗어남");
});