<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test020.html</title>
<style type="text/css">
hr{ border:none; border:2px dashed pink; }
input
{
font-family: 나눔고딕코딩;
font-weight: bold;
}
input.btn
{
width: 80px;
font-weight: bold;
font-family: 맑은 고딕;
}
input.btn:hover
{
color: orange;
}
</style>
<script type="text/javascript">
var arr = [4, 7, 9, 1, 3, 2, 5, 6, 8];
function initArray()
{
document.getElementById("array1").value = arr;
}
function actionArray()
{
var str ="";
for (var n = 0; n < arr.length; n++)
{
if (arr[n]%2==0)
{
str+= arr[n] + ", ";
}
}
document.getElementById("array2").value = str;
}
</script>
</head>
<body onload="initArray()"> <!-- 배열을 호출 -->
<!--
임의의 정수가 들어있는 1차원배열의 숫자 데이터들 중에서
짝수만 골라서 출력하는 페이지를 구성한다.
HTML, CSS, Javascript 를 활용한다.
※ 임의의 정수가 들어있는 1차원 배열 → 4, 7, 9, 1, 3, 2, 5, 6, 8
페이지 레이아웃
--------------------------------------------------------
초기 배열 상태 [4, 7, 9, 1, 3, 2, 5, 6, 8]
< 결과 >
짝수만 출력 [ ]
--------------------------------------------------------
-->
<div> <h1>자바 스크립트 배열 정렬</h1></div>
<div>
<hr>
<form>
초기 배열 상태 <input type="text" id ="array1" class="txt" style="width: 150px" > <br>
<input type="button" class = "btn" style="width : 50px" value="결과" onclick="actionArray()"><br>
짝수만 출력 <input type="text" id ="array2" class="txt" style="width: 150px">
<hr>
</form>
</div>
</body>
</html>