티스토리 뷰
제어문
조건문과 반복문
1. 조건문 : 조건에 따라 처리해야 할 때
a. if문
if(조건식) { // 조건식 - 참과 거짓을 판단할 수 있는 식
조건식이 참일 때 실행할 문장들
}
b. if ~ else 문
if(조건식){
조건식의 결과가 참일 때 실행할 문장
}else{
조건식의 결과가 거짓일 때 실행할 문장
}
c. if ~ else if ~ else
if(조건식){
조건식의 결과가 참일 때 실행할 문장
}else if(조건식){
조건식의 결과가 참일 때 실행할 문장
}
...
}else{
위 조건이 모두 거짓일 때 실행할 문장
}
d. switch 문
switch(변수 또는 수식){
case 값1 : 실행문장;
break;
case 값2: 실행문장;
break;
...
default : 실행문장;
break;
}
2. 반복문
a. for, for of, forEach, while문...
b. for 반복문 : 횟수를 중심으로 또는 배열을 중심으로 반복할 때 주로 사용
while 반복문 : 조건을 중심으로 반복할 때 주로 사용
c. for문은 반복할 개수를 알 수 있을 때(특정한 횟수 만큼 반복하고 싶을 때 사용)
for(let 초기값; 최종값(=조건식); 증감값){
실행할 문장
}
* 변수의 범위(스코프)
전역변수 : 프로그램 어디서나 사용가능
지역변수 : 해당 블록내에서만 사용 가능
<script>
/*
- 반복문 : 같은 작업을 여러 번 반복
- for 문 : 규칙적인 반복, 시작과 끝을 알 수 있을 때
for(시작 ; 최종값(=조건식); 증감값){
반복을 실행할 문장
}
- while문 : 불규칙적인 반복, 끝을 알 수 없을 때
while(조건식){
조건식이 참인 동안 실행할 문장
}
*/
//문) 1 ~ 5까지의 자연수의 합
// 1 + 2 + 3 + 4 + 5
//전역변수 : 어디서든 사용 가능
let sum = 0; //합계를 담을 변수, 초기화
for(let i=1; i<=5; i++){ //i++ => i=i+1
//let i=1, i:지역변수
sum = sum + i ; // sum += i;
alert(`i = ${i}, sum = ${sum}`);
}
//alert(`i = ${i}, sum = ${sum}`);
// i는 {}안에서만 사용할 수 있는 지역변수
// i는 {}을 벗어나면 메모리에서 제거
alert("합계는 " + sum);
//변수가 사용될 수 있는 범위 : 스코프(scope)
let hap = 0;
let k = 0;
for(k=1; k<=5; k++){
hap = hap + k;
}
alert(`k = ${k}, hap = ${hap}`);
</script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반복문 연습</title>
<script>
document.addEventListener("DOMContentLoaded",function(){
//1. 본문의 태그 읽어오기
const h2 = document.querySelector("h2");
//2. 1 ~ 100까지 합
let sum = 0;
for(let i=1; i<=100; i++){
sum += i; // sum = sum + i;
}
h2.textContent = "합계 : " + sum; //`합계 : ${sum}`
h2.style.background = "pink";
h2.style.color = "red";
});
</script>
</head>
<body>
<h2></h2>
</body>
</html>
c. while문 : 조건식이 중요할 때(반복할 횟수는 잘 모르고, 조건식만 알때)
while(조건식){ // 조건이 true인 동안은 계속 진행
실행할 문장
}
<script>
/*
for(시작 ; 최종값(=조건식); 증감값){
반복을 실행할 문장
}
//시작과 증감을 따로 처리
while(조건){
조건이 true일 때 실행할 문장
}
*/
// 1 ~ 5 까지의 자연수 합
let sum = 0; //합
let i = 0; //시작을 처리할 변수
while(i<5){
i++; // i=i+1;
sum = sum + i;
alert("i="+ i + ", sum=" + sum + "\n");
}
alert(`합계 : ${sum} `);
</script>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>음료 주문</title>
<script>
document.addEventListener("DOMContentLoaded",function(){
/* 음료 주문하세요.
1.커피 | 2.홍차 | 3.콜라 | 0. 주문종료
선택은 한 번에 한 음료만 선택 가능하되
반복해서 음료 선택할 수 있게
주문종료를 선택하기 전까지 계속적으로 주문 받기
음료 주문 결과는 본문에 쓰기
- 본문 태그 읽기
- while(){}
- 커피 주문 : switch()
- 주문 종료 : break;
*/
//1. html 태그 읽기
const order_menu = document.querySelector(".order_menu");
//2. div 태그 안에 주문을 내용을 출력하기 위한 변수
let output = "";
//3. 주문 반복
while(true){
let menu_text = "음료 주문하세요.\n";
menu_text += "1.커피 | 2.홍차 | 3.콜라 | 0. 주문종료";
//3-1. 주문
let order = prompt(menu_text);
//3-2. 주문 종료를 선택하면
if(order==="0"){
break; //while문을 빠져 나감
}//end of if
//3-3. 주문 처리
/*
switch(order){
case "1": output += "커피" + "<br>";
break;
case "2": output += "홍차" + "<br>";
break;
case "3": output += "콜라" + "<br>";
break;
default :
alert("입력 오류, 다시 입력하세요...");
}//end of switch
*/
if(order==="1"){
output += "커피" + "<br>"
}else if(order==="2"){
output += "홍차" + "<br>"
}else if(order==="3"){
output += "콜라" + "<br>";
}else{
alert("입력 오류, 다시 입력하세요...");
} //end of if
} // end of while
//4. div태그 안에 주문 내용 출력
order_menu.innerHTML = output;
}); // 처음부분
</script>
</head>
<body>
<h2>음료 주문 현황</h2>
<hr>
<div class="order_menu"></div>
</body>
</html>
d. for of 반복문
for(let 반복변수 of 배열 또는 객체){
// 비교) 자바 : for(타입 변수 : 배열이나 컬렉션객체){ }
실행할 문장
}
//for of 반복문 : 요소의 값을 반복할 때 사용
// for(let 반복할변수명 of 배열 또는 객체){ 실행할 문장 }
// for(const 반복할변수명 of 배열 또는 객체){ 실행할 문장 }
// for(var 반복할변수명 of 배열 또는 객체){ 실행할 문장 }
e. continue : 반복문을 실행하는 중에 continue 아래쪽은 실행하지 않고 다시 조건으로 올라가 실행
f. break : 반복을 종료
● 자리바꿈
<script>
let a = 3;
let b = 7;
// a와 b의 값을 바꿔 출력
// 결과 ) a = 7, b = 3
console.log(`자리바꿈 전 : a = ${a}, b = ${b}`)
let temp = 0;
temp = a;
a = b;
b = temp;
console.log(`자리바꿈 후 : a = ${a}, b = ${b}`)
</script>
<script>
//문) '커피 한잔 어떠세요?'
// 커피 마시는 것을 선택
// 커피를 마시지 않음을 선택
const response = confirm("커피 한잔 어떠세요?\n(확인-yes, 취소-no)");
// response에는 true 또는 false가 담기게 됨
if(response){
alert("커피 마시는 것을 선택");
}else{
alert("커피를 마시지 않음을 선택");
}
</script><script>
// 성적이 60점 미만이면 "탈락"으로 처리
// if(조건){ 조건이 참일 때 실행할 문장}
// 조건 - 참과 거짓이 결과로 나올 수 있는 것
let score = 30;
if(score < 60){
alert("탈락");
}
alert("즐거운 시간");
</script>
<script>
// 점수를 입력받아 60점 이상이면 "합격", 그렇지 않으면 "불합격" 처리
let score = Number(prompt("점수 입력"));
// if(score >= 60){
// alert("합격");
// }
// if(score < 60){
// alert("불합격");
// }
if(score >= 60){
alert("합격");
}else{
alert("불합격");
}
alert("즐거운 시간");
</script><script>
//숫자를 입력받아 홀수와 짝수 판별
// 출력형태)
// 당신이 입력한 숫자는 ~~이고 짝수/홀수 입니다.
/*
if(조건){
조건이 true일 때 실행할 문장
}else{
조건이 false일 때 실행할 문장
}
*/
let num = Number(prompt("숫자 입력"));
// if(num % 2 == 0){
// console.log(`당신이 입력한 숫자는 ${num}이고, 짝수입니다.`);
// }else{
// console.log(`당신이 입력한 숫자는 ${num}이고, 홀수입니다.`);
// }
let result="";
if(num % 2 == 0){
result = "짝수";
}else{
result = "홀수";
}
console.log(`당신이 입력한 숫자는 ${num}이고, ${result}입니다.`);
console.log("즐거운 시간");
</script>
<script>
//문) 주문 받은 음료를 출력하기
/*
단, 주문 1개만 가능
1:커피, 2:콜라, 3:라떼, 4:오렌지주스, 0:주문종료
출력) ~~을 주문 했습니다.
*/
let content = "음료를 주문하세요.\n";
content += "1.커피 | 2.콜라 | 3.라떼 | 4.오렌지주스 | 0.주문종료";
//1. 주문받기
const order = prompt(content);
//2. 주문 처리
if(order === "1"){
alert("커피 주문하셨습니다.");
}else if(order === "2"){
alert("콜라 주문하셨습니다.");
}else if(order === "3"){
alert("라떼 주문하셨습니다.");
}else if(order === "4"){
alert("오렌지주스 주문하셨습니다.");
}else if(order === "0"){
alert("주문 종료를 선택하셨습니다.");
}else{
alert("입력 오류, 다시 입력하세요.");
}
alert("즐거운 시간 되세요....");
</script>
<script>
//문) 주문 받은 음료를 출력하기
/*
단, 주문 1개만 가능
1:커피, 2:콜라, 3:라떼, 4:오렌지주스, 0:주문종료
출력) ~~을 주문 했습니다.
*/
let content = "음료를 주문하세요.\n";
content += "1.커피 | 2.콜라 | 3.라떼 | 4.오렌지주스 | 0.주문종료";
//1. 주문받기
const order = prompt(content);
switch(order){
case "1" :
alert("커피 주문하셨습니다.");
break;
case "2" :
alert("콜라 주문하셨습니다.");
break;
case "3" :
alert("라떼 주문하셨습니다.");
break;
case "4" :
alert("오렌지주스 주문하셨습니다.");
break;
case "0" :
alert("종료를 선택했습니다.");
break;
default :
alert("입력 오류, 다시 입력하세요...");
}
alert("즐거운 시간 되세요....");
</script>
● 조건문
<script>
// 성적이 80점 미만이면 "재수강"이라고 출력하세요.
// if(조건){
// 조건이 참일 때 실행할 문장
// }
// 조건은 true/false 가 나오는 것이면
let score = 90;
if(score < 80){
document.write("재수강<br>");
}
document.write("즐거운 시간");
</script>
<script>
// 숫자를 입력 받아서 홀수/짝수인지 구별하기
// 당신이 입력한 숫자는 ~ 이고, ~ 입니다.
//1. 변수 선언하고 초기화
let score = 0;
let result = "";
//2. 입력받기
score = Number(prompt("숫자 입력>> "));
//3. 판단
if(score % 2 === 0){
result = "짝수";
}else{
result = "홀수";
}
//4. 출력
document.write(`당신의 점수는 ${score}이고, ${result}입니다.`);
</script><script>
//문)숫자를 입력받아서 양수, 0, 음수인지 판별
//1. 변수 선언 및 초기화
let num = 0;
let result = "";
//2. 입력받기
num = parseInt(prompt("숫자 입력>> "));
//3. 판단
if(num > 0) {
result = "양수";
}else if(num === 0){
result = 0;
}else{
result = "음수";
}
//4. 출력
document.write(result + "<br>");
</script>
<script>
//문)숫자를 2개 입력 받아서, 두 숫자 중에 큰 수를
//firstNum 변수에 담아 출력, 더 작은 수는 secondNum에 담아서 출력
//1. 변수 선언 및 초기화
let firstNum = 0;
let secondNum = 0;
//2. 입력받기
firstNum = parseInt(prompt("첫 번째 숫자 입력 >>"));
secondNum = parseInt(prompt("두 번째 숫자 입력>> "));
//3. 판단하기
if(firstNum < secondNum){
let temp = 0;
temp = firstNum;
firstNum = secondNum;
secondNum = temp;
}
//4. 출력하기
document.write("큰 수 : " + firstNum + "<br>");
document.write("작은 수 : " + secondNum + "<br>");
</script>
<script>
//문) 입력받은 로그인 상태가 'Admin'이면 "관리자", 'User'이면 "일반 사용자",
// 그 외 입력은 "입력 오류"로 출력
let input = "";
let result = "";
input = prompt("로그인한 사용자 입력>> ");
input = input.toLocaleLowerCase(); //소문자로 변환
// input = input.toLocaleUpperCase(); //대문자로 변환
if(input==="admin"){
result ="관리자";
}else if(input==="user"){
result = "일반 사용자";
}else{
result = "입력 오류";
}
document.write(result + "<br>");
// if(input ==="Admin" || input === "admin" || input==="ADMIN"){
// result ="관리자";
// }else if(input ==="user" || input === "User" || input==="USER"){
// result = "일반 사용자";
// }else{
// result = "입력 오류";
// }
</script>
<script>
//문) 고객 구분을 입력 받아 출력
// 1.VIP | 2.GOLD | 3.SILVER | 4. GENERAL | 0.종료
let input="";
let result ="";
let in_text = "고객 구분을 입력하세요.\n";
in_text += "1.VIP | 2.GOLD | 3.SILVER | 4.GENERAL | 0.종료";
input = prompt(in_text);
switch(input){
case "1" :
result = "VIP 선택";
break;
case "2" :
result = "GOLD 선택";
break;
case "3" :
result = "SILVER 선택";
break;
case "4" :
result = "GENERAL 선택";
break;
case "0" :
result = "종료 선택";
break;
default:
result = "입력 오류";
}
document.write(result);
</script>
'Front-End Programming > JavaScript' 카테고리의 다른 글
| 함수(Function) (0) | 2025.03.18 |
|---|---|
| 배열(Array) (3) | 2025.03.18 |
| 자바스크립트 기초 (1) | 2025.03.17 |
| javascript 동기와 비동기,ajax get,post 예제_오전 (1) | 2025.03.12 |
| javascript 빠진 .html (0) | 2025.03.11 |
댓글