본문 바로가기

Javascript

Javascript 기초(제어문 1)

안녕하세요 19살 IT 개발자 포돌이라고 합니다.

 

저번에 Javascript 기초(연산자)에 대해서 공부를 해봤습니다. 연산자 부분은 많이 어려울 수 있어요. 근데 이미 우리는 한 번 배웠기 때문에 제어문에서도 익숙한 문장들이 많이 나올 겁니다.  저의 목표는 사람들이 저의 글을 읽고 Javascript 언어를 자유자재로 쓰기를 원합니다.. 하지만 글로는 한계가 있어요... 그러기 때문에 제가 예제를 내는 겁니다 이해가 되는지 안되는지 확인을 자기가 스스로 하면서 느껴야 합니다. 

 

자 오늘도 Javascript (제어문1)를 나가보도록 하겠습니다.

조건문

조건문은 조건식의 값이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어한다. 예를 들어 질의응답 창을 이용해 방문자가 좋아하는 숫자를 입력받습니다. 이때 입력된 값을 2로 나누어 나머지 값이 0이면 "짝수" 아니면 "홀수"를 출력하게 만든다고 생각하세요.. 근데 왜 하필이면 값을 2로 나누냐고요? 2로 나눠야지 딱 떨어지거나 나머지가 1이 남아요 즉 (0, 1) 두 개의 숫자만 남으니까 2로 나눈 거예요.

 

if else 문

if else문은 조건식을 만족할 경우에만 실행합니다. if문의 기본형을 알아볼까요?

 

기본형

 

 

예제 1)

num<500의 비교 결과는 10<500이므로 true를 반환하고 true가 된다면 "hello" 단어를 출력할 수 있게 코드로 작성해보세요. 

 

 

좀 더 응용할 수 있는 예제를 내보도록 하죠~

 

예제2)

걸음 수를 넣어서 10000보 이상일 경우에만 결과를 출력하는 예제입니다. 10000보 이상이면 "좋은 습관을 가지고 계시네요"라는 문구를 출력하고 10000보 미만이면 the end라는 단어를 출력해보도록 코드를 짜 봅시다.

 

 

뭔가 새로운 게 보이죠? prompt 우리 안 배운 거잖아요? 자 prompt는 var 변수로 하나하나 지워서 재설정하지 않고  자유자재로 값을 변환시킬 수 있는 함수입니다.  출력하면

 

 

 

이렇게 나와요 화면상으로요 그래서 자유자재로 값을 입력할 수 있어요 터무니없는 값만 빼고요.

지금 9999 값을 집어넣죠? 

 

그러면

 

 

10000보 이상 걷지 못했으니 false가 되니 the end가 출력되었어요  그럼 10000보 이상 넘으면? 어떻게 될까요?

 

 

10000보 이상이니 true로 넘어가서 다르게 출력이 되었죠? 이 예제를 보시면서 다시 한번 복습해보세요~.

 

원래 if 문 else 문 따로 해서 만들려고 했는데 ifelse 문 하나만으로도 충분히 이해하실 수 있습니다. 

 

중첩 if문

조건문 안에 조건문이 있으면 중첩 if문이라고 합니다. 중첩 문의 기본형을 한번 볼까요?

 

기본형

 

 

 

중첩 if문은 살짝 어려울 수도 있기 때문에 예제를 풀어보겠습니다

 

예제)

중첩 if문을 사용해 아이디와 비밀번호가 일치했을 때 환영 문구가 출력되도록 해볼까요?

 

 

저는 이렇게 코드를 짜서 출력했습니다. 아이디와 비밀번호를 정확하게 prompt에 넣으면

 

 

 

 

정상적으로 출력이 됩니다. 그런데 아이디가 틀리고 비밀번호가 틀리면

 

 

문구가 나오고 확인을 누르면 location.reload();로 인해 자동으로 새로고침 됩니다.

 

그런데 아이디가 맞고 비밀번호가 틀렸다면 어떻게 될까요?

 

 

비밀번호가 일치하지 않다는 문구가 나오고 확인 버튼을 누르면 자동으로 새로고침 됩니다.

else if문

else if문은 두가지 이상의 조건식과 정해 놓은 조건을 만족하지 않았을 때 실행되는 코드로 이루어져 있습니다.

 

기본형

 

 

else if도 중요하기 때문에 기본형을 꼭 보시고 위에 있는 예제와 내용을 응용하면서 else if 문으로도 연습해보시길 바랍니다~.

switch 문

선택문인 switch 문은 변수에 저장된 값과 switch 문에 있는 경우(case)의 값을 검사하여 변수와 경우의 값에서 일치하는 값이 있을 때 그에 해당하는 코드를 실행합니다. if 문과 용도는 비슷하나 if문은 만족하는 데이터가 여러 개일 경우에 주로 사용하고, switch 문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용합니다.

 

기본형

 

 

변수에 저장된 값은 switch 문을 만나면 case의 값을 하나씩 검사합니다. 일치하는 데이터가 있으면 그에 해당하는 코드를 실행하고 break 문을 만나 switch 문을 종료합니다. 만일 경우(case)의 값 중에 일치하는 데이터가 없으면 마지막 default에 있는 코드를 실행하고 switch문을 종료합니다.

 

여기까지 Javascript 기초(제어문1)을 알려드렸습니다.  계속 말씀드리지만 계속 예제를 푸시면서 응용하시고 공부하셔야 합니다. 고생 많으셨습니다. 

 

19살 IT 개발자 포돌이였습니다.

-Coding is an Art-

-코딩을 예술이라 생각하는 사람-


 

 

'Javascript' 카테고리의 다른 글

Javascript 기초(객체1)  (1) 2021.09.18
Javascript 기초(제어문2)  (0) 2021.09.17
Javascript 기초(연산자)  (0) 2021.09.16
Javascript 기초(변수)  (0) 2021.09.15
Javascript 기초  (0) 2021.09.14