조건문

이번엔 이 비교연산자를 활용할 수 있는 '조건문'을 배워보도록 하겠습니다.

조건문은 주어진 조건에 따라서 애플리케이션을 다르게 동작하도록 하는 것 입니다.

if조건문

if ~ else if ~ else 이런식으로 구성이 되어있습니다.

if(조건1) → 조건1일 경우 실행

else if(조건2) → 조건2일 경우 실행

else → 조건1, 조건2 둘다 해당되지 않은 나머지 경우에 실행

예를 들어서 우리가 성적을 계산할 때 이용할 수 있습니다.

앞서 배운 '비교연산자'를 이용하여 내 성적과 기준점수(90점)을 비교합니다. 내 성적 78점은 90점보다 작기 때문에 조건 "내성적 >= 90"을 만족하지 못하고 조건은 false를 반환합니다. 이처럼 조건이 false인 경우는 해당 조건에 만족할 경우에만 실행되는 "점수 A주기"를 실행하지 않습니다.

90점 이상은 A, 71~89점은 B, 70점 이하로는 모두 C 라고 합시다. 그럴 경우 아래와 같은 코드를 작성할 수 있습니다. scroe엔 여러분이 바라는 점수를 적어보세요. 여러분의 점수는 몇등급 인가요?

var score = 78; //내 점수
var grade;//내 성적

if(score >= 90) grade = 'A'; //90점 이상은 A

else if(score >= 71 && score <= 89) grade = 'B'; // 71~89점은 B

else grade = 'C'; //70점 이하는 C

alert("점수는 " + grade);

여기서 추가적인 부분을 설명하자면 &&은 and를 의미 [footname] 이와 같은걸 '논리연산자'라고 합니다. 조금 더 자세히 알고 싶으시다면 https://m.blog.naver.com/PostView.nhn?blogId=smilebanner88&logNo=220729516010&proxyReferer=https%3A%2F%2Fwww.google.com%2F 글을 참고해주세요. [/footname] 합니다. score >= 71 (점수가 71점이상) 이면서 score <= 89 (점수가 89점 이하) 일 경우에는 true를 반환합니다. 그러니까 즉 2가지 조건에 '모두' 만족할 경우에만 참인 것입니다. 

이런식으로 조건문은

if(조건) → {조건이 '참'일 경우 실행할 내용 } 

이런식으로 쓰시면 됩니다. 그리고 이 조건문 안에 들어가는 '조건'은 반환값이 ture 또는 false여야하기 때문에 위에서 우리가 공부한 '비교연산자'가 쓰이는 것입니다.

만약 처음부터 조건 자체가 'false'(거짓)이라면 아무것도 실행되지 않습니다.

우리가 위에서 했던 예시를 바탕으로 해보자면

if(23 < 4){
alert('실행될 내용');
}

이렇게 입력해보시면 아마 아무것도 실행되지 않을 겁니다. 이유는 23<4는 false이기 때문이죠. 이처럼 조건문은 조건이 거짓일 경우에는 작동하지 않습니다.

3과 비교연산자와 조건문 퀴즈

변수(Variable)란?

변수는 영어로 variable이라고 하며, 쉽게 얘기해서 "데이터를 저장하는 공간"이라고 생각하시면 됩니다.

변수는 '변하는 수'라는 뜻입니다. 왜냐면 변수 안에 든 데이터들은 수시로 바뀔 수 있기 때문입니다. 예를 들어서 제가 이 블로그 포스팅의 제목을 수정할 수도 있고, 글 내용을 수정할 수도 있는 것처럼 말이죠. 변수를 선언할 땐
var 변수명 = 변수 안에 넣을 데이터 값;
이런식으로 쓰시면 됩니다. var은 변수를 선언하겠다는 것을 의미하며 생략해도 되지만 의미가 있기 때문에 일단 꼭 써주도록 합시다.

자료형(Data Type)이란?

데이터의 종류를 나타내는 것 입니다. 

 자바스크립트에는 이렇게 5가지의 데이터 타입이 있습니다.

• string 문자열
• number 숫자
• boolean 참, 거짓(true, false)값 ^[각주:1]

일단은 이렇게만 알아두시고 object(객체)와 function(함수)은 이후에 배워봅시다!

2. 실습

alert("hi");​

위 코드를 codesandbox에 적으시면 알람 창이 뜰 것입니다. alert는 그냥 그런 용도로 알아두시면 됩니다.

※hi와 같은 문자를 입력할 때는 꼭 "" 따옴표를 붙여주시고, 문장에 마침표를 찍듯 코드의 마지막에는 ; 를 붙여주시기 바랍니다.

var name = "김커피";

이는 name이라는 변수를 선언하고, 그 변수 안에 "김커피"라는 문자 데이터를 넣어줬습니다.

현재 name이라는 변수 안에는 "김커피"라는 데이터가 들어있는 것 입니다.

var name = "김커피";
alert(name);

이렇게 적어주면 이번엔 알람창 안에 김커피 라는 값이 뜨죠?

이유는 name이라는 변수 안에 "김커피"라는 데이터가 들어있기 때문입니다.

var name = "김커피";
name = "김커피2";
alert(name);

이런식으로 name변수 에 있는 데이터를 수정할 수 있습니다.

알람창에는 "김커피"가 아니라 "김커피2"가 뜰 것입니다. 왜냐면 name이라는 변수 안에 데이터값이 김커피->김커피2로 변화했기 때문입니다. 이처럼 변수 안에 있는 값은 바꿀 수 있습니다.

alert("김커피");

만약 이런식으로 썼다면 알람창 안의 메세지를 계속해서 지우고 다시  쓰는 작업을 반복해야할 것입니다.

그러나 name이라는 변수를 선언하고 그 안에 데이터를 넣어줬다면, 그냥 name = " "; 이런식으로 name안에 값을 바꿔서 넣어주면 됩니다.  

*이를 통해 실제 위의 코드 결과값을 확인해볼 수 있습니다. 

3. 응용(사칙연산)

이번엔 age라는 변수에 18이라는 숫자를 넣었습니다. 문자와 다르게 숫자는 ""따옴표가 필요하지 않습니다.

덧셈, 뺄셈, 곱셈, 나눗셈 이와 같은 사칙연산은 + - * / 기호를 통해 할 수 있고 위의 예제와 같이 작성하실 수 있습니다.

참고로 // 은 주석을 표시하는 것으로 코드에는 영향을 미치지 않고 '이해를 돕도록 코드를 설명' 할 때 쓰이는 것입니다. 

실제로 위 코드를 따라서 차분히 쳐보시고 알람창에 정말로 30이 뜨는지 꼭 확인해보세요!

4. 퀴즈

*퀴즈는 모바일버전은 지원하지 않습니다.

2과.변수와 자료형 퀴즈

1. 자바스크립트로 선정한 이유

• 프로그램을 설치하는 사전작업이 필요 없어서

• 직관적으로 실행결과를 눈으로 볼 수 있어서
• 비교적 다른 프로그래밍언어에 비해 배우기 쉬워서

일단 기초적인 수준의 *프론트엔드 개발을 공부하는 데 있어서 자바스크립트는 별도의 프로그램을 설치하여 복잡하게 개발환경을 구축할 필요 없습니다. codesandbox나 codepen과 같이 브라우저에서 작동하는 에디터들을 사용하여 간편하게 자바스크립트 프로그래밍을 할 수 있다는 장점이 있습니다.

*프론트엔드 개발: 쉽게 말하면 사용자들의 눈에 보이는 웹화면을 개발하는 것입니다.

*백엔드 개발: 반대되는 개념으로 백엔드 개발이 있고, 사용자들의 눈에 보이지 않는 뒷부분- 서버개발 등을 의미합니다.

또한 실행결과를 웹브라우저를 통해 볼 수 있어서 바로 바로 실행결과를 직관적으로 확인할 수 있다는 장점이 있습니다. 그리고 웹 브라우저에서 동작하다보니 운영체제의 제한을 받지 않습니다. 

마지막으로 다른 프로그래밍 언어들에 비해 비교적 진입장벽이 낮고 배우기 쉽다는 장점이 있습니다. 보통 프로그래밍 언어를 공부할 때 C언어를 시작으로 하는 경우가 많은데 C언어는 비교적 어려운 언어라서 초반부터 너무 어려움을 느끼고 쉽게 공부를 포기할 수 있다는 단점이 있다고 생각합니다.

덧붙이자면 자바스크립트는 수요도 많은 편이라 전망 있는 프로그래밍 언어로 볼 수 있습니다.

2. 자바스크립트란?

자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. (출처: 위키백과)

위는 위키백과에 나와있는 자바스크립트에 대한 설명입니다. 여기서부터 낯선 단어들이 등장하죠.ㅋㅋ 객체 기반? 스크립트 프로그래밍 언어? 서버사이드 네트워크 프로그래밍? 벌써부터 뭔가가 어려워보입니다. 그냥 쉽고 간단하게 설명하도록 하겠습니다.

자바스크립트는 우리가 사용하는 웹브라우저 (크롬, 인터넷 익스플로러러 등등)에서 동작하는 프로그래밍언어입니다.

우리가 방문하는 모든 웹페이지들은 모두 html, css, 그리고 JavaScript 이렇게 3가지로 구성되어있습니다.

먼저 html은 웹의 '내용들'입니다. 예를 들면 제가 이렇게 작성하고 있는 글의 내용, 제목 등이 되겠습니다. 

그리고 CSS는 이런 html이 보여주는 콘텐츠를 보기 좋게 예쁘게 꾸며주는 역할을 담당합니다. 예를 들면 글의 폰트나 색상과 같은 '디자인적인 요소를 담당'하죠.

마지막으로 JavaScript는 '동작'을 담당합니다. 예를 들면 html로 버튼을 하나 만들어 넣고, css로 그 버튼을 예쁘게 디자인합니다. 그리고 그 버튼을 클릭해서 발생하는 동작은 javascript가 담당하는 것입니다.

3. 자바스크립트로 무엇을 할 수 있는가?

그렇다면 자바스크립트를 배워서 우리는 무엇을 할 수 있을까요?

https://www.grandcircus.co/blog/10-things-you-can-build-with-javascript/

위 글을 참고하여 아래 자바스크립트로 할 수 있는 것들을 적어보도록 하겠습니다.

• 웹사이트 개발
• 웹서버 개발
• 게임 개발
• 모바일 앱 개발

자바스크립트는 독보적인 웹프로그래밍 언어로 웹페이지, 웹서버를 개발할 수 있습니다. 웹을 개발하고 싶으시다면 무조건 자바스크립트를 공부해야 합니다. 

뿐만 아니라 간단한 게임도 만들 수 있습니다. 그리고 요새 핫한 모바일 개발 또한 안드로이드 프로그래밍을 배우지 않고, 자바스크립트로 개발할 수 있습니다.

이밖에도 VR/AR이나 사물인터넷까지 충분히 다양한 분야에 자바스크립트를 활용할 수 있습니다.