Written by java-style
on 2021-10-18

자바스크립트로 구구단 출력 프로그램 만들기

728x90

자바스크립트와 html 만을 사용하여 첫 단, 마지막 단, 마지막 곱할 수를 입력받은 후 결과 테이블을 출력하는 프로그램을 만들어볼 것이다.

메인 화면

메인 화면의 경우 첫 단, 마지막 단, 마지막 곱할 수를 입력받게 된다.

결과 화면

결과 화면의 경우 각 단의 이름을 테이블 제목으로 표시하고 그 밑으로 각 단의 결괏값을 x*y=z 형식으로 넣어줄 것이다.

1단계 : html 형식으로 표현

우선 메인 화면의 모양을 html 태그들을 이용하여 꾸며준다.

첫 단 : 마지막 단 : 마지막 곱할 수 :

사용한 태그 태그 태그를 이용하여 태그의 요소들을 묶어주기 위하여 태그를 이용하였다. 태그 태그 요소들을 하나의 상자 안에 묶어두는 것이 깔끔할 것으로 생각되어 이용하였다. 태그 태그의 for 속성에 태그의 id 속성과 같은 값을 주면 태그 사이의 문자를 클릭할 경우 태그를 활용할 수 있다. 예를 들어 첫 단 이라는 문자를 클릭하면 id="start" 의 태그를 이용할 수 있다. 태그 값을 입력받고 이를 활용하기 위한 태그이다.

첫 단 ~ 마지막 곱할 수 첫 단 이라는 문자에도 활용될 수 있도록 를 추가하였다. 만약 태그를 사용하지 않는다면 첫 단 : 형식으로 작성될 수 있을 것이다. 숫자만 입력될 수 있게 하기 위해 onKeyup 속성을 활용하였다. 속성에 적힌 방식은 정규표현식으로 0~9 가 아닌 다른 문자가 입력될 경우 빈칸으로 대체되는 방식이다.

계산하기 태그의 속성 중 type 을 "button" 으로 주었다. button 의 경우 클릭되는 방식만 있을 뿐 기능이 없는 상태이기 때문에 클릭할 경우 javascript의 함수를 호출하는 방식으로 구현하기 위해 onclick 속성에 javascript 함수 "gugudan()" 을 표현해두었다. "gugudan()" 함수는 javascript 단에서 구현할 것이다. 태그들에 값을 입력하고 "계산하기" 를 누르면 자바스크립트 형식으로 구현한 "gugudan()" 이 호출된다.

2단계 : javascript로 gugudan() 함수 구현

위의 html 태그에서 onclick 속성을 통해 gugudan() 함수에 연결되도록 하였다.

id 값이 start 인 값을 숫자 형식으로 변수 start 에, end 값을 변수 end 에, last 값을 변수 last_multiply_number 에 담았다. 결과를 저장할 변수 result 를 선언해두었다.

값이 인 값을 숫자 형식으로 변수 에, 값을 변수 에, 값을 변수 에 담았다. 결과를 저장할 변수 를 선언해두었다. 마지막 단이 첫 번째 단보다 작을 경우 결과가 나오지 않을 것을 대비해 start 가 end 보다 클 경우 "첫 번째 단이 마지막 단보다 더 작아야 합니다." 를 출력하도록 하였다.

가 보다 클 경우 를 출력하도록 하였다. 테이블을 태그를 이용하여 두 부분으로 나누어주고 윗부분에는 제목, 밑 부분에는 각 단의 결과가 출력되도록 하였다. 우선 start ~ end 까지의 수와 단 이라는 문자가 합해져 테이블의 첫 줄을 채우도록 하였다. 그 후 각 줄에 start * 1 = start ~ end * last_multiply_number = x 가 출력될 수 있도록 반복문을 설계하였고 이를 각각 태그를 이용하여 묶어주었다.

전체 코드

구구단 만들기_1 첫 단 : 마지막 단 : 마지막 곱할 수 : function gugudan() { var start = Number(document.getElementById("start").value); var end = Number(document.getElementById("end").value); var last_multiply_number = Number(document.getElementById("last").value); var result; if (start > end) { document.write("첫 번째 단이 마지막 단보다 더 작아야 합니다."); } else { document.write('

'); document.write(""); for(i = start; i <= end; i++) { document.write(""); } document.write(""); for(j = 1; j <= last_multiply_number; j++) { document.write(""); for(i = start; i <= end; i++) { result = i * j; document.write(""); } document.write(""); } document.write("

" + i + "단
" + i + "*" + j + "=" + result + "

"); } }

728x90

from http://ele-code.tistory.com/33 by ccl(A) rewrite - 2021-10-18 17:27:15

Top