<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test006.html</title>
<style type="text/css">
*
{
font_size: 20pt;
font-weight: bold;
font-family: 맑은 고딕;
color: #334433;
}
</style>
<script type="text/javascript">
function actionPerformed()
{
// alert("함수 호출 확인~!!!");
var vKor = document.getElementById("kor").value; // "90" 문자열
var vEng = document.getElementById("eng").value; // "80" 문자열
var vMat = document.getElementById("mat").value; // "70" 문자열
var vTot = 0;
var vAvg = 0;
// parseInt("문자열") 로 정수형태로 변환
// vTot에 담기
vTot = parseInt(vKor) + parseInt(vEng) + parseInt(vMat);
// Math 는 Object 타입.. 클래스가아님
vAvg = Math.round(vTot/3);
document.getElementById("tot").value = vTot;
document.getElementById("avg").value = vAvg;
}
</script>
</head>
<body>
<div>
<h1> 데이터 입력 관련 태그</h1>
<hr>
</div>
<div>
<!-- check~!! -->
<form>
이름<input type="text" id="name"> <br>
국어<input type="text" id="kor"> <br>
영어<input type="text" id="eng"> <br>
수학<input type="text" id="mat"> <br>
<br>
<!-- 결과 버튼에 클릭 이벤트가 발생했을 때 『actionPerformed()』 자바스크립트 함수 호출 -->
<input type = "button" value="결과" onclick="actionPerformed()">
<input type = "reset" value="취소">
<br>
총점<input type="text" id="tot"> 평균 <input type="text" id="avg"> <br>
</form>
</div>
</body>
</html>느닷없이 함수라닛..!
어색합니다 어색해요..
뭐가뭔지 모르는 상태에서
이것저것 누르니 알람도뜨고 함수로인해서
연산도 되니 신기할따름 ㅎㅎㅎ..
잘배워갑니다..!
◆ html 본문의 주석과
▶ <!-- -->
◆ javascript 본문의 주석은 다르네여?!
▶ // ~
728x90
'WEB Archive' 카테고리의 다른 글
| [HTML] 데이터 입력 관련태그(form, input) (0) | 2024.08.20 |
|---|---|
| [HTML] CSS 적용해보기 (0) | 2024.08.20 |
| [HTML] 수평선과 공백 만들기 (0) | 2024.08.20 |
| [HTML] 글꼴 꾸미기 태그 (0) | 2024.08.19 |
| [HTML] pre, xmp 태그 (0) | 2024.08.19 |
댓글