Java Script를 이용한 계산기 만들기(table 태그 활용)

Java Script를 이용한 계산기 만들기(table 태그 활용)

728x90

Java Script를 이용해 계산기를 만들어보자!

1. 계산기 뼈대 만들기

사용자가 입력한 값 계산 결과 초기화 / 7 8 9 * 4 5 6 - 1 2 3 + 0 . =

위와 같은 형태로 계산기를 만든다고 생각해보자.

형태로 만들것이기 때문에 행x열을 그려보면 7행() * 4열()의 뼈대를 가집니다.

그리고 위의 Form에서 '사용자가 입력한 값', '계산결과', '초기화', 0은 열이 합쳐져 있는 것을 볼 수 있습니다.

에서 열을 합칠때 colspan(가로방향으로 합치기)을 이용하고, 반대로 행을 합칠때는 rowspan(세로방향 합치기)을 이용하면 됩니다.

위 예제에서는 가로방향으로 합쳐졌기 때문에 colspan을 활용하도록합니다.

계산기디자인.txt 0.00MB

계산기 디자인에서는 HTML과 CSS를 이용해 계산기의 뼈대만 디자인한 상태입니다.

때문에 클릭을해도 아무런 동작을 하지 않습니다.

2. 태그에 각각 Onclick 속성을 추가하여 JavaScript 함수를 호출한다.

* 이 작업은 버튼을 클릭했을 때 각각의 해당하는 값을 가져오게 하는 목적을 가짐.

Onclick으로입력값받기.txt 0.00MB

add()라는 함수를 생성하여 버튼을 클릭했을때 각각의 값을 입력하도록 onclick을 설정하였다.

간략하게 살펴보자면,

1

function add(char) { //char은 매개변수명, 위 예시에서는 1을 가지고온다.

var display = document.getElementById('display'); //display라는 변수에 ID가 display인 요소를 넣는다.

display.value = display.value + char; //display에 매개변수 값을 더하여 display의 값에 넣는다.

}

https://blog.cordelia273.space/m/32

728x90

from http://nossodia.tistory.com/139 by ccl(A) rewrite - 2021-10-15 16:01:48