조건문
조건문이란?
조건을 검사하여 참인지 거짓인지에 따라 서로 다른 작업(코드)을 실행
자바스크립트의 조건문
• if-else
• switch
if문
조건식이 참이면 실행문을 실행한 후 if문을 벗어남
조건식이 거짓이면 바로 if문을 벗어남
true일때만 문을 열어줌 (실행)
false일때는 문을 열 수 없으며 (아예 실행할 수 없음)
중괄호 바로 밑에 있는 코드를 실행 (중괄호 안에 있는 코드 실행을 못하고 다음 코드로 바로 넘어감)
if-else문
조건식이 참인 경우와 거짓인 경우에 다른 코드를 실행
다중 if-else
if-else를 연속 작성하여 각 조건에 맞는 코드를 실행
Prompt
prompt ("질문" , 초기값)
프롬프트는 매개변수가 2개 들어갈수 있음 첫번째 매개변수는 질문 이라고 볼 수 있음
- 사용자로부터 입력 받은 값을 리턴해주는 함수
- 입력받은 값의 데이터 타입 = string (문자열)
- 사용자가 알림창에 숫자 100 입력 → 실제 저장된 값은 문자열 "100"
(초기값은 문자도 되고 숫자도 됨 따옴표는 문자일 때 붙이기)
var *** = prompt("질문" , 초기값)
console.log(score) → score에는 문자열 "100"이 저장되어 있음
parseInt ("문자열")
문자열 → 숫자 타입 변환해주는 함수
parseInt (score) → "100" 점수 저장
score = parseInt (score) → score 변수에 기존 문자열 "100"을 제거하고 숫자 100을 저장
이렇게 하는 이유는 굳이 변수를 많이 만들 필요 없이 이미 만들어 놓은 변수를 활용 하기 위해
* 중괄호 생략 가능한 경우
if -else 사용
예시)
<body>
<h3>if-else를 이용한 학점 계산</h3>
<hr>
<script>
var grade;
var score = prompt("차은우님 점수를 입력하세요", 100);
score = parseInt(score); // 문자열을 숫자로 바꿈
if(score >= 90) // score가 90 이상
grade = "A“;
else if(score >= 80) // 80 이상 90 미만
grade = "B";
else if(score >= 70) // 70 이상 80 미만
grade = "C";
else if(score >= 60) // 60 이상 70 미만
grade = "D";
else // 60 미만
grade = "F";
document.write(score + "는" + grade + "입니다.<br>")
</script>
</body>
결과)
var a=6;
var b=3;
if(a>b) {
if(a>5){
document.write("a가 5보다 크다");
}
else{
document.write("a가 5보다 작다");
}
}
변수 선언은 가장 상단에 하는 것이 좋음
코드가 한 줄이면 중괄호 생략가능
if -else 사용 예제1)
<body>
<script>
var 온도 = prompt("물의 온도를 입력하세요", 100);
온도 = parseInt(온도);
if (온도 >= 100) {
document.write("기체 상태 : 온도가 100도 보다 크거나 같습니다.<br>");
// 100을 써봐야 어차피 짤림요
} else if (온도 > 0) {
document.write("액체상태 온도가 0도 초과, 100도 미만입니다<br>");
} else {
document.write("고체상태 : 온도가 0도 이하입니다.");
}
</script>
</body>
</html>if -else 사용 예제2)
<body>
<script>
var 숫자 = prompt("숫자를 입력하세요");
숫자 = parseInt(숫자);
if (숫자 > 0) {
if (숫자 % 2 == 0) document.write("0보다 큰 짝수");
else document.write("0보다 큰 홀수");
} else {
document.write("0보다 작거나 같은 수");
}
</script>
</body>
<script>
var 숫자 = prompt("숫자를 입력하세요");
숫자 = parseInt(숫자);
if ((숫자 % 2 == 0) > 0) {
document.write("0보다 큰 짝수");
} else if ((숫자 % 2 == 1) > 0) {
document.write("0보다 큰 홀수");
} else {
document.write("0보다 작거나 같은 수");
}
</script>
switch 문
값에 따라 서로 다른 코드를 실행 (불리언 값이 아닌 실제 값)
case 문의 '값'
* case 값의 갯수는 제한 없음
* 식은 사용 불가
break
• switch 종료
• break를 만날 때까지 코드 계속 실행 (break를 걸어야 빠져나올 수 있음)
switch(조건식){
case 값1 :
//하고싶은일
document.write("안녕");
case 값2 :
//하고싶은일
document.write("반가워");
case 값3 :
//하고싶은일
document.write("방가방가");
break;
defult:
document.write("집에가고싶다");
}
defult = else
맨끝에 달려있어야 함
예시)
<body>
<script>
var day = prompt("요일을 입력하세요");
switch (day) {
case "월":
case "Monday":
document.write("<p>Monday</p>");
break;
case "화":
case "Tuesday":
document.write("Tuesday");
break;
case "수":
case "Wendsday":
document.write("Tuesday");
break;
case "목":
case "Thursday":
document.write("Thurssday");
break;
case "금":
case "Friday":
document.write("Friday");
break;
case "토":
case "Saterday":
document.write("Saterday");
break;
case "일":
case "Sunday":
document.write("Friday");
default:
document.write(day + "는 요일이 아닙니다.");
}
</script>
</body>
결과)
반복문
for문 (반복횟수를 알 때 - 범위지정해야해서)
• 조건식이 true인 동안 작업문을 반복하여 실행
• 조건식의 결과가 false이면 for문을 종료
• 초기문은 초기 한번만 실행
• 반복의 횟수를 알 때 (모를 때는 while문 사용)
예제)
<body>
<h3>for 문으로 10px~35px 크기 출력</h3>
<hr />
<script>
for (var size = 10; size <= 35; size += 5) {
document.write("<span ");
// span 한칸 띄어야 함
document.write("style='font-size:" + size + "px'>");
// 폰트스타일지정 + size라는 변수 + px라는 문자열
document.write(size + "px");
// size라는 변수 + px라는 문자열 화면에 출력
document.write("</span>");
}
</script>
</body>
결과)
중첩 for문
j의 조건이 false가 될 때 까지 돌리다가 false가 됨 → 문을 열고 못 들어감 → j의 for문이 끝남 →
i의 for문으로 다시 올라감
while문 (반복횟수를 모를 때)
• 조건식이 true인 동안 작업문을 반복 실행
• 반복 횟수를 알 수 없는 경우 주로 사용 (반복 횟수 알 때는 for문 사용)
while(true) - 무한반복
기본적으로 이 구조가 많이 쓰임
조건식을 설정하면 탈출할 수 있음.
예시)
do while문
• 조건식을 검사하여 true인 동안 작업문이 반복 실행
• 작업문은 최소 한 번은 실행
조건을 일치하면 다시 위로 (do문) 올라가서 반복 일치하지 않으면 아래로 내려감 (끝남)
예시)
<body>
<h3>do-while 문으로 0에서 n까지 합</h3>
<hr>
<script>
var n = prompt("0보다 큰 정수를 입력하세요", 0);
n = parseInt(n); // 문자열 n을 숫자로 바꿈
var i = 0, sum = 0;
do {
sum += i;
i++;
} while(i <= n); // i가 0~n까지 반복
document.write("0에서 " + n + "까지 합은 " + sum);
</script>
</body>
결과)
break문
• 반복문을 종료하고 빠져나옴
• 여러 개의 반복문으로 중첩된 경우, 현재 반복문 하나만 빠져 나옴
if안에 조건을 만족하면 break로 빠져나가는 형식으로 많이 사용
그냥 냅다 쓰면 아예 빠져나가벌임.
예제)
1에서 얼마까지 더해야 3000을 넘는가?
while(true)와 break문을 이용하여 코드를 작성
var i = 0,
sum = 0;
while (true) {// 무한 반복
sum += i;
if (sum > 3000) break; // 합이 3000보다 큼. 반복문 벗어남
i++;
}
document.write(i + "까지 더하면 3000을 넘음 : " + sum);
결과)
continue문
반복 코드 실행을 중단하고, 다음 반복으로 점프
예제)
<body>
<h3>3으로 나눈 나머지가 1인 수만 더하기</h3>
<hr>
<script>
var sum=0;
for(i = 1; i <= 10; i++) { // i가 1에서 10까지 반복
if(i % 3 != 1) // 3으로 나눈 나머지가 1이 아닌 경우
continue; // 다음 반복으로 점프(i++ 코드로)
document.write(i + " ");
sum += i;
}
document.write("합은 " + sum);
</script>
</body>
결과)
[실습회고]
자바스크립트,, 정처기에서 반복문 그런거 좀 풀어봤다고 아~ 알쥐알쥐 하다가 실습하면서 걍,, 큰 코를 다쳐벌인것,, 직접 코드 짜자니 정말 너모 답답하고 힘들었다.. 처음 풀 때는 case 이용한 문제 빼고는 진짜 잘 못 풀다가 하나하나씩 해결해나가고 물어물어 간신히 제출하였다. 2번째로 풀 때는 한 번 풀었다고 좀 더 나아졌다.
문제 마다 어려웠던 구간을 말하자면
1번 별표시 찍는 건데 조건에 맞지 않는데도 "입력오류입니다" 라는 말이 안나와서 고치다보니 for문 앞에 if문이 있어서 그런거였음. 둘의 순서를 꼬옥 바꿔주면댐 그리고 if문에 ||연산을 써서 if(n<=0 || isNaN(n)==true) 이렇게 코드 짜면 숫자 아닌 것도 음수인 것도 둘 다 입력 오류라고 나타낼 수 있음
4번 와,, 다풀고 난 지금은 이렇게 간단할 수가,,, 하는 문제인데 2번과 쌍두마차로 진짜 do while을 이해하지 못한 처음 풀 때의 나는 그냥 머리 쥐어뜯었었다. 그래서 다시 개념을 읽어보며 do while문이 어떤 식으로 실행되는지 (조건식을 검사하여 true인 동안 작업문이 반복 실행) 이거와 옆에 예시를 보고 깨달아서 식을 고쳤다. do에는 반복할 식 while에는 조건식 그니까 do에 쓴 작업문이 반복 실행되기 위해서는 어떤 조건을 줘야할 지 라는 식으로 생각을 해봐야 함. 근데 두번째 풀 때에도 이거를 간과해서 while (pw != "you"); 답이 이건데 자꾸==으로 줘서 안 됐었음 정확한 암호가 입력되기 전까지 반복해야하니까 저렇게 써야함
5번 또 바보썰 푼다 prompt에 입력하는 대로 수식이 계산되어야 하는데 난 예시로 나온 수식을 다 적고앉아있었음 (그럴거면 프롬프트 왜 넣었겠냐고요,,) 여튼 다시 고쳐고쳐 자바스크립트 해서 eval 쓰는 방법 서치해서 답을 얻어낼 수 있었다
아 그리고 다시 풀 때는 한번에 답이 안나왔는데 parseInt써서 그랬다. 수식계산이라 등호 같은 것도 포함하기 때문에 문자열 그대로 입력되어야 함.
6번 하 이거 삼항연산자부터가 일단 이상하게 생겨서 변수 설정하는 거 때문에 헷갈림.. 뭐지뭐지 하다가 그냥 아무 변수 넣어보자하고 했더니 잘만됨 기죽지말자 겁먹지말자
복습하면서 느낀 건 처음부터 잘하는 사람두 많지만 나처럼 처음부터 잘하지 못하더라도 반복학습하면 이해되고 이해 안 되더라도 뇌에 강제적으로 새겨져서 익숙해짐 그 익숙함을 즐기기 위해 지금 고생하는 거라구 생각. 그리구 실습 풀면서 조언해주고 포기하지 말라고 북돋아주고 질문할 때마다 알려주고 한 옆자리 귤선생님 쵝오,,
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 3주차 블로그 포스팅
'Javascript' 카테고리의 다른 글
| [새싹 프론트엔드] 4주차 - 3 (0) | 2022.11.09 |
|---|---|
| [새싹 프론트엔드] 4주차 - 2 (0) | 2022.11.09 |
| [새싹 프론트엔드] 4주차 - 1 (0) | 2022.11.07 |
| [새싹 프론트엔드] 3주차 - 3 (0) | 2022.11.02 |
| [새싹 프론트엔드] 3주차 - 1 자바스크립트 개념 / 자료형과 변수 (0) | 2022.10.31 |
