JavaScript 소개

JavaScript는 웹페이지를 움직이게 만드는 언어입니다. 버튼 클릭, 텍스트 변경, 애니메이션 등 모든 동작은 JavaScript로 만듭니다.

HTML, CSS, JavaScript의 역할

HTML       →  집의 뼈대 (구조)
CSS        →  인테리어 (디자인)
JavaScript →  전기, 수도 (동작)

버튼을 클릭하면 숫자가 증가하는 카운터

직접 코드를 외울 필요 없습니다! AI에게 만들어달라고 하세요.

Cursor에게 요청:

버튼을 만들어줘.
버튼 텍스트: "클릭하세요"
버튼을 클릭하면 "안녕하세요!" 메시지 띄우기

Cursor에게 요청:

숫자 카운터 만들어줘.
- 현재 숫자 표시 (처음엔 0)
- "증가" 버튼 (클릭하면 +1)
- "감소" 버튼 (클릭하면 -1)

Cursor에게 요청:

이름을 입력받아서 인사하는 페이지 만들어줘.

- 입력창: "이름을 입력하세요"
- 버튼: "인사하기"
- 버튼 클릭하면: "안녕하세요, [입력한 이름]님!"

HTML, CSS, JavaScript 모두 포함해서.

Cursor에게 요청:

제목 텍스트가 "안녕하세요"로 시작해.
버튼을 클릭하면 "반갑습니다!"로 바뀌게 해줘.

Cursor에게 요청:

버튼 3개 만들어줘:
- "빨강" 버튼 → 배경색 빨강으로
- "파랑" 버튼 → 배경색 파랑으로
- "초록" 버튼 → 배경색 초록으로

Cursor에게 요청:

이미지를 클릭하면 다른 이미지로 바뀌게 해줘.
플레이스홀더 이미지 2개 사용해서.

코드가 제대로 작동하는지 확인하는 곳입니다.

브라우저 콘솔에서 직접 입력해보세요:

alert("안녕하세요!");

document.body.style.backgroundColor = "lightblue";

console.log("테스트 메시지");

AI에게 물어보세요:

JavaScript 코드를 별도 파일로 만들고 싶어.
어떻게 하면 돼?

Cursor에게 요청:

이런 에러가 났어:
[에러 메시지 복사해서 붙여넣기]

무슨 뜻이고 어떻게 고치면 돼?

Cursor에게 요청:

이 코드에서:
- 버튼 색상을 파란색으로 바꾸고 싶어
- 숫자를 2씩 증가하게 바꾸고 싶어

어떻게 수정하면 돼?

복잡한 기능을 만들 때는 단계별로:

1단계: "버튼만 만들어줘"
2단계: "버튼 클릭하면 메시지 띄워줘"
3단계: "메시지를 예쁘게 꾸며줘"

원하는 게 뭔지 말하기 어려우면:

이 웹사이트처럼 만들어줘: [URL]
또는
첨부한 이미지처럼 만들어줘.

이 코드가 작동하지 않아.
뭐가 문제인지 찾아서 고쳐줘.

[코드 붙여넣기]

JavaScript로 페이지에 동작을 추가하는 방법을 배웠습니다. 이제 JSON으로 여러 개의 데이터를 관리하는 방법을 알아봅시다!