1. 변수 선언
JavaScript에서는 데이터를 저장하기 위해 변수를 사용합니다. 변수를 선언할 때는 let, const, var를 사용합니다.
let: 블록 스코프를 가지며, 값이 변경 가능한 변수를 선언할 때 사용합니다.const: 상수로, 값을 변경할 수 없는 변수를 선언할 때 사용합니다.var: 함수 스코프를 가지며, 과거에 사용하던 변수 선언 방식입니다.
let age = 25; // 블록 스코프 변수
const birthYear = 1995; // 상수, 값 변경 불가
var name = "홍길동"; // 함수 스코프 변수2. 데이터 타입과 형 변환
JavaScript의 주요 데이터 타입에는 Number, String, Boolean, null, undefined, Object 등이 있습니다. 필요에 따라 데이터를 다른 타입으로 변환할 수 있습니다.
- 형 변환 예제:
let str = "123";
let num = Number(str); // 문자열을 숫자로 변환3. 연산자
JavaScript에는 산술 연산자, 비교 연산자, 논리 연산자 등 다양한 연산자가 있습니다.
- 산술 연산자:
+,-,*,/,%등 - 비교 연산자:
==,!=,===,!==,>,<,>=,<= - 논리 연산자:
&&(AND),||(OR),!(NOT)
let a = 10;
let b = 20;
let result = a + b; // 30
let isEqual = (a === b); // false4. 조건문
조건문을 사용하여 특정 조건에 따라 다른 코드를 실행할 수 있습니다. JavaScript에서는 if-else 문과 switch 문이 주로 사용됩니다.
let age = 18;
if (age >= 18) {
console.log("성인입니다.");
} else {
console.log("미성년자입니다.");
}
let day = 2;
switch (day) {
case 0:
console.log("일요일");
break;
case 1:
console.log("월요일");
break;
default:
console.log("주중");
}5. 반복문
반복문을 사용하여 같은 코드를 여러 번 실행할 수 있습니다. 자주 사용되는 반복문으로는 for, while, do-while이 있습니다.
// for
for (let i = 0; i < 5; i++) {
console.log(i); // 0, 1, 2, 3, 4
}
// while
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
// do-while
let i = 0;
do {
console.log(i);
i++;
} while (i < 5);추천 사이트
W3Schools
W3Schools는 간단한 예제와 설명을 통해 JavaScript를 쉽게 이해할 수 있도록 구성된 웹 개발 학습 사이트입니다. JavaScript뿐 아니라 HTML, CSS, SQL 등 다양한 웹 기술을 학습할 수 있으며, JavaScript 예제와 연습 문제가 많아 초보자가 기초를 다지기에 좋습니다.
MDN Web Docs (Mozilla Developer Network)
MDN은 JavaScript에 대한 공식 문서로, 기본 문법부터 고급 개념까지 체계적으로 정리되어 있습니다. JavaScript뿐만 아니라 HTML, CSS, 웹 API에 대한 설명도 제공하므로 웹 개발 전반에 걸쳐 학습하기에 좋습니다.
- JavaScript 시작하기: JavaScript 기초 - MDN
- JavaScript 전체 개요: JavaScript Reference - MDN
JavaScript.info
JavaScript.info는 실습 중심의 JavaScript 학습 사이트로, 초급부터 고급까지의 개념을 잘 다룹니다. 특히, ES6 이후의 최신 JavaScript 문법과 기능들이 자세히 설명되어 있어 모던 JavaScript 학습에 큰 도움이 됩니다.
예제코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- 화면 크기에 따라 레이아웃을 조정하도록 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
'use strict'; // 엄격 모드 활성화 - 오류를 예방하고 코드를 안전하게 작성하기 위해 사용
// 변수 선언
let num1 = 'Hello'; // let으로 선언한 변수 (블록 스코프)
// 상수 선언
const NUM2 = 'Hello'; // const로 선언한 상수 (값을 변경할 수 없음)
console.log(num1); // 예상 출력: Hello
console.log(NUM2); // 예상 출력: Hello
// 구형 변수 선언
var num3 = 'Hello'; // var로 선언한 변수 (함수 스코프, 재선언 가능)
console.log(num3); // 예상 출력: Hello
// 더 구형 변수 선언 (변수 선언 없이 사용, 엄격 모드에서는 오류 발생)
num4 = 'Hello';
console.log(num4); // 예상 출력: Hello (엄격 모드에서는 ReferenceError 발생)
// 내용 변경 예제
num3 = 'Hello2'; // var 변수는 값 변경 가능
console.log(num3); // 예상 출력: Hello2
</script>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<!-- 화면 크기에 따라 레이아웃을 조정하도록 설정 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- JavaScript 코드 작성 공간 시작 -->
<script type="text/javascript">
// 선언 공간 (필요한 변수나 함수를 미리 선언할 수 있는 영역)
</script>
</head>
<body>
<script type="text/javascript">
// 문자형 / 문자열 자체는 메서드가 없음
// 객체 - 문자열 객체로 생성 시 메서드 사용 가능
let str1 = 'Hello'; // 문자열 리터럴로 선언
let str2 = "Hello"; // 문자열 리터럴로 선언 (따옴표 종류만 다름)
// str1과 str2의 값을 콘솔에 출력
console.log(str1, str2); // 예상 출력: Hello Hello
// str1과 str2의 자료형을 콘솔에 출력
console.log(typeof str1, typeof str2); // 예상 출력: string string
// String 객체로 문자열을 생성
let str3 = new String("Hello");
// str3의 문자열 값을 toString() 메서드로 출력
console.log(str3.toString()); // 예상 출력: Hello
// str3의 문자열 길이를 출력
console.log(str3.length); // 예상 출력: 5
// str3에서 인덱스 2부터 끝까지의 문자열을 출력
console.log(str3.substring(2)); // 예상 출력: llo
// 멀티라인 문자열 선언
let str4 = `Hello
World`;
console.log(str4); // 예상 출력: Hello (줄바꿈) World
// 템플릿 리터럴을 사용한 표현식 출력
let one = 1, two = 2;
console.log(`${one} + ${two}는 3이다`); // 예상 출력: 1 + 2는 3이다
console.log('${one} + ${two}는 3이다'); // 예상 출력: ${one} + ${two}는 3이다 (템플릿 리터럴이 아닌 문자열 그대로 출력)
</script>
</body>
</html>