주어진 배열객체 값 : [2, 4, 6, 8, 10] 을 가지고
원래 배열 밑에는 테이블 태그를 이용하여 값을 넣고,
모든 값을 더한 배열에는
원래 배열 값 + 마지막에 모든값을 더한 값을 넣어서 나타내보기
HTML
각각의 #origin, #result div 태그 안에 자바스크립트를 활용하여 테이블태그와 값을 함께 넣어줄 것이다.
<body>
<div id="container">
<h1>주어진 배열 : [2, 4, 6, 8, 10]</h1>
<hr />
<h1>원래 배열</h1>
<div id="origin"></div>
<h1>모든 값을 더한 배열</h1>
<div id="result"></div>
</div>
</body>
CSS
table, td {
border: 1px solid #ccc;
border-collapse: collapse;
}
td {
padding: 5px 10px;
font-size: 1.5em;
}
#result td:last-child {
background-color: black;
color: #fff;
}
Javascript
// 1.출력공간에 대한 정의
// - 원래배열 출력
// - 모든값을 더한 배열 출력
// 2.주어진 배열을 더하는 연산 계산식 정의
// 3.출력방식에대한 정의 - table 형식
const origin = document.querySelector("#origin");
const result = document.querySelector("#result");
let numbers = [2, 4, 6, 8, 10];
showArray(origin, numbers);
function showArray(area, numbers) {
let t = "<table><tr>";
for(let i = 0; i < numbers.length; i++){
t += "<td>" + numbers[i] +"</td>"
}
t += "</tr></table>"
area.innerHTML = t;
}
let sum = 0;
for(let i = 0; i < numbers.length; i++){
sum += numbers[i];
}
numbers.push(sum);
showArray(result, numbers);알고보면 간단한 예제였는데 왜이리 어려웠는지..😔
아직 함수를 활용하는 부분에서 약한 듯 하다.
'Javascript > GMA(2302~)' 카테고리의 다른 글
| 23.04.25 자바스크립트 함수,객체,변수 심화내용 (0) | 2023.04.26 |
|---|---|
| 23.04.25 자바스크립트 배열객체 예제2 (0) | 2023.04.26 |
| 23.04.25 자바스크립트 문자열,배열객체 예제 (0) | 2023.04.26 |
| 23.04.25 자바스크립트 배열객체 심화 (0) | 2023.04.26 |
| 23.04.25 자바스크립트 정규표현식 (0) | 2023.04.26 |
