본문 바로가기

내가 해냄/혼공학습단

한빛미디어) 혼공학습단 7기「혼자 공부하는 자바스크립트」2주차

혼공학습단 7기 2주차

 

 혼공학습단 2주차! 이번주차 챕터에서는 코딩의 꽃 조건문에 대해서 공부해보았다. 자바스크립트의 조건문은 크게 if조건문과 switch조건문으로 나눌수 있다. 우선 if 조건문에 대해서 알아볼건데, 책에서는 형태에 따라 if조건문을 4가지로 분류하여 설명하였다. 

 

1. if 조건문

if (불 값이 나오는 표현식) {
불 값이 참일 때 실행할 문장 }

 

 우선 자바스크립트에서 가장 일반적인 조건문인 if 조건문이다. 불 표현식의 값이 true이면 중괄호 안의 문장을 실행하고 false면 문장을 무시하고 넘어간다. 아래 예제는 if문을 사용한 간단한 예제이다. 책에 나와있는 손코딩의 자료를 참고했으며 코드와 실행화면은 다음과 같다. 공부한 시간이 22시여서 기준은 모두 22시가 된다.

 

if 조건문 손코딩 코드

2. if else 조건문

if (불 값이 나오는 표현식) {
불 값이 참일 때 실행할 문장
} else {
불 값이 거짓 일 때 실행할 문장 }

 

 다음은 조금 더 편리하게 조건문을 사용할 수 있도록 서로 반대되는 상황을 표현하는 else 구문도 제공하는 if else 조건문이다. else 구문은 if 조건문 바로 뒤에 붙여서 사용한다. 이를 합한 조건문을 if else 조건문이라고 부르며 위와 같이 사용한다. 

 

if else 조건문 손코딩 코드

3. if else if 조건문

if (불 표현식) {
문장
} else if ( 불 표현식 ) {
문장
} else if ( 불 표현식 ) {
문장
} else {
문장 }

 

 다음은 겹치지 않는 3가지 이상의 조건을 나눌 때 사용하는 if else if 조건문이다. 위와 같은 구조로 사용할 수 있으며 여러가지 조건을 사용할 때 쓸 수 있다. 

 

if else if 조건문 손코딩 코드

 

 

기본미션

p.139 확인 문제 3번 문제 풀고 완전한 코드 만들어 비주얼 스튜디오 코드에서 실행 결과 인증샷

 

 

 우선 예제를 출력하기위해서 2주차 폴더안에 기본.html 파일을 만들어준 뒤 위의 코드를 작성해주었다. 책에서는 노란색 하이라이트 부분이 공백으로 채워야할 문제였는데 앞의 문장과 뒤의 문장이 모두 true 일 때 사용할 수 있는 && 연산자를 사용하여 채워주었다. x에 제대로 된 숫자가 들어갔다면 "조건에 맞아요"가 출력될 것이고, 아니라면 "조건에 맞지않아요"가 출력될 것이다. 

자바스크립트의 논리 연산자

&& (AND)
   피연산자들의 값이 모두 true일 경우에만 true를 반환하고, 나머지 경우에는 false를 반환한다.

|| (OR)
   피연산자들의 값 중 하나라도 true가 있으면 true를 반환하고, 하나도 true가 없으면 false를 반환한다.

! (NOT)
   피연산자 값의 반대 값을 반환한다.

 

파일을 실행하면 나오는 첫 화면
x에 조건에 맞지않는 값인 4를 넣었을 때 출력화면
x에 조건에 맞는 값인 15을 넣었을 때 출력화면

 

 

 

선택미션

p.152의 <태어난 연도를 입력받아 띠 출력하기> 예제 실행하여 본인의 띠 출력한 화면 캡쳐하기

 

 

 다음은 태어난 연도를 입력받아 띠 출력하기를 수행하기위한 코드의 작성이다. 사실 기본미션에서 임의로 else 조건문도 추가하였기에 조건이 십이지로 늘어난 것을 제외하면 거의 비슷한 코드라고 볼 수 있다. 

 

파일을 실행하면 나오는 첫 화면
내가 태어난 년도를 입력해본다면?
쨔잔~ 이렇게 나의 띠가 출력된다.

 

 

 

#한빛미디어 #혼공학습단 #혼공단 #혼자공부하는자바스크립트 #혼공JS