<TIL>Javascript_조건, 반복문
2021.08.04
조건문
조건을 거친 후 값을 출력하고 싶을 때 사용
if
사용법
if(조건) { 조건이 참일때 실행 }
else if(조건) { 조건이 참일때 실행 }
else { 조건이 거짓일때 실행 }
예시코드
<body>
<script>
let name = prompt('이름을 입력해주세요.');
let height = prompt('신장을 입력해주세요.');
let weight = prompt('체중을 입력해주세요.');
const goodWeight = Number((height - 100) * 0.9);
if (weight >= goodWeight - 5 && weight <= goodWeight + 5) {
document.write(
`${name}님은 정상체중(${weight}kg)이고 적정체중(${goodWeight}kg)에서는 ${parseInt(
weight - goodWeight
)}kg차이가 납니다.`
);
} else if (weight > goodWeight + 5) {
document.write(
`${name}님은 과체중(${weight}kg)이고 적정체중(${goodWeight}kg)에서는 ${parseInt(
weight - goodWeight
)}kg차이가 납니다.`
);
} else if (weight < goodWeight - 5) {
document.write(
`${name}님은 저체중(${weight}kg)이고 적정체중(${goodWeight}kg)에서는 ${parseInt(
weight - goodWeight
)}kg차이가 납니다.`
);
} else {
document.write('잘못입력하셨습니다.');
}
</script>
</body>실제 사용자에게 값을 받아서 변수에 넣고 그 변수와 비교할 값을 계산식으로 계산 후 새로운 변수에 넣어 if문으로 범위를 조건으로 지정해 출력해주는 간단한 코드이다.
위와 같이 프롬프트가 나와 질문에 해당하는 값을 다 입력하고 나면
'철수, 180cm, 60kg'로 입력 시
철수님은 저체중(60kg)이고 적정체중(72kg)에서는 -12kg차이가 납니다.
'철수, 180cm, 70kg'로 입력 시
철수님은 정상체중(70kg)이고 적정체중(72kg)에서는 -2kg차이가 납니다.
'철수, 180cm, 80kg'로 입력 시
철수님은 과체중(80kg)이고 적정체중(72kg)에서는 8kg차이가 납니다.
'철수, 180cm, 정상임'으로 입력 시
잘못입력하셨습니다.
위와 같이 결과가 나오게 된다.
중복 if
조건을 거친 값에 한번 더 조건을 걸어 값을 추출하고 싶을 때 사용
사용법
if (조건) {
if (조건) { 조건이 참일때 실행 }
}
예시코드
<body>
<script>
let dbId = 'test';
let dbPw = 1234;
let userId = prompt('아이디를 입력하세요', '');
if (dbId == userId) {
let userPw = prompt('비밀번호를 입력하세요', '');
if (dbPw == userPw) {
document.write('로그인 성공 환영합니다.');
} else {
document.write('비밀번호가 일치하지 않습니다.');
}
} else {
document.write('아이디가 일치하지 않습니다.');
}
</script>
</body>
프롬프트의 질문에 입력한 값에 따라
아이디가 설정된 값과 불일치할 경우
아이디가 일치하지 않습니다.
아이디가 설정된 값과 일치하고 입력 후 비밀번호가 불일치한 경우
비밀번호가 일치하지 않습니다.
아이디가 설정된 값과 일치하고 입력 후 비밀번호도 일치한 경우
로그인 성공 환영합니다.
위와 같이 나온다.
아이디가 일치하는지 확인하는 조건을 거친 후 비밀번호가 일치하는지 조건을 또 거치는 중복 if문을 사용한 예시이다.
switch
특정한 조건보다는 케이스 별로 나누어 케이스에 일치하면 해당하는 값을 추출하고 싶을때 사용하는 조건문
사용법
switch (입력받은 매개변수) {
case'일치를 원하는 값' : 일차하면 실행 ;
break; 순서대로 내려오는 switch문 강제종료
default: 케이스들에 전부 일치하지 않을 때 실행
}
예시코드
<body>
<script>
let site = prompt('본인이 즐겨사용하는 검색사이트를 입력하세요');
let url;
switch (site) {
case '구글':
url = 'www.google.com';
break;
case '다음':
url = 'www.daum.net';
break;
case '네이버':
url = 'www.naver.com';
break;
default:
alert('보기 중에는 없는 사이트입니다.');
}
if (url) {
// open(`https://${url}`);
location.href = `https://${url}`;
}
</script>
</body>
프롬프트에 질문에 맞는 값을 입력하면
구글
다음
네이버
location.href = https://${url};으로 url 변수에 담긴 사이트 주소값으로 이동하는 간단한 코드이다.
반복문
while
특정 조건이 거짓으로 되기 전까지 실행을 반복할 때 사용하는 기능
사용법
while (조건) { 실행문 }
예시코드
<style>
p {
font-size: 20px;
}
.red {
color: red;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<script>
// 20 ~ 10까지 중 홀수는 파랑, 짝수는 빨강
let i = 20;
while (i >= 10) {
if (i % 2 == 0) {
document.write(`<p class="red">${i}</p>`);
} else {
document.write(`<p class="blue">${i}</p>`);
}
i--;
}
</script>
</body>
while문의 조건에 따라 i라는 변수가 10보다 작아져서 조건이 거짓이 될때까지 실행문을 반복한다, 위 코드에서는 실행문에 if문이 있어 i가 2로 나눈 나머지가 0인 짝수이면 빨강색을 그 외, 즉 홀수이면 파란색을 나타내는 간단한 코드이다.
do while
while과는 살짝 다른 모양으로 조건이 어떻게 되었든 실행문이 한번은 실행되도록 해주는 반복문이다.
사용법
do{ 조건이 참일때 작동하는 실행문 } while ( 조건문 )
예시코드
<body>
<script>
let i = 10;
do {
document.write('안녕하세요~!');
i++;
} while (i < 3);
</script>
</body>변수 i가 while의 조건문에 벗어나 거짓이 나오지만 do에 작성된 실행문이 한번 실행되는 것을 볼 수 있다.
for
제일 많이 사용되는 반복문의 형태로 while과는 다르게 한번에 변수 및 조건을 다 입력할 수 있다.
사용법
for (초기값; 범위; 증감식) { 실행문 }
예시코드
<body>
<script>
//1~20까지의 범위 중 짝수만 화면 출력
for (let i = 1; i <= 20; i++) {
// if (i == 10) break; // 반복문을 강제 종료
if (i == 10) continue; // 건너띄고 실행
if (i % 2 == 0) {
document.write(i, '<br>');
}
}
// 1~100까지의 합 출력
let sum = 0;
for (let j = 1; j <= 100; j++) {
sum += j; // sum = sum + i;
}
document.write(sum);
</script>
</body>if도 while 및 switch와 같이 break를 만나면 반복문이 강제종료되고 continue를 만나면 해당 조건에 해당되는 값은 건너뛰고 반복된다.
하단의 100까지의 합을 구할때 위 코드에서는 변수를 for문 밖에서 선언하고 해당 변수에 중복증감자(+=)를 사용해 증가하는 변수를 중복해서 더해주고 해당 변수를 for문 밖에서 호출해 body에 작성하면 1~100까지의 총합이 나오게된다.
document.write으로 body에 적는 것이 아닌 HTML태그를 선택하여 중복증감된 내용을 추가하는 방법
<body>
<h1>구구단</h1>
<p id="wrap"></p>
<script>
const num = 2;
let gugudan = '';
for (let i = 1; i <= 9; i++) {
gugudan += `${num} x ${i} = ${num * i} <br>`;
}
document.getElementById('wrap').innerHTML = gugudan;
</script>
</body>미리 for문 밖에 변수를 선언해놓고 for문에서 해당 변수에 반복되는 변수를 적용해 값을 넣어주고 for문 밖에서 HTML의 태그를 선택해 내부 내용을 처음 선언된 변수로 넣어주어 적용한다.
이중 for문 : 반복문으로 테이블 그리기
<body>
<script>
let num = 1;
let table = '<table border="1">';
for (let i = 1; i <= 5; i++) {
table += `<tr>`;
for (let j = 1; j <= 5; j++) {
table += `<td>${num}</td>`;
num++;
}
table += `</tr>`;
}
table += '</table>';
document.write(table);
</script>
</body>테이블을 만드는 태그 및 테이블 내에 적용될 숫자가 반복과 별개로 들어갈 수 있도록 변수를 밖에서 선언해주고 첫 for문에서 열을 만들어줄 <tr>을 앞뒤로 추가해주기 위해 두번째 내부 for문에 앞뒤로 table변수에 추가해주고 내부 for문에서 <td>${num}</td>를 table에 추가하고 num++을 사용해 숫자를 하나씩 증가시켜 넣어주어 반복시켜 행을 만들어주어 테이블을 만들어주고 값이 쌓여진 변수 table을 for문 밖에서 호출하여 출력해준다.
이중 for문 : 구구단
<body>
<script>
for (let i = 1; i <= 9; i++) {
for (let j = 1; j <= 9; j++) {
document.write(`${i} x ${j} = ${i * j} <br>`);
}
document.write('<hr>');
}
</script>
</body>위의 table과 마찬가지로 앞에 오는 숫자를 제일 밖의 for문으로 입력해주고 뒤 곱해주는 숫자를 내부에 for문으로 반복하여 증가시켜주어 1단부터 9단까지 출력해준다.
Author And Source
이 문제에 관하여(<TIL>Javascript_조건, 반복문), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@padd60/TILJavascript조건-반복문저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
