안녕하세요
오늘은 심화 버전입니다.
학생별 과목/점수 데이터가 들어왔을때,
이 데이터를 변형하여 과목별 학생들의 점수데이터를 뽑고
과목별 평균데이터를 산출하여 그래프로 표시하는 방법을 알려드리도록 하겠습니다.
<원본>
jumsuList =
[ { "조대룡" : { "자바스크립트" : 88, "파이썬" : 99 } },
{ "자드" : { "자바스크립트" : 90, "파이썬" : 88 } } ];
===========================>
1.다음과 같은 형태로 뽑기 배열안에 객체 형태로 과목 [index, 이름, 점수]
[
{ "자바스크립트": [ [ 1, "조대룡", 88 ], [ 2, "자드", 90 ] ] },
{ "파이썬": [ [ 1, "조대룡", 99 ], [ 2, "자드", 88 ] ] }
]
2.과목별 학생 데이터 출력
3.학생이 추가 되었을때 학생 배열 추가
[
{ "자바스크립트": [ [ 1, "조대룡", 88 ], [ 2, "자드", 90 ] ,[ 3, "bts", 90 ] ] },
{ "파이썬": [ [ 1, "조대룡", 99 ], [ 2, "자드", 88 ] ,[ 3, "bts", 85 ] ] }
]
4.과목이 추가 되었을때 과목 오브젝트 추가
[
{ "자바스크립트": [ [ 1, "조대룡", 88 ], [ 2, "자드", 90 ] ,[ 3, "bts", 90 ] ] },
{ "파이썬": [ [ 1, "조대룡", 99 ], [ 2, "자드", 88 ] ,[ 3, "bts", 85 ] ] } ,
{ "Java": [ [ 1, "조대룡", 85 ], [ 2, "자드", 64 ] ,[ 3, "bts", 78 ] ] }
]
5.과목별 학생의 평균 출력
ex) 자바스크립트: 00점, 파이썬: 00점, 자바:00력
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>과목별 성적데이터 출력</title>
</head>
<body>
<script>
// <원본>
// jumsuList =
// [ {"조대룡" : {"자바스크립트" : 88, "파이썬" : 99 } },
// {"자드" : {"자바스크립트" : 90, "파이썬" : 88 } } ];
// ===========================>
// 1.다음과 같은 형태로 뽑기 배열안에 객체 형태로 과목별 학생,점수 만들기 [index, 이름, 점수]
// [
// { "자바스크립트": [ [ 1, "조대룡", 88 ], [ 2, "자드", 90 ] ] },
// { "파이썬": [ [ 1, "조대룡", 99 ], [ 2, "자드", 88 ] ] }
// ]
// 2.과목별 학생 데이터 출력
// 3.학생이 추가 되었을때 학생 배열 추가
// [
// { "자바스크립트": [ [ 1, "조대룡", 88 ], [ 2, "자드", 90 ] ,[ 3, "bts", 90 ] ] },
// { "파이썬": [ [ 1, "조대룡", 99 ], [ 2, "자드", 88 ] ,[ 3, "bts", 85 ] ] }
// ]
// 4.과목이 추가 되었을때 과목 오브젝트 추가
// [
// { "자바스크립트": [ [ 1, "조대룡", 88 ], [ 2, "자드", 90 ] ,[ 3, "bts", 90 ] ] },
// { "파이썬": [ [ 1, "조대룡", 99 ], [ 2, "자드", 88 ] ,[ 3, "bts", 85 ] ] } ,
// { "Java": [ [ 1, "조대룡", 85 ], [ 2, "자드", 64 ] ,[ 3, "bts", 78 ] ] }
// ]
// 5.과목별 학생의 평균 출력
// ex) 자바스크립트: 00점, 파이썬: 00점, 자바:00력
jumsuList = [
{ "조대룡": { "자바스크립트": 88, "파이썬": 99, "Java":88 } },
{ "자드": { "자바스크립트": 90, "파이썬": 88, "Java":56 } },
{ "러브": { "자바스크립트": 100, "파이썬": 50, "Java":40 } },
{ "bts": { "자바스크립트": 50, "파이썬": 60 , "Java":68} }
];
//배열 첫번째 값 출력
// console.log(jumsuList[0]);
//조대룡(키값) 출력
// console.log(Object.keys(jumsuList));
//자바스크립트 출력
// console.log(Object.values(jumsuList[0]));
// name별 value 출력
let myObj = { [jumsuList]: jumsuList[0] };//name이 갖고 있는 값들을 갖고 오고싶을때 중괄호 활용
// [ ](대괄호), { }(중괄호), ( )(소괄호)
// console.log(myObj);
class QueueClass {
constructor() {
this.qArray = [];
}
unshiftItem(inV) {
this.qArray.unshift(inV);
}
popItem() {
this.qArray.pop();
}
get getReturnArray() {
return this.qArray;
}
enqueue(element) {
this.qArray.push(element);
}
dequeue() {
if (this.isEmpty()) {
return null;
}
return this.qArray.shift();
}
isEmpty() {
return this.qArray.length === 0;
}
}
const queue = new QueueClass();
// const queue2 = new QueueClass();
// const queue3 = new QueueClass();
// Enqueue data into the queue
jumsuList.forEach((item, index) => {
Object.entries(item).forEach(([name, scores]) => {
Object.entries(scores).forEach(([subject, score]) => {
queue.enqueue([subject, index + 1, name, score]);
});
});
});
const result = [];
const subjects = {};
// 큐에서 데이터를 제거하고 최종 결과를 구성
while (!queue.isEmpty()) {
//큐에서 첫 번째 요소를 꺼내 각 변수에 할당
const [subject, index, name, score] = queue.dequeue();
//과목별로 정보를 저장할 객체를 초기화
if (!subjects[subject]) {
subjects[subject] = [];
}
//해당 과목을 수강한 사람들의 정보를 배열로 추가
subjects[subject].push([index, name, score]);
}
// subjects 객체를 원하는 출력 형태로 변환
Object.keys(subjects).forEach(subject => {
const newObj = { [subject]: subjects[subject] };
result.push(newObj);
});
console.log(result);
</script>
</body>
</html>
다이아몬드 만들기
정작 3시간을 공들여 만들었습니다.
인덱스를 알기 위해 삽질이 필요하고 모든 과정들을 찍어보고 이를 객체로 만든 과정입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 15px;
font-family: "굴림체";
}
</style>
</head>
<body>
<script>
//i,j 로 항상 찍고 검증하기
let inCount = prompt("뼐찍갯?");
document.write("최종 다이아몬드" + "<br>");
let listStar5 = "";
for (let i = 0; i < inCount; i++) {
listStar5 += i;
for (let j = 0; j < inCount; j++) {
if ((i + j >= inCount - inCount / 2 - 1) &&
(i >= j - inCount / 2) &&
(i <= j + inCount / 2) &&
(i + j - inCount / 2 + 1 <= inCount)
) {
listStar5 += "*";
} else {
listStar5 += "-";
}
}
listStar5 += "<br>";
}
document.write(listStar5);
document.write("객체로 마무리 " + "<br>");
// DiamondGenerator 클래스 정의
class DiamondGenerator {
constructor(inCount) {
this.inCount = inCount; // 입력으로 받은 inCount 값을 인스턴스 변수에 저장
}
// 다이아몬드 모양을 생성하는 함수
generateDiamond() {
let result = "최종 다이아몬드<br>"; // 최종 결과를 담을 변수 선언과 초기화
for (let i = 0; i < this.inCount; i++) { // i는 0부터 inCount-1까지 반복
for (let j = 0; j < this.inCount; j++) { // j는 0부터 inCount-1까지 반복
if (
i + j >= this.inCount - this.inCount / 2 - 1 &&
i >= j - this.inCount / 2 &&
i <= j + this.inCount / 2 &&
i + j - this.inCount / 2 + 1 <= this.inCount
) {
result += "*"; // '*'을 추가
} else {
result += "-"; // '-'을 추가
}
}
result += "<br>"; // 각 줄이 끝나면 줄 바꿈을 추가하여 다음 줄로 이동
}
return result; // 최종 다이아몬드 결과 반환
}
}
// let inCount1 = inCount; // 입력할 inCount 값 설정
let diamondGenerator = new DiamondGenerator(inCount); // DiamondGenerator 클래스의 인스턴스 생성
let output = diamondGenerator.generateDiamond(); // 다이아몬드 모양 생성
document.write(output); // 생성된 다이아몬드 모양을 출력
</script>
</body>
</html>
</script>
</body>
</html>
'Javascript' 카테고리의 다른 글
| 삼각함수, 캔버스, arc, 비동기, JSON, 디스트럭처링 활용하여 데이터 받아오기 (0) | 2023.07.31 |
|---|---|
| 제너레이터, 이뉴머레이터, 캔버스(Canvas) 사용하여 3차원 곡선, 그래프 이동 구현하기 (0) | 2023.07.27 |
| 데카르트 좌표계, Canvas 캔버스 그리기 (0) | 2023.07.24 |
| 큐를 활용하여 데이터 자료구조 변경하기 (0) | 2023.07.21 |
| filter활용-파이썬반 평균점수 구하기 (0) | 2023.07.20 |
