<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test021.html</title>
<style type="text/css">
* {text-align: center;}
.btn {font-size: 12pt; font-weight: bold; background-color: #ffcccc; color: black; cursor: pointer;}
.text {font-size: 15pt; font-family: 나눔고딕; font-weight: bold;}
.line {color: orange; font-weight: bold;}
.txt {font-size: 12pt; font-weight: bold; width: 150px; text-align: center;}
</style>
<script type="text/javascript">
var arr = new Array();
function print()
{
var str = document.getElementById("insert").value;
arr = str.split(" ");
//★★★split은 반환형이 배열형태이다. ★★★
for (var n = 0; n < arr.length; n++)
{
document.getElementById("result").value += arr[n] + " ";
}
var max = parseInt(arr[0]);
for (var i = 1; i < arr.length; i++)
{
if(max < arr[i])
max = arr[i];
}
document.getElementById("max").value = max;
}
</script>
</head>
<body>
<!--
사용자로부터 임의의 정수를 임의의 갯수만큼 입력받고,
그 수 중에서 가장 큰 수를 출력해줄 수 있는 페이지를 구성한다.
HTML, CSS, Javascript 를 활용한다.
페이지 레이아웃
-----------------------------------------------------
데이터 입력(공백 구분) : [ 2 286 32 71 ] → text box
< 결과 확인 > → button
전체 출력 [ 2 286 32 71 ] → text box
가장 큰 수 [ 286 ] → text box
-----------------------------------------------------
-->
<div>
<form>
<p class="line">━━━━━━━━━━━━━━━━━━━━━━━━━━</p>
▶ 데이터 입력(공백 구분) : <input type="text" class="txt" id="insert">
<p class="line">━━━━━━━━━━━━━━━━━━━━━━━━━━</p>
<input type="button" class="btn" value="결과 확인" style="width: 100px;" onclick="print()">
<br><br>
▶ 전체 출력 <input type="text" class="txt" id="result" disabled="disabled"><br><br>
▶ 가장 큰 수 <input type="text" class="txt" id="max" disabled="disabled">
<p class="line">━━━━━━━━━━━━━━━━━━━━━━━━━━</p>
</form>
</div>
</body>
</html>