개념
- 순서가 중요한 데이터를 담는다.
- 0부터 시작해서 1씩 증가하는 index가 자동으로 부여된다.
- 대괄호 [ ]열고 닫고 해서 만들 수 있다.
// 숫자를 배열에 담기
var nums=[10,20,30,40,50];
// 문자열을 배열에 담기
var names=["김구라", "해골", "원숭이", "주뎅이", "덩어리"];
Array 방 크기 참조
//arry의 방의 크기 참조
// 변수명.length;
names.length;
var size=names.length;
Array에 data 추가, 삭제, 변경
data 추가하기
push내장객체로 추가하기
//객체명.push(추가할data)
var names=["김구라", "해골", "원숭이", "주뎅이", "덩어리"];
names.push("돼지");
//var names=["김구라", "해골", "원숭이", "주뎅이", "덩어리", "돼지"];
data 삭제하기
splice내장객체로 추가하기
//arry의 data 삭제하기
//변수명.splice(삭제할 index, 갯수);
var names=["김구라", "해골", "원숭이", "주뎅이", "덩어리"];
names.splice(2, 1); //var names=["김구라", "해골", "주뎅이", "덩어리"];
data 변경하기
document.querySelectorAll("요소명")[index].innerText=변경할 값;
//예시
var names=["김구라", "해골", "원숭이","주뎅이","덩어리"];
document.querySelectorAll("div")[3].innerText="짱구";
//var names=["김구라", "해골", "원숭이","짱구","덩어리"];
가변배열
- 프로그래밍 시점에 배열의 사이즈를 알 수 없고, 클라이언트가 요청하는 대로 배열의 사이즈가 바뀌는 것
예시
문제1.
input에 친구이름을 입력후 추가 버튼을 누르면 배열에 친구이름이 저장되도록해보세요.
(친구이름 저장 후 input에 입력되어 있는 text는 자동으로 지워지게 처리하세요)
문제2.
목록보기 버튼을 클릭하면 console에 문제1에서 추가된 배열이 출력되도록 해보세요.
<body>
<input id="myFriend" placeholder="친구이름 입력"/>
<button onclick="add();">추가</button>
<button onclick="list();">목록보기</button>
<script>
var friend=[];
// 문제1.
var add=function(){
//input의 value 값 갖고 오기
var a=document.querySelector("#myFriend").value;
//배열에 넣어주기
friend.push(a);
//input에 입력한 value값 넣어 주기
document.querySelector("#myFriend").value="";
};
//문제2
/*
클라이언트의 요청에 따라 배열에 친구이름이 추가되므로
프로그래밍 시점에는 얼마나 추가 될지 모른다.
따라서 반복문으로 배열의 방이 증가되는 만큼 자동으로
콘솔에 찍힐 수 있도록한다.
*/
var list=function(){
for(var i=0; i<friend.length; i++){
console.log(friend[i]);
}
};
</script>
</body>
연습문제
var nums=[10,20,30,40,50];
var names=["김구라", "해골", "원숭이", "주뎅이", "덩어리"];
문제1. nums 배열의 1번방에 있는 값을 a라는 이름의 변수에 담아 보세요.
답
var a=nums[1];
문제2. nums 배열의 0번방에 100이라는 값을 담아 보세요.
답
nums[0]=100;
문제3. nums 배열의 4번방에 300이라는 값을 담아 보세요.
답
nums[4]=300;
문제4. names 배열의 2번방에 "신현호"라는 값을 담아 보세요.
답
names[2]="신현호";
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div>div4</div>
<div>div5</div><script>
var names=["김구라", "해골", "원숭이","주뎅이","덩어리"];
</script>
문제1. 위 5개 div의 innerText를 names 배열에 있는 문자열을 이용해서 페이지가 로딩되는 시점에 모두 순서대로 바꿔보세요.
답
document.querySelectorAll('div')[0].innerText=names[0];
document.querySelectorAll('div')[1].innerText=names[1];
document.querySelectorAll('div')[2].innerText=names[2];
document.querySelectorAll('div')[3].innerText=names[3];
document.querySelectorAll('div')[4].innerText=names[4];
문제2. 위 5개 div의 innerText를 names 배열에 있는 문자열을 이용해서 button을 클릭했을때 모두 순서대로 바꿔보세요.
답
<body>
<button type="button" onclick="change()">바꾸기</button>
<script>
var change=function(){
document.querySelectorAll('div')[0].innerText=names[0];
document.querySelectorAll('div')[1].innerText=names[1];
document.querySelectorAll('div')[2].innerText=names[2];
document.querySelectorAll('div')[3].innerText=names[3];
document.querySelectorAll('div')[4].innerText=names[4];
};
</script>
</body>
문제1. input 요소에 문자열을 입력하고 저장 버튼을 누르면 입력한 문자열을 읽어와서 msgs 배열에 누적(저장)시켜보세요.
답
<body>
<input type="text" id="one"/>
<button onclick="save();">저장</button>
<script>
var msgs=[];
var save=function(){
var inputMsg=document.querySelectorAll("input")[0].value;
// var inputMsg=document.querySelector("#one").value;
msgs.push(inputMsg);
alert("배열에 저장했습니다.");
};
</script>
</body>
'Javascript' 카테고리의 다른 글
| javascript로 HTML 문서에 접근하고 contents변경해보기 (0) | 2019.11.05 |
|---|---|
| Function(함수) (0) | 2019.11.04 |
| Plain object (객체) (0) | 2019.11.04 |
| Number (수치형) (0) | 2019.11.04 |
| Boolean type (논리형) (0) | 2019.11.04 |
