lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

lesson14Title

lesson15Title

lesson16Title

lesson17Title

webIntroJsChapter4Title

webIntroJsChapter1Title

webIntroJsChapter2Title

webIntroJsChapter3Title

<!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"
    />
    <title>JavaScript 예시</title>
  </head>
  <body>
    <div class="container">
      <h1 id="greeting">안녕하세요!</h1>
      <input type="text" placeholder="이름을 입력하세요" />
      <button id="greetButton">인사하기</button>
    </div>
  </body>
</html>

// ID로 버튼 요소 선택
const greetButton = document.getElementById('greetButton');
const greetingText = document.getElementById('greeting');

// 태그 이름으로 입력 요소 선택
const usernameInput = document.getElementsByTagName('Input')[0];

greetButton.addEventListener('click', function () {
  // 사용자가 입력한 이름을 가져옴
  // trim()은 문자열 앞뒤의 공백을 제거
  const username = '';

  // 사용자가 입력한 이름이 있으면
  if (username) {
    // 인사말을 사용자의 이름으로 변경
    greetingText.textContent = '안녕하세요, ' + username + '님!';
  } else {
    // 사용자가 입력한 이름이 없으면 기본 인사말로 변경
    greetingText.textContent = '안녕하세요!';
  }
});

const username = usernameInput.value.trim();

# JavaScript 총정리

`JavaScript`는 웹 개발에서 필수적인 프로그래밍 언어로 웹 페이지의 **두뇌**와 같습니다.

JavaScript의 핵심 개념을 간단하게 정리해 보겠습니다.

<br />

## 1. 변수

데이터를 저장하는 상자입니다. 저장하는 데이터의 종류로는 숫자, 문자열, 불리언, 객체 등이 있습니다.

```javascript title="let 키워드로 재할당 가능한 변수 선언"
let name = '코드프렌즈';
```

<br />

## 2. 함수

특정 작업을 수행하는 재사용 가능한 코드 블록입니다.

```javascript title="greet 함수 선언"
function greet(userName) {
  console.log('안녕하세요, ' + userName + '님!');
}

greet('코드프렌즈'); // "안녕하세요, 코드프렌즈님!" 출력
```

<br />

## 3. 조건문

조건에 따라 다른 코드를 실행합니다.

```javascript title="if-else 조건문"
if (name === '코드프렌즈') {
  console.log('안녕하세요, 코드프렌즈님!');
} else {
  console.log('안녕하세요, 손님!');
}
```

<br />

## 4. 반복문

조건에 따라 코드 블록을 여러 번 반복합니다.

```javascript title="for 반복문"
for (let i = 0; i < 5; i++) {
  console.log(i); // 0부터 4까지 출력
}
```

<br />

## 5. 객체

속성과 값을 가진 데이터 모음입니다. 속성은 키(Key)라고도 부릅니다.

```javascript title="person 객체"
const person = {
  name: '코드프렌즈', // name 속성, 문자열 값
  age: 25, // age 속성, 숫자 값
  greet: function () { // greet 속성, 함수 값
    console.log('안녕하세요, ' + this.name + '님!');
  },
};

person.greet(); // "안녕하세요, 코드프렌즈님!" 출력
```

<br />

## 6. 이벤트

웹 페이지에서 발생하는 사용자의 버튼 클릭, 입력폼 제출, 웹 페이지 로드과 같은 다양한 사건을 뜻합니다. 

```javascript title="버튼 클릭 이벤트 감지"
let button = document.querySelector('button');

// 버튼 클릭 이벤트 리스너
button.addEventListener('click', function () {
  alert('버튼을 클릭했어요!');
});
```