Insightful Universe
1.1 자바스크립트 기초 구조
자바스크립트란?
웹 페이지를 동적으로 변화시킬 수 있는 언어입니다. HTML은 구조, CSS는 디자인, 자바스크립트는 동작을 담당합니다.
왜 필요한가?
- 사용자 상호작용: 버튼을 클릭하거나 데이터를 입력하면 동작을 추가할 수 있습니다.
- 데이터 처리: 사용자 입력 데이터를 저장하고, 계산하거나 전송할 수 있습니다.
- 자동화: 반복되는 작업을 코드로 처리할 수 있습니다.
활용 사례
- 쇼핑몰에서 "장바구니 담기" 버튼을 누르면 상품을 장바구니에 추가.
- 폼을 제출할 때 입력값이 올바른지 실시간으로 검사.
- 스크롤을 내리면 애니메이션을 실행하거나 새로운 콘텐츠를 불러오기.
예제: 버튼 클릭 이벤트
<!DOCTYPE html>
<html>
<body>
<button id="myButton">클릭하세요!</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function () {
alert("버튼이 눌렸습니다!");
});
</script>
</body>
</html>
1.2 데이터 타입과 변수
데이터 타입
데이터 타입은 자바스크립트에서 값의 종류를 말합니다.
- Number: 숫자 (예: 10, 3.14)
- String: 문자 (예: "안녕하세요")
- Boolean: 참/거짓 (예: true, false)
- Null: 값이 없음
- Undefined: 정의되지 않음
왜 중요한가?
- 데이터를 저장하고 계산할 때, 올바른 타입을 사용해야 오류를 방지할 수 있습니다.
- 데이터 타입을 잘 알아야 다양한 기능을 효과적으로 활용할 수 있습니다.
활용 사례
- 쇼핑몰에서 상품 가격(Number)을 계산.
- 로그인 기능에서 입력된 아이디(String)와 비밀번호가 맞는지 검사.
- 사용자가 약관에 동의했는지(Boolean) 체크.
변수란?
변수는 데이터를 저장할 수 있는 상자입니다.
- let: 변경 가능한 변수
- const: 변경 불가능한 상수
예제: 변수 사용
let 이름 = "철수"; // 이름이라는 상자에 "철수"를 저장
const 나이 = 10; // 나이라는 상자에 10을 저장
console.log(이름, 나이); // 결과: 철수 10
왜 let과 const가 필요한가?
- let: 변경 가능한 데이터를 저장할 때 사용 (예: 점수).
- const: 변경되면 안 되는 값을 저장 (예: 생년월일).
1.3 연산자와 표현식
연산자란?
연산자는 데이터를 계산하거나 비교할 때 사용하는 기호입니다.
산술 연산자
숫자를 계산할 때 사용:
- +: 더하기
- -: 빼기
- *: 곱하기
- /: 나누기
- %: 나머지
활용 사례
- 쇼핑몰에서 할인 가격 계산.
- 게임에서 플레이어 점수 계산.
예제
let 가격 = 1000;
let 할인율 = 0.1;
let 최종가격 = 가격 - (가격 * 할인율);
console.log(최종가격); // 결과: 900
비교 연산자
두 값을 비교:
- >: 크다
- <: 작다
- ==: 같다
- ===: 값과 타입이 모두 같다
활용 사례
- 나이가 18세 이상이면 "성인"으로 표시.
- 입력된 비밀번호가 맞는지 검사.
예제
let 나이 = 20;
if (나이 >= 18) {
console.log("성인입니다.");
} else {
console.log("미성년자입니다.");
}
// 결과: 성인입니다.
논리 연산자
여러 조건을 결합:
- &&: 그리고 (모두 참이어야 함)
- ||: 또는 (하나만 참이면 됨)
1.4 조건문과 반복문
조건문이란?
조건에 따라 다른 동작을 실행합니다.
- if-else: 특정 조건이 참인지 검사.
활용 사례
- 쇼핑몰: "5만원 이상 구매 시 무료 배송" 표시.
- 게임: 플레이어의 점수가 특정 값 이상일 때 다음 레벨로 이동.
예제
let 점수 = 85;
if (점수 >= 90) {
console.log("A등급");
} else if (점수 >= 80) {
console.log("B등급");
} else {
console.log("C등급");
}
// 결과: B등급
반복문이란?
같은 작업을 반복 실행.
- for: 정해진 횟수만큼 반복.
활용 사례
- 목록의 상품을 하나씩 화면에 표시.
- 게임: 1초마다 플레이어의 체력을 회복.
예제
for (let i = 1; i <= 5; i++) {
console.log(i + "번째 상품을 출력합니다.");
}
// 결과: 1번째 상품 ~ 5번째 상품
1.5 함수와 스코프
함수란?
함수는 특정 작업을 수행하는 코드의 묶음입니다. 코드를 재사용하고, 작업을 구조화하는 데 사용합니다.
활용 사례
- "안녕하세요!"를 여러 번 출력할 때.
- 계산기에서 숫자 합계를 구할 때.
예제
function 인사(이름) {
console.log("안녕하세요, " + 이름 + "님!");
}
인사("철수"); // 결과: 안녕하세요, 철수님!
인사("영희"); // 결과: 안녕하세요, 영희님!
스코프란?
스코프는 변수가 "어디에서" 유효한지를 결정합니다.
- 전역 스코프: 코드 어디에서나 접근 가능.
- 지역 스코프: 함수 안에서만 접근 가능.
활용 사례
- 전역 변수로 앱 전체에서 데이터를 공유.
- 지역 변수로 함수 내부에서만 사용하는 임시 데이터 저장.
예제
let 전역변수 = "나는 어디에서나 접근 가능";
function 함수() {
let 지역변수 = "나는 함수 안에서만 접근 가능";
console.log(전역변수); // 가능
console.log(지역변수); // 가능
}
함수();
console.log(지역변수); // 오류! 지역 변수는 함수 밖에서 접근 불가
개념 요약
1. 기초 구조: HTML/CSS와 함께 웹을 구성.
2. 데이터 타입과 변수: 데이터를 저장하고 활용.
3. 연산자와 표현식: 데이터를 계산하고 비교.
4. 조건문과 반복문: 조건에 따라 동작을 다르게 실행하거나 반복.
5. 함수와 스코프: 코드를 재사용하고, 변수의 범위를 관리.
반응형
'개발 메모장' 카테고리의 다른 글
| [자바스크립트 학습] 고급 5일차 (0) | 2024.12.16 |
|---|---|
| [자바스크립트 학습] 고급 4일차 (0) | 2024.12.16 |
| [자바스크립트 학습] 기본 개념 및 문법 2일차 (0) | 2024.12.16 |
| [자바스크립트 학습] 기본 개념 및 문법 1일차 (0) | 2024.12.16 |
| var, let, const 차이점 요약 (0) | 2024.12.05 |
댓글