[11] 230111 [K-디지털 트레이닝 11일] Ch. 8 자바스크립트 기초: 9. 조건문, 10. 반복문

230111 Wed 11th class

Ch. 8 자바스크립트 기초
진도: p. 301 ~  (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초, 저자: 천인국)

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 천인국 - 교보문고

오늘 배운 것 중 기억할 것을 정리했다.

---

지난 수업 때 배운 것 중 다시 기억할 것

리스트 내용만 중앙 정렬

ul { text-align: center; }

리스트 전체를 중앙 정렬

ul { display: table; margin-left: auto; margin-right: auto; }

참고: https://www.codingfactory.net/10774

 

2. <input type="number">의 너비 조정 시 style="width: 숫자em" 사용한다. 

ex)

<input type="number" id="user" min="1" step="1" value="0" style="width: 17em">

3. 엔터 효과 "<br>" 형태로 사용한다.
ex)

document.write("안녕 "+"<br>");

---

2022.12.30 - [1. Revision 2023/HTML5] - [3] 221230 Ch. 2 HTML5 기본 요소: 텍스트 표시, 리스트, 링크, 이미지, 테이블

4. 테이블
4.1 <tr>로 row, 행을 먼저 만들고 그 안에 <td>을 넣어서 열, column을 만든다.
구조는 <tr> (행)
<td> (열)
/<td>
</tr> 순서이다.

<tr> 한 번 적으면 1행이고 안에 들어갈 열의 수만큼 <td>를 적으면 된다.

4.2 <table>
<tr><th>for 루프 이용: 2단 출력</th>
<th>while 루프 이용: 2단 출력</th>
<th>do while 루프 이용: 2단 출력</th></tr>
처럼 <tr> 안에 열의 수 만큼의 헤더 <th>헤더</th> 적는다. 

4.3 <table border=1>: HTML5에서 테이블 선이 나온다. 

4.4 table{margin : auto;}를 쓰면 테이블 전체가 화면 중앙에 온다. 
margin-rigth : auto; margin-left :auto; 도 가능하다. 

4.5 <td colspan="숫자">: 좌우의 셀들을 병합한다 (가로로 합침, 가로가 긴 직사각형)
ex) <td colsapn="3">인 경우, 열 3개를 합친다.
<tr>
<td colspan="3"> 3행 1열 </td>
</tr>

4.6 table{width: 500px; table-layout: fixed;}를 사용하면 테이블이 지정한 크기의 동일한 너비를 가진다. 

---

 

Ch. 8 자바스크립트 기초

책의 목차
-자바스크립트의 소개
-자바스크립트의 용도
-자바스크립트의 위치
-문장
-변수
-자료형
-연산자
-숫자와 문자열 사이의 변환
-조건문
-반복문
-배열
-함수
-자바스크립트의 입출력

1. 조건문 p. 298

제어문: 문장이 실행되는 순서에 영향을 주는 문장이다. 조건문과 반복문이 있다.

1.1 if 문 

형식:

if(조건식)      {       문장;      }

설명: 조건식이 참인 경우에만 문장이 실행된다. 
조건식은 위에서부터 따지기 시작한다. 거짓이면 밑의 식을 따진다. 중간부터 체크 아님.

1.2 if - else 문

형식:

if(조건식) {      문장1; } else {      문장2; }

설명: 만약 조건식이 참이면 문장1이 실행된다. 그렇지 않으면 문장2가 실행된다. 

 

1.3 연속적인 if문

예시)

if(time<12){
alert(greeting1)//"Good Morning"을 greeting에 대입하는 코드(문장)
}else if(time<18){//그렇지 않으면,
//"Good Afternoon"을 greeting에 대입하는 코드(문장)
alert(greeting2)
}else{
alert(greeting3)
}

 

예시)
문제) 서류점수가 60점 이상이고 면접 점수가 70점 이상이면 "합격"을 알림창으로 띄우고,
서류점수가 50점 이상이고 면접 점수가 65점 이상이면 "보류"을 알림창으로 띄우고,
그렇지 않으면 "불합격"을 알림창으로 띄우세요.

<script>
var resume = prompt("서류 점수를 입력하세요","0-100점 사이입니다.")
var interview =  prompt("면접 점수를 입력하세요","0-100점 사이입니다.")

if (resume >= 60 && interview >= 70){
alert("합격입니다.");
} else if (resume >= 50 && interview >= 65){
alert("보류입니다.");
} else {
alert("불합격입니다.");
}

/*if (resume < 50 && interview < 65){
alert("불합격입니다.");
} else if (resume < 60 && interview < 70){
alert("보류입니다.");
} else {
alert("합격입니다.");
}*/
</script>

복사 붙여넣기 쓰다가 alert()값을 같게 했는데 집중해서 코드를 쳐야겠다. :0

var resume = prompt("서류 점수를 입력하세요","0-100점 사이입니다.")
var interview =  prompt("면접 점수를 입력하세요","0-100점 사이입니다.")

 prompt()를 사용해서 팝업창에 입력하게 할 수 있다. 

결과) 두 점수 다 100점을 입력했을 때

 

1.4 switch 문

만약 가능한 실행 경로가 여러 개인 경우에는 switch문을 사용하는 것이 좋다. 

switch(제어식) { case c1:                문장1:                break; case c2:                문장2:                break; case c3:                문장3:                break; ... default:                문장4:                break; }

 

학점 입력하기
예시) 

<script>
var grade = prompt("성적을 입력하시오:", "A-F사이 문자로");
switch(grade){
case 'A': alert("잘했어요!");
break;
case 'B': alert("좋은 점수군요!");
break;
case 'C': alert("괜찮은 점수군요!");
break;
case 'D': alert("좀더 노력하세요!");
break;
case 'F': alert("다음학기 수강하세요!");
break;
default: alert("알 수 없는 학점입니다. A-F사이 문자로 다시 입력하세요.")
}
</script>

결과) 학점 A를 입력했을 때

---

예시) 숫자 알아맞추기 p.302

지난 수업에서 변수 이름이 헷갈려서 코드에 섞어서 넣어서 오류가 났었는데
id = (1),(2),(3), 변수 = [1], [2], [3], [4]로 구분하니까 이해하기 쉬워졌다.

<style type ="text/css">
div{text-align:center; background-color:#E5FFCC; padding:10px 0px 30px 0px;}
</style>
<script>
//컴퓨터가 생각한 숫자를 저장하기 위한 변수 선언(computerNumber) [1] computerNumber
var computerNumber = 53; //정답 

//추측횟수를 저장하기 위한 변수 선언(nGuesses) [2] nGuesses
var nGuesses = 0;  //추측 횟수 

 function guess(){
//결과를 저장하기 위한 변수 선언(result) [3] result
 var result = ""; // 결과 메시지
//사용자가 생각한 숫자를 저장하기 위한 변수 선언(mynumber) [4] mynumber
//사용자가 입력한 값을 받아서 변수 number에 대입한다. 
//[4] mynumber = (1) "user"
 var mynumber = parseInt(document.getElementById("user").value); 
nGuesses++; // [2] nGuesses 추측 횟수를 증가시킨다. 

//컴퓨터가 생각한 숫자를 알아내기 위한 로직
//: 사용자가 생각한 숫자가 일치하면 "성공입니다" 메시지
//사용자가 생각한 숫자와 컴퓨터가 생각한 숫자가 작으면 "낮습니다" 메시지
//그렇지 않으면 "높습니다" 메시지 
//[1] computerNumber == [4] mynumber
if (mynumber == computerNumber){ //
result = "축하합니다. 성공입니다.";} // [3] result
else if(mynumber < computerNumber){ 
result = "고른 숫자는 컴퓨터의 숫자보다 낮습니다.";} 
else{
result = "고른 숫자는 컴퓨터의 숫자보다 높습니다.";}

// 힌트 변수에 저장되어있는 값을 (result) 추측횟수 input 태그에 대입한다.
// input 태그 = 힌트 변수에 저장되어있는 값 (result)
// (3) "result" = [3] result
document.getElementById("result").value = result; 

// 추측횟수 변수에 저장되어있는 값을 (nGuesses) 추측횟수 input 태그에 대입한다.
// input 태그 = 추측횟수 변수에 저장되어있는 값 (nGuesses)
// (2) "guesses" = [2] nGuesses
document.getElementById("guesses").value = nGuesses; 
return true;
}
</script>
</head>

<body>
<div>
<h1>숫자 맞추기 게임</h1>
이 게임은 컴퓨터가 생성한 숫자를 맞추는 게임입니다. <br> 숫자는 1부터 100 사이에 있습니다.<br>
<br>
<form name="my form" action="..." method="get">
<!-- (1) "user" --> 숫자: <input type="text" id="user" size=5> 
<!-- 확인 버튼 : 버튼을 클릭하면 guess()가 호출된다.--> 
<input type="button" value="확인" onclick=guess();>
 
<!-- (2) "guesses" --> 
추측횟수: <input type="text" id="guesses" size=5><br>  
<!-- (3) "result --> 
힌트: <input type="text" id="result" size=35><br> 
</form>
</div>
</body>

결과)

---

응용해서 숫자 증감 버튼 넣기

예시) 버전2의 버튼이 마이너스이면 힌트에 정수 1 이상의 값이라는 문장이 나오게 만들었다.

<style type ="text/css">
div{text-align:center; background-color:#E5FFCC; padding:10px 0px 30px 0px;}
ul {
  display: table;
  margin-left: auto;
  margin-right: auto;
}
</style>

<script>
function calc_add(){
var x = document.getElementById("first").value; 
document.getElementById("first").value=++x;
} 

function calc_sub(){
var x = document.getElementById("first").value; 
document.getElementById("first").value=--x;

if (document.getElementById("first").value<0){ 
result = "컴퓨터가 생성한 숫자는 정수 1 이상의 값입니다.";
document.getElementById("result").value = result; 
return true;
} 
} 
</script>

<div>
<h1>숫자 맞추기 게임</h1>
이 게임은 컴퓨터가 생성한 숫자를 맞추는 게임입니다. <br> 숫자는 정수 1부터 100 사이에 있습니다.<br>
<br>
<form name="my form" action="..." method="get">
<ul><li>Version1 숫자:
<input type="number" id="user" min="1" step="1" value="0" style="width: 17em"> 
<input type="button" value="확인" onclick=guess();><br><br></li>

<li>Version2 숫자: <input type="text" id="first" value="0">
<input type="button" value=" + " onclick="calc_add()">
<input type="button" value=" - " onclick="calc_sub()">
<input type="button" value="확인" onclick=guess();><br><br></li></ul>

추측 횟수: <input type="text" id="guesses" size=5><br><br>  
힌트: <input type="text" id="result" size=50><br> 
</form>
</div>

결과)

 

아래 코드를 <script>에 넣어서 Version2 빈칸도 숫자 0부터 시작하도록 만들 수 있다.

//x값이 마이너스이면(0보다 작으면)
if (x<0){
//개수 input의 값을 0으로 설정
document.getElementById("first").value=0;
}

---

if () {  return; } > null을 반환 (null을 return) if () {  return true; } > true을 반환 (true을 return) if () {  return false; } > false을 반환 (false을 return)

• return은 함수 실행을 종료하고, 함수를 빠져나온다.
  
• break는 현재 루프 즉, switch나 for, while문 등을 종료하고 루프에서 빠져나온다.
  
• 만약에 함수 안에 작성된 루프 안에서 break가 쓰였다면, break를 감싸고 있는 루프를 빠져나가고 함수 밖으로는 나가지 않는다. return은 함수 실행을 종료하고 함수를 호출한 곳으로 실행 흐름을 옮긴다.
  

참고: https://jihyehwang09.github.io/2019/03/12/js-return-and-break/

---

2. 반복문 p.304

while: 지정된 조건이 참이면 반복 실행한다.
for: 정해진 횟수 동안 코드를 반복 실행한다.
In computer programming, a loop is a sequence of instructions that is continually repeated until a certain condition is reached.

2.1 while 루프

형식: while( 조건식 )
          반복할 문장;
설명: 조건식이 참이면 문장을 반복 실행한다. 
변수를 먼저 선언한다.

예시) "안녕"이라는 문자열을 5번 출력해보자.

//1~5까지 출력하시오.
var i = 1; //1
while(i<=5){ //2 5 8 11 14
document.write("안녕 "+"<br>"); //3 6 9 12 15
i++; //4 7 10 13 16
}

 

2.2 for 루프 

형식: for( 초기식(initialization); 조건식(expression); 증감식(increment))
              반복할 문장;

설명: 초기식을 실행한 후에 조건식의 값이 참인 동안, 반복문장을 반복한다. 한 번 반복이 끝날 때마다 증감식이 실행된다. 

1. 초기값 → 2. 조건식 → 3. 반복문장 → 4. 증감식 순서로 진행된다. 

예시) 1~5까지 출력하시오. 

for (i=0; i<5; i++){ 
document.write(i+"<br>");
}

결과)

 

2.3 중첩 반복문 (내부 for 루프)

하나의 for 루프 안에 다른 for 루프가 내장될 수 있다. ex) 구구단표
루프가 중첩될 때는 루프 제어(기계나 설비 또는 화학 반응 따위가 목적에 알맞은 작용을 하도록 조절함) 변수로 서로 다른 변수를 사용해야한다. 

첫번째 for 루프가 반복되는 사이에 내부 for 루프도 그 수만큼 진행된다.
내부 for문(내부 반복문)이 끝나면 j변수는 소멸된다. (메모리에서 사라진다.)
외부 for문(외부 반복문)이 끝나면 i변수는 소멸된다. 

예를 들어 i= 1, 2, j= 1, 2 일 경우  외부 for1 값이 웹페이지 본문에 출력되고, 그 후에 내부 for1,2 값이 출력된다.  내부 for 문이 끝나고 j변수는 소멸한다. 외부 for2 값이 웹페이지 본문에 출력되고, 그 후에 내부 for1,2 값이 그 수만큼 출력된다.  내부 for 문이 끝나고 j변수는 소멸한다. 외부 for문이 끝나고, i변수는 소멸한다.

2.2.1.1 예시) 위 설명이 주석으로 설명되어있다.  

<h5>이중 for문</h5>
<script>
//        1    2    13
//            14
//            26    25
for (var i=1; i<3; i++){

//             3
//            15
document.write("i 값 ="+i+"<br>");

//            4    5     7  
//                 8    10
//                11  
//            16  17   
//                20    19
//                23    22
for (var j=1; j<3; j++){

//                6
//                9
//               18  
//               21
document.write("j 값 ="+j+"<br>");
}//내부 for end...
//12
//24
//외부 for end...
//27
}
</script>

 

2.2.1.2 예시)

<h5>이중 for문</h5>
<script>
for (var i=1; i<3; i++){
document.write("(i값 = "+i+")   ");

for (var j=1;j<5;j++){
document.write("(j값 = "+j+")   ");
}
}
</script>

결과)

 

2.2.1.3 예시) 구구단을 만드시오.

<script>
//구구단 출력하는 프로그램을 작성하시오.
//이중 for loop
for (i = 1; i<=9; i++){
document.write("<br>");
document.write("구구단의 "+i+"단입니다."+"<br>");
for (j = 1; j <=9; j++){
document.write(i + " x " + j + " = " + j*i+ "<br>");
}
}
</script>

결과) 

 

2.4 do / while 루프 

형식: do{
             반복할 문장
        }while( 조건식 )
특징: 반복 조건을 루프의 처음이 아니라 루프의 끝에서 검사한다. 일단 문장을 한 번 실행하고 나서 조건을 검사하고 싶을 때 사용한다. 
예시) 1~5까지 출력하시오.

var j = 1;
do{
document.write(j+"<br>")
j++;
} while(j<=5);

while(j<=5);
: 일단 한 번 문장을 실행한 후에 조건을 검사한다. while의 끝에 ;를 붙이는 것을 잊으면 안 된다. 

---

2.1~2.3 응용 구구단 2단 출력 
예시)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Assignment using for, while, do while loop p.310</title>
<style type="text/css">
table,th,tr,td{border:2px solid lightgreen;}
table{border-collapse:collapse; text-align: center; margin : auto; 
width: 500px; table-layout: fixed;} //테이블 행의 너비가 동일하게 된다.
th{background-color:lightgreen;}
tr#second{background-color:#E5FFCC;}
</style>
</head>

<body>
<table>
<tr>
<th colspan="3"> 구구단 2단을 출력하시오. </th>
</tr>

<tr id="second"><td><b>for 루프</b></td>
<td><b>while 루프</b></td>
<td><b>do while 루프</b></td>
</tr>

<tr>
<td>
<script>
//구구단 2단을 출력하는 프로그램을 작성하시오.
//for loop
for (i = 1; i<=9; i++){
document.write(2 + " x " + i + " = " + 2*i+ "<br>");
}
</script>
</td>

<td>
<script>
//while loop
var i = 1; 
while (i<=9){
document.write(2 + " x " + i + " = " + 2*i+ "<br>");
i++;
}
</script>
</td>

<td>
<script>
//do while loop
var i = 1;
do {
document.write(2 + " x " + i + " = " + 2*i+ "<br>");
i++;
} while (i<=9);
</script></td>
</tr>
</table>

</body>
</html>

행 2개 색상 따로 지정할 때 하나는 header, 다른 하나는 td에 bold와 따로 background 지정해서 했다.

결과) 

 

2.5 for/In 루프 

형식: for (변수 in 객체)
{             
                  문장;
}
특징: 객체(object) 안의 속성들에 대하여 어떤 처리를 반복할 수 있는 구조이다. 
(객체: 속성과 메서드로 이루어져 있는 하나의 엔터티(묶음)) 

---

반복문을 멈추는 것: 조건식, break

2.6 break 문장 p.310

break문은 반복 루프를 벗어나기 위해 사용한다. 반복 루프 안에서 break문이 실행되면 반복 루프를 빠져 나오게 된다. 

예시)

var msg="";
for (var i=0; i<10; i++){
if (i==3){ //i의 값이 9이면 반복을 중단하고 반복 루프를 빠져나간다. 
break;
}
//x += y 동일한 수식 x = x+y
// msg  = msg + i + "<br>";
msg += i+"<br>";
}
document.write(msg);

msg는 숫자가 아닌 문자열이다.
아래처럼 생각하는 것을 계속 연습해야한다. 
msg에 저장된 값: "0<br>"
msg  
= msg + i + "<br>"
= "0<br>"  +  i + "<br>" : 더하기는 연결 역할을 한다 (덧셈이 아니다.)
= "0<br>1" + "<br>" 
= "0<br>1<br>" 
= "0<br>1<br>2<br>"

결과)

 

2.7 continue 문장 p. 311

현재 실행하고 있는 반복 과정의 나머지를 생략하고 다음 반복을 시작하게 만든다. 
skip의 느낌이다. 그 부분만 넘긴다. 

예시)

<script>
var msg="";
for (var i=0; i<10; i++){
if (i==3){ //i의 값이 3이면 현재 반복을 중단하고 다음 반복을 시작한다. 
continue;
}

msg += i+"<br>";
}

document.write(msg);
</script>

결과) 3만 출력되지 않았다. 
"0<br>1<br>2<br>4<br>5<br>6<br>7<br>8<br>9<br>"의 결과물이다. 

---