WEB Archive

[HTML] CSS와 Javascript함수 만들어보기

universedevelope 2024. 8. 20. 13:51 
<!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