📌 JavaScript란?
JavaScript는 웹 개발에서 가장 널리 사용되는 프로그래밍 언어로, 웹 페이지를 동적으로 만들고 사용자와 상호작용할 수 있도록 해줍니다.
HTML과 CSS가 웹 페이지의 구조와 스타일을 정의하는 반면, JavaScript는 웹 페이지에서 버튼 클릭, 입력 폼 처리, 애니메이션 등의 동적인 기능을 구현합니다.
✅ JavaScript의 주요 특징
- 동적 프로그래밍 언어: 실행 중에 변수 타입을 변경할 수 있음.
- 인터프리터 언어: 컴파일 없이 실행 가능.
- 이벤트 기반 프로그래밍 가능: 사용자의 입력(클릭, 키보드 입력 등)에 반응.
- 브라우저에서 실행 가능: 별도의 실행 환경이 필요 없음.
📌 개요
이번 글에서는 JavaScript의 핵심 개념을 학습하고, 주요 개념들을 정리하였습니다. 오늘 배운 내용을 기반으로 JavaScript의 기초와 실습 내용을 다룹니다.
🖥 1️⃣ document.write()의 동작 방식
🔍 개념
document.write()는 HTML 문서에 직접 내용을 삽입하는 함수로, HTML이 로드되는 동안 실행됩니다.
✅ 코드 예제
<script>
document.write("<h1>HELLO WORLD</h1>");
document.write("<h2>HELLO WORLD</h2>");
</script>⚠️ 주의할 점
document.write()를 HTML이 완전히 로드된 후 실행하면 기존 문서를 삭제함.innerHTML을 사용하면 더 안전하게 요소를 조작할 수 있음.
const target = document.getElementById("target");
target.innerHTML = "<h1>HELLO WORLD</h1>";🖥 2️⃣ getElementById()와 요소 조작
🔍 개념
getElementById()를 사용하면 특정 ID를 가진 HTML 요소를 가져와 조작할 수 있음.
✅ 코드 예제
<button onClick="document.getElementById('d1').innerHTML='ABCD'">BTN</button>
<div id="d1">HELLO WORLD</div>⚠️ 주의할 점
- 요소가 존재하지 않으면
null을 반환하므로,if문으로 체크 후 사용해야 함.
const d1El = document.getElementById("d1");
if (d1El) {
d1El.textContent = "ABCD";
}🖥 3️⃣ typeof 연산자와 데이터 타입
🔍 개념
JavaScript에서 typeof 연산자를 사용하면 변수의 타입을 확인할 수 있음.
✅ 코드 예제
console.log(typeof "HELLO WORLD"); // "string"
console.log(typeof 10); // "number"
console.log(typeof null); // "object" (JavaScript 버그)
console.log(typeof undefined); // "undefined"⚠️ 주의할 점
typeof null이 "object"로 출력되는 것은 JavaScript의 오래된 버그.null과undefined는==로 비교하면true,===로 비교하면false.
console.log(null == undefined); // true
console.log(null === undefined); // false🖥 4️⃣ defer 속성과 이벤트 리스너
🔍 개념
- JavaScript가 실행될 때 HTML보다 먼저 실행되면 요소를 찾을 수 없어 오류가 발생할 수 있음.
- 이를 방지하기 위해
defer속성을 활용함.
✅ 코드 예제
<script defer src="./js/main.js"></script>⚠️ 주의할 점
defer를 사용하면 HTML이 완전히 로드된 후 JavaScript가 실행됨.DOMContentLoaded이벤트를 활용하면 더욱 안전하게 실행할 수 있음.
document.addEventListener("DOMContentLoaded", function() {
const boxE1 = document.querySelector(".box");
if (boxE1) {
boxE1.addEventListener("click", () => {
boxE1.style.backgroundColor = "black";
});
} else {
console.error("요소를 찾을 수 없습니다!");
}
});📌 전체 내용 요약
| 항목 | 설명 |
|---|---|
| JavaScript란? | 웹 페이지를 동적으로 만들고 사용자와 상호작용 가능 |
| document.write() | HTML 문서에 직접 내용 삽입, 기존 문서 삭제 가능 |
| getElementById() | 특정 요소를 선택하여 조작 가능 |
| typeof 연산자 | 변수의 데이터 타입을 확인하는 연산자 |
| defer 속성 | JavaScript가 HTML 로드 후 실행되도록 설정 |
🎯 결론
✅ document.write() 대신 innerHTML 사용.
✅ typeof null === "object" 버그 고려.
✅ defer 또는 DOMContentLoaded로 실행 순서 조정.
✅ JavaScript 코드 실행 전에 요소가 존재하는지 체크.
Here, My Pale Blue.🌏