Insightful Universe
1.1 자바스크립트 기초 구조 - 심화
자바스크립트 실행 흐름
HTML → CSS → 자바스크립트 순서
- 브라우저는 HTML을 읽어 웹 페이지의 뼈대를 만듭니다.
- CSS로 디자인을 적용합니다.
- 자바스크립트로 동작을 추가합니다.
실습 예제: 버튼 클릭 시 경고창 띄우기
<!DOCTYPE html>
<html>
<head>
<title>심화 예제</title>
</head>
<body>
<button id="myButton">눌러보세요</button>
<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function () {
alert("버튼이 눌렸습니다!");
});
</script>
</body>
</html>
코드 설명
getElementById("myButton"): 버튼 요소를 선택합니다.addEventListener: 버튼이 눌렸을 때 경고창을 띄웁니다.
1.2 데이터 타입과 변수 - 심화
데이터 타입의 특징
- Number (숫자): 모든 숫자는 같은 타입입니다. (정수, 소수 모두 Number)
예시:10,3.14 - String (문자열): 글자를 나타내며, 작은따옴표('')나 큰따옴표("")로 감쌉니다.
예시:"Hello",'안녕' - Boolean (참/거짓):
true(참),false(거짓)만 가질 수 있습니다.
예시:5 > 3결과는true - Null과 Undefined:
null: 의도적으로 비어있는 값.undefined: 값이 할당되지 않은 상태.
심화 예제: 데이터 타입 확인하기
let 숫자 = 10;
let 글자 = "안녕하세요";
let 참거짓 = true;
console.log(typeof 숫자); // 결과: "number"
console.log(typeof 글자); // 결과: "string"
console.log(typeof 참거짓); // 결과: "boolean"
실생활 비유
- 숫자(Number): 수학 시간에 쓰는 숫자.
- 문자(String): 책에서 읽는 글자.
- Boolean: "맞아?" "아니야!"처럼 참/거짓을 따지는 대답.
1.3 연산자와 표현식 - 심화
1. 산술 연산 심화
결합 연산자: 문자열과 숫자를 결합할 때 주의가 필요합니다.
let 결과 = "숫자:" + 10 + 5;
console.log(결과); // "숫자:105"
결과 = 10 + 5 + "입니다";
console.log(결과); // "15입니다"
이유: 자바스크립트는 왼쪽에서 오른쪽으로 계산하며, 문자열이 포함되면 모든 것을 문자열로 처리합니다.
2. 논리 연산 심화
단축 평가: &&와 ||의 동작 원리
console.log(0 && "안녕"); // 결과: 0 (거짓인 값 반환)
console.log(1 || "안녕"); // 결과: 1 (첫 번째 참 값 반환)
- &&: 첫 번째로 "거짓"인 값을 반환.
- ||: 첫 번째로 "참"인 값을 반환.
1.4 조건문과 반복문 - 심화
조건문 심화: 다중 조건 처리
let 나이 = 25;
if (나이 < 13) {
console.log("어린이");
} else if (나이 < 20) {
console.log("청소년");
} else {
console.log("성인");
}
// 결과: 성인
실생활 비유
"너 몇 살이야?" → 조건에 따라 "어린이", "청소년", "성인"이라는 답을 돌려줌.
반복문 심화: 반복 중단과 건너뛰기
for (let i = 1; i <= 10; i++) {
if (i === 5) {
break; // 5에서 멈춤
}
console.log(i);
}
// 결과: 1, 2, 3, 4
for (let i = 1; i <= 10; i++) {
if (i % 2 === 0) {
continue; // 짝수 건너뛰기
}
console.log(i);
}
// 결과: 1, 3, 5, 7, 9
1.5 함수와 스코프 - 심화
함수 심화: 기본 매개변수
function 인사하기(이름 = "친구") {
console.log(`안녕하세요, ${이름}님!`);
}
인사하기(); // 결과: "안녕하세요, 친구님!"
인사하기("철수"); // 결과: "안녕하세요, 철수님!"
설명: 매개변수에 기본값을 설정하면, 값을 넣지 않아도 기본값이 사용됩니다.
스코프 심화: 지역 변수와 전역 변수
let 전역변수 = "나는 전역 변수";
function 함수() {
let 지역변수 = "나는 지역 변수";
console.log(전역변수); // 가능
console.log(지역변수); // 가능
}
함수();
console.log(지역변수); // 오류! 지역변수는 함수 밖에서 접근 불가
실생활 비유
전역 변수: 모든 사람이 볼 수 있는 대형 간판.
지역 변수: 집 안에 숨겨진 일기장.
연습 문제
-
데이터 타입 확인
let 나이 = 30; let 이름 = "영희"; let 결혼했니 = false; // 각각의 타입을 콘솔에 출력해보세요. console.log(typeof 나이); // ? console.log(typeof 이름); // ? console.log(typeof 결혼했니); // ? -
조건문 작성하기
let 점수 = 85; // 점수에 따라 아래와 같이 출력되도록 조건문을 작성해보세요. // 90점 이상: "A" // 80점 이상: "B" // 70점 이상: "C" // 그 외: "F" -
반복문 활용하기
// 1부터 10까지의 숫자 중에서 홀수만 출력하세요.
반응형
'개발 메모장' 카테고리의 다른 글
| [자바스크립트 학습] 고급 4일차 (0) | 2024.12.16 |
|---|---|
| [자바스크립트 학습] 기본 개념 및 문법 3일차 (0) | 2024.12.16 |
| [자바스크립트 학습] 기본 개념 및 문법 1일차 (0) | 2024.12.16 |
| var, let, const 차이점 요약 (0) | 2024.12.05 |
| 세련되고 알기 쉬운, 코드 네이밍법 (0) | 2024.11.27 |
댓글