WEBVTT

00:00:00.000 --> 00:00:04.384
여기 여러분들이 생소할지도 모르는 random 이라는 함수가 있습니다

00:00:04.384 --> 00:00:07.956
이 함수는 두 파라미터를 받습니다
upperbound (상한), lowerbound (하한) 입니다

00:00:07.956 --> 00:00:10.541
그리고 둘 사이의 임의의 수를 반환합니다

00:00:10.541 --> 00:00:14.624
이 number 라는 이름의 변수는 0과 1 사이의 값이겠죠?

00:00:14.624 --> 00:00:18.432
이제, 이 변수를 캔버스 위에 text 함수를 사용해서 표시 해볼거에요

00:00:18.432 --> 00:00:21.973
text 함수에서 마지막 두 파라미터는 
글자의 x, y 좌표입니다

00:00:21.973 --> 00:00:25.754
textSize 함수와 fill 함수를 이용해서 
글자의 크기와 색상을 설정했습니다

00:00:25.754 --> 00:00:30.425
restart 를 누를 때마다
임의의 숫자들이 생성되네요

00:00:30.425 --> 00:00:33.742
유효숫자는 소수점아래 세자리네요

00:00:33.742 --> 00:00:38.438
0 또는 1만 생성하려면 어떻게 해야 할까요?

00:00:38.438 --> 00:00:42.314
round (반올림) 이라는 함수를 써야 합니다


00:00:42.314 --> 00:00:45.065
입력값으로 어떠한 소수라도 상관 없습니다

00:00:45.065 --> 00:00:48.206
이 함수는 그 값을 반올림하여 가장 가까운 정수를 반환합니다

00:00:48.206 --> 00:00:50.711
새로운 변수를 선언해봅시다

00:00:50.711 --> 00:00:52.366
이름은 integer (정수)로 하죠

00:00:52.366 --> 00:00:54.613
이 변수에 반올림 된 값을 대입했습니다


00:00:54.613 --> 00:00:57.958
손에 익은 text 함수를 이용해 화면에 표시해봅시다

00:00:57.958 --> 00:01:05.841
text( integer, 160, 350 );

00:01:05.841 --> 00:01:12.364
0.2314 가 반올림된 값은 0 이라고 표시하고 있네요

00:01:12.364 --> 00:01:18.117
4.6 을 대입하면 반올림되어 5를 출력합니다. 깔끔합니다!

00:01:18.117 --> 00:01:20.725
0 또는 1을 임의로 생성하려면

00:01:20.725 --> 00:01:27.357
임의의 소수가 0 과 1 사이에 오도록 하고

00:01:27.357 --> 00:01:31.549
반올림 함수에 보내면 되겠네요
즉, number 변수를 잡아다가 여기에 집어 넣는거죠

00:01:31.549 --> 00:01:35.991
number 변수를 여기에 입력합니다

00:01:35.991 --> 00:01:41.543
0.5 미만은 반올림 되어 0이 되고

00:01:41.543 --> 00:01:47.347
0.5 이상은 반올림 되어 1이 됩니다

00:01:47.347 --> 00:01:51.492
이것으로 동전 던지기 게임을 만들 수 있겠네요

00:01:51.492 --> 00:01:54.997
0이 나오면 친구로부터 1달러를 받는거에요

00:01:54.997 --> 00:01:57.837
1이 나오면 친구에게 10달러를 주는겁니다

00:01:57.837 --> 00:01:59.547
좋은 게임이네요

00:01:59.547 --> 00:02:05.803
이 동전던지기 게임을 실제처럼 보이는 동전을 가지고 그려 봅시다

00:02:05.803 --> 00:02:10.585
캔버스 가운데에 타원을 하나 그릴거에요

00:02:10.585 --> 00:02:12.316
이게 우리의 동전입니다

00:02:12.316 --> 00:02:17.084
글씨가 가려지니, 올려볼게요

00:02:17.084 --> 00:02:23.352
0 이면 보라색면이 나온 것으로 합시다

00:02:23.352 --> 00:02:28.800
그러면, 이걸 보라색으로 색칠하면 되겠죠

00:02:28.800 --> 00:02:32.901
1 이면 노란색면이 나온 것으로 합니다

00:02:32.901 --> 00:02:36.122
한쪽은 보라색, 다른 쪽은 노란색이 있는 동전이네요

00:02:36.122 --> 00:02:39.093
다행이도, if 구문은 매우 쉽습니다

00:02:39.093 --> 00:02:44.382
integer 변수가 0과 같다면

00:02:44.382 --> 00:02:48.348
등호를 세번 === 쓴 것은 동일함을 확인하는데 사용됩니다

00:02:48.348 --> 00:02:53.522
이 때, 타원을 보라색으로 채우면 됩니다

00:02:53.522 --> 00:02:57.542
integer 변수가 1과 같다면

00:02:57.542 --> 00:03:06.312
fill 함수를 하나 더 써서 노란색으로 만들어보죠

00:03:06.312 --> 00:03:09.448
이제 작동하네요

00:03:09.448 --> 00:03:11.276
그런데 잠깐만요

00:03:11.276 --> 00:03:16.064
integer 변수가 0 또는 1만 나오죠
그렇게 설계했어요

00:03:16.064 --> 00:03:19.066
이 구문이 참 이거나

00:03:19.066 --> 00:03:21.998
저 구문이 참 입니다

00:03:21.998 --> 00:03:24.141
가능한 경우를 모두 다뤘습니다

00:03:24.141 --> 00:03:27.634
선택하는 과정을 조금 다르게 할 수 있을 것 같네요

00:03:27.634 --> 00:03:32.279
integer 변수가 0이면 보라색을 칠하고


00:03:32.279 --> 00:03:36.114
그렇지 않은 경우에는 노란색을 칠하는 거죠

00:03:36.114 --> 00:03:40.789
integer 변수가 1인지 확인할 필요가 없어요

00:03:40.789 --> 00:03:43.500
그저, integer 변수가 0이면 이것을 하고

00:03:43.500 --> 00:03:45.321
그렇지 않으면 이것을 하면 됩니다

00:03:45.321 --> 00:03:49.113
프로그래밍에서는
'그렇지 않으면' 을 else 라고 표현합니다

00:03:49.113 --> 00:03:53.521
두번째 if 조건을 else로 바꿔봅시다

00:03:53.521 --> 00:03:59.872
괄호 안의 조건이 참이면, 이 대괄호 안의 코드를 수행하고

00:03:59.872 --> 00:04:03.261
그렇지 않으면, 이 대괄호 안의 코드를 수행합니다

00:04:03.261 --> 00:04:06.731
닫는 대괄호와 else를 같은 줄에 쓰는 경우도 있어요

00:04:06.731 --> 00:04:11.025
else 앞뒤의 두 코드 영역은 
뗄레야 뗄 수 없는 관계입니다

00:04:11.025 --> 00:04:15.431
if 없이 
else 를 쓸 수 없죠

00:04:15.431 --> 00:04:20.304
그리고, else 앞 뒤에 다른 코드를 입력하면 안됩니다

00:04:20.304 --> 00:04:23.421
var y = 0 같은 걸 써 넣으면

00:04:23.421 --> 00:04:26.538
에러납니다. 하지 마세요

00:04:26.538 --> 00:04:28.827
지금까지 if else 에 대해 알아보았습니다

00:04:28.827 --> 00:04:32.987
두가지 중 하나를 선택해야 할 때 사용하면 좋습니다

00:04:32.988 --> 00:04:34.454
그런데, 여러개면 어떻게 하죠?

00:04:34.454 --> 00:04:36.842
0과 2 사이의 정수를 만들어

00:04:36.842 --> 00:04:39.644
세가지 경우 0 1 2 가 있다면

00:04:39.644 --> 00:04:41.892
어떻게 해야 할까요

00:04:41.892 --> 00:04:44.521
다음에 이어서 설명하겠습니다