[JavaScript] 자바스크립트 101 Tips

동적인 웹 페이지를 만드는 데 유용한 자바스크립트 팁과 예제를 아래에 101가지 제공하겠습니다. 각각의 팁은 jQuery 없이 순수 자바스크립트로 작성되었습니다.

01. DOM 요소 선택 및 조작

document.getElementById("myElement").innerHTML = "Hello, World!";

02. 클래스 추가 및 제거

document.getElementById("myElement").classList.add("newClass");
document.getElementById("myElement").classList.remove("newClass");

03. 이벤트 리스너 추가

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

04. 스타일 변경

document.getElementById("myElement").style.backgroundColor = "blue";

05. 요소 숨기기 및 보이기

document.getElementById("myElement").style.display = "none"; // 숨기기
document.getElementById("myElement").style.display = "block"; // 보이기

06. 애니메이션 추가 (CSS transition 사용)

/* CSS */
#myElement {
    transition: all 0.5s ease;
}

// JavaScript
document.getElementById("myElement").style.opacity = "0.5";

07. 페이지 로드 시 실행되는 함수

window.onload = function() {
    alert("Page is loaded!");
};

08. 폼 제출 이벤트 막기

document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault();
    alert("Form submission prevented!");
});

09. 현재 날짜 및 시간 표시

document.getElementById("currentDate").innerHTML = new Date().toLocaleString();

10. AJAX 요청 보내기

var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    }
};
xhr.send();

11. JSON 데이터 파싱

var jsonData = '{"name": "John", "age": 30}';
var obj = JSON.parse(jsonData);
console.log(obj.name); // John

12. 로컬 스토리지에 데이터 저장 및 읽기

localStorage.setItem("username", "JohnDoe");
var username = localStorage.getItem("username");
console.log(username); // JohnDoe

13. 세션 스토리지 사용

sessionStorage.setItem("sessionKey", "sessionValue");
var sessionValue = sessionStorage.getItem("sessionKey");
console.log(sessionValue); // sessionValue

14. 배경색 전환 (클릭 시)

document.getElementById("changeColorButton").addEventListener("click", function() {
    document.body.style.backgroundColor = document.body.style.backgroundColor === "blue" ? "white" : "blue";
});

15. 키보드 이벤트 처리

document.addEventListener("keydown", function(event) {
    console.log("Key pressed: " + event.key);
});

16. 마우스 오버 이벤트 처리

document.getElementById("hoverElement").addEventListener("mouseover", function() {
    alert("Mouse is over the element!");
});

17. 요소가 뷰포트에 있는지 확인

function isInViewport(element) {
    var rect = element.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

18. 문서의 끝에 스크롤 감지

window.addEventListener("scroll", function() {
    if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
        alert("You've reached the bottom of the page!");
    }
});

19. 캔버스에 그림 그리기

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 150, 100);

20. 비디오 제어

var video = document.getElementById("myVideo");
video.play(); // 재생
video.pause(); // 일시 중지

21. 오디오 제어

var audio = document.getElementById("myAudio");
audio.play(); // 재생
audio.pause(); // 일시 중지

22. 클립보드에 텍스트 복사

function copyToClipboard(text) {
    var tempInput = document.createElement("input");
    tempInput.value = text;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand("copy");
    document.body.removeChild(tempInput);
}

23. 요소의 위치 및 크기 가져오기

var rect = document.getElementById("myElement").getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);

24. 요소의 자식 요소 모두 제거

var element = document.getElementById("myElement");
while (element.firstChild) {
    element.removeChild(element.firstChild);
}

25. 브라우저 콘솔에 메시지 출력

console.log("This is a log message.");
console.warn("This is a warning message.");
console.error("This is an error message.");

26. 배열 반복 처리 (forEach)

var array = [1, 2, 3, 4, 5];
array.forEach(function(item) {
    console.log(item);
});

27. 배열 필터링 (filter)

var array = [1, 2, 3, 4, 5];
var evenNumbers = array.filter(function(item) {
    return item % 2 === 0;
});
console.log(evenNumbers); // [2, 4]

28. 배열 변환 (map)

var array = [1, 2, 3, 4, 5];
var squaredNumbers = array.map(function(item) {
    return item * item;
});
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

29. 배열 요소 합계 구하기 (reduce)

var array = [1, 2, 3, 4, 5];
var sum = array.reduce(function(total, item) {
    return total + item;
}, 0);
console.log(sum); // 15

30. 타이머 설정 및 해제

var timer = setTimeout(function() {
    alert("This alert shows after 3 seconds!");
}, 3000);

clearTimeout(timer); // 타이머 해제

31. 간격 타이머 설정 및 해제

var interval = setInterval(function() {
    console.log("This message repeats every 2 seconds.");
}, 2000);

clearInterval(interval); // 간격 타이머 해제

32. 문서의 모든 링크에 이벤트 추가

var links = document.querySelectorAll("a");
links.forEach(function(link) {
    link.addEventListener("click", function(event) {
        alert("Link clicked: " + link.href);
    });
});

33. 요소의 텍스트 콘텐츠 가져오기 및 설정하기

var element = document.getElementById("myElement");
var text = element.textContent; // 텍스트 가져오기
element.textContent = "New text content"; // 텍스트 설정하기

34. 요소의 HTML 콘텐츠 가져오기 및 설정하기

var element = document.getElementById("myElement");
var html = element.innerHTML; // HTML 가져오기
element.innerHTML = "New HTML content"; // HTML 설정하기

35. 이미지 전환

document.getElementById("myImage").src = "newImage.jpg";

36. 창 크기 변경 시 이벤트 처리

window.addEventListener("resize", function() {
    console.log("Window resized to " + window.innerWidth + "x" + window.innerHeight);
});

37. 현재 URL 가져오기

var currentURL = window.location.href;
console.log(currentURL);

38. URL 파라미터 가져오기

function getQueryParam(param) {
    var urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}
var value = getQueryParam("myParam");
console.log(value);

39. 페이지 스크롤 위치 가져오기

var scrollPosition = window.scrollY;
console.log(scrollPosition);

40. 페이지 맨 위로 스크롤하기

window.scrollTo({ top: 0, behavior: 'smooth' });

41. 로딩 스피너 보여주기

document.getElementById("spinner").style.display = "block";

42. 로딩 스피너 숨기기

document.getElementById("spinner").style.display = "none";

43. 요소 클릭 시 다른 요소로 포커스 이동

document.getElementById("myButton").addEventListener("click", function() {
    document.getElementById("targetInput").focus();
});

44. 새 창 열기

window.open("https://www.example.com", "_blank");

45. 요소 복제하기

var original = document.getElementById("originalElement");
var clone = original.cloneNode(true);
document.body.appendChild(clone);

46. 현재 스크립트 태그의 URL 가져오기

var scriptUrl = document.currentScript.src;
console.log(scriptUrl);

47. 노드리스트를 배열로 변환

var nodeList = document.querySelectorAll("div");
var array = Array.from(nodeList);

48. 이벤트 전파 막기

document.getElementById("myElement").addEventListener("click", function(event) {
    event.stopPropagation();
});

49. 이벤트 기본 동작 막기

document.getElementById("myLink").addEventListener("click", function(event) {
    event.preventDefault();
});

50. 요소의 자식 요소에 이벤트 추가

document.getElementById("parentElement").addEventListener("click", function(event) {
    if (event.target && event.target.matches("div.childElement")) {
        alert("Child element clicked!");
    }
});

51. 요소의 데이터 속성 가져오기 및 설정하기

var element = document.getElementById("myElement");
var dataValue = element.getAttribute("data-value"); // 데이터 속성 가져오기
element.setAttribute("data-value", "newValue"); // 데이터 속성 설정하기

52. 애니메이션 완료 시점 감지

var element = document.getElementById("myElement");
element.addEventListener("transitionend", function() {
    alert("Transition completed!");
});

53. 비동기 함수 사용

async function fetchData() {
    let response = await fetch("https://api.example.com/data");
    let data = await response.json();
    console.log(data);
}
fetchData();

54. Promise 사용

function asyncTask() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("Task completed!");
        }, 2000);
    });
}

asyncTask().then((message) => {
    console.log(message);
});

55. 화살표 함수 사용

var array = [1, 2, 3, 4, 5];
var doubled = array.map(item => item * 2);
console.log(doubled); // [2, 4, 6, 8, 10]

56. 객체 디스트럭처링

var person = { name: "John", age: 30, city: "New York" };
var { name, age, city } = person;
console.log(name, age, city); // John 30 New York

57. 템플릿 리터럴 사용

var name = "John";
var greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, John!

58. 객체 병합

var obj1 = { a: 1, b: 2 };
var obj2 = { b: 3, c: 4 };
var merged = { ...obj1, ...obj2 };
console.log(merged); // { a: 1, b: 3, c: 4 }

59. 기본 매개변수 사용

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet("John"); // Hello, John!

60. 스프레드 연산자 사용

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var combined = [...array1, ...array2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

61. 문자열 포함 여부 확인 (includes)

var text = "Hello, world!";
console.log(text.includes("world")); // true

62. 배열 요소 찾기 (find)

var array = [1, 2, 3, 4, 5];
var found = array.find(item => item > 3);
console.log(found); // 4

63. 요소 삭제하기

var element = document.getElementById("myElement");
element.parentNode.removeChild(element);

64. 객체에서 속성 제거

var obj = { a: 1, b: 2, c: 3 };
delete obj.b;
console.log(obj); // { a: 1, c: 3 }

65. 문자열 반복 (repeat)

var text = "Hello!";
var repeated = text.repeat(3);
console.log(repeated); // Hello!Hello!Hello!

66. 날짜 포맷 변경

var date = new Date();
var formattedDate = date.toISOString().split('T')[0];
console.log(formattedDate); // YYYY-MM-DD 형식의 날짜

67. 비밀번호 입력값 표시 전환

var passwordInput = document.getElementById("password");
var toggleButton = document.getElementById("togglePassword");

toggleButton.addEventListener("click", function() {
    var type = passwordInput.getAttribute("type") === "password" ? "text" : "password";
    passwordInput.setAttribute("type", type);
});

68. 브라우저 크기와 무관한 요소 크기 설정

var element = document.getElementById("myElement");
element.style.width = "100vw"; // 뷰포트의 너비
element.style.height = "100vh"; // 뷰포트의 높이

69. 사용자 에이전트 검사

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
console.log(isMobile); // 모바일 장치인 경우 true

70. 이미지 미리 로드

var img = new Image();
img.src = "image.jpg";
img.onload = function() {
    console.log("Image loaded");
};

71. 스크롤 애니메이션

document.getElementById("scrollButton").addEventListener("click", function() {
    window.scrollTo({ top: 500, behavior: 'smooth' });
});

72. 현재 URL에 쿼리 파라미터 추가

function addQueryParam(url, key, value) {
    var urlObj = new URL(url);
    urlObj.searchParams.set(key, value);
    return urlObj.toString();
}
var newUrl = addQueryParam(window.location.href, "newParam", "newValue");
console.log(newUrl);

73. 요소의 부모 요소 찾기

var child = document.getElementById("childElement");
var parent = child.parentElement;
console.log(parent);

74. 정규 표현식을 사용한 문자열 패턴 매칭

var text = "The quick brown fox jumps over the lazy dog.";
var pattern = /quick/;
var result = pattern.test(text);
console.log(result); // true

75. 요소의 첫 번째 자식 요소 찾기

var parent = document.getElementById("parentElement");
var firstChild = parent.firstElementChild;
console.log(firstChild);

76. 요소의 마지막 자식 요소 찾기

var parent = document.getElementById("parentElement");
var lastChild = parent.lastElementChild;
console.log(lastChild);

77. 문자열 대소문자 변환

var text = "Hello, World!";
console.log(text.toLowerCase()); // hello, world!
console.log(text.toUpperCase()); // HELLO, WORLD!

78. 문자열 공백 제거

var text = "  Hello, World!  ";
var trimmedText = text.trim();
console.log(trimmedText); // "Hello, World!"

79. 특정 위치로 스크롤하기

document.getElementById("myButton").addEventListener("click", function() {
    document.getElementById("targetElement").scrollIntoView({ behavior: 'smooth' });
});

80. 요소의 형제 요소 찾기

var element = document.getElementById("myElement");
var nextSibling = element.nextElementSibling;
var previousSibling = element.previousElementSibling;
console.log(nextSibling, previousSibling);

81. 자식 요소 중 특정 클래스의 요소 찾기

var parent = document.getElementById("parentElement");
var child = parent.querySelector(".childClass");
console.log(child);

82. 브라우저 정보 가져오기

var browserInfo = navigator.userAgent;
console.log(browserInfo);

83. 이메일 주소 유효성 검사

function isValidEmail(email) {
    var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return pattern.test(email);
}
console.log(isValidEmail("test@example.com")); // true
console.log(isValidEmail("invalid-email")); // false

84. 랜덤 숫자 생성

var randomNumber = Math.floor(Math.random() * 100) + 1; // 1에서 100 사이의 랜덤 숫자
console.log(randomNumber);

85. 현재 브라우저 탭 닫기

window.close();

86. 브라우저 히스토리 관리

window.history.pushState({ page: 1 }, "title 1", "?page=1");
window.history.replaceState({ page: 2 }, "title 2", "?page=2");

87. SVG 요소 조작

var svgElement = document.getElementById("mySVG");
svgElement.setAttribute("width", "500");
svgElement.setAttribute("height", "500");

88. 드래그 앤 드롭 기능 구현

var dragItem = document.getElementById("dragItem");

dragItem.addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
});

var dropZone = document.getElementById("dropZone");

dropZone.addEventListener("dragover", function(event) {
    event.preventDefault();
});

dropZone.addEventListener("drop", function(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text/plain");
    var draggedElement = document.getElementById(data);
    dropZone.appendChild(draggedElement);
});

89. 콘솔에서 객체 확인하기

var obj = { name: "John", age: 30, city: "New York" };
console.dir(obj);

90. 요소의 자식 요소 수 가져오기

var parent = document.getElementById("parentElement");
var childCount = parent.childElementCount;
console.log(childCount);

91. XML 데이터 파싱

var xmlString = "ToveJaniReminderDon't forget me this weekend!
                





                
                




                ";
var parser = new DOMParser();
var xmlDoc = parser.parseFromString(xmlString, "text/xml");
console.log(xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue); // Tove

92. 배경 이미지 전환

document.body.style.backgroundImage = "url('background.jpg')";

93. 정적 자원 캐싱 확인

var isResourceCached = function(url) {
    return caches.match(url).then(function(response) {
        return response !== undefined;
    });
};

94. 콘솔에 시간 측정하기

console.time("TimeTaken");
// some code
console.timeEnd("TimeTaken");

95. 콘솔에 테이블 형식으로 데이터 출력

var data = [
    { name: "John", age: 30 },
    { name: "Jane", age: 25 },
    { name: "Peter", age: 35 }
];
console.table(data);

96. 오프라인 상태 감지

window.addEventListener("offline", function() {
    alert("You are now offline.");
});

window.addEventListener("online", function() {
    alert("You are now online.");
});

97. 스크립트 동적으로 추가

var script = document.createElement("script");
script.src = "https://example.com/script.js";
document.head.appendChild(script);

98. CSS 파일 동적으로 추가

var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "https://example.com/style.css";
document.head.appendChild(link);

99. 미디어 쿼리 사용

    if (window.matchMedia("(max-width: 600px)").matches) {
        console.log("Screen width is less than or equal to 600px");
    }

100. 페이지 URL 강제 변경

    window.location.href = "https://example.com";

101. 이벤트 리스너 삭제

    function handleClick() {
        alert("Element clicked!");
    }

    var element = document.getElementById("myElement");

    ent.addEventListener("click", handleClick);

    // 이벤트 리스너 삭제
    element.removeEventListener("click", handleClick);

이상으로 웹 페이지를 동적으로 만들기 위한 101가지 자바스크립트 팁과 예제를 제공해드렸습니다. 필요에 따라 적절히 사용하여 원하는 동작을 구현해보세요!