<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>javascript array</title>
</head>
<body>
<button type="button" onclick="testArray1()">배열테스트1</button>
<button type="button" onclick="testArray2()">배열테스트2</button>
<script type="text/javascript">
function testArray1(){
let arr = new Array(3);
arr[0] ="당근";
arr[1] ="배추";
arr[2] ="무우";
for (let i=0; i<arr.length; i++){
alert(arr[i]);
}
}
function testArray2(){
let arr2 = ["가을방학", "시와", "언니네이발관"];
for (let i=0; i<arr2.length; i++){
alert(arr2[i])
}
}
</script>
<br></br>
<form>
<input type="checkbox" name = "hobby" value = "레고">레고이미지<br>
<input type="checkbox" name = "hobby" value = "독서">독서이미지<br>
<input type="checkbox" name = "hobby" value = "코딩">코딩이미지<br>
<button type="button" onclick="testArray3()">배열테스트3</button>
</form>
<script type="text/javascript">
function testArray3(){
let hobbyArray = document.getElementsByName("hobby"); //hobby name의 배열을 반환, 3개의 객체가 배열로 들어와있는것
//alert(hobbyArray.length); //배열 길이, hobby name의 checkbox object(object로 관리하기때문에)수
for (let i=0; i<hobbyArray.length; i++){
alert(hobbyArray[i].value + " " + hobbyArray[i].checked); //value 찍으면 레고이미지가 아니라 레고
//checked 체크 상태를 저장하고 있는 속성
}
}
</script>
</body>
</html>
배열테스트1 버튼을 누르면 testArray1() 메소드가 실행된다.
function testArray1(){
let arr = new Array(3);
arr[0] ="당근";
arr[1] ="배추";
arr[2] ="무우";
for (let i=0; i<arr.length; i++){
alert(arr[i]);
}
}자바스크립트에서 배열은
let arr = new Array(3);
로 선언한다.
3개의 공간에 차례대로 값을 넣어주고 반복문으로 alert 창에 값을 출력할 수 있도록 했다.
배열테스트2 버튼을 누르면 testArray2() 메소드가 실행된다.
function testArray2(){
let arr2 = ["가을방학", "시와", "언니네이발관"];
for (let i=0; i<arr2.length; i++){
alert(arr2[i])
}
}배열을 선언하는 또 다른 방법이다.
let arr2 = ["가을방학", "시와", "언니네이발관"];
let 배열이름 = ['데이터', '데이터'...]
<form>
<input type="checkbox" name = "hobby" value = "레고">레고이미지<br>
<input type="checkbox" name = "hobby" value = "독서">독서이미지<br>
<input type="checkbox" name = "hobby" value = "코딩">코딩이미지<br>
<button type="button" onclick="testArray3()">배열테스트3</button>
</form>세개의 hobby라는 name을 가진 input 태그를 만들어주었다.
이 input 태그들은 type이 checkbox이다.
testArray3() 메소드를 보자.
function testArray3(){
let hobbyArray = document.getElementsByName("hobby"); //hobby name의 배열을 반환, 3개의 객체가 배열로 들어와있는것
//alert(hobbyArray.length); //배열 길이, hobby name의 checkbox object(object로 관리하기때문에)수
for (let i=0; i<hobbyArray.length; i++){
alert(hobbyArray[i].value + " " + hobbyArray[i].checked); //value 찍으면 레고이미지가 아니라 레고
//checked 체크 상태를 저장하고 있는 속성
}
}document.getElementsByName()으로 name이 "hobby"인 객체들을 hobbyArray라는 변수(배열)에 담아줬다.
반복문으로 배열의 길이만큼 value와 checked로 체크되어있는지 안되어있는지 true 혹은 false까지 출력할 수 있다.
