JavaScript 기초 문법 실습 완전 정리

 

 

Web Development · JavaScript

JavaScript 기초 문법 실습

이벤트 함수, return, switch, 반복문, do-while, break를 정리합니다.

시작 오늘 분석할 코드

이 폴더는 JavaScript 기초 문법과 객체 배열 실습을 모은 장입니다. 함수, 조건문, 반복문, switch, break, prompt, eval, 객체 배열을 작은 예제로 나누어 확인합니다.

function over(obj) { obj.style.background = "yellow"; } function out(obj) { obj.style.background = "white"; } function big(a, b) { let n = parseInt(a); let m = parseInt(b); if (n > m) return a; else return b; } function pr(str, n) { for (let i = 0; i < n; i++) document.write(str); } for (let i = 1; i <= 5; i++) { for (let j = 0; j < i; j++) document.write("*"); document.write("
"); }

this현재 이벤트가 발생한 요소를 가리킵니다.

return함수 결과를 호출한 곳으로 돌려줍니다.

switch값에 따라 case를 선택합니다.

breakswitch나 반복문을 빠져나옵니다.

for정해진 횟수만큼 반복합니다.

do-while최소 한 번 실행 후 조건을 검사합니다.

---

1 자바스크립트 코드 위치

첫 예제는 head 안 script에 함수를 선언하고, body의 div 이벤트 속성에서 호출합니다. 함수 선언과 이벤트 연결 위치를 구분하는 연습입니다.

위치	역할	예시
head script	함수 선언	over, out
body	화면 요소	div
onmouseover	마우스 진입	배경 yellow
onmouseout	마우스 이탈	배경 white

---

2 this와 obj

HTML에서 over(this)를 호출하면 현재 div 자신이 함수의 obj 매개변수로 전달됩니다. 그래서 함수 안에서 obj.style.background를 바꿀 수 있습니다.

div 이벤트

→

this 전달

→

obj style 변경

---

3 big 함수와 return

big 함수는 문자열 숫자 두 개를 받아 parseInt로 숫자 비교를 한 뒤 더 큰 원래 값을 return합니다.

코드	의미	결과
parseInt(a)	문자열을 정수로 변환	"625" → 625
if(n > m)	숫자 비교	큰 쪽 선택
return a	함수 결과 반환	호출부에 값 전달
document.write	결과 출력	큰수=625

---

 

반응형

 

4 switch case와 break

요일 예제는 월~금은 출근, 토~일은 휴일로 출력합니다. 여러 case를 연속으로 두고 마지막에 한 번만 실행문을 작성하는 패턴입니다.

입력	case 그룹	출력
월	평일	월는 출근
금	평일	금는 출근
토	휴일	토는 휴일
일	휴일	일는 휴일

break가 없으면 다음 case로 이어질 수 있으므로, 의도한 그룹 출력 뒤에는 break를 넣습니다.

---

5 별 찍기 중첩 반복문

별 찍기는 바깥 반복문이 줄 수를 정하고, 안쪽 반복문이 한 줄에 찍을 별 개수를 정합니다.

i	j 반복 횟수	출력
1	1	*
2	2	**
3	3	***
5	5	*****

---

6 n회차 반복 함수

pr(str, n)은 문자열 str을 n번 출력합니다. 함수로 반복 패턴을 감싸면 같은 로직을 여러 곳에서 재사용할 수 있습니다.

1

함수 호출pr("%", 5)를 실행합니다.

2

반복 시작i가 0부터 4까지 증가합니다.

3

문자 출력각 회차마다 %를 출력합니다.

4

완료총 5개가 출력됩니다.

---

7 do-while과 break

암호 예제는 do-while(true)로 계속 prompt를 띄우고, 입력값이 you이면 break로 반복문을 빠져나옵니다.

do-while

조건 검사 전 최소 한 번은 실행됩니다.

break

조건이 맞으면 반복문을 즉시 종료합니다.

---

8 자주 하는 실수

실수	증상	해결
this 전달 누락	어떤 div를 바꿀지 모릅니다.	over(this)처럼 전달합니다.
parseInt 누락	문자열 비교가 됩니다.	숫자 비교 전 변환합니다.
break 누락	다음 case까지 실행됩니다.	case 그룹 끝에 break를 둡니다.
중첩 반복문 범위 혼동	별 개수가 틀립니다.	i와 j 역할을 분리합니다.
무한 반복 탈출 조건 없음	prompt가 끝나지 않습니다.	break 조건을 명확히 둡니다.

---

9 복습 체크리스트

체크	통과 기준
event	mouseover/mouseout에서 this를 전달합니다.
function	매개변수와 return을 설명합니다.
switch	case 묶음과 break의 역할을 압니다.
for	중첩 반복문으로 별을 출력합니다.
do-while	최소 한 번 실행되는 반복문을 이해합니다.
break	반복문을 종료하는 흐름을 설명합니다.

---

10 디버깅 포인트

확인	콘솔 예시	의미
this	console.log(obj)	전달된 요소 확인
숫자 변환	console.log(n, m)	parseInt 결과 확인
요일	console.log(day)	prompt 입력 확인
반복 변수	console.log(i, j)	중첩 반복 확인
암호	console.log(password)	break 조건 확인

---

11 테스트 케이스

케이스	입력	예상
마우스 올림	div hover	노란 배경
큰 수	625, 555	625 반환
요일	토	휴일 출력
별	실행	1~5개 별
암호	you	통과 출력

---

11 문법 확장 연습

각 예제는 짧지만 함수, 조건문, 반복문을 확장하기 좋습니다. 값을 직접 바꿔보면서 흐름이 어떻게 달라지는지 확인합니다.

A

색상 변경over/out 함수의 배경색을 다른 CSS 색으로 바꿉니다.

B

세 수 비교big 함수를 세 숫자 중 가장 큰 값을 찾도록 확장합니다.

C

요일 검증월화수목금토일 외 입력이면 안내 문장을 출력합니다.

D

별 모양 변경역삼각형이나 사각형 별 찍기를 만들어 봅니다.

확장	목표	힌트
함수 재사용	같은 스타일 변경 함수를 여러 div에 적용	this 전달
return 비교	문자열이 아닌 숫자를 반환	return n
default case	잘못된 요일 처리	default:
반복 횟수 입력	prompt로 별 줄 수 받기	parseInt
암호 제한	3회 실패 후 종료	count 변수

---

12 제어문 비교

이 파일에는 if, switch, for, do-while이 모두 등장합니다. 어떤 상황에 어떤 제어문이 자연스러운지 구분하면 코드 선택이 쉬워집니다.

제어문	어울리는 상황	예제
if	조건이 참/거짓으로 갈림	큰 수 비교
switch	하나의 값이 여러 경우로 갈림	요일 판정
for	반복 횟수가 정해짐	별 찍기, pr 함수
do-while	최소 한 번 실행	암호 입력
break	중간에 종료	암호 성공, switch 종료

제어문은 외우는 것보다 “조건 분기인지, 횟수 반복인지, 성공할 때까지 반복인지”로 고르면 됩니다.

---

13 추가 테스트

테스트	확인 내용
마우스 반복	올림/내림을 반복해 배경색이 되돌아오는지 봅니다.
동일 숫자	big("5","5") 결과가 어느 쪽인지 확인합니다.
잘못된 요일	default 처리 필요성을 확인합니다.
별 줄 수 변경	i<=10으로 바꿔 출력 변화를 봅니다.
pr 반복수 0	아무것도 출력되지 않는지 확인합니다.
암호 취소	prompt 취소 시 반복이 어떻게 되는지 확인합니다.
암호 오답	you가 아닌 값을 넣으면 반복되는지 확인합니다.
평일 입력	월~금 입력 시 같은 출근 문장이 나오는지 봅니다.
휴일 입력	토/일 입력 시 휴일 문장이 나오는지 봅니다.
return 값	big 함수 결과가 변수 b에 저장되는지 확인합니다.

마무리

핵심 기준짧은 예제라도 입력값, 종료 조건, 반복 범위를 항상 확인합니다.

---

핵심 한 줄 요약

eventthis를 함수에 넘기면 해당 요소의 스타일을 바꿀 수 있습니다.

controlif, switch, for, do-while로 실행 흐름을 제어합니다.

break원하는 조건에서 switch나 반복을 끝냅니다.

Tags

#JavaScript#function#return#switch#break#for#do-while#event#prompt#티스토리

▼ 티스토리 태그 입력란 복사용

JavaScript, function, return, switch, break, for, do-while, event, prompt, 티스토리