lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

webLightBasicChapter3Title

lesson15Title

lesson16Title

lesson17Title

webLightBasicChapter1Title

webLightBasicChapter2Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
  </head>
  <body>
    <body>
      <h1>JavaScript 시작하기</h1>
      <button id="showButton">클릭 후 이름 입력</button>
      <p id="greeting"></p>
    </body>
  </body>
</html>

// 버튼을 클릭하면 이름을 입력받아 인사말을 표시하는 코드
const showButton = document.getElementById('showButton'); // 버튼 요소 선택
const greeting = document.getElementById('greeting'); // p 요소 선택

// addEventListener로 버튼 클릭 감지
showButton.addEventListener('click', function () {
  // name 변수(데이터를 담는 상자)에 이름을 입력받음
  const name = '';

  // 입력받은 이름을 확인하고, 인사말을 표시
  if (name && name.trim() !== '') {
    // 입력받은 이름이 빈 문자열이 아닐 때
    greeting.textContent = '안녕하세요, ' + name.trim() + '님!'; // 인사말 표시
  } else {
    // 입력받은 이름이 빈 문자열일 때
    greeting.textContent = '이름을 입력해주세요'; // 이름을 입력해주세요 표시
  }
});

# 자바스크립트(JavaScript)란?

자바스크립트(JavaScript)는 웹페이지의 뇌와 같습니다.

자바스크립트는 웹사이트에 동적인(Dynamic) 기능을 추가하는 **프로그래밍 언어**입니다.

여기서 `동적인` 기능은 무엇을 뜻할까요?

동적인 기능의 예시는 아래와 같습니다.

1. **이벤트(Event) 처리**: 이벤트란 사용자가 웹사이트에서 취하는 행동을 의미합니다. 자바스크립트를 사용하면 웹사이트가 버튼 클릭(Click), 마우스 올려 놓기(Hover), 키보드 입력(Keydown)과 같은 이벤트에 반응하도록 할 수 있습니다. 예를 들어, 버튼을 클릭하면 버튼의 색상이 바뀌는 것과 같은 동작이 실행되도록 만들 수 있습니다.

2. **웹 양식(Form) 검증**: 로그인할 때 아이디와 비밀번호를 입력하죠? 이렇게 웹페이지의 입력 양식(Form) 데이터를 검증할 때 자바스크립트로 입력한 값이 이메일인지, 비밀번호가 6글자 이상인지 체크할 수 있습니다.

3. **애니메이션 및 효과**: CSS와 함께 웹페이지에 애니메이션을 추가할 수 있습니다. 예를 들어 특정 HTML 요소가 서서히 나타나게 하거나, 지정된 시간 이후에 등장하게 만들 수 있습니다.

4. **데이터 가져오기 & 보내기**: 동적인 웹 콘텐츠를 제공하는 서버(Server)에서 원하는 데이터를 가져와 웹페이지에 표시하거나, 서버에서 필요한 데이터를 보낼 수 있습니다.

5. **상호작용 요소 만들기**: 옆으로 밀 수 있는 슬라이더(Slider), 하위 요소들을 아래로 표시하는 드롭다운(Dropdown)과 같은 상호작용 요소를 만들 수 있습니다.

6. **웹페이지 조작**: 특정 이벤트에 따라 웹페이지의 특정 부분을 감추거나 보이게 하거나, 내용을 추가할 수 있습니다.

<br />

자바스크립트는 HTML과 CSS와 함께 웹페이지를 구성하는 필수적인 요소입니다.

자바스크립트는 브라우저에 표시되는 웹페이지뿐만 아니라 웹 서버, 모바일 앱, 데스크톱 앱 등 응용 소프트웨어(애플리케이션) 분야에 광범위하게 사용되는 인기 프로그래밍 언어입니다.

<br />

## 실습

코드의 별표로 강조된 부분을 따라 입력해 보세요.