JavaScript 입문 – 웹의 기본 언어

byCode Keeper •


JavaScript는 현대 웹 개발에서 없어서는 안 될 중요한 프로그래밍 언어입니다. 이 포스팅에서는 JavaScript의 기본 개념과 문법을 소개하고, 초보자도 쉽게 따라 할 수 있는 예제 코드를 제공하겠습니다. "JavaScript 입문"과 "JavaScript 기본"을 중심으로 진행하겠습니다.


JavaScript란?


JavaScript는 웹 페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다. HTML과 CSS가 웹 페이지의 구조와 스타일을 담당한다면, JavaScript는 사용자와의 상호작용, 데이터 조작, 애니메이션 등을 구현할 수 있습니다. JavaScript는 클라이언트 측 스크립트 언어로 시작했지만, 현재는 서버 측에서도 널리 사용되고 있습니다.


JavaScript의 기본 개념


변수


변수는 데이터를 저장하는 데 사용됩니다. JavaScript에서 변수를 선언하는 방법은 var, let, const 키워드를 사용하는 것입니다.


// var로 변수 선언 (ES6 이전 방식)
var name = '홍길동';

// let으로 변수 선언 (ES6 이후 권장 방식)
let age = 30;

// const로 상수 선언 (변경 불가능)
const PI = 3.14;

데이터 타입


JavaScript에는 여러 가지 데이터 타입이 있습니다. 주요 데이터 타입으로는 다음과 같은 것들이 있습니다:


  • 문자열(String): 텍스트 데이터를 저장합니다. 예: "Hello, World!"
  • 숫자(Number): 숫자 데이터를 저장합니다. 예: 42, 3.14
  • 불리언(Boolean): 참 또는 거짓을 저장합니다. 예: true, false
  • 객체(Object): 키-값 쌍의 집합을 저장합니다. 예: { name: '홍길동', age: 30 }
  • 배열(Array): 순서가 있는 값의 리스트를 저장합니다. 예: [1, 2, 3, 4, 5]

let greeting = "Hello, World!";
let number = 42;
let isActive = true;
let person = { name: '홍길동', age: 30 };
let numbers = [1, 2, 3, 4, 5];

연산자


JavaScript에서는 다양한 연산자를 사용할 수 있습니다.


  • 산술 연산자: +, -, *, /, %
  • 비교 연산자: ==, ===, !=, !==, <, >, <=, >=
  • 논리 연산자: &&, ||, !

let x = 10;
let y = 5;

console.log(x + y); // 15
console.log(x - y); // 5
console.log(x * y); // 50
console.log(x / y); // 2
console.log(x % y); // 0

console.log(x == y); // false
console.log(x === y); // false
console.log(x != y); // true
console.log(x !== y); // true
console.log(x > y); // true
console.log(x < y); // false

console.log(x > 0 && y > 0); // true
console.log(x > 0 || y < 0); // true
console.log(!(x > 0)); // false

조건문


조건문은 특정 조건에 따라 코드를 실행할지 여부를 결정합니다. if, else if, else 문이 사용됩니다.


let age = 20;

if (age < 18) {
    console.log("미성년자입니다.");
} else if (age >= 18 && age < 65) {
    console.log("성인입니다.");
} else {
    console.log("노인입니다.");
}

반복문


반복문은 특정 조건이 만족될 때까지 코드를 반복 실행합니다. for, while, do...while 문이 사용됩니다.


// for 문
for (let i = 0; i < 5; i++) {
    console.log(i);
}

// while 문
let j = 0;
while (j < 5) {
    console.log(j);
    j++;
}

// do...while 문
let k = 0;
do {
    console.log(k);
    k++;
} while (k < 5);

함수


함수는 코드 블록을 정의하고, 필요할 때마다 호출할 수 있는 방법입니다.


// 함수 선언
function greet(name) {
    return `Hello, ${name}!`;
}

// 함수 호출
console.log(greet('홍길동')); // Hello, 홍길동!

// 화살표 함수 (ES6 이후)
const add = (a, b) => a + b;

console.log(add(2, 3)); // 5

객체


객체는 키-값 쌍의 집합으로, 복잡한 데이터 구조를 표현하는 데 사용됩니다.


let person = {
    name: '홍길동',
    age: 30,
    greet: function() {
        console.log(`안녕하세요, 제 이름은 ${this.name}입니다.`);
    }
};

console.log(person.name); // 홍길동
console.log(person.age); // 30
person.greet(); // 안녕하세요, 제 이름은 홍길동입니다.

배열


배열은 순서가 있는 값의 리스트를 저장합니다. 배열은 다양한 내장 메서드를 사용하여 조작할 수 있습니다.


let fruits = ['사과', '바나나', '체리'];

console.log(fruits[0]); // 사과
console.log(fruits.length); // 3

fruits.push('오렌지'); // 배열의 끝에 추가
console.log(fruits); // ['사과', '바나나', '체리', '오렌지']

fruits.pop(); // 배열의 끝에서 제거
console.log(fruits); // ['사과', '바나나', '체리']

DOM 조작


JavaScript를 사용하여 HTML 문서를 동적으로 조작할 수 있습니다. 이를 위해 Document Object Model(DOM)을 사용합니다.


<!DOCTYPE html>
<html>
<head>
    <title>JavaScript DOM 조작</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <h1 id="title">JavaScript DOM 조작</h1>
    <p class="description">이 문서는 JavaScript를 사용하여 동적으로 조작됩니다.</p>
    <button onclick="changeText()">텍스트 변경</button>
    <button onclick="highlightText()">텍스트 강조</button>

    <script>
        function changeText() {
            document.getElementById('title').textContent = '변경된 제목';
        }

        function highlightText() {
            document.querySelector('.description').classList.toggle('highlight');
        }
    </script>
</body>
</html>

위 예제에서는 JavaScript를 사용하여 HTML 요소의 텍스트를 변경하고, CSS 클래스를 추가/제거합니다.


이벤트 처리


이벤트 처리는 사용자의 동작(클릭, 키보드 입력 등)에 반응하는 코드를 작성하는 방법입니다.


<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 이벤트 처리</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <button id="myButton">클릭하세요</button>

    <script>
        document.getElementById('myButton').addEventListener('click', function() {
            alert('버튼이 클릭되었습니다!');
        });
    </script>
</body>
</html>

결론


이 포스팅에서는 JavaScript의 기본 개념과 문법을 소개하고, 다양한 예제 코드를 통해 이를 실습해 보았습니다. JavaScript는 웹 개발에서 매우 중요한 역할을 하며, 이를 잘 이해하고 활용하는 것이 웹 개발자의 필수 스킬입니다. 앞으로 더 많은 연습과 실습을 통해 JavaScript에 대한 이해를 깊이 해 보세요.


이 포스팅이 JavaScript를 이해하는 데 도움이 되길 바랍니다. 질문이나 추가 정보가 필요하시면 언제든지 댓글로 남겨주세요.

Tags:
다음 이전