1. 자바스크립트 문법과 구조
자바스크립트의 문법과 구조는 프로그래밍 언어의 기초를 이해하는 데 매우 중요합니다. 여기에서는 자바스크립트의 기본적인 문법 요소와 구조에 대해 설명하겠습니다.
1.1 변수와 상수
자바스크립트에서는 var, let, const 키워드를 사용하여 변수를 선언합니다.
- var: 함수 스코프 변수
- let: 블록 스코프 변수
- const: 블록 스코프 상수, 재할당 불가
var name = 'John';
let age = 30;
const isStudent = true;1.2 데이터 타입
자바스크립트의 기본 데이터 타입은 다음과 같습니다.
- 문자열(String):
'Hello',"World" - 숫자(Number):
123,3.14 - 불리언(Boolean):
true,false - null: 의도적으로 값이 없음을 나타냄
- undefined: 선언되었으나 값이 지정되지 않음
- 객체(Object):
{ name: 'John', age: 30 } - 배열(Array):
[1, 2, 3] - 심볼(Symbol): 고유한 식별자를 생성
let message = 'Hello, World!';
let count = 42;
let isValid = true;
let person = { name: 'Alice', age: 25 };
let numbers = [1, 2, 3, 4, 5];
let uniqueId = Symbol('id');1.3 연산자
자바스크립트에서 사용할 수 있는 다양한 연산자가 있습니다.
- 산술 연산자:
+,-,*,/,% - 할당 연산자:
=,+=,-=,*=,/= - 비교 연산자:
==,===,!=,!==,>,<,>=,<= - 논리 연산자:
&&,||,! - 삼항 연산자:
조건 ? 값1 : 값2
let a = 10;
let b = 20;
let sum = a + b; // 30
let isEqual = (a === b); // false
let result = (a > b) ? 'a is greater' : 'b is greater'; // 'b is greater'1.4 조건문
조건문은 특정 조건에 따라 다른 코드를 실행합니다.
let number = 10;
if (number > 0) {
console.log('Positive number');
} else if (number < 0) {
console.log('Negative number');
} else {
console.log('Zero');
}
let color = 'red';
switch (color) {
case 'red':
console.log('Red color');
break;
case 'green':
console.log('Green color');
break;
case 'blue':
console.log('Blue color');
break;
default:
console.log('Unknown color');
}1.5 반복문
반복문은 특정 코드를 여러 번 실행할 때 사용합니다.
for (let i = 0; i < 5; i++) {
console.log(i);
}
let j = 0;
while (j < 5) {
console.log(j);
j++;
}
let k = 0;
do {
console.log(k);
k++;
} while (k < 5);2. 첫 번째 스크립트
첫 번째 자바스크립트 코드를 작성하고 HTML 파일에 포함시키는 방법을 알아보겠습니다.
2.1 HTML 파일 생성
index.html 파일을 생성하고 다음과 같이 작성합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Example</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<script src="script.js"></script>
</body>
</html>2.2 자바스크립트 파일 생성
script.js 파일을 생성하고 다음과 같이 작성합니다.
document.addEventListener('DOMContentLoaded', () => {
// 변수와 데이터 타입
let greeting = 'Hello, JavaScript!';
let number = 42;
let isWorking = true;
// 출력
console.log(greeting);
console.log('The number is', number);
console.log('Is it working?', isWorking);
// 조건문
if (isWorking) {
console.log('Yes, it is working.');
} else {
console.log('No, it is not working.');
}
// 반복문
for (let i = 0; i < 5; i++) {
console.log('Iteration', i);
}
// 함수
function add(a, b) {
return a + b;
}
let result = add(10, 20);
console.log('Result of addition:', result);
// 객체와 배열
let person = {
name: 'Alice',
age: 25
};
let numbers = [1, 2, 3, 4, 5];
console.log('Person:', person);
console.log('Numbers:', numbers);
});2.3 실행하기
index.html파일을 웹 브라우저에서 엽니다.- 개발자 도구를 열어 콘솔 탭에서 자바스크립트 출력 결과를 확인합니다.
이제 자바스크립트의 기본 문법과 구조를 이해하고, 간단한 스크립트를 작성하여 웹 브라우저에서 실행할 수 있습니다. 앞으로 더 복잡한 자바스크립트 코드를 작성해 나가면서 다양한 기능을 익혀보세요.