Do it : JS -4. 제어문 : if문 | if..else문 | switch문 | for문 | while문 | do..while문 | break문 | continue문

조건에 따라 흐름 조절 - if문, if...else문, 조건 연산자

-프로그램 짤 때  작성 순서대로 명령 실행X

-조건에 따라 명령 실행 순서가 정해짐 = if문 자주 사용

 

if문

-소괄호 조건이 true이면 > 중괄호 안에 자바스크립트 실행

-소괄호 조건이 false이면 > 중괄호 안에 자바스크립트 무시

 

if....else문

-소괄호 조건이 true이면 > if 중괄호 안에 자바스크립트 실행

-소괄호 조건이 false이면 > else 중괄호 안에 자바스크립트 실행

 

조건 연산자 - ? 와 : 

-조건이 하나이고, true일 때와 false일 때 실행할 명령도 하나뿐일 때 사용

-(조건) ? (조건이true일때) : (조건이 false일때)

-60점 이상이면 통과, 그렇지 않으면 실패

 

truthy값, falsy값

-true로 인정할 수 있는 값 =truthy하다

-false로 인정할 수 있는 값 =falsy하다

예) 0, ""(빈 문자열), NaN(숫자가 아님, 변수 선언만 한 상태에서 연산하면 볼 수 있음), undefined, null

 

-조건을 확인할 때 유용하게 사용한다

-사용자가 프롬프트 창에 입력했는지를 확인하는 소스 (input값이 들어있으면 truthy하다)

 

3의 배수 검사기 만들기

 

사용자가 입력했는지 확인

1. 프롬프트 창 만들기

2. [확인]을 누르면 > 입력 내용이 userNumber에 저장,  [취소]를 누르면 > null이 userNumber에 저장된다.

(숫쟈를 입력했다는 전제하에 실습 진행)

3. 사용자가 [확인]을 눌렀는지, [취소]를 눌렀는지 확인 

> [확인]을 누른 경우, userNumber가 null이 아닌 경우에 >3의 배수인지 확인한다

> [취소]을 누른 경우, alert()함수를 실행한다

 

-이 프로그램에서는 최소 1개 이상의 숫자 입력해 그 숫자가 3의 배수인지 아닌지 확인 후, [취소]를 눌러 프로그램 취소할 것이다.

-숫자를 입력하는 횟수가 [취소]를 누르는 횟수보다 더 많을 것이다.

-if....else문을 만들때 : true가 될 경우가 많은 조건을 if문에 넣는 것이 좋다

(userNumber != null) 이 조건으로 더 낫다. (userNumber ==null) 보다.

 

3의 배수인지 확인

1. 3의 배수인지 아닌지 확인 후 결과를 <div id="result"></div>영역에 표시할 것이다.

   이 영역을 가져와 변수로 지정 

-자바스크립트에서는 어떤 요소도 변수로 지정 가능하다.

 

2. 3의 배수 = 3으로 나눈 후 나머지가 0이다. > if...else문을 사용해서 3으로 나눈 나머지가 0일 때와 그렇지 않을 때

 

3. 3의 배수일 때 : 프롬프트 입력내용 + '3의 배수입니다'라고 표시

   3의 배수 아닐 때 : 프롬프트 입력 내용 + '3의 배수가 아닙니다'라고 표시

 

---

조건이 많을 때 흐름 조절 - switch문

-여러가지 조건과 입력값을 비교해야 하는 경우 

-if....else문 반복 사용보단 switch문 사용

 

관심 분야를 입력하면 강의실 알려주는 프로그램

-swithc문, case문 사용

 

1. 프롬프트 창에서 3개 값 중 하나 선택해서 입력한 후, 값을 session변수에 저장

 

2. switch문으로 session값을 확인하고 강의실 안내 화면을 표시하는 프로그램 

  ※사용자가 입력한 1~3값은 문자임 > case문에서 "1"처럼 문자열로 처리한다

-switch문, case문 활용하는 방법 유심히 보기

-break문 사용해서 명령을 실행한 다음에 완전히 switch문을 빠져나온다

-default는 지정한 조건 값과 전부 일치하지 않을 때 실행할 명령

 

---

명령 반복 실행 - for문

-동작을 여러번 실행할 때 사용

-간단, 양 줄어듬

 

반복문 필요할 때

-많은 양의 연산 처리할 때

 

for문 작동 과정

-값이 일정하게 커지면서 명령을 반복 실행

-변수 사용 > 반복 횟수를 자유롭게 조절 가능

-var i =1; 카운터 변수 선언

- i < 6;   for문의 조건식

- i ++   카운터 변수 조절

- sum += i;  반복 실행할 자바스크립트 소스

 

[ES6] for....of문

여러값을 차례로 순회할 때, 인덱스 값이 필요 없으면 for....of문을 사용한다

 

---

for문 반복 - 중첩 for문

 

별 찍기 실습 

-중첩문 : 자바스크립트 문 안에 또 다른 문을 넣어 사용

- * 문자를 30개씩 5줄 표시

 

1. for문 활용해서 * 문자 한 줄에 30개 표시

 

2. for문 5번 반복해야 30개씩 5줄 표시 가능

-줄을 바꾸기 위해서 중간에 <br>태그 삽입한다.

 

3. 새로운 for문 새로운 카운터 변수 k >5번 반복하는 기본 for문

 

4. 5번 반복해야 하는 소스? *를 30번 반복, <br>태그 삽입하는 것.

 

5. 바깥쪽 for문의 조건식이 false가 될 때까지 반복한다.

 

 

구구단 프로그램 - for문 중첩

1. 각 단의 9까지 곱하는 for문을 먼저 실행한 뒤 > 다음 단으로 넘어가는 for문 작성한다.

2. 먼저 실행하는 for문을 안쪽에, 나중에 실행하는 for문은 바깥쪽에 작성한다.

   안쪽 카운터 변수 j, 바깥쪽 카운터 변수 i

 

3. 변수 넣기

 

4. 바깥쪽의 for문 : 1씩 증가하면서 몇단인지 표시한다.

 

5. 안쪽 for문 : 곱하는 식을 표시한다, 각 단의 이름과 곱하는 식 전체를 <div>태그로 감싼다.

 

---

특정 조건에 따라 반복 - while문, do....while문

-특정 조건을 만족하는 동안에만 명령 반복

 

while문

-소괄호 안에 조건이 만족할 때, 중괄호 실행

-조건식에 있는 카운터 변수 i에 1을 더하는 방법으로 반복 횟수 제어.

 

do....while문

-조건이 맨 뒤에 붙는다

-일단 문장을 한 번 실행한 후 조건 확인한다

-조건 결과값이 false라도 일단 문장 최소 1번 실행한다.

 

반복문 종류와 차이점

-for문 : 초깃값이 있다. 일정한 간격으로 반복

-while문, do....while문 : 초깃값X, 간격X, 조건만 주어짐

-do....while문 : 조건을 반복하기 전 한 번 실행

 

 

팩토리얼 계산 프로그램  - while문

-팩토리얼 : 숫자 반복해서 곱함

-반복문 연습하기 좋다.

 

1. 어디까지 곱할 것인지를 정하는 특정 숫자 변수(프롬프트 창으로 입력받는다), 

   팩토리얼 계산의 결괏값을 지정할 변수, 

   반복문에 사용할 카운터 변수 필요하다.

 

2. 계산하는 과정 

- 3!를 써보기

- 변수 nFact라면 바뀌는 부분은 2,3

 

3. 계산식을 소스로 옮기기, 식을 쓰기

- 1! = 1이기 때문에  i=2부터 시작

 

---

반복을 건너뛰거나 멈추기 - break문, continue문

 

break문

-반복문의 특정 지점에서 반복을 중단

-break문을 만나면 반복문 종료

 

continue문

-continue문을 만나면 반복문의 맨 앞으로 되돌아갑니다. 다시 반복 시작.

 

짝수 더하기 프로그램 - 반복문, continue문, if문 

-먼저, if문으로 더할 숫자가 짝수인지, 홀수인지 확인

-홀수이면 continue문으로 반복의 흐름 끊고 처음으로 돌아간다.

-짝수라면 숫자 더한다.

-반복문으로 이 과정 반복한다.

 

1. 0부터 10까지 숫자 중 짝수만 더한다. 

   i % 2 == 1이면 홀수이다.

 

2. i % 2 ==0이면 짝수 이므로 sum변수에 i값을 더한다. 더하는 과정을 표시하기 위해 document.write()함수 추가한다.