[부스트코스 서포터즈3기]Javascript제어문 -조건문,조건문의 활용

들어가기 전 

___________________________________________________

 

안녕하세요! :) 

 

 

오늘은 조건문 그리고 조건문이 어떻게 활용이 되는지에 대해 살펴보도록 하겠습니다

 

 

두 강의가 서로 연결되어 있어 들었을 때 활용까지 같이 해볼 수 있어 너무 좋았습니다 :)

 

 

조건문 & 조건문의 활용 

___________________________________________________

 

먼저 각각 강의에서의 학습목표 , 핵심 단어에 대해 살펴보겠습니다. 

 

 

조건문 강의 학습 목표 , 핵심단어 

조건문의 활용 학습목표 핵심단어

 

오늘은 조건문 , 조건문의 활용에 대해 강의를 들었었습니다 

 

 

먼저 조건문이란 조건에 따라 다르게 실행되는 문법을 의미하는데 이때 사용하는 문법이 if , else 입니다.

 

 

C언어나 다른 곳에서도 많이 사용되는 문법이라 저에게는 굉장히 익숙한 문법이었는데 

 

 

자바스크립트에서 어떻게 사용이 되는지 한번 코드를 통해 알아보겠습니다 :) 

 

이렇게 script 태그 내에서 활용이 되며 , if의 조건으로는 이전 시간에 배운 불리언 (true , false)가 들어감을 알 수 있습니다.

 

 

이렇게 봤을 때 알 수 있는 자바스크립트 내에서의 if else문법은 

 

 

if(불리언) { 

 

조건문 

 

} 

 

else <-- 그 외 {

 

 

}

 

 

이런 구조라는 것을 알 수 있습니다. 

 

 

따라서 이렇게 실행하게 될 시! 

 

 

이렇게 결과가 나옴을 알 수 있습니다.

 

 

true의 경우 참이기 때문에 

 

 

if문을 실행시키기 때문에 if문 안에 있는 코드가 작성되고 else는 건너뛰어 1,2,4가 출력이 되며

 

 

 

false일 경우 if문이 거짓이 되기 때문에 else만 출력이 되어 1,3,4 가 출력됨을 확인할 수 있습니다. 

 

 

그렇다면 이런 if, else문은 어떻게 활용을 할 수 있을까요!? 

 

 

조건문을 이용하여 토글을 만들 수도 있습니다! 

 

 

버튼을 만들어 버튼을 눌렀을 때 배경은 검정, 글씨는 하양이 되며 버튼의 글자가 night-> day로 바뀌게

 

 

설정해줄 수 있습니다!  한번 살펴보겠습니다! 

 

 

이전 버튼 만드는 거 , 그리고 이벤트 , id에 대해서 다 업로드했었기 때문에 패스하고 :) 

 

 

이렇게 onclick의 값에 if와 else를 넣어 실행이 가능합니다! 

 

 

실행 구조를 간단히 설명한다면 , 만약 버튼의 값이 night과 같다면 if문 안에 있는 코드들을 실행되고 

 

 

그것이 아닐 경우 else문에 있는 코드를 실행시키라는 구조로 설명할 수 있습니다.

 

 

이때 각 if , else문 내의 마지막 코드를 보시게 되면 배경과 글씨를 바꿈과 동시에

 

 

버튼의 값을 day, night으로 바꿨음을 알 수 있습니다.

 

 

해당 코드를 화면을 통해 나타낸다면 다음과 같이 실행됩니다! 

 

옆 콘솔을 띄워 코드와 같이 볼 수 있도록 표현해 보았습니다. 

 

 

보시는 화면은 초기화면으로 , 처음 값에 night이 들어가 있음을 확인할 수 있는데, 이때 버튼을 클릭하게 되면?

 

 

if문의 코드들이 실행되기 때문에 input내의 value 값이 day로 바뀌며

 

 

배경은 검정 글씨는 흰색으로 바뀜을 확인할 수 있습니다. 

 

 

이처럼 조건문을 활용한다면 조건을 이용한 간단한 프로그래밍이 가능하다는 것을 알 수 있었습니다 :) 

 

 

 

생각해보기

___________________________________________________

 

해당 내용은 어떠셨나요!? 

 

 

배우면서 저는 크게 어렵진 않았지만.. 처음 배웠을 때를 생각하면 어려운 건 사실인 거 같습니다.

 

 

생각해보기를 통해 다시 한번 머리에 입력합시다!!

 

 

조건문 생각해보기

조건문의 활용 생각해보기 

 

 

한번 곰곰이 생각해보시고 답을 내려주세요 (2분 드리겠습니다 :) 

 

/

 

/

 

/

/

 

/

 

/

/

/

 

/

 

 

/

 

조건문 생각해보기 정답

조건문의 활용 생각해보기 정답

 

저는 다음과 같이 답을 작성해보았습니다 :) 

 

 

여러분은 어떤가요! 

 

 

 

 

 

마치며

___________________________________________________

 

제가 부스트 코스 서포터스뿐만이 아닌 cs50 스터디까지 같이 병행하여하고 있는데

 

 

라이브 강의를 하시는데, 코딩할 때 제일 중요한 것이 머슬 메모리라고 하셨었습니다.

 

 

물론 처음 배우고 익히는 것에 있어 완벽하게 할 수는 없지만... 

 

 

그래도 꾸준히 열심히 한다면 내 머슬 메모리로 입력이 돼서 돌아온다는 사실을 믿고 있습니다 ㅠㅠ 

 

 

무슨 말인지.... -__- (말을 너무 못하는 거 같습니다....ㅠㅠ) 

 

 

다음은 리팩터링 (중복의 제거 ) , 반복문 예고 내용으로 업로드하도록 하겠습니다 :) 

 

 

제가 작성하는 모든 내용은 부스트 코스의 자바스크립트 시작에서 배운 내용을 바탕으로 작성됩니다! 

 

 

www.boostcourse.org/cs124

자바스크립트의 시작