자바스크립트(JavaScript)는 웹페이지에 동적인 기능을 부여하는 프로그래밍 언어입니다.
처음 배우는 사람에게는 어렵게 느껴질 수 있지만, 작은 예제를 직접 실행해보면 금방 재미를 느낄 수 있어요.
이 글에서는 초보자가 가장 많이 검색하고 실습하는 예제를 중심으로 정리했습니다.
JavaScript 기초 문법 정리 (복습용)
- 변수 선언:
let,const - 조건문:
if,else,switch - 반복문:
for,while - 함수 선언:
function, 화살표 함수=> - 이벤트 처리:
addEventListener()
🧩 전문가 팁: 코딩 초반엔 기능 하나씩 복사해 직접 실행해보는 게 가장 빠른 학습법입니다.
1. 버튼 클릭 시 문구 변경하기
“`html
기본 문장입니다.
“`
onclick이벤트로 함수 실행innerHTML로 요소 내용 변경
2. 현재 시간 표시하기
“`html
“`
Date()객체 사용toLocaleTimeString()으로 로컬 시간 표시
3. 간단한 계산기 만들기
“`html
“`
- 사용자 입력값 가져오기:
.value - 숫자 변환:
parseFloat()
4. 마우스 오버 효과 구현
“`html
마우스를 올려보세요
“`
🖼️ 이미지 ALT 위치 예시:
5. 키보드 입력 감지하기
“`html
“`
onkeyup이벤트 사용event.key로 입력된 키 감지
실전 예제 연습 꿀팁
- 하나의 HTML 파일에서 여러 기능을 섹션별로 나눠 연습해보세요.
- 에러 발생 시 F12(개발자도구)로 콘솔 확인하기
- 실습은 구글 크롬 브라우저에서 하는 것이 안정적
JavaScript 초보자가 자주 묻는 질문
- Q. 콘솔은 어디에 있나요?
A. 브라우저에서 F12 → “Console” 탭을 클릭하세요.
- Q. 파일을 어떻게 저장하나요?
A. 메모장이나 VS Code로 작성 후 .html 확장자로 저장하면 실행 가능해요.
학습에 도움되는 사이트
마무리: 매일 10분 실습의 힘
처음엔 어렵게 느껴지는 JavaScript도 반복해서 실습하면 점점 익숙해집니다.
오늘 소개한 예제들을 손으로 타이핑해보고 직접 실행해 보세요.
작은 코딩이 큰 실력을 만듭니다.
🔎 다음 포스팅 주제 추천
→ 4번: 실무에서 바로 쓰는 파이썬 자동화 예제
→ 37번: JavaScript로 만드는 간단한 계산기
참고자료
- https://developer.mozilla.org/ko/docs/Web/JavaScript
- https://jsfiddle.net/