자바스크립트를 활용한 웹 개발

자바스크립트는 웹 개발에서 널리 사용되는 프로그래밍 언어입니다. 웹 페이지를 동적으로 만들거나 사용자와 상호작용하는 기능을 구현하기 위해 자바스크립트를 사용할 수 있습니다.

DOM 조작하기

자바스크립트에서는 DOM(Document Object Model) 을 조작하여 웹 페이지의 요소를 동적으로 변경할 수 있습니다. 예를 들어, 버튼을 클릭하면 특정 요소의 텍스트를 변경하거나 스타일을 적용할 수 있습니다.

const button = document.getElementById('myButton');
const element = document.getElementById('myElement');

button.addEventListener('click', function() {
    element.textContent = '새로운 내용으로 변경되었습니다.';
    element.style.color = 'red';
});

위 코드는 myButton이라는 id를 가진 버튼을 클릭하면 myElement라는 id를 가진 요소의 텍스트와 스타일을 변경하는 예시입니다.

데이터 처리하기

자바스크립트를 사용하면 웹 페이지에서 사용되는 데이터를 처리할 수 있습니다. 예를 들어, 사용자가 입력한 데이터를 검증하거나 필터링하는 등의 작업을 할 수 있습니다.

const input = document.getElementById('myInput');
const submitButton = document.getElementById('submitButton');

submitButton.addEventListener('click', function() {
    const data = input.value;

    if (data) {
        // 데이터 검증 및 처리 로직
        console.log('입력한 데이터:', data);
    } else {
        console.log('데이터를 입력해주세요.');
    }
});

위 코드는 myInput라는 id를 가진 인풋 요소에 입력된 값을 검증하고 처리하는 예시입니다.

외부 API 사용하기

자바스크립트를 사용하면 외부 API를 호출하여 데이터를 가져올 수 있습니다. 예를 들어, 날씨 API를 사용하여 사용자의 위치에 대한 날씨 정보를 가져올 수 있습니다.

fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=Seoul')
    .then(response => response.json())
    .then(data => {
        console.log('현재 날씨:', data.current.temp_c);
    })
    .catch(error => {
        console.error('날씨 정보를 가져오는 중 오류가 발생했습니다:', error);
    });

위 코드는 weatherapi에서 제공하는 API를 사용하여 서울의 현재 날씨 정보를 가져오는 예시입니다.

결론

이상으로 자바스크립트를 활용한 웹 개발 예시에 대해 알아보았습니다. 자바스크립트를 사용하여 다양한 기능을 구현하고 웹 페이지를 더욱 동적으로 만들 수 있습니다. 자바스크립트에 대해 더 자세히 알아보려면 MDN 웹 문서를 참고해주세요.