1.1 JavaScript 소개

약 5분

본문 듣기

읽기 설정

글자 크기

줄 간격

글꼴

1.1 JavaScript 소개

JavaScript는 웹 페이지의 동적인 요소를 구현하기 위해 토대가 되는 프로그래밍 언어입니다. HTML과 CSS로 구조를 만들고 스타일을 입힌 후, JavaScript를 통해 페이지에 생동감을 불어넣을 수 있습니다. 현대 웹 개발에서 JavaScript는 필수적인 기술로 자리 잡았으며, 서버 측 개발에서도 널리 사용됩니다.

JavaScript는 주로 다음과 같은 기능을 수행합니다:

DOM 조작: HTML 요소를 동적으로 생성, 수정, 삭제
이벤트 처리: 사용자 입력에 반응하여 작업 수행
비동기 프로그래밍: 서버와의 통신을 비동기적으로 처리하여 사용자 경험 향상

최근에는 ES6 이상의 문법을 사용하여 더욱 간결하고 읽기 쉬운 코드를 작성할 수 있습니다.

예제 1: JavaScript로 DOM 요소 추가하기

아래 예제는 버튼 클릭 시 새로운 단락 요소를 추가하는 코드입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM 조작 예제</title>
    <style>
        body { font-family: Arial, sans-serif; }
        #newPar { margin-top: 10px; }
    </style>
</head>
<body>
    <h1>JavaScript로 DOM 요소 추가하기</h1>
    <button id="addButton">단락 추가</button>
    <div id="newPar"></div>

    <script>
        const button = document.getElementById('addButton');
        const newParDiv = document.getElementById('newPar');

        button.addEventListener('click', () => {
            const newParagraph = document.createElement('p');
            newParagraph.textContent = '새로운 단락입니다!';
            newParDiv.appendChild(newParagraph);
        });
    </script>
</body>
</html>

실습

위 코드를 사용하여 다양한 텍스트를 추가하는 기능을 추가해보세요. 버튼을 클릭할 때마다 입력된 텍스트가 새로운 단락으로 추가되도록 변경해보세요.

응용

ToDo List 기능을 구현해 보세요. 사용자가 할 일 목록을 입력하고, 목록을 추가하거나 삭제할 수 있는 기능을 만들어봅시다. 이 과정에서 복잡한 DOM 조작과 이벤트 처리를 경험할 수 있습니다.

비동기 프로그래밍

JavaScript는 비동기 처리를 통해 서버와의 데이터를 주고받을 수 있습니다. 이를 위해 Promise와 async/await 구문을 사용하는 방법을 살펴보겠습니다.

비동기 프로그래밍의 기초가 되는 코드를 아래와 같이 작성해볼 수 있습니다.

코드 javascript

const fetchData = async () => {
    try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('데이터를 가져오는 중 오류 발생:', error);
    }
};

fetchData();

1.1 JavaScript 소개

1.1 JavaScript 소개

예제 1: JavaScript로 DOM 요소 추가하기

실습

응용

비동기 프로그래밍

댓글 0