[데브캠프 : 김민태의 프론트엔드 개발 3기] 기초학습(4) : JS

JavaScript 개요

01. 기본 문법

JavaScript는 웹 개발에서 동적인 기능을 구현하기 위해 사용하는 프로그래밍 언어이다. JavaScript 코드는 <script> 태그 안에 작성하거나, 별도의 .js 파일로 저장하여 <script src="파일 경로"></script>로 불러올 수 있다.

JavaScript는 다음과 같은 기본 문법을 갖는다:

• 변수 선언: var, let, const 키워드를 사용하여 변수를 선언한다.
• let x = 10; const y = 20; var z = 30;
• 데이터 타입: 문자열(String), 숫자(Number), 불리언(Boolean), 객체(Object), 배열(Array) 등이 있다.
• 조건문: if, else if, else를 사용한다.
• if (x > y) { console.log("x가 y보다 큽니다."); } else { console.log("x가 y보다 작거나 같습니다."); }

---

02. 함수와 스코프

JavaScript에서 함수는 특정 작업을 수행하는 블록으로 정의된다. 함수는 function 키워드로 선언하며, 매개변수와 반환값을 가질 수 있다.

• 함수 선언:
• function add(a, b) { return a + b; } console.log(add(5, 3)); // 출력: 8
• 함수 표현식:
• const subtract = function (a, b) { return a - b; }; console.log(subtract(10, 4)); // 출력: 6
• 스코프: JavaScript의 스코프는 변수의 접근 가능 범위를 정의한다. 주로 전역 스코프와 지역 스코프가 있다.
• let globalVar = "global"; // 전역 스코프 function example() { let localVar = "local"; // 지역 스코프 console.log(globalVar); // 접근 가능 console.log(localVar); // 접근 가능 } console.log(localVar); // 오류 발생: 접근 불가

---

03. 이벤트 처리

JavaScript는 사용자 상호작용을 처리하기 위해 이벤트를 사용할 수 있다. 이벤트는 버튼 클릭, 입력 필드 변경, 페이지 로드 등 다양한 동작에서 발생한다.

• 이벤트 추가:
• document.getElementById("myButton").addEventListener("click", function() { alert("버튼이 클릭되었습니다."); });

---

04. DOM 조작

DOM(Document Object Model)은 HTML 문서를 구조화하여 JavaScript로 조작할 수 있게 한다.

• 요소 선택:
• const element = document.querySelector("#myElement");
• 콘텐츠 변경:
• element.textContent = "새로운 텍스트";
• 스타일 변경:
• element.style.color = "blue";

---

Ch 6. JavaScript 핵심 정리

01. 핵심 문법 정리

JavaScript의 핵심 문법은 다음과 같다:

• 변수와 상수: let, const
• 조건문과 반복문: if, for, while
• 함수와 화살표 함수: function, ()=>
• 객체와 배열
• DOM 접근 및 조작

---

02. 핵심 문법 출력 연습

아래는 핵심 문법을 활용한 간단한 예제이다:

const userName = "홍길동";

function greet(name) {
  return `안녕하세요, ${name}!`;
}

console.log(greet(userName)); // 출력: 안녕하세요, 홍길동!

const numbers = [1, 2, 3, 4];
numbers.forEach((num) => {
  console.log(num * 2); // 배열 요소를 두 배로 출력
});

---

03. 주석

주석은 코드를 설명하거나 특정 코드를 비활성화하는 데 사용된다.

• 한 줄 주석: //
• // 이것은 한 줄 주석입니다. console.log("Hello, World!");
• 여러 줄 주석: /* */
• /* 이것은 여러 줄 주석입니다. 여러 줄에 걸쳐 설명할 때 사용합니다. */ console.log("Hello, World!");

---

04. 전역 객체

JavaScript의 전역 객체는 모든 환경에서 접근 가능한 객체로, 브라우저 환경에서는 window가 전역 객체로 사용된다. 주요 전역 객체는 다음과 같다:

• console: 디버깅을 위해 사용
• setTimeout, setInterval: 타이머 설정
• JSON: JSON 데이터 처리

예시:

console.log("전역 객체 예시입니다.");
setTimeout(() => {
  console.log("1초 후 실행");
}, 1000);