window

정의

• 최상위 객체 (브라우저 창 자체를 의미)
• window는 생략 가능(window.alert())
  종류
• setTimeout() : 일정 시간 후, 1회만 실행(단위 : ms / 1초 : 1000ms)

  setTimeout(function() {
    alert("3초 후 출력");
  }, 3000);

• setInterval() : 일정 시간마다 실행(단위 : ms / 1초 : 1000ms)

  let interval = setInterval(() => {
    clock.innerText = currentTime();
  }, 1000); // 1초마다 currentTime() 호출 : 실시간 시계

• clearInterval() : Interval 중단

  document.getElementById("stop").addEventListener("click", () => {
    clearInterval(interval);
  });

• Date / getHours,Minutes,Seconds

  const now = new Date();
  
  // 1의 자리만 나올 때 1, 2로 나옴(01,02 아님)
  let hour = now.getHours();   // 시
  let min = now.getMinutes();  // 분
  let sec = now.getSeconds();  // 초
  
  // 01, 02로 출력
  if(hour < 10) hour = "0" + hour;
  if(min < 10) min = "0" + min;
  if(sec < 10) sec = "0" + sec;

BOM(Browser Object Model)

정의

• 브라우저 자체를 조작할 수 있는 객체들의 모음
• DOM처럼 표준은 아님 (브라우저 제공 API)

종류
navigator, location, history, screen, confirm(), alert(), prompt()

DOM(Document Object Model)

정의

• HTML 문서를 객체 기반으로 표현한 구조
• 트리(Tree) 구조로 구성되며, 각 HTML 태그, 텍스트, 주석 등을 모두 Node라고 부름
• BOM의 최상위 객체인 window의 속성 중 하나

Node : 태그, 속성, 주석, 텍스트 등 포함

탐색

• childNodes : 모든 자식 배열로 얻어오기

  const list = test.childNodes;

• parentNode : 부모 노드 탐색

  // list 3번째 요소의 부모의 색 변경
  list[3].parentNode.style.color = "red";

• firstChild : 첫 번째 자식 노드

  const ul = document.querySelector("#test");
  const first = ul.firstChild;

• lastChild : 마지막 자식 노드

  const ul = document.querySelector("#test");
  const last = ul.lastChild;

• childNodes[index] : 특정 위치의 자식 노드

  const ul = document.querySelector("#test");
  const child = ul.childNodes[9];

• previousSibling : 이전 형제 노드

  const ul = document.querySelector("#test");
  const prev = ul.childNodes[9].previousSibling;

• nextSibling : 다음 형제 노드

  const ul = document.querySelector("#test");
  const next = ul.childNodes[9].nextSibling;

  const ul = document.querySelector("#test");
  const next = ul.childNodes[9].nextSibling;

추가/삽입/삭제

• appendChild(노드) : 마지막 자식 노드로 추가

  ul.appendChild(document.createTextNode("끝에 추가"));

• append("내용" | 노드 | 요소) : 여러 개 추가 가능, 마지막 자식으로 추가

  ul.append("123", "abc");

• prepend("내용" | 노드 | 요소) : 첫 번째 자식으로 추가

  ul.prepend("맨앞에");

• before("내용" | 노드 | 요소) : 기준 요소의 앞에 추가

  ul.before("앞");

• after("내용" | 노드 | 요소) : 기준 요소의 뒤에 추가

  ul.after("뒤");

• remove() : 요소 자기 자신을 제거

  ul.remove();

Element : Node 중 태그(요소)만을 의미

• classList : 클래스 관련

  • add("클래스명") : 클래스 추가

  • remove("클래스명") : 클래스 제거

  • toggle("클래스명") : 있으면 제거, 없으면 추가

  • contains("클래스명") : 클래스 포함 여부 확인

    el.classList.add("active");
    el.classList.remove("active");
    el.classList.toggle("active");
    el.classList.contains("active"); // true or false

• children : 모든 자식 요소들 (HTMLCollection)

  const ul2 = document.querySelector("#test2");
  ul2.children

• firstElementChild : 첫 번째 자식 요소

  const ul2 = document.querySelector("#test2");
  ul2.firstElementChild

• lastElementChild : 마지막 자식 요소

  const ul2 = document.querySelector("#test2");
  ul2.lastElementChild

• parentElement : 부모 요소

  const ul2 = document.querySelector("#test2");
  ul2.parentElement

• previousElementSibling : 이전 형제 요소

  const ul2 = document.querySelector("#test2");
  ul2.previousElementSibling

• nextElementSibling : 다음 형제 요소

  const ul2 = document.querySelector("#test2");
  ul2.nextElementSibling

정규표현식 (Regular Expression)

정의

• 특정 패턴을 가진 문자열 집합을 표현하는 형식 언어
• 문자열 검사/치환/검색/일치 여부 판단에 사용
• JS에서 객체로 생성 가능
  메서드
• regExp.test(문자열) : 패턴과 일치 여부를 true/false로 반환
• regExp.exec(문자열) : 일치하는 문자열을 반환, 없으면 null
  메타문자

  패턴	의미
  [abcd]	a, b, c, d 중 하나 포함
  ^group	"group"으로 시작
  group$	"group"으로 끝남
  \d	숫자 0~9
  \w	영문자/숫자
  \s	공백 문자
  .	임의의 한 글자
  a{5}	a가 5번 반복
  a{2,5}	a가 2~5번 반복
  *	0개 이상
  +	1개 이상
  ?	0 또는 1개

  형태

  const reg = new RegExp("java");  // 방법 1
  const reg = /java/;              // 방법 2 (리터럴)
  console.log(reg.test("java1"));  // ✅true
  console.log(reg.test("vaja1"));  // ❌ false
  
  // 심화
  const reg = /^[ㄱ-힣]{2,5}$/; // 한글 2~5글자
  const reg = /^\d{6}-\d{7}$/; // 숫자 6자리 - 숫자 7자리