HTML + Javascript 5 [배열]

1.  1차 배열

<ul>
<li id="info0"></li>
<li id="info1"></li>
<li id="info2"></li>
<li id="info3"></li>
<li id="info4"></li>
<li id="info5"></li>
</ul>

var user = "홍길동,이순신,장보고,유관순";	//문자열
console.log(user);
var data = user.split(",");
console.log(data);			
console.log(data[2]);		
console.log(data.length);	

var w = 0;	//배열은 번호가 0부터 시작
while (w < data.length) {
	console.log(data[w]);
	w++;
}

//1차배열 (숫자)
var n = [10, 15, 22, 33, 8, 9, 3];
var ea = n.length;	
var ww = 0;			

do {
	console.log(n[ww]);
	ww++;
} while (ww < ea)

//1차배열 (문자)
var k = ["LG냉장고", "삼성휴대폰", "김치냉장고", "식기세척기", "전자렌지"];
var i = 0;
for (i = 0; i < k.length; i++) {
	console.log(k[i]);
}

//1차배열 (복합) : 숫자와 문자가 함께 적용된 배열
var arr = ["hong", "홍길동", "hong@nate.com", 2510, 2, "2025-01-14"];
var ww = 0;

while(ww<arr.length){
	//모두 사용 가능
	document.getElementById("info"+ww).append(arr[ww]);
	//document.getElementById("info"+ww).innerHTML = arr[ww];
	//document.getElementById("info"+ww).innerText = arr[ww];
	ww++;
}

• split : 특정 문자를 기준으로 배열 생성됨
• 배열을 사용하는 이유 : 하나의 변수에 여러개의 데이터 값을 가지기 위해 사용

2. Key 배열

//[] : 일반 데이터 배열
//{} : key 배열 (2차배열 아님)
var arr = {
	"members":["홍길동","강감찬","이순신"]
};

//두가지 사용법
console.log(arr["members"][2]);
console.log(arr.members[2]);

console.log(arr["members"].length);

/*
응용문제
해당 배열값 중 홀수데이터만 모두 출력되는 코드를 작성
*/
var data = {
	"no":[20,11,21,13,7,6,33,31,30,42,48,41]
}
var i=0;
while(i<data.no.length){
	if(data.no[i]%2==1){
		console.log(data.no[i]);
	}
	i++;
}

/*
응용문제
다음 포인트 전체의 총 합계를 수하는 코드를 작성
*/

var db = {
	"point":[2500,1500,560,420,170,2810,950]
}
var sum = 0;
var ii=0;

while(ii<db.point.length){
	sum+=db.point[ii];
	ii++;
}
console.log(sum);

 

3. 배열 생성, 값 추가&삭제

숫자값 : <input type="text" id="no"><br>
<button type="button" onclick="add_arr()">값 추가</button>
<button type="button" onclick="add_arr2()">push로 값 추가</button>
<button type="button" onclick="add_arr3()">unshift로 값 추가</button>
<button type="button" onclick="add_arr4()">shift로 값 삭제</button>
<button type="button" onclick="add_arr5()">pop으로 값 삭제</button>

//var data = new Array();	//빈배열 생성
var data = [];	//빈배열 생성

function add_arr(){
	var no = document.getElementById("no");
	var ea = this.data.length;
	data[ea] = no.value;		//빈배열로 값을 적용
	console.log(data);
}

function add_arr2(){
	var no = document.getElementById("no");
	data.push(no.value);		
	console.log(data);
}

function add_arr3(){
	var no = document.getElementById("no");
	data.unshift(no.value);		
	console.log(data);
}

function add_arr4(){
	data.shift();		
	console.log(data);
}

function add_arr5(){
	data.pop();		
	console.log(data);
}

• push : 배열 번호 기준 맨 마지막 번호 기준으로 데이터 추가
• unshift : 배열 번호 기준 맨 앞에 데이터 추가
• shift : 배열 번호 기준 맨 앞 데이터 삭제
• pop : 배열 번호 기준 맨 뒤 데이터 삭제
• 입력을 숫자로 받아서 배열에 넣으려면 Number() 사용
  • ex) data.push(Number(no.value));

4. 2차 배열

var data = [
	["홍길동", "이순신", "유관순"],
	["A형", "O형", "B형"]
];
/* 
출력
홍길동 
A형 
이순신 
O형 
유관순 
B형
*/
var w = 0;
while (w < data[0].length) {	//3 해당 배열 그룹에 데이터 갯수 
	var ww = 0;
	while (ww < data.length) {	//2 해당 배열 그룹 갯수 
		console.log(data[ww][w]);
		ww++;
	}
	w++;
}

 

😊응용문제

다음 해당 내용의 배열을 확인하여 console로 출력
결과)
5000원 쿠폰
5000
 ../01.jpg
1+1 이벤트
1EA
 ../02.jpg

var event = [
	["5000원 쿠폰", "1+1 이벤트", "식자재 30% 전품목 할인", "배송비 무료", "10대 간식 20% 할인"],
	["5000", "1EA", "30", "0", "20"],
	["./01.jpg", "./02.jpg", "./03.jpg", "./04.jpg", "./05.jpg"]
];
var i = 0;
while (i < event[0].length) {	//i 0~4
	var ii = 0;
	while (ii < event.length) {	//ii 0~2
		console.log(event[ii][i]);
		ii++;
	}
	i++;
}

html의 div에 사진과 값들을 출력

1. innerHTML 반복문 출력 (DOM 방식)

<div id="box">
</div>

var box = document.getElementById("box");
var html = "";
for (var x = 0; x < event[0].length; x++) {
	html += `<span>
	<img src="`+ event[2][x] + `" title="` + event[0][x] + `" 
	style="width:180px;height:108px;">
	`+ event[1][x] + `
	</span>`;
}
box.innerHTML = html;

• ``(역외따옴표) : 줄바꿈 해도 되는 따옴표 

2. append 반복문 출력 (NODE 방식)

var box = document.getElementById("box");
var html_span, html_img, html_text;
var i = 0;
while (i < event[0].length) {	//i 0~4
	html_span = document.createElement("span");
	html_img = document.createElement("img");

	var ii = 0;
	while (ii < event.length) {	//ii 0~2		
		if (ii == 0) {
			html_img.title = event[ii][i];

		} else if (ii == 1) {
			html_text = document.createTextNode(event[ii][i]);

		} else {
			html_img.src = event[ii][i];
			html_img.style = "width:180px;height:108px;";
		}
		html_span.append(html_img);
		ii++;
	}
	html_span.append(html_text);
	box.append(html_span);
	i++;
}

 

5. 2차 key 배열 

var data = {
	"members": [		//"대표키"
		{
			"id": "hong",	//"보조키" : 데이터
			"name": "홍길동",
			"age": "32",
			"area": "서울"
		},
		{
			"id": "ygsoon",
			"name": "유관순",
			"age": "16",
			"area": "경기도"
		},
		{
			"id": "jangbo",
			"name": "장보고",
			"age": "39",
			"area": "강원도"
		}
	]
}

//경기도 찍기
console.log(data["members"][1]["area"]);

//대표키의 그룹 개수 찍기
console.log(data["members"].length);

//키 종류 찍기
console.log(Object.keys(data["members"][0]));

 

• Object.keys : 대표키, 보조키의 리스트를 확인하는 함수

😊응용문제

해당 키배열에서 사용자의 아이디와 나이만 출력하는 코드 작성
hong
32
ygsoon
16
jangbo
39

var i = 0;
do{
	console.log(data["members"][i]["id"]);
	console.log(data["members"][i]["age"]);
	i++;
}while (i < data["members"].length)

 

해당 배열을 응용하여 다음과 같이 콘솔에 출력되는 코드 작성
상품명 : 모니터
가격 : 360000
세일가격 : 299000
상품명 : 키보드
가격 : 48000
세일가격 :
...

var pdt_list = {
	"products": {
		"product_name": ["모니터", "키보드", "마우스", "CPU", "GPU"],
		"product_money": {
			"money": ["360000", "48000", "37000", "298000", "578000"],
			"money_sales": ["299000", "", "30000", "220000", ""]
		},
		"product_ico": ["NEW", "", "", "", "BEST"]
	}
}
var i = 0;
do {
	console.log("상품명 : " + pdt_list["products"]["product_name"][i]);
	console.log("가격 : " + pdt_list["products"]["product_money"]["money"][i]);
	console.log("세일가격 : " + pdt_list["products"]["product_money"]["money_sales"][i]);
	i++;
} while (i < pdt_list["products"]["product_name"].length)