9.11 output 요소
output 요소는 계산 결과를 나타내는데 이용하는 요소로 예를 들면 javaScript를 이용하여 계산된 결과를 나타낼 때 사용하며 다음과 같은 고유한 속성들을 사용할 수 있습니다.
|
속성 |
기능 |
|
for |
공백으로 분리된 요소의 ID값을 설정하여 계산된 결과 나타내는데 사용 |
|
form |
output 요소가 속한 form을 명시 |
|
name |
output 요소의 이름 |
예제를 하나
하는데 여기서는 form 속성과 name 속성 관련 예제를
해봅니다. 메모장을 열어서 HTML5 문서의 기본적인 코드를
작성하고 다음과 같이 작성합니다.
<!DOCTYPE
HTML>
<html>
<head>
<title>output 요소 예제</title>
<style type="text/css">
</style>
<script
type="text/javascript">
function add()
{
var a = parseInt(prompt("첫
번째 숫자",0));
var b = parseInt(prompt("두
번째 숫자",0));
document.forms["resultform"]["result"].value
= a+b;
}
</script>
</head>
<body onload="add()">
<h1>output 요소의 사용방법</h1>
<form name="resultform">
<label>두 수의 더한 값 :</label>
<output
name="result"></output>
</form>
</body>
</html>
위에서 <script>…</script> 블록 내에 있는
add() 함수는 javaScript 함수를 나타내며 이 함수는 하단의 <body> 요소의 시작 태그 내에 웹페이지가 로드될 때 처리해도록
load 이벤트 속성에 “onload=add()”와 같이 연결하였습니다.
그 다음 javaScript의 parseInt() 함수를
이용하여 프롬프트 창으로 입력되는 숫자 문자열을 실제 정수형으로 변환하여 저장하도록 처리합니다.
그리고 javaScript의 form 객체를
이용하여 위와 같이 <body>..</body> 블록 내에 존재하는 form 요소의 name 속성값과
output 요소의 name 속성값을 이용하여 계산 결과를 얻도록 처리합니다.
이제 “outputEx.html”로 저장하고 이를 아파치 웹서버의 htdocs 디렉토리에 복사한 후 Firefox로 열고 URL 창에 “http://localhost/outputEx.html”을
입력합니다.
그러면 위와
같이 첫 번째 숫자를 입력하면 다음으로 두 번째 숫자를 입력창이 차례로 나타나고 그 결과로 다음과 같이 여러분이
5, 10을 입력했다면 입력한 두 숫자에 대한 합을 나타냅니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 HTML5 요소(Element)에 대한 부분을 그대로를 공개하는 것으로
본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
끝으로 책 한권 분량에 대한 목차(링크 포함)은 "http://fromyou.tistory.com/581"에서 다운로드 받아서 필요하신 학습을 하실 수 있으며 조금이나마 도움이 되셨으면 합니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 9.13 meter 요소 (0) | 2013.07.31 |
|---|---|
| 9.12 progress 요소 (0) | 2013.07.31 |
| 9.10 keygen 요소 (3) | 2013.07.31 |
| 9.9 textarea 요소 (0) | 2013.07.31 |
| 9.8 option, optgroup 요소 (2) | 2013.07.31 |