Study/JS

JavaScript 기초 강의 1편: JavaScript 기본 문법과 개념

wawManager 2024. 12. 1. 12:00
728x90

1. JavaScript란?

JavaScript는 웹 개발에서 가장 중요한 프로그래밍 언어 중 하나로, 웹 페이지에 동적인 요소를 추가하고, 서버와 클라이언트 간 데이터를 교환하며, 다양한 상호작용을 가능하게 합니다. HTML과 CSS는 페이지의 구조와 스타일을 정의하지만, JavaScript는 페이지에 동적인 기능을 제공합니다.

2. JavaScript 코드 삽입 방법

JavaScript 코드는 <script> 태그를 사용해 HTML에 포함할 수 있습니다. 코드 작성 방식은 인라인 또는 외부 파일로 나눌 수 있습니다.

1) 인라인 방식

HTML 파일 내 <script> 태그 사이에 JavaScript 코드를 직접 작성합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>JavaScript 기초</title>
</head>
<body>
    <h1>Hello, JavaScript!</h1>
    <script>
        console.log("이것은 JavaScript 기초입니다!");
    </script>
</body>
</html>

2) 외부 파일 방식

JavaScript 코드를 별도의 .js 파일로 작성하고 HTML에서 참조할 수 있습니다.

example.js 파일:

console.log("외부 파일에서 작성된 JavaScript 코드입니다!");

HTML 파일:

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>JavaScript 외부 파일</title>
    <script src="example.js"></script>
</head>
<body>
    <h1>외부 JavaScript 파일 연결</h1>
</body>
</html>

3. JavaScript 기본 문법

1) 변수 선언

JavaScript에서 변수를 선언하는 키워드는 var, let, const가 있습니다.

  • var: 과거에 사용되던 변수 선언 방식으로, 현재는 **let**이나 const 사용이 권장됩니다.
  • let: 값이 변경될 수 있는 변수를 선언할 때 사용합니다.
  • const: 값이 변경되지 않는 상수를 선언할 때 사용합니다.
let name = "John";
const age = 30;

console.log(name); // "John"
console.log(age); // 30

2) 데이터 타입

JavaScript의 주요 데이터 타입은 다음과 같습니다:

  • 문자열(String): "Hello", 'World'
  • 숫자(Number): 42, 3.14
  • 불리언(Boolean): true, false
  • 배열(Array): [1, 2, 3, 4]
  • 객체(Object): { key: "value" }
  • undefined: 값이 할당되지 않은 변수의 기본 상태
  • null: 값이 비어 있음을 명시적으로 나타내는 값

4. 기본 연산자와 제어문

1) 연산자

  • 산술 연산자: +, -, *, /, %
  • 대입 연산자: =, +=, -=, *=, /=
  • 비교 연산자: ==, ===, !=, !==, >, <, >=, <=
  • 논리 연산자: &&, ||, !
let x = 10;
let y = 5;

console.log(x + y); // 15
console.log(x > y); // true
console.log(x === y); // false

2) 제어문

조건문(if-else):

let num = 10;

if (num > 5) {
    console.log("num은 5보다 큽니다.");
} else {
    console.log("num은 5 이하입니다.");
}

반복문(for, while):

for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4
}

let i = 0;
while (i < 3) {
    console.log(i); // 0, 1, 2
    i++;
}

5. 함수

함수는 JavaScript 코드의 블록을 정의하며, 호출될 때 실행됩니다.

1) 함수 선언

function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("John")); // "Hello, John!"

2) 화살표 함수

간결한 함수 표현으로, ES6부터 사용됩니다.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

요약

이번 강의에서는 JavaScript의 기본 문법과 개념을 배웠습니다. 변수 선언, 데이터 타입, 연산자, 제어문, 함수 등을 통해 JavaScript의 기초를 이해하고 간단한 프로그램을 작성할 수 있는 기반을 마련했습니다. 다음 강의에서는 DOM(Document Object Model) 조작을 통해 웹 페이지의 요소를 JavaScript로 다루는 방법을 학습해보겠습니다.

728x90