우선 다음과같이 HTML파일을 작성했다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel = "stylesheet" href ="../css/outStyle.css">
<style>
div{
border : 2px dotted gold;
height : 20px;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<script src ="../js/array.js"></script>
<h4> 리터럴로 배열 생성 </h4>
<input type="button" value="생성" onclick="proc1()"><br>
<div id="d1"></div>
<h4> 생성자로 배열 생성 </h4>
<input type="button" value="생성" onclick="proc2()"><br>
<div id="d2"></div>
<input type="button" value="생성" onclick="proc3()"><br>
<div id="d3"></div>
</body>
</html>
function proc1() {
// 리터럴로 배열 생성
var fruit = ["사과","포도",100,12.34,true,"복숭아"];
document.getElementById('d1').innerText = fruit;
// for문을 통해 형식을 바꿔 출력 할 수도 있다
/* var fruit = ["사과","포도",100,12.34,true,"복숭아"];
var ff="";
for(var i=0; i<fruit.length;i++){
if(i!=0) {ff+="/";}
ff+=fruit[i]
document.getElementById('d1').innerText = ff;
}*/
// print함수로 출력 ㄱㄴ
print(fruit, "d1");
}
function proc2() {
// 생성자로 배열 생성
var fruit = new Array("참외","수박","키위");
//document.getElementById('d2').innerText = fruit;
print(fruit,"d2");
}
function proc3() {
var fruit = new Array();
fruit[0] = "자두";
fruit[1] = "샤인머스캣";
fruit[2] = "스타후르츠";
fruit[3] = "체리";
fruit[4] = "망고스틴";
fruit[5] = "용과";
// document.getElementById('d3').innerText = fruit;
print(fruit,"d3");
// 프린트 따로 선언한거 로출하기 ㄱㄴ
}
// 형식대로 프린ㅁ트하려고 만든 for문은 계속 쓸 수 있으니까 아예 따로 선언 할 수 있다
function print(f,id){
var ff="";
for(var i=0; i<f.length;i++){
if(i!=0) {ff+="/";}
ff+=f[i]
}
document.getElementById(id).innerText = ff;
}