[javascript 기초 강좌] 9. 사용자 정의함수를 이용한 구구단 만들기

이번 강좌는 사용자 정의함수를 이용하여 만든 구구단 예제를 한줄 한줄 찢어보는 시간입니다.

 

사용자 정의함수에 대한 설명은 여기([javascript 기초 강좌] 8. 사용자 정의 함수)에서 확인하세요ㅎㅎ

 

자바스크립트로 만든 구구단 소스가 필요한 학생이 이글을 보고 있다면 그냥 소스만 긁어 가지 말고 구구단이 어떻게 출력되는지 꼭 배우고 갔으면 좋겠습니다.

 

아래 그림의 소스 라인별로 설명 시작합니다 !!

 

7번 라인을 보시면 사용자 정의함수를 정의했어요. 함수명을 gugudan, 그리고 파라미터 변수 dan 이 있네요.

8번 라인을 보시면 화면에 입력받는 dan 변수를 출력하는 소스네요. 구구단의 단 을 입력받은 것이 아닐까 하는 예상을 하면서 지나가봅니다.

10번 라인을 보시면 앞에서 배운 제어문 중 for문이네요. 혹시나 for문이 뭔지 모르는 사람은 필이 여기([javascript 기초 강좌] 6. 제어문) 를 가셔서 익히고 돌아오세요 !! 꼭 !!!

계속해서 10번 라인을 보시면 i 변수의 초기값은 1이고 9보다 작거나 같을때까지 반복하고 i 는 1씩 증가하네요. 보통의 구구단은 "2*1=2 ~ 2*9=18" 처럼 "단*9" 로 끝나기 때문에 1~9까지 9번 반복시키는 용도에요.

11번 라인을 보시면 dan 이라는 변수와 i라는 초기변수를 곱하고 그 값을 r이라는 변수에 담네요. 구구단을 계산해서 답을 저장시킨 라인입니다. dan변수는 구구단의 단을 입력받은 변수라는 것을 알 수 있어요.

12번 라인을 보시면 구구단(2*2=4 과 같은 모양)을 화면에 출력하는 라인이에요. 입력받은 dan 변수와 i 변수로 구구단식을 만들고 미리 계산한 r변수를 조합해 구구단을 출력하는 곳이에요

13번 라인은 for 문을 닫는 괄호에요

14번 라인은 사용자 정의함수 gugudan을 닫는 괄호에요

 

여기까지가 사용자정의함수로 만든 구구단 함수에요

 

16번 라인을 보시면 do ~ while문이 있는게 보이네요. 역시 이거 모르시는 분은 꼭 여기([javascript 기초 강좌] 6. 제어문) 를 다녀오세요.

17번 라인은 prompt가 있네요. 이 것은 여기([javascript 기초 강좌] 3. 메시지창과 날짜 구하기) 에 가보시면 설명되어있으니 여기선 생략할게요.

prompt로 어떤 값을 입력받고 num변수에 넣어주네요. 어떤 값을 입력받는지는 모르겠어요. 그냥 지나가세요.

18번 라인을 보시면 do ~ while의 마지막 부분인데 조건식이 isNaN(num) 이라고 되어있는데 17번 라인에서 입력받는 값이 숫자가 아니라면 isNaN 이라는 내장함수에서 true를 반환하여 숫자가 입력될때까지 반복되는 것을 알 수 있어요. isNaN에 대해서는 여기([javascript 기초 강좌] 7. 내장함수)에서 확인하세요. 여기서 "아하 prompt창에서 무조건 숫자를 입력받는 것이구나" 라는 것 정도만 알고 지나가세요.

 

마지막 20번 라인을 보시면 입력받는 값 num변수로 사용자 정의 함수 gugudan 함수를 호출하는 부분이에요. 아까 gugudan 함수의 파라미터 변수 dan은 구구단의 단이라고 했죠 ? 그럼 여기서 "17번 라인의 prompt창에서 입력받는 숫자가 단을 입력받은 것이구나" 라고 이해하셔야 해요 !!! 

 

아래 예제를 보고 다시한번 확인하세요 !!!!

 

구구단 만들기를 이용해서 javascript 기초 강좌 3, 6, 7, 8 총 4개 강좌를 모두 사용해봤어요.

꼭 이해하시고 지나가세요 !!