제어문
- 조건문 : if ~ else문
- 반복문 : fot. while, do ~ while, for in
- 분기문 : break, continue
조건문
조건문의 종류
1. if문
<h1>조건문</h1>
<h2>if ~ else문</h2>
<p>
조건식의 결과값이 true이면 if 뒤 내용 실행 <br>
조건식의 결과값이 false이면 else 뒤 내용 실행
</p>
<script>
const conditionNum = 5;
if(conditionNum > 0) <- 조건식1 {
console.log('양수입니다.'); <-수행될 문장;
} <- 조건식의 결과 값이 true면 console.log안의 내용 실행 false면 실행되지 않음
if(conditionNum > 0){
console.log('양수!!');
} else {
console.log('음수~');
}
if(conditionNum %2 ===0){
console.log('짝수입니다.');
} else {
console.log('홀수입니다.');
}
</script>
<h2>if~ else if ~ else문</h2>
<script>
let elseifNum = 0;
if(elseifNum > 0){ <- 조건 1
console.log('양수입니다.'); true면 안에 내용 실행
} else if(elseifNum < 0){ <- 조건2
console.log('음수입니다.'); true면 안에 내용 실행
} else{
console.log('0입니다.'); <- 조건 1과 2내용이 false면 안에 내용실행
}
</script>
<h1>중첩 if문</h1>
<p>if문이 겹쳐 있는 것</p>
<script>
let doubleNum = 4;
if(doubleNum > 0){ <-조건1
console.log("양수입니다.");
if(doubleNum %2 === 0){ <-조건2
console.log("양수이면서 짝수군!!");
if(doubleNum === 4){ <- 조건3
console.log("양수이면서, 짝수고, 그중에서도 4군!")
}
}
} else if(doubleNum < 0){
console.log("음수");
if(doubleNum % 2 === 0)
{
console.log("음수이면서 짝수!");
}
} else{
console.log("0입니다");
}
</script>
2. switch
조건식 하나로 많은 경우의 수를 처리할 때 사용하며 이때 조건식의 결과는 정수 또는 문자, 문자열
조건식의 결과 값과 일치하는 case문으로 이동 default문은 일치하는 case문이 없을 때 수행 (=else)
<h1>switch문</h1>
<p>
하나의 기준으로 처리해야할 경우의 수가 여러가지 일 때 사용
</p>
<script>
let str = "복숭아";
if(str === "수박"){
console.log("39000원");
} else if(str === "산딸기") {
console.log("21310원");
} else if (str === "복숭아") {
console.log("11900원")
} else if (str === "초록사과"){
console.log("12900원")
} else{
console.log("알수없는 과일입니다");
}
switch(str){
case "수박" : console.log("39000원"); break;
case "산딸기" : console.log("21310원"); break;
default : console.log("알수없는 과일입니다."); break;
}
</script>
3.삼항 연산자
예시
- let result_1 = a > b ? ++a : --b;
- let result_2 = a < b ? ++a : ( b == 0 ? --a : ++b);
<h2>삼항 연산자</h2>
<p>
조건식 ? 식1 : 식2;
조건식의 결과 값에 따라 연산을 처리하는 방식
결과 값이 참인 경우 첫번째 식, 거짓인 경우 두번째 식2을 수행
</p>
<script>
// 수박 4~6kg
let weight = 5;
let msg = weight > 6 ? "와 대형수박!!" : "작고 소중한 수박";
if(weight > 6){
msg = "와 대형 수박";
} else {
msg = "작고 소중한 수박";
}
console.log(msg);
let result = 1 > 2? 3 : 4;
let a;
let b;
let result2 = a < b ? ++a : (b== 0 ? --a : ++b);
// a < b 따로 ++a 따로 (b==0 ? --a : ++b) 구별해야한다
<script>
function coffePlz(){
let pri = document.getElementById("price").value;
pri = parseInt(pri);
let msg = pri >=2500 ? "거스름돈은 :" +(pri-2500) : '아메리카노는 2500원입니다.';
alert(msg);
}
// let result3 = pri > 2500 ? pri - 2500 : "아메리카노는 2500원입니다"
// console.log(result3);
</script>
반복문
특정 문장들을 반복해서 수행하도록함
반복문의 종류
1. for문
<h1>반복문</h1>
<p>
조건문이 컴퓨터를 똑똑하게 한다면,
반복문은 컴퓨터를 강하게 합니다.
</p>
<h2>안녕하세요!!</h2>
<h2>안녕하세요!!</h2>
<h2>안녕하세요!!</h2>
<h2>안녕하세요!!</h2>
<h2>안녕하세요!!</h2>
<h2>안녕하세요!!</h2>
<h2>안녕하세요!!</h2>
<h2>안녕하세요!!</h2>
<h2>안녕하세요!!</h2>
<h2>안녕하세요!!</h2>
<script>
// for(초기식; 조건식; 증감식){ <- 초기식,증감식 확인 후 조건식 확인 true면 수행 false면 수행하지 않음
// 수행될 문장; <- 조건식이 false가 나올때까지 문장 수
// }
for(let i = 0 ; i < 10 ; i++){
document.write("<h2>안녕하세요</h2>")
}
</script>
<h1>반복문 예제1</h1>
<input type="number" id="greeting_num"/>
<input type="button" value="인사성이 밝다!" onclick="sayHi();"/>
<script>
function sayHi(){
let number_3 = document.getElementById("greeting_num").value;
for(let i = 0 ; i < number_3 ; i++){
document.write("<h1>Hello</h1>");
}
}
</script>
<h2>중첩 반복문</h2>
<p>for안에 for가 있다!!</p>
<script>
for(let i = 0 ; i < 2 ; i++){
console.log(1);
for(let j = 0 ; j < 3 ; j++){
console.log(2);
}
console.log(3);
}
// for문에 진입하면 수행될 문장1을 먼저 수행하고
// 두번째 for문제 진입하면 조건식2가 false가 될때까지 수행될 문장2를 수행
// 두번째 for문에서 나오면 문장 3을 수행하고 조건1로 돌아와 true면 반복
</script>
<h2>중첩 반복문 예제1</h2>
<input type="number" id="CGC_set"/>
<input type="button" onclick="CGC();"/> <!--id ='cgc_btn'-->
<img src="/음료.png">
<img src="/팝콘.png">
<script>
// document.getElementById('cgc_btn').onclick = function(){
// const num = document.getElementById("CGC_set").value;// }
function CGC(){
let combo = document.getElementById("CGC_set").value;
// for문제 진입 수행될 문장1을 먼저 수행
for(let popcorn = 0 ; popcorn < combo ; popcorn++){
document.write('<img src="/팝콘.png">');
//두번째 for문 진입 조건식 2가 false가 될때까지 문장2수행
for(let drink = 0 ; drink < 3 ; drink++){
//if(drink === 1) continue;
document.write('<img src="/음료.png">');
// -> 버튼을 한번 누를때 팝콘1개와 음료수 3개가 나옴
}
}
}
</script>
<h1>분기문 : break</h1>
<script>
// for (초기값1; 조건식1;증감식1){
// 수행될 문장1;
// for(초기값2; 조건식2; 증감식2){
// 수행될 문장;
// break;
// }
// 수행될 문장;
// [break];
// } 두번째 for문제 break를 만난 경우 반복문을 나가 수행될 문장3을 수행후
// 다시 첫 번째 for문을 실행하지만 마지막 break가 있다면 문장3을 수행후 for문을 빠져나감
console.log();
for(let i = 0 ; i < 2 ; i++){
console.log(1);
for(let j = 0 ; j < 3 ; j++){
console.log(2);
break;
}
console.log(3);
}
console.log();
for(let i = 0 ; i < 2 ; i++){
console.log(1);
for(let j = 0 ; j < 3 ; j++){
console.log(2);
}
console.log(3);
break;
}
</script>
2. while문
<h1>while문</h1>
<p>
for문 : 나는 오늘 2km를 뛸거야 (횟수가 정해져있을 때) <br>
while문 : 나는 심장이 터질때까지 뛸거야 (종료시점이 정해져있을 때)
</p>
<script>
// while(조건식){
// 수행될 문장;
// [증감식 or 분기문];
// }
// 조건식이 true일때 문장 수행. 문장 수행이 끝나면 조건식 다시 확인 후 true수행,
// 조건식이 false가 될 때까지 수행 조건식이 false가 되면 반복문 종료
console.log('===================while1=============');
let while1 = 10;
while(while1 >= 0){
console.log(while1);
while1 = while1-1;
}
console.log('===================while2=============');
let while2 = 10;
while(while2 >= 0){
console.log(while2);
while2 = while2-1;
if(while2 === 5){
break;
}
}
// 변수를 선언하고, 변수에 0을 할당
// 변수가 200보다 작을때
// console창에 변수의 값을 출력해주세요
// 변수는 10만큼 커지도록 해주세요
console.log('===================while3=============');
let while3 = 0;
while(while3 <= 200){
if(while3 === 200){
console.log('마지막');
break;
}
console.log(while3);
while3 = while3+10;
}
// for(let i = 0 ; i <= 200;){
// console.log(i);
// i = i+10;
// }
</script>
<h1>do ~ while</h1>
do 안의 내용은 먼저 실행 조건식 확인 후 true면 문장 수행, false면 종료 while 뒤에 ; 꼭 필요
do ~ while은 조건문이 true가 아디너라도 무조건 한 번 이상 수행 {}안에 조건을 벗어나게 할 연산 (증감식, 분기문)필요
<script>
// while문을 사용한 경우
let count1 = 10;
while(0 < count1 && count1 < 10){
console.log('출력1');
count1--;
}
// do while문을 사용한 경우
let count2 = 10;
do{
console.log('출력2');
count2--;
} while(0 < count2 && count2 < 10);
do를 사용해서 일단 한번은 내려간다 count2가 있으므로 차감된다
0<에서10사의 숫자 즉 1~9 + do 총 출력2가 10번 나온다
</script>
3.분기문
<h1>분기문</h1>
<p>
break : 반복문을 멈추고 싶을때, 반복문을 빠져나오고 싶을때<br>
continue : 반복문 실행시 continue 아래 부분은 실행하지 않고
반복문을 다시 실행
</p>
<script>
for(let f = 1; f <=10 ; f++){
if(f % 2 ===0) continue;
// 한줄 옆에 쓴건 중괄호 안써도 되긴함 continue 옆에 조건에 부합하면 아래 실행 안함
console.log(f+":출력");
}
</script>
'JavaScript & JQuery' 카테고리의 다른 글
| JavaScript(6) (0) | 2023.08.27 |
|---|---|
| JavaScript(5) (0) | 2023.08.27 |
| JavaScript(3) (2) | 2023.08.27 |
| JavaScript(2) (0) | 2023.08.26 |
| JavaScript(1) (0) | 2023.08.24 |
