제목
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
초보자 및 JavaScript 학습자, 웹 개발 초보자
핵심 요약
- DOM을 통해 HTML 요소를 선택, 수정, 제어할 수 있음
- 글로벌 변수는 전역에서 접근 가능하고, 로컬 변수는 함수 내부에서만 사용 가능
alert()
및onclick
이벤트를 활용한 인터랙티브 UI 구현console.log()
를 통해 디버깅 및 로깅 가능
섹션별 세부 요약
1. What is the DOM?
- DOM(Document Object Model)은 JavaScript가 HTML 페이지와 상호작용하는 방식
document.getElementById("main-title")
을 통해 HTML 요소 선택 가능- 선택된 요소를
console.log()
로 출력하여 디버깅 가능
2. Global vs Local Variables
- 글로벌 변수(globalVar)는 함수 외부에서 정의되어 전역에서 접근 가능
- 로컬 변수(localVar)는 함수 내부에서 정의되어 해당 범위에서만 사용 가능
- 팁: 글로벌 변수 과다 사용은 코드 복잡도 증가로 이어질 수 있음
3. Showing Alerts
alert("메시지")
를 사용해 브라우저 팝업 생성 가능- 사용자에게 즉시 피드백 제공 가능
4. Button OnClick Event
- HTML
onclick
속성을 통해 버튼 클릭 시 함수 호출 가능 - 예:
function showMessage() { alert("버튼 클릭됨!"); }
- 추천:
addEventListener
사용으로 이벤트 처리 유연성 향상
5. From HTML to Console
console.log("메시지")
를 통해 개발자 도구 콘솔에 메시지 출력 가능- 디버깅 시 콘솔 로그 활용 필수
결론
- DOM 조작과 이벤트 처리는 웹 개발의 핵심 기술
addEventListener
사용을 통해 이벤트 관리의 확장성 확보- 콘솔 로깅은 디버깅 효율성 향상에 필수적
- 코드 정리 시 글로벌 변수 최소화 및 명확한 범위 정의 권장