자바스크립트 배열은 인덱스를 이용해 접근이 가능하다. 배열은 객체이며 데이터 덩어리이다. 그렇기에 화면출력 메서드도 접근이 가능하다. 자바스크립트에 배열에 접근한다는 것이 곧 출력이 가능하다는 것도 설명이 된다. 이것은 단순히 개발자모드의 console.log() 메서드나 문서 스크립트를 이용해 화면에 값을 표시할 수 있는 것과 같다.
자바스크립트 배열 화면 출력
display javascript array values
자바스크립트에 들어간 값들을 확인하기 위해 사용하는 것이 console.log() 메서드이다.
이 메서드를 이용하면 개발자모드(F12)에서 배열의 값을 볼 수 있다.
다른 방법 또한 존재한다.
자바스크립트의 innerHTML 속성을 이용하여 웹브라우저 화면에 직접 출력하는 방법이 있다.
하지만 console.log() 메서드 같이 일목요연한 정리된 정도는 바랄 수 없다.
innerHTML
자바스크립트에서 사용되는 innerHTML 속성은 html 문자열을 html 태그 등과 같은 곳에 설정할 수 있다.
배열변수명을 여기에 바로 설정하면 배열의 값을 웹브라우저 화면에 출력할 수 있다.
사용방법은 간단하다.
자바스크립트의 dom 을 이용하면 된다.
document.getElementById('#아이디').innerHTML = Array샘플코드
위의 코드를 이용하여 웹브라우저에 배열의 값을 직접 출력해 보도록 한다.
코드는 이전에 사용한 것을 그대로 사용하되 위에서 언급한 innerHTML 속성만을 추가하였다.
코드가 길지만 innerHTML 에 배열을 설정하는 부분만 보도록 하자.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트 배열 만들기</h2>
<div id="cont">
<p id="ret1"></p>
<p id="ret2"></p>
<p id="ret3"></p>
</div>
<script>
console.log("----------");
comp = "스타쉽";
team = "아이브";
members = ["리즈","레이","원영","유진","가을","이서"];
count = members.length;
vArray = new Array(comp, team, count, members);
vArray.forEach(
lpEach => console.log(lpEach)
);
document.getElementById("ret1").innerHTML = vArray;
console.log("----------");
comp = "SM Ent";
team = "에스파";
members = ["지젤", "카리나", "윈터", "닝닝"];
count = members.length;
vArray = new Array(comp, team, count, members);
vArray[0] = comp;
vArray[1] = team;
vArray[2] = count;
vArray[3] = members;
vArray.forEach(
lpEach => console.log(lpEach)
);
document.getElementById("ret2").innerHTML = vArray;
console.log("----------");
comp = "JYP Ent";
team = "트와이스";
members = ["모모", "지효", "나연", "다현", "채영", "사나", "정연", "미나", "쯔위"];
count = members.length;
vArray[0] = comp;
vArray[1] = team;
vArray[2] = count;
vArray[3] = members;
vArray.forEach(
lpEach => console.log(lpEach)
);
document.getElementById("ret3").innerHTML = vArray;
console.log("----------");
</script>
</body>
</html>결과화면을 보자.
개발자모드의 console.log() 화면과 웹브라우저 화면에 배열값이 출력되는 것을 볼 수 있다.
반응형
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 배열 길이와 정렬하기 javscript array length and sort (0) | 2021.12.20 |
|---|---|
| 자바스크립트 배열의 데이터타입 javascript array data type (0) | 2021.12.18 |
| 자바스크립트 배열 값 변경 changing javascript array value (0) | 2021.12.17 |
| 자바스크립트 배열 값 출력 가져오기 using javascript array value (0) | 2021.12.15 |
| 자바스크립트 new 키워드 사용 배열 생성 creating javascript array by new keyword (0) | 2021.12.14 |
댓글