1일차: 자바스크립트 기본 개념과 변수

2025. 1. 27. 18:41

자바스크립트는 웹 페이지에서 동적인 기능을 추가하기 위한 프로그래밍 언어로, HTML과 CSS로 만든 정적인 웹 페이지를 상호작용 가능하게 만들어줍니다. 이번 1일차에서는 자바스크립트의 기본 개념을 배우고, 변수와 상수를 사용하는 방법에 대해 알아보겠습니다.

자바스크립트 소개

자바스크립트는 웹 개발에서 가장 중요한 언어 중 하나입니다. HTML로 웹 페이지의 구조를 만들고, CSS로 스타일을 적용한 후, 자바스크립트를 사용하여 페이지에 동적인 요소를 추가합니다.

웹 개발에서의 역할:
- 자바스크립트는 클라이언트 사이드 언어로, 사용자의 브라우저에서 실행됩니다. 이를 통해 실시간으로 웹 페이지의 내용을 변경하거나, 사용자의 입력을 처리할 수 있습니다.
- 예를 들어, 버튼 클릭 시 동작하는 이벤트 처리, 폼 제출 전 입력 검증, 웹 페이지의 애니메이션 처리 등 다양한 작업을 수행할 수 있습니다.

자바스크립트 코드 작성 및 실행

브라우저 개발자 도구 사용하기:
- 자바스크립트 코드를 실시간으로 테스트할 수 있는 방법은 웹 브라우저의 개발자 도구를 이용하는 것입니다.
- 대부분의 브라우저에서는 F12를 눌러 개발자 도구를 열 수 있습니다. 그리고 그 안에서 Console 탭을 선택하면, 자바스크립트 코드를 바로 입력하고 실행할 수 있습니다.
예를 들어:
- 브라우저 개발자 도구를 열고, Console 탭에 아래와 같은 코드를 입력합니다:
```
console.log("Hello, world!");
```
- 이렇게 작성한 코드는 즉시 실행되어 브라우저 화면에 "Hello, world!"가 출력됩니다.
외부 파일에서 자바스크립트 사용하기:
- 자바스크립트 코드를 HTML 파일에 직접 작성할 수도 있고, 별도의 .js 파일을 만들어서 HTML 파일에 연결할 수도 있습니다.
예를 들어, script.js라는 파일에 자바스크립트 코드를 작성하고 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>
    <h1>자바스크립트 학습</h1>
    <script src="script.js"></script>
</body>
</html>
```
그리고 script.js 파일에 자바스크립트 코드를 작성합니다:
```
console.log("자바스크립트가 정상적으로 작동합니다.");
```

변수와 상수

변수와 상수 선언:
자바스크립트에서 변수를 선언할 때는 let, const, var 키워드를 사용할 수 있습니다. 각 키워드의 차이를 이해하는 것이 중요합니다.
- let: 변수를 선언할 때 사용합니다. 변수의 값은 변경할 수 있습니다.
- const: 상수를 선언할 때 사용합니다. 상수는 값이 한 번 할당되면 변경할 수 없습니다.
- var: 구형 방식으로 변수를 선언할 때 사용합니다. let과 const의 등장 이후에는 잘 사용되지 않지만, 여전히 코드에서 볼 수 있습니다.
예시:
```
let name = "홍길동";  // 변수 선언
name = "김철수";      // 변수의 값 변경

const birthYear = 1990; // 상수 선언
// birthYear = 1995;   // 오류 발생: 상수의 값은 변경할 수 없음
```
기본 자료형:
자바스크립트에서 자주 사용하는 기본 자료형에는 숫자, 문자열, 불리언 값이 있습니다.
- 숫자(Number): 정수나 실수 값을 나타냅니다.
```
let age = 25;
let height = 175.5;
```
- 문자열(String): 텍스트를 나타냅니다. 문자열은 작은 따옴표(')나 큰 따옴표(")로 둘러싸야 합니다.
```
let name = "홍길동";
let message = '자바스크립트 배우기';
```
- 불리언(Boolean): true 또는 false 값을 가집니다.
```
let isAdult = true;
let isStudent = false;
```

typeof 연산자:
typeof 연산자를 사용하면 변수의 데이터 타입을 알 수 있습니다.

let age = 25;
console.log(typeof age);  // "number"

let name = "홍길동";
console.log(typeof name);  // "string"

실습: 변수를 선언하고 값을 할당하여 콘솔에 출력하기

목표: 변수를 선언하고 값을 할당한 후, 콘솔에 그 값을 출력합니다.
단계:
1. let, const를 사용하여 변수와 상수를 선언합니다.
2. 변수에 값을 할당하고 console.log()를 사용하여 콘솔에 출력합니다.

예시:

let name = "홍길동";
const birthYear = 1990;

console.log("이름:", name);
console.log("출생년도:", birthYear);

let age = 30;
console.log("나이:", age);

결과:
- 콘솔에서 다음과 같은 결과를 볼 수 있습니다:
```
이름: 홍길동
출생년도: 1990
나이: 30
```

이번 1일차에서는 자바스크립트의 기본 개념과 변수 선언 방법, 기본 자료형에 대해 학습했습니다. 실습을 통해 자바스크립트에서 변수를 선언하고 값을 할당하는 방법을 익혔습니다.

저작자표시

'개발 > Javascript' 카테고리의 다른 글

3일차: 조건문과 반복문 (0)	2025.01.29
2일차: 데이터 타입과 연산자 (1)	2025.01.28
jQuery의 .load() 메서드로 동적 콘텐츠 로드하기: 예제와 활용 가이드 (0)	2025.01.23
jQuery에서 셀렉터 사용법: 다양한 선택 방법과 예제 (0)	2025.01.23
JavaScript로 동적 테이블 생성: rowspan, colspan 구현 가이드 (1)	2025.01.22

subinto의 개발노트