**[계룡건설] GreenTech SW개발자 - JavaScript 학습 노트 .1**

이 카테고리는 국비지원 과정으로 [계룡건설] 빅데이터 기반 GreenTech SW개발자 과정에서 학습하는 내용을 정리하는 공간입니다.

---

JavaScript 핵심 개념 정리

---

1. 변수와 데이터 타입

변수 선언

• var: ES6 이전부터 사용되던 변수 선언 방식. 함수 스코프를 가짐.
• let: ES6에서 도입된 블록 스코프 변수. 재선언 불가.
• const: ES6에서 도입된 상수 선언. 값 변경 불가.

데이터 타입

• 숫자 타입: 정수, 실수 등.
• 논리 타입: true, false.
• 문자열 타입: 텍스트 데이터.
• 객체 타입: 키-값 쌍으로 구성된 복합 데이터.
• null: 값이 없음을 나타냄.
• undefined: 값이 할당되지 않음을 나타냄.

---

2. 변수의 범위

• 전역 변수: 함수 밖에서 선언되거나 var/let 없이 선언된 변수. 프로그램 전체에서 접근 가능.
• 지역 변수: 함수 내에서 선언된 변수. 함수 내에서만 접근 가능.
• 블록 변수: let으로 선언된 변수. 블록 내에서만 접근 가능.

---

3. 연산자

• 비교 연산자: ==, ===, !=, !==, <, >, <=, >=.
• 논리 연산자: &&, ||, !.
• 조건 연산자: ? :.
• 비트 연산자: &, |, ^, ~, <<, >>.

---

4. 객체

코어 객체

• Array: 배열 객체.
• Date: 날짜와 시간을 다루는 객체.
• Math: 수학 관련 함수 제공.
• String: 문자열 객체.
• Number: 숫자 객체.
• Boolean: 논리값 객체.
• Function: 함수 객체.
• Error: 에러 객체.
• Symbol: 유일한 값을 생성하는 객체.

배열 객체

• concat(): 배열을 이어붙임.
• join(): 배열 요소를 문자열로 결합.
• reverse(): 배열 요소를 뒤집음.
• slice(): 배열의 일부분을 반환.
• sort(): 배열을 정렬.
• splice(): 배열의 요소를 추가/삭제.
• pop(): 배열의 마지막 요소를 제거.

---

5. DOM (Document Object Model)

DOM은 HTML 문서를 객체로 표현한 것으로, JavaScript를 통해 HTML 요소를 동적으로 조작할 수 있게 해줍니다.

DOM 객체의 주요 프로퍼티

• id: 태그의 ID 값.
• tagName: HTML 태그 이름.
• innerHTML: 태그의 내부 HTML 내용.
• style: 태그의 CSS 스타일.

DOM 객체의 주요 메서드

• getElementById(): ID로 DOM 객체를 가져옴.
• querySelector(): CSS 선택자로 DOM 객체를 가져옴.
• addEventListener(): 이벤트 리스너를 등록.
• appendChild(): 자식 요소를 추가.

---

6. 이벤트와 이벤트 리스너

주요 이벤트 리스너

• onclick: 클릭 이벤트.
• onmouseover: 마우스가 요소 위로 올라갈 때.
• onkeydown: 키보드 키를 누를 때.
• onload: 페이지 로딩이 완료될 때.

이벤트 객체

• target: 이벤트가 발생한 요소.
• currentTarget: 이벤트 리스너가 등록된 요소.
• preventDefault(): 이벤트의 기본 동작을 취소.

---

7. BOM (Browser Object Model)

BOM은 브라우저와 관련된 객체를 다룹니다.

주요 객체

• window: 브라우저 창을 나타냄.
• location: 현재 페이지의 URL 정보.
• history: 브라우저 히스토리 정보.
• screen: 사용자의 화면 정보.

window 객체의 주요 메서드

• alert(): 경고창을 띄움.
• setTimeout(): 일정 시간 후 함수 실행.
• setInterval(): 일정 시간 간격으로 함수 반복 실행.

---

8. Canvas

Canvas는 HTML5에서 제공하는 그래픽을 그리는 도구입니다.

주요 메서드

• beginPath(): 새로운 경로 시작.
• moveTo(): 경로의 시작점 설정.
• lineTo(): 경로에 선을 추가.
• stroke(): 경로를 그리기.
• fill(): 경로를 채우기.
• drawImage(): 이미지를 그리기.

---

9. 이벤트 흐름

이벤트는 캡처 단계와 버블 단계로 나뉩니다.

• 캡처 단계: 이벤트가 최상위에서 타겟으로 전파.
• 버블 단계: 이벤트가 타겟에서 최상위로 전파.

---

10. 타이머

• setTimeout(): 일정 시간 후 함수 실행.
• setInterval(): 일정 시간 간격으로 함수 반복 실행.
• clearTimeout(): setTimeout 타이머 취소.
• clearInterval(): setInterval 타이머 취소.

---