주제 : 플래시로 구현해보는 구구단과 알고리즘
☐ 주제설정의 취지 및 목적
플래시를 이용해서 구구단을 만들어 보고자 한다. 구구단을 주제로 잡은 이유는 구구단은 초등학교때부터 해오던 가장 기본적인 계산 방법이며 누구나 쉽게 계산해 낼 수 있으므로 컴퓨터가 맞았는지 쉽게 확인해 가며 프로그램을 작성할 수 있기 때문이다. 모든 프로그램에 있어서 반드시 익히고 넘어가야 하는 것 중에 하나가, 컴퓨터와의 상호작용이다. 그런면에서 본다면 구구단은 컴퓨터와 상호작용할 수 있는 가장 좋은 프로그램중에 하나이다. 구구단 프로그램을 작성해 보면 컴퓨터가 난수를 통해 문제를 내는 방법과, 계산하는 방법, 또 사용자가 컴퓨터에 입력하는 방법을 익힐 수 있다. 입력된 값이 정답인지를 어떻게 비교할 것이며, 정답여부를 어떻게 나타낼 것인지, 또 이런 일련의 과정을 어떤 방법으로 추적할 것인지를 배우게 될 것이다. 마지막으로 이런 모든과정을 화면에 효과적으로 나타낼 수 있는 방법을 터득하게 될 것이다.
☐ 학습목표
○ 플래시로 구구단을 쉽게 만들 수 있는 방법을 이해 할 수 있다.
○ 플래시로 구구단 문제를 출제하도록 할 수 있다.
○ 플래시가 문제를 내면 사람이 맞추는 방법을 만들 수 있다.
☐지도 계획
1. 플래시로 구구단을 쉽게 만들 수 있는 방법을 이해 할 수 있다.
가. 액션스크립트에서의 기본적인 변수 설정 방법 이해
나. output창에 출력하는 방법이해
다. 반복문 학습(for 문) 응용
라. 복잡한 과정을 간단하게 표현하는 방법 이해
2. 플래시로 구구단 문제를 출제하도록 할 수 있다.
가. random 문을 이용한 문제출제 방법 이해
나. if문을 이용한 조건 검사방법 이해
다. 화면상에 직접 나타내거나 입력하는 방법 이해
3. 플래시가 문제를 내면 사람이 맞추는 방법을 만들 수 있다.
가. 생각한 숫자 알아 맞추기 게임 활동
나. 생각한 숫자 알아 맞추기 게임 설계 및 토의
다. 토의된 내용을 바탕으로 프로그램 제작
4. 응용
가. 십구단 만들기
나. 더하기,빼기,곱하기,나누기가 가능한 문제 프로그램 만들기
다. 숫자가 3개이상 등장하는 문제 프로그램 만들기
라. 방정식 문제 프로그램 만들기
마. 성적표가 나오는 구구단 프로그램 만들기
플래시로 구구단을 쉽게 만들 수 있는 방법 익히기
<꼭 기억하자> 앞으로 이곳에 사용되는 모든 액션스크립트는 특별한 경우를 제외하고는 1번프레임에 액션스크립트를 작성할 것입니다.
아래 그림처럼 1번 프레임을 누르고(그림에서 1) 2번에 액션스크립트가 Frame으로 되어 있는 지 확인한(그림에서 2) 다음 액션스크립트를 작성(그림에서 3)하시면 됩니다.
가. 액션스크립트에서의 변수의 정의와 사용
액션스크립트에서 변수는 다음과 같이 만든다.
변수명 = 값;
a=3; //숫자형 변수
a="25"; //문자형 변수
c=3+5; //c 값은 숫자끼리 더해 지므로 5가 된다.
c="영재“+”교육“; // 문자끼리 더하면 두문자가 합쳐지므로 ”영재교육“이 된다.
c="영재“+1; // 문자와 숫자가 더해지면 더한값은 문자가 된다. ”영재1“
<토의> 1번프레임 액션스크립트에 다음과 같은 명령을 각각 적고 차이점을 토의해 보자. 어떤 차이점이 있겠는가? 왜 그렇다고 생각하는가?
| 1번째 문제 | 2번째 문제 | 3번째 문제 | 4번째 문제 | |
| 액션스크립트 | a=5; b=10; c=b+a; |
a=5; b="10"; c=b+a; |
a=5; b="10"; c=b-a; |
a=“5”; b="10"; c=b+a; |
| 예상되는 C의 값 |
나. output창에 출력하는 방법이해
위 예제에서 c 값을 확인해야 하는데 CTRL-ENTER를 눌러 실행시켜 보면 아무것도 확인할 수가 없다. 이럴때 trace 문을 사용하여 임시로 변수에 들어있는 값을 확인 할 수 있다. 위 문제들에서 c 의 값을 확인하기 위해서는 맨 마지막 줄에 trace(c); 라는 명령을 추가한다. 이제 실행시켜 보면 자동으로 output 창이 열리면서 결과값이 화면에 나타날 것이다.
trace 문은 앞으로도 자주사용하게 될 것이며, 중간중간에 결과 값을 임시로 확인할 때 사용하게 될 것이다. 참고로 trace명령문은 실행화일이나 swf 파일을 만들때는 포함되지 않는다. 단지 프로그램을 코딩할 때 사용자의 편의를 위해 서 임시로 변수값을 확인하기 위해서만 사용되어 진다고 생각하면 될 것이다.
<응용>
output 창에 1번째 문제결과가 ‘5+10=15’ 라는 형태로 표현되도록 코딩해 보자.
| a=5; b=10; c=a*b; trace(a+"*"+b+"="+c); |
다. 반복문 학습(for 문) 응용
이번에는 구구단 중에 2단을 표현해 보기로 하자. 2단을 표현하려면 기본적으로 9줄이 필요할 것이다. 2*1=2 2*2=4 2*3=6 ......2*9=18 이런식으로 표현된다. output창에 숫자형 변수를 이용해서 구구단중에 2단이 나타나도록 해보자.
| <액션스크립트> a=2; b=1; c=a*b; trace(a+"*"+b+"="+c); b=2; c=a*b; trace(a+"*"+b+"="+c); b=3; c=a*b; trace(a+"*"+b+"="+c); . . . b=9; c=a*b; trace(a+"*"+b+"="+c); |
위와 같이 코딩을 하면 될 것이다. 그런데 만약 2*1000까지 나타나도록 하라면 어떻게 해야 할까? 위와같은 코딩을 1000번 반복해서 적어 주어야 하지 않겠는가. 그렇다면 많은 시간이 걸릴 것이다. 아마 포기하고 싶어지지 않을까? 그래서 우리는 플래시 액션스크립트에서 사용하는 반복문을 이용할 것이다. 모든 프로그램에서와 마찬가지로, 프로그래밍에 있어서 가장 기본적인 명령어 중에 하나가 반복문이다. 그럼 간단하게 반복문에 대해서 알아보자.
만약 1부터 100까지 화면에 표시하고 싶다면 다음과 같이 하면 된다. 아래와 같이 코딩하고 실행시켜 보아라
| for(i=1;i<=100;i++){ trace(i); } |
1에서 100까지 순식간에 나타나는 것을 볼수 있을 것이다.
이런 명령문을 반복문이라고 한다. 반복문의 성질은 아래와 같다.
for(카운트의 초기값; 반복문이 실행되는 조건식; 카운트 방법){
//반복할 스크립트
}
다시살펴보면
for(i=1;i<=100;i++){
trace(i);
}
는 i 라는 변수에 1을 넣고 i 가 100보다 작거나 같아질때까지 i를 1씩 증가시키면서 계속 반복하라는 의미가 된다. 이해가 잘 안되면 외워서 사용하도록 하자. 자꾸 사용하다 보면 어렵지 않게 사용하게 될 것이다.
라. 복잡한 과정을 간단하게 표현하는 방법 이해
<토의> 그렇다면 다시 처음으로 돌아가서 구구단중에 2단을 숫자형 변수와 반복문을 이용해서 간단하게 표현해 보자.
| a=2; for(b=1;b<=9;b++){ c=a*b; trace(a+"*"+b+"="+c); } |
반복문을 적당하게 사용하면 복잡한 코딩을 아주 간단하게 표현 할 수도 있다.
위 과정이 성공했다면 구구단을 1단부터 9단까지 나타나도록 만들어 보자.
| for(a=1;a<=9;a++){ for(b=1;b<=9;b++){ c=a*b; trace(a+"*"+b+"="+c); } } |
2. 플래시로 구구단 문제를 출제하도록 할 수 있다.
가. random 문을 이용한 문제출제 방법 이해
위 예제에서는 a와 b 변수에 프로그래머가 미리 값을 적어 놓고 계산을 시켰다.
그렇다면 컴퓨터가 스스로 문제를 내게 할 수는 없을까? 사용자가 모르게 컴퓨터가 아무 숫자나 임의로 선택해서 나타내게 할 수 있는 방법이 있다. 그것은 바로 Math.random() 문이다. Math.random()문은 컴퓨터가 임의의 수(정확하게 말하자면 0보다 크고, 1보다 작은 실수)를 선택하게 하는 명령문이다.
만약 컴퓨터가 1부터 10중에 임의의 정수를 선택하게 하려면 아래와 같이 적어주면 된다.
| Math.floor(Math.random()*10+1); |
조금 복잡하게 느껴지는가? 일단 위 코딩을 외워 두도록 하자. 위 코딩에 대해서 설명하자면 Math.floor 는 소숫점 이하를 버리고 정수값만을 나타내겠다는 명령어이다. 그리고 Math.random()*10+1 은 1보다 크고 11보다 작은 실수값을 가지게 된다. 따라서 위 명령문을 함께 사용해 주면 1보다 크거나 같고 10보다 작거나 같은 정수값을 가지게 되는 것이다. 만약 1부터 100 사이의 임의의 정수값을 취하고 싶다면 Math.floor(Math.random()*100+1) 이라고 기술하면 된다.
컴퓨터가 임의로 어떤수들을 취하는지 한번 확인해 보자.
| for (i=1; i<=30; i++) { a = Math.floor(Math.random()*10+1); trace(a); } |
위처럼 코딩하면 컴퓨터가 생각한 30개의 숫자가 화면상에 표시되는 것을 확인 할 수 있다. 게임이나 컴퓨터와의 두뇌 싸움을 위해서는 Math.random()문을 잘 알아두도록 하자.
나. if문을 이용한 조건 검사방법 이해(맞는경우와 틀리는경우 처리방법)
자 그럼 이제 컴퓨터가 임의의 숫자를 선택해 내는 방법을 알아 냈으니, 사용자가 정답을 입력하여 컴퓨터가 계산한 값과 사용자가 입력한 값이 같은지를 확인하여 맞으면 “ok"를 틀리면 ”no"를 출력하도록 하여 보자.
컴퓨터가 조건에 맞는지 틀리는지를 검사하기 위해서는 조건문을 사용해야 한다. 조건문이란 어떤 조건을 만족했을때 처리하는 방법과 틀렸을때 처리하는 방법을 각각 제시할 수 있으며, 순서도에서는 분기문으로 사용하기도 한다.
예를 들면 철수가 목욕탕을 간다고 가정했을때, 철수가 남자라면 남자 목욕탕으로 여자라면 여자 목욕탕으로 들어가야 할 것이다. 그렇다면 우리는 철수가 남자인지 여자인지를 먼저 판단해서 결정을 해야 할 것이다. 플래시에서는 어떻게 이런 과정을 결정하는지 알아보자.
| //철수의 성별을 s 라는 변수에 ‘남자’ 또는 ‘여자’로 적어넣고 실행시켜 보자. s="남자"; // 철수의 성별을 사용자가 임의로 적어넣어 보자(남자, 또는 여자) if(s=="남자"){ trace("남자목욕탕으로“); //조건에 만족하면 이곳에 있는 명령어 실행 }else{ trace("여자목욕탕으로“); //조건에 만족하지 않으면 이곳에 있는 명령실행 } |
if 문은 조건문이라고 생각하면 된다. 조건문이란 어떤 임의의 조건을 제시하고 맞는지 틀리는지를 확인하는 과정이라고 생각하면 된다.
if(조건){
조건이 맞으면 이곳에 있는 명령 실행
}else{
조건이 틀리면 이곳에 있는 명령 실행
}
조건을 검사할때는 반드시 =를 2개를 써야 한다. 즉 a=2 라는 것은 a라는 변수에 2를 집어 넣겠다는 뜻이고, a==2 라는 것은 a라는 변수의 값과 2 가 같은지를 검사하겠다는 뜻이다. 조건문은 앞으로도 자주 쓰이게 되니 꼭 알아두도록 하자.
<토의>만약 위 예제에서 s="여자"; 라고 입력한다면 어떤 결과가 나올까?
만약 s="사람"; 이라고 입력한다면 어떤 결과가 나올까? 토의해 보자
<생각> if(s=="남자") 대신 if(s="여자")라고 적는다면 컴퓨터내에서는 어떤일들이 생길까?
다. 화면상에 직접 나타내거나 입력하는 방법 이해
구구단을 만들 수 있는 기본적인 내용은 위에서 다 익혔다. 그럼 지금부터는 trace 문을 이용하는 것이 아니라 화면상에 직접 나타내고 입력하는 방법에 대해서 학습해 보도록 하자. 화면상에 값을 나타내거나 입력하려면 어떻게 해야 할까?
컴퓨터가 생각한 값을 프로그램상에서 확인하기 위해서는 Dynamic Text를 사용해야 한다. Text Tool을 이용하여 화면상에 텍스트 박스를 만들고, Properties 창에서 Var 창에다 변수값을 넣어 주면 프로그램이 실행될때 마다 항상 Dynamic Text창에는 변수값이 나타나게 된다.
변수값이 변하게 되는 경우에도 변경된 값이 나타나게 되므로 trace 문을 사용하지 않고도 화면상에 컴퓨터가 생각한 값을 계속해서 확인할 수 있다.
예를들어 위에서 사용했던 예제를 사용하는 경우
| //철수의 성별을 s 라는 변수에 ‘남자’ 또는 ‘여자’로 적어넣고 실행시켜 보자. s="남자"; // 철수의 성별을 사용자가 임의로 적어넣어 보자(남자, 또는 여자) if(s=="남자"){ result="남자목욕탕으로"; //조건에 만족하면 이곳에 있는 명령어 실행 }else{ result="여자목욕탕으로"; //조건에 만족하지 않으면 이곳에 있는 명령실행 } |
Dynamic Text창에 Var 값을 s 라고 주면 화면상에 ‘남자’ 가 출력이 될 것이고, Var값을 result 라고 주면 ‘남자목욕탕으로’ 가 출력될 것이다. 이처럼 우리가 원하는 값을 실제 프로그램 화면상에서는 Dynamic Text 값을 이용하여 확인 할 수 있다. 참고로 Dynamic Text는 trace와 함께 프로그램의 흐름을 추적하거나 디버깅 할때 많이 사용된다는 것도 알아 두자.
그렇다면 화면상에 우리가 원하는 변수값을 입력하려면 어떻게 해야 할까? 방법은 아주 간단하다. Dynamic Text 와 마찬가지로 Var 값에 우리가 원하는 변수값만을 넣어 주면 된다. 단지 Dynamic Text를 Input Text로 바꾸어 주기만 하면 된다. Input Text 는 변수값을 화면상에 출력해 줄 뿐 아니라 우리가 입력한 값을 변수값으로 만들어 주기도 한다.
<실습> Input Text 창을 만들고 값이 입력이 되는지 확인해 보자.
