[ASP.NET] 웹 페이지 코드 쓰기

ASP.NET 4.0

메리 2021. 12. 24. 14:43

이전 글에서 만들었던 넓이 구하기 버튼을 사용자가 클릭할 때 발생하는 이벤트를 처리하는 이벤트 처리기에 원의 넓이를 구하는 로직을 구성할 것이다.

CircleAreaCalculator.aspx의 디자인 창이나 나누기 창에서 넓이 구하기 버튼을 더블 클릭하여 만든다.

사용자가 입력한 반지름으로부터 원의 넓이를 구하여 출력하는 이벤트의 처리 과정은 다음과 같다.

txtRadius에 입력된 반지름 읽기 -> 반지름×반지름×π로 원의 넓이 구하기 -> lblOutput에 원의 넓이 출력하기

txtRadius에 입력된 값은 txtRadius.Text로 읽을 수 있다.

읽어들인 값은 문자열이므로 정수 또는 실수로 변환해야 한다.

double radius = double.Parse(txtRadius.Text);

실수형 변수 area를 만들고 원의 넓이를 구하는 공식을 입력한다.

double area = radius * radius * Math.PI;

이제 lblOutput에 원의 넓이를 출력해준다.

lblOutput.Text = "반지름이 " + txtRadius.Text + "cm인 원의 넓이는 " + 
area.ToString() + "cm<sup>2</sup>입니다.";

Text는 해당 텍스트를 바꾸는 것이고 ToString()을 사용하는 이유는 실수형 변수 area을 문자열로 바꾸기 위함이다.

제곱의 자리는 sup 태그로 표기할 수 있다.

컨트롤과 F5를 눌러서 반지름을 입력하고 넓이를 구하는 버튼을 클릭하면 원의 넓이를 알 수 있게 된다.

이렇게 코딩을 하면 디버깅을 통해 어떻게 흘러가는지 알 수 있다.

프로그램 상단의 디버그 > 디버깅 시작 또는F5를 누르면 디버깅을 실행시킬 수 있다.

이벤트가 어떻게 작동하는지 알기 위해

"double radius=double.Parse(txtRadius.Text);행에 커서를 두고 F9를 누르거나 행 번호 왼쪽의 밝은 회색의 여백을 클릭한다.

중단점이 설정되면 행 번호 왼쪽의 밝은 회색의 여백에 빨간색의 작은 원이 생긴다.

이제 웹 브라우저에서 반지름을 입력하고 '넓이 구하기' 버튼을 클릭하면 설정해놓은 중단점에서 프로그램이 멈춘다.

우리는 조사식을 추가하여 논리적 오류를 찾기위해 변수나 객체에 대한 자세한 정보를 확인할 수 있다.

우선 조사식 창에 조사식 1이라는 탭을 누른 후

소스 창에서 'lblOutput.Text'를 드래그하여 조사식 창에 넣거나 우클릭을 하여 조사식 추가를 눌러주면 된다.

'txtRadius.Text'도 같은 방법으로 조사식 추가를 해준다.

그 다음 F11을 누르면 코드가 한 단계씩 실행되는데, 이 때 지역 변수나 조사식이 어떻게 바뀌는지 보면 된다.

- 세로, 가로 길이를 사용자로부터 입력 받아 직사각형의 넓이를 구하는 웹 페이지를 작성한다.

- 파일 이름은 'RectArea.aspx'로 한다.

결과