목차
개요
자바스크립트는 웹 페이지에 동적인 기능을 추가하는 데에 사용되는 스크립팅 언어입니다. HTML, CSS와 함께 사용하여 사용자와 상호작용이 가능한 웹 애플리케이션을 만들 수 있습니다.
이 글에서는 자바스크립트를 사용하여 웹 페이지의 DOM을 조작하고, 이벤트를 처리하며, AJAX를 통해 서버와 비동기적으로 데이터를 주고받는 방법을 알아보겠습니다.
DOM 조작
DOM(Document Object Model)은 웹 페이지의 요소들을 트리 구조로 표현한 것으로, 자바스크립트를 사용하여 DOM을 조작할 수 있습니다. 예를 들어, 특정 요소의 스타일을 변경하거나 새로운 요소를 추가하는 등의 작업이 가능합니다.
아래는 자바스크립트를 사용하여 DOM을 조작하는 간단한 예시입니다.
let element = document.getElementById("myElement");
element.style.color = "red";
위의 코드는 id가 “myElement”인 요소의 글자색을 빨간색으로 변경하는 예시입니다.
이벤트 처리
자바스크립트를 사용하면 웹 페이지에서 발생하는 다양한 이벤트를 처리할 수 있습니다. 예를 들어, 버튼 클릭이나 마우스 오버 등의 사용자의 동작에 반응하여 특정 동작을 수행할 수 있습니다.
아래는 자바스크립트를 사용하여 이벤트를 처리하는 간단한 예시입니다.
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
위의 코드는 id가 “myButton”인 버튼이 클릭되었을 때 경고창을 띄우는 예시입니다.
AJAX 요청
자바스크립트를 사용하여 AJAX(Asynchronous JavaScript and XML) 요청을 보내서 서버와 비동기적으로 데이터를 주고받을 수 있습니다. 이를 통해 웹 페이지에서 동적으로 데이터를 업데이트할 수 있습니다.
아래는 자바스크립트를 사용하여 AJAX 요청을 보내는 예시입니다.
let xhr = new XMLHttpRequest();
xhr.open("GET", "/api/data", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
let data = JSON.parse(xhr.responseText);
console.log(data);
}
};
xhr.send();
위의 코드는 “/api/data” 주소로 GET 요청을 보내고, 서버로부터 받은 응답을 JSON 형식으로 파싱하여 콘솔에 출력하는 예시입니다.