자바스크리트 문법 10 - 2차원 배열과 배열의 확장 해답

 

* 연습과제 1

const _2dArray = []

for(let i=0; i<5; i++){
    _2dArray[i] = [2*i+1, 2*i+2]
}

console.log(_2dArray)

 

* 연습과제 2

function build2DArray(rows, columns){
    const _2dArray = new Array(rows).fill(0)
    for(let i=0 ; i<_2dArray.length; i++){
        _2dArray[i] = new Array(columns).fill(0)
    } 
    return _2dArray
}

console.log(build2DArray(7, 3))

 

* 연습과제 3

해답1

const fruits = [['apple', 570], ['orange', 270], ['strawberry', 30]]

for(let i in fruits){
    fruits[i] = {name: fruits[i][0], price: fruits[i][1]}
}

console.log(fruits)

해답2

const fruits = [['apple', 570], ['orange', 270], ['strawberry', 30]]

for(let i in fruits){
    const fruit = {}
    for(let j in fruits[i]){
        switch(j){
            case '0':
                fruit['name'] = fruits[i][j]
                break;
            case '1':
                fruit['price'] = fruits[i][j]
                break;
        }
    }
    fruits[i] = fruit
}

console.log(fruits)

 

* 연습과제 4

const fruits = [['apple', 570, 32], ['orange', 270, 65], ['strawberry', 30, 120]]

for(let fruit of fruits){
    fruit.splice(1, 2, fruit[1] * fruit[2])
}

for(let i in fruits){
    fruits[i] = {name: fruits[i][0], totalPrice: fruits[i][1]}
}

console.log(fruits)

 

* 연습과제 5

해답 0 

const graph = document.getElementById('graph')

let points = [] // 포인트 배열
let x = 0 // degree
let offset = 0 // 추출 시작점

function degreeToRad(x){
    return x * (Math.PI / 180)
}
function calSinVal(x){
    return Math.sin(x)
}
function clearWindow(el){
    el.innerHTML = ''
}
function getPoint(x){
    return [x, calSinVal(degreeToRad(x))]
}
function isArrayFull(len){
    return len > 360
}

function displayPoint(point){
    const [x, y] = point
    const xScale = 2, yScale = 100, yShift = 100

    const pointEl = document.createElement('div')
    pointEl.className = 'dot'
    pointEl.style.left = `${(x - offset) * xScale}px` // x-scale: 2배 (offset 만큼 좌표이동)
    pointEl.style.top = `${(y* yScale) * -1 + yShift}px` // y-scale : 100배 (반전 + 좌표이동)
    graph.appendChild(pointEl)
}

function redraw(){
    clearWindow(graph)
    
    points.push(getPoint(x)) // 포인트 추가
    x++ // x 좌표 변경

    if(isArrayFull(points.length)){
        points.shift() // 첫번째 요소를 제거함으로써 360개 유지
        offset++ //  offset 증가
    }
    points.forEach(displayPoint) // 화면에 그래프 그리기
  
}

setInterval(redraw, 5)

해답1

const graph = document.getElementById('graph')

const points = []
const dx = 1 // degree
let x = 0 // degree
let y = 0
let radx = 0 // radian
let offset = 0 // 추출 시작점
let points360 = [] // 360개만 추출하기
const range = 360 // 추출 갯수

// 다음 (X,Y) 포인트 값 계산
function getNextPoint(){
    radx = x * (Math.PI / 180)
    y = Math.sin(radx)
    points.push([x, y])
    x += dx
}


// (X,Y) 포인트 값으로부터 DOM 객체 생성 및 화면에 표시
function displayPoint(point){
    const pointEl = document.createElement('div')
    pointEl.className = 'dot'
    pointEl.style.left = `${(point[0] - offset) * 2}px` // x-scale: 2배 (offset 만큼 좌표이동)
    pointEl.style.top = `${point[1]* 100 * -1 + 100}px` // y-scale : 100배 (반전 + 좌표이동)
    graph.appendChild(pointEl)
}

function redraw(){
    graph.innerHTML = '' // 화면 초기화
    getNextPoint()

    if(points.length <= 360){
        points.forEach(displayPoint)
    }else{
        points360 = points.slice(offset, offset + range) // 360개만 추출하기
        points360.forEach(displayPoint)
        offset++
    }
}

// (X,Y) 포인트 값을 요소로 가지는 2차원 배열 생성
const timerID = setInterval(redraw, 5)

해답2

const graph = document.getElementById('graph')

let points = []
const dx = 1 // degree
let x = 0 // degree
let y = 0
let radx = 0 // radian
let offset = 0 // 추출 시작점
let points360 = [] // 360개만 추출하기
const range = 360 // 추출 갯수

// 다음 (X,Y) 포인트 값 계산
function getNextPoint(){
    radx = x * (Math.PI / 180)
    y = Math.sin(radx)
    points.push([x, y])
    x += dx
}


// (X,Y) 포인트 값으로부터 DOM 객체 생성 및 화면에 표시
function displayPoint(point){
    const pointEl = document.createElement('div')
    pointEl.className = 'dot'
    pointEl.style.left = `${(point[0] - offset) * 2}px` // x-scale: 2배 (offset 만큼 좌표이동)
    pointEl.style.top = `${point[1]* 100 * -1 + 100}px` // y-scale : 100배 (반전 + 좌표이동)
    graph.appendChild(pointEl)
}

function redraw(){
    graph.innerHTML = '' // 화면 초기화
    getNextPoint()

    if(points.length > 360){
        points.shift() // 360개를 초과한 경우 첫번째 요소를 제거함으로써 360개 유지
        offset++
    }
    points.forEach(displayPoint)
    // console.log(points)
}

// (X,Y) 포인트 값을 요소로 가지는 2차원 배열 생성
const timerID = setInterval(redraw, 5)

 

* 연습과제 6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자바스크립트 연습</title>
    <link rel='stylesheet' href='style.css'/>
</head>
<body>
    <div id='sign'></div>
    <script src="app.js"></script>
</body>
</html>

body{
    margin: 0;
    padding: 0;
    background: black;
}
#sign{
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background: black;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.cell{
    width: 10px; 
    height: 10px;
    background: blue;
}
.bright{
    background: red;
}

const signDiv = document.getElementById('sign')

const sign1 = [
    [0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 1, 0, 0],
    [0, 0, 0, 1, 1, 1, 1, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
    [0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
    [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]
const sign2 = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 1, 1, 1, 1, 1, 0, 0, 1, 0],
    [0, 0, 0, 0, 1, 0, 0, 0, 1, 0],
    [0, 0, 0, 1, 0, 0, 0, 0, 1, 0],
    [0, 0, 1, 0, 1, 0, 0, 0, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 0, 1, 0],
    [0, 0, 0, 1, 1, 1, 1, 1, 0, 0],
    [0, 0, 1, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 1, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 0, 1, 1, 1, 1, 1, 0, 0],
]
const sign3 = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 1, 1, 1, 0, 0, 0, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 0, 1, 0],
    [0, 1, 0, 0, 0, 1, 1, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 1, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 0, 1, 0],
    [0, 0, 1, 1, 1, 1, 0, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]
const sign4 = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 1, 0],
    [0, 1, 1, 1, 0, 0, 1, 0, 1, 0],
    [0, 0, 0, 1, 1, 1, 1, 0, 1, 0],
    [0, 0, 0, 1, 1, 1, 1, 0, 1, 0],
    [0, 0, 0, 1, 0, 0, 1, 0, 1, 0],
    [0, 1, 1, 0, 0, 0, 1, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 1, 0, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]
const sign5 = [
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 1, 1, 1, 0, 0, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 1, 1, 0],
    [0, 1, 0, 0, 0, 1, 0, 1, 1, 0],
    [0, 0, 1, 1, 1, 0, 0, 1, 1, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 1, 1, 1, 1, 1, 1, 0],
    [0, 0, 0, 1, 0, 0, 0, 0, 1, 0],
    [0, 0, 0, 1, 1, 1, 1, 1, 1, 0],
]

const signs = [sign1, sign2, sign3, sign4, sign5]
let index = 0


function displayCell(value){
    const cellEl = document.createElement('div')
    cellEl.className = value === 0 ? 'cell' : 'cell bright'
    signDiv.appendChild(cellEl)
}

function displaySign(sign){
    const rows = sign.length
    const columns = sign[0].length

    for(let i=0; i<rows; i++){
        for(let j=0; j<columns; j++){
            displayCell(sign[i][j])
        }
    }
}

function redraw(){
    const sign = signs[index % signs.length]
    signDiv.innerHTML = '' // 화면 초기화
    displaySign(sign)
    index++
}

setInterval(redraw, 1000)