🌐 [ JavaScript 기초 정리 ]

---

🧱 HTML / CSS / JS의 비교

구분	설명
🧩 HTML	웹문서의 뼈대(구조)
🎨 CSS	웹문서의 디자인(스타일)
⚙️ JavaScript(JS)	웹문서의 동적 기능(프로그래밍 언어)

---

💡 [ JavaScript에 대해서 ]

항목	내용
🧭 사용처	웹 프로그래밍 / 서버 개발 / 소프트웨어 개발
📚 라이브러리 / 프레임워크	React, Angular, Vue.js, JQuery
⚙️ 백엔드 엔진	Node.js (2009년 이후 백엔드 역할 가능)
📱 앱 개발	React Native (지원 중단), React Native Web (웹+앱)
💻 소프트웨어 개발	Nw.js
🌟 현재 트렌드	React, Next.js, Spring

---

🧠 [ JS 사용법 ]

// 방법1 (HTML 내부에 JS 작성)
<script>
    console.log("Hello JavaScript");
</script>

// 방법2 (별도의 JS 파일 연결) ✅ 추천 방식
<script src="파일경로.js"></script>

⚠️ 주의: JS 파일은 HTML 없이 단독 실행 불가능!

---

💬 [ 주석(Comment) 문법 ]

구분	문법
🧩 HTML	<!-- 주석내용 -->
🎨 CSS	/* 주석내용 */
⚙️ JS	// 한 줄 주석 or /* 여러 줄 주석 */

---

✍️ [ JS 스타일 가이드 ]

규칙	설명
📏 들여쓰기	코드의 가독성을 높이기 위해 필수
🔚 세미콜론(;)	문장의 끝을 구분
🧾 공백	코드를 읽기 쉽게 작성
💬 주석	코드의 목적과 동작을 설명
🐪 식별자 규칙	Camel Case 사용 (ex. studentScore)

---

📦 [ JS 기본 용어 ]

용어	설명
💾 Data	사실이나 값을 그대로 나타낸 객관적 자료
✨ Literal	코드에 직접 표현된 값 (ex. 10, "Hello", true)
⚙️ Data Type (자료형)	데이터를 분류하는 방법 — 효율적 처리를 위해 필요

---

🔢 [ JS 자료형 (Data Types) ]

구분	예시	설명
🔹 숫자형 (Number)	10, 3.14	정수 / 실수
🔹 문자열 (String)	"Hello", 'World'	문자 데이터
🔹 논리형 (Boolean)	true, false	참 / 거짓
🔹 배열 (Array)	[1, 2, 3]	여러 값을 순서대로 저장
🔹 객체 (Object)	{name: "홍길동", age: 25}	이름:값 쌍의 구조
🔹 특수형	undefined, null	값이 없거나 비어있는 상태

---

📤 [ 출력 함수 ]

함수	설명
🖥️ console.log()	F12 → console에 출력
🔔 alert()	브라우저 알림창으로 출력
📄 document.write()	HTML 문서에 직접 출력
🧭 document.querySelector().innerHTML	특정 요소에 출력

---

📥 [ 입력 함수 ]

함수	설명	반환값
✅ confirm()	확인/취소 버튼이 있는 대화창	true / false
✏️ prompt()	사용자로부터 텍스트 입력받기	입력된 문자열
📜 document.querySelector().innerHTML	HTML 내 특정 텍스트 불러오기	문자열
📦 document.querySelector().value	입력창의 value 속성 값 호출	문자열

---

🧮 [ 변수 (Variable) ]

구분	설명
🧩 정의	데이터를 담아두는 공간 (메모리)
🎯 목적	재사용성과 가독성 향상
💡 선언법	let 변수명; or let 변수명 = 값;
📘 특징	let으로 선언한 변수는 값 변경 가능

let width = 200;
let height = 50;
let area = width * height;
console.log(area);
width = 300; // 변수 수정 가능

---

🔒 [ 상수 (Constant) ]

구분	설명
🧩 정의	수정할 수 없는 변수
⚙️ 선언법	const 변수명 = 값; (초깃값 필수)
🚫 수정 불가	값 변경 시 오류 발생

const name1 = "안정훈";
console.log(name1);
// name1 = "박재형"; ❌ (오류 발생)

---

🧠 [ 변수 + 입력/출력 함수 활용 ]

let result1 = confirm("확인 또는 취소를 클릭하세요.");
// 확인(true) / 취소(false)가 result1에 저장

let result2 = prompt("전화번호를 입력하세요.");
// 입력값이 result2에 문자열 형태로 저장

---