Everything has an expiration date
HTML 20231128 [프로그램 소스] - Test004, Test005, Test006 본문
[HTML]/Program source (HTML)
HTML 20231128 [프로그램 소스] - Test004, Test005, Test006
Jelly-fish 2023. 11. 28. 09:45사용자에게 텍스트를 입력받아서,
결과 버튼을 클릭했을 경우 actionPerformed() 함수를 동작시켜서
국어, 영어, 수학 점수의 총점과 평균을 안내하는 프로그램
WebApp01
Test004.java
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test004.html</title>
</head>
<body>
<div>
<h1>데이터 입력 관련 태그</h1>
<hr>
</div>
<div>
<!-- form 태그 : 웹 페이지에서의 입력 양식을 의미한다.-->
<!-- 입력 양식 전체를 감싸는 태그, form은 컨트롤 요소로 구성된다. -->
<!-- 파일을 생성할 때, WEB-INF와 같이 WebContent 내부 다른 폴더에 생성하지 않는다. WebContent 바로 아래에 제작한다!! -->
<!-- WEB-INF : 클라이언트 만큼은 접근할 수가 없는 곳이다!! 여기에 파일을 잘못 생성했더니 404 Error가 발생했었다.-->
<!-- WEB-INF : 서버만 접근 가능! private 와 같은 개념이다! -->
<!-- 400번대 에러 : 클라이언트측 에러 -->
<!-- 500번대 에러 : 서버측 에러 -->
<form>
이름 <input type="text"><br>
국어 <input type="text"><br>
영어 <input type="text"><br>
수학 <input type="text"><br>
<br>
<input type="button" value="결과">
<input type="reset" value="취소">
<br>
총점 <input type="text"> 평균 <input type="text"><br>
</form>
</div>
</body>
</html>
Test005.java
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test005.html</title>
<style type="text/css">
*
{
font-size: 20pt;
font-weight: bold;
font-family: 맑은 고딕;
color: #334433
}
</style>
</head>
<body>
<div>
<h1>데이터 입력 관련 태그</h1>
<hr>
</div>
<div>
<form>
이름 <input type="text"><br>
국어 <input type="text"><br>
영어 <input type="text"><br>
수학 <input type="text"><br>
<br>
<input type="button" value="결과">
<input type="reset" value="취소">
<br>
총점 <input type="text"> 평균 <input type="text"><br>
</form>
</div>
</body>
</html>
Test006.java
<!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 : 안내창 띄우기~!! */
// alert("함수 호출 확인~!!!");
/* 자바 스크립트 영역에서는 주석을 <!-- --> 와 같이 처리하지 않는다. 자바와 똑같다! */
/* CSS에서는 /** 형태로만 주석을 설정한다! */
/* ① 문서 객체(document) 안에서 얻어온다. 이름이 "kor"인 변수의 값을 */
/* ② 그리고 그 값을 vKor에 저장한다. */
var vKor = document.getElementById("kor").value;
var vEng = document.getElementById("eng").value;
var vMat = document.getElementById("mat").value;
var vTot = 0;
var vAvg = 0;
// ③ 문서에서 잡아온 변수가 기본적으로 text 타입이므로 Int 타입 변환
vTot = parseInt(vKor) + parseInt(vEng) + parseInt(vMat);
// ④ Math의 반올림 함수 round() 사용.
vAvg = Math.round(vTot/3);
// ⑤ 변수의 값을 문서의 tot, avg 변수 안에 저장한다.
document.getElementById("tot").value = vTot;
document.getElementById("avg").value = vAvg;
}
</script>
</head>
<body>
<div>
<h1>데이터 입력 관련 태그</h1>
<hr>
</div>
<div>
<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()』 자바스크립트 함수 호출 -->
<!-- html에서는 주석이 모두 클라이언트에게 노출된다! -->
<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] > Program source (HTML)' 카테고리의 다른 글
| HTML 20231128 [프로그램 소스] - Test009, Test010, Test011, Test011_1 (0) | 2023.11.28 |
|---|---|
| HTML 20231128 [프로그램 소스] - Test007, Test008 (1) | 2023.11.28 |
| HTML 20231127 [프로그램 소스] - Test002, Test003 (0) | 2023.11.27 |
| HTML 20231127 [프로그램 소스] - FirstHTML, Test001 (2) | 2023.11.27 |
| HTML 20231127 [개념 설명] - HTML (0) | 2023.11.27 |
'[HTML]/Program source (HTML)' Related Articles
more
