자바스크립트는 웹 개발에서 가장 널리 사용되는 스크립트 언어 중 하나입니다. 자바스크립트를 사용하면 웹 페이지의 동적인 기능을 추가하고 사용자와 상호 작용할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트와의 상호 작용에 대해 알아보겠습니다.

HTML과의 연동

자바스크립트를 사용하여 HTML 요소와 상호 작용할 수 있습니다. 예를 들면, 버튼을 클릭하면 특정 동작이 실행되도록 설정할 수 있습니다. 이를 위해 HTML 요소에 이벤트 리스너를 추가하고 해당 이벤트가 발생했을 때 실행되는 함수를 정의합니다.

<button onclick="myFunction()">Click me</button>

<script>
function myFunction() {
  alert("버튼이 클릭되었습니다!");
}
</script>

위의 예제에서는 버튼을 클릭하면 myFunction()이라는 함수가 호출되고, 함수 내부의 alert() 함수가 실행됩니다. 이는 간단한 경고창을 표시하는 예시일 뿐이지만, 더 복잡한 동작을 구현할 수도 있습니다.

CSS와의 상호 작용

자바스크립트를 사용하여 CSS를 조작할 수도 있습니다. 이를 통해 웹 페이지의 스타일을 동적으로 변경하거나 애니메이션 효과를 추가할 수 있습니다. 예를 들어, 특정 요소를 클릭하면 배경색이 변경되도록 설정할 수 있습니다.

<button onclick="changeColor()">Click me</button>

<script>
function changeColor() {
  var element = document.getElementById("myElement");
  element.style.backgroundColor = "red";
}
</script>

위의 예제에서는 버튼 클릭 시 changeColor() 함수가 호출되고, 함수 내부에서 getElementById() 메서드를 사용하여 특정 요소를 가져옵니다. 그리고 style 속성을 사용하여 해당 요소의 배경색을 변경합니다.

서버와의 통신

자바스크립트를 사용하여 서버와 데이터를 주고받을 수도 있습니다. 이를 통해 AJAX 요청을 보내고 응답 데이터를 처리할 수 있습니다. 예를 들어, 사용자의 입력값을 서버로 전송하고, 서버에서 받은 응답 데이터를 동적으로 처리하여 표시할 수 있습니다.

function sendData() {
  var userInput = document.getElementById("userInput").value;

  // AJAX 요청 보내기
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "https://example.com/api", true);
  xhr.setRequestHeader("Content-Type", "application/json");

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      // 응답 데이터 처리
    }
  };

  var data = JSON.stringify({ userInput: userInput });
  xhr.send(data);
}

위의 예제에서는 sendData() 함수가 호출되면 사용자의 입력값을 가져와서, AJAX 요청을 보냅니다. 요청은 POST 메서드로 example.com/api 주소로 보내지며, 요청 헤더에는 JSON 형식의 데이터를 보낸다고 명시합니다. 응답이 도착하면 onreadystatechange 이벤트 핸들러가 호출되고, 응답 데이터를 JSON 형식으로 파싱하여 처리합니다.

마치며

이번 포스트에서는 자바스크립트와의 상호 작용에 대해 알아보았습니다. 자바스크립트를 사용하면 HTML, CSS, 서버와의 연동 등 다양한 기능을 구현할 수 있습니다. 웹 개발에서 자바스크립트의 활용범위는 매우 넓기 때문에, 깊이 있는 학습이 필요합니다. 참고 자료를 통해 더 많은 정보를 얻고, 실제로 적용해보며 익숙해지는 것을 추천합니다.

참고 자료

• MDN - JavaScript
• MDN - JavaScript와 상호 작용하기