10장: JavaScript 기초
JavaScript는 웹 페이지에 동적인 기능을 추가할 수 있는 프로그래밍 언어입니다. HTML과 CSS와 함께 웹 개발의 핵심 기술 중 하나로, 사용자와 상호작용할 수 있는 다양한 기능을 구현할 수 있습니다.
10.1 JavaScript 소개
JavaScript는 웹 페이지의 동작을 제어하고, 사용자와 상호작용할 수 있는 기능을 제공합니다. 이를 통해 버튼 클릭, 폼 제출, 데이터 검증 등의 동작을 수행할 수 있습니다.
10.2 JavaScript 삽입 방법
JavaScript 코드는 HTML 문서에 여러 가지 방법으로 삽입할 수 있습니다: 인라인, 내부 스크립트, 외부 스크립트.
10.2.1 인라인 스크립트
HTML 요소의 `onclick` 등의 이벤트 속성에 JavaScript 코드를 직접 작성하는 방법입니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>인라인 스크립트 예제</title>
</head>
<body>
<button onclick="alert('버튼이 클릭되었습니다!')">클릭</button>
</body>
</html>
10.2.2 내부 스크립트
HTML 문서의 `<head>`나 `<body>` 태그 내에 `<script>` 태그를 사용하여 JavaScript 코드를 작성하는 방법입니다.
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>내부 스크립트 예제</title>
<script>
function showMessage() {
alert('Hello, JavaScript!');
}
</script>
</head>
<body>
<button onclick="showMessage()">클릭</button>
</body>
</html>
10.2.3 외부 스크립트
별도의 JavaScript 파일을 작성하고 HTML 문서에 링크하여 사용하는 방법입니다. 이는 여러 HTML 문서에서 동일한 JavaScript 코드를 재사용할 수 있게 합니다.
#### JavaScript 파일 (script.js)
function showMessage() {
alert('Hello, External JavaScript!');
}
#### HTML 파일
**[HTML 코드 입력]**
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>외부 스크립트 예제</title>
<script src="script.js"></script>
</head>
<body>
<button onclick="showMessage()">클릭</button>
</body>
</html>
10.3 기본 문법
JavaScript의 기본 문법을 이해하는 것은 매우 중요합니다. 변수, 함수, 조건문, 반복문 등의 개념을 익혀야 합니다.
10.3.1 변수
변수는 데이터를 저장하는 공간입니다. `var`, `let`, `const` 키워드를 사용하여 변수를 선언할 수 있습니다.
**[JavaScript 코드 입력]**
var name = 'John'; // ES5
let age = 30; // ES6
const city = 'Seoul'; // ES6
10.3.2 함수
함수는 재사용 가능한 코드 블록입니다. `function` 키워드를 사용하여 함수를 정의할 수 있습니다.
**[JavaScript 코드 입력]**
function greet() {
console.log('Hello, World!');
}
greet();
10.3.3 조건문
조건문은 특정 조건에 따라 다른 코드를 실행할 수 있게 합니다. `if`, `else if`, `else` 키워드를 사용합니다.
**[JavaScript 코드 입력]**
let score = 85;
if (score >= 90) {
console.log('A');
} else if (score >= 80) {
console.log('B');
} else {
console.log('C');
}
10.3.4 반복문
반복문은 특정 코드를 여러 번 실행할 수 있게 합니다. `for`, `while`, `do while` 키워드를 사용합니다.
**[JavaScript 코드 입력]**
for (let i = 0; i < 5; i++) {
console.log('Number ' + i);
}
### 연습 문제
1. 버튼을 클릭하면 경고 메시지가 표시되는 인라인 스크립트를 작성해 보세요.
2. 내부 스크립트를 사용하여 버튼을 클릭하면 메시지가 표시되는 함수를 작성해 보세요.
3. 외부 스크립트를 작성하고 HTML 문서에 연결하여 버튼을 클릭하면 메시지가 표시되도록 해 보세요.
4. 변수, 함수, 조건문, 반복문을 사용하여 간단한 JavaScript 프로그램을 작성해 보세요.
댓글
댓글 쓰기