자주 쓰는 Javascript 정리 / Javascript 문법

2022-02-10

자주 쓰는 Javascript

document ready 완료 후 실행

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // 실행 코드
    });
</script>

몇 초 지연 후 실행

console.log("시작");

setTimeout(function() {
    console.log("3초 후 실행");
}, 3000);

console.log("종료");

setTimeout은 비동기 방식으로 동작하며, 뒤에 오는 코드는 기다리지 않고 바로 실행됩니다.

엔터 키 이벤트 처리

// 인풋에 엔터 키 이벤트 발생 시 처리
document.getElementById("인풋ID").addEventListener("keyup", function(event) {
    if (event.key === "Enter") {
        함수명();
    }
});

change 이벤트 부여

document.getElementById('인풋ID').addEventListener('change', 동작함수);

단, hidden 인풋에는 change 이벤트를 부여해도 동작하지 않습니다.

자식 요소 찾기

const keywordList = document.getElementById("keywordDiv").children;

for (let i = 0; i < keywordList.length; i++) {
    console.log(keywordList[i]);
}

childNodes : 주석, 텍스트 노드도 자식 노드로 포함하여 반환합니다.
children : 비 요소 노드를 제외한 자식 노드들만 반환합니다.

부모 노드 삭제

document.getElementById("ID명").parentNode.remove();

현재 페이지 새로고침

location.reload(true);
location.href = location.href;
history.go(0);

위 3가지 방법 중 아무거나 사용하면 됩니다.

다른 페이지로 리다이렉트

window.location.href = "http://URL";

특정 요소로 스크롤 이동

location.href = "#" + 요소Name;

페이지 로드 시 원하는 요소 위치로 스크롤을 이동하려면, 위 로직을 document ready 안에 넣으면 됩니다.

라디오 체크 처리

document.getElementById("라디오InputID").checked = true;

토글 버튼 클릭 이벤트 부여

<c:forEach items="${itemsList}" var="row" varStatus="i">
  </div>
      <div class="canvas-btn-wrap">
        <div class="toggle-wrap">
          <div class="toggle-btn type02">
            <input type="checkbox" class="checkbox" onclick="togleCanvas(this, ${row.itemId})">
            <div class="knobs"></div>
            <div class="layer"></div>
          </div>
        </div>
      </div>
  </div>
</c:forEach>

위 캔버스 열기/닫기 버튼 토글 버튼 checkbox 클릭 시 아래 javascript 함수가 동작하도록 합니다.

function togleCanvas(checkbox, itemId) {
  if (checkbox.checked) {
    openCanvas(itemId);
  } else {
    closeCanvas(itemId);
  }
}

클래스명을 가진 모든 요소에 반복

const elements = document.querySelectorAll(".클래스명");

elements.forEach(function(element, index) {
    element.setAttribute("id", "ID명_" + (index + 1)); // ID 부여
    element.classList.add("신규클래스명"); // 클래스명 부여
    element.value = "값"; // 값 설정
});

querySelectorAll는 NodeList를 반환하여 forEach를 사용할 수 있고,
getElementsByClassName은 HTMLCollection를 반환하여 forEach를 사용할 수 없습니다.

ID로 찾은 요소에 클래스명 있는지 확인

const dom = document.getElementById("ID명");
			
if (dom !== null && dom.classList.contains("클래스명")) {
  // 클래스명이 있는 경우 처리
}

ID가 특정문자열로 시작하는 Dom의 수

const elements = document.querySelectorAll('[id^="특정문자열"]');

console.log(elements.length);

Javascript 이벤트 강제 발생 처리

change 이벤트 강제 발생

document.getElementById("ID명").dispatchEvent(new Event("change"));

click 이벤트 강제 발생

document.getElementById("ID명").click();

javascript 반복문 정리

for 반복문

for (let i = 0; i < list.length; i++) {
    const obj = list[i];
}

인덱스 값을 사용하여 배열의 요소 값을 얻을 수 있습니다.

for…in 반복문

const obj = { a: 1, b: 2, c: 3 };

for (let key in obj) {
  console.log(key); // "a", "b", "c"
  console.log(obj[key]); // 1, 2, 3
}

순서가 보장되지 않으며, 키 문자열로 반복하여 객체의 속성을 열거할 때 주로 사용합니다.

for…of 반복문

const arr = [1, 2, 3];

for (let value of arr) {
  console.log(value); // 1, 2, 3
}

순서가 보장되며, 반복 가능한 객체의 값을 직접 처리할 때 사용합니다.
for 반복문이나 forEach 메서드와 달리, 인덱스 값을 얻을 수 없다는 단점이 있습니다.

javascript 날짜 계산

년, 월의 마지막 일자 계산

function getLastDay(year, month) {
  // 다음 달의 이전 날로 설정 (month는 0부터 시작)
  let date = new Date(year, month, 0);

  // 마지막 일자 반환
  return date.getDate();
}

2024~2025년 달력 기준으로 테스트 완료하였습니다.

자주 쓰는 Javascript 정리 / Javascript 문법

자주 쓰는 Javascript

문자열 관련 처리

Javascript로 CSS 스타일 변경

서버 요청 전 처리

Javascript로 HTML 요소 추가

Javascript 정규표현식