* 2차원 배열을 생성하는 방법
배열 리터럴 사용
const _2dArray = [[1, 2], [3, 4], [5, 6], [7,8], [9, 10]]배열 리터럴을 사용하여 값을 초기화함과 동시에 변수에 할당할 수 있다.
const _2dArray = []
const rows = 5
const columns = 2
for (let i = 0; i < rows; i++) {
const element = []
for (let j = columns * i; j < columns * i + columns; j++) {
element.push(j + 1)
}
_2dArray.push(element)
}
console.log(_2dArray) // const _2dArray = [[1, 2], [3, 4], [5, 6], [7,8], [9, 10]]반복문과 push 메서드를 사용하면 동적으로 값을 생성하고 할당할 수 있다. 위 코드는 첫번째 예제와 동일한 값을 가진다.
j의 초기값을 columns * i 로 설정한 이유는 주석에 나타난 것처럼 내부 배열을 만들어주기 위하여 열의 갯수에 행의 인덱스 값을 곱해준 것이다. 이렇게 하면 행의 수와 열의 갯수를 곱한 값만큼 배열요소들을 건너뛰고, 현재 값을 가져올 수 있다.
예를 들어 3번째 행인 [5,6] 을 만드려면 일단 앞의 2개의 행(인덱스 i)만큼 건너뛰어야 한다. 그리고 행 안에 열의 갯수(2)만큼 건너뛰어야 한다. 그러므로 인덱스 i * 열의 갯수(2) 만큼 건너뛰면 된다. 또한, 건너뛰고 그 다음 값아므로 실제 초기값은 j + 1 이 된다. 마지막으로 내부 반복문은 열의 갯수만큼 반복되어야 하므로 j 의 초기값에서 열의 갯수만큼 더해주면 된다.
const _2dArray = []
const rows = 5
const columns = 2
for (let i = 0; i < rows; i++) { // i: 0, 1, 2, 3, 4
const element = []
for (let j = 0; j < columns; j++) { // j: 0, 1
element.push( (columns * i + 1) + j ) //
}
_2dArray.push(element)
}
console.log(_2dArray) // const _2dArray = [[1, 2], [3, 4], [5, 6], [7,8], [9, 10]]방금전 코드보다 조금더 이해하기 쉬운 코드는 위와 같다. 2차원 배열의 각 배열요소의 첫번째 값은 1, 3, 5, 7, 9 이다. i 값은 0, 1, 2, 3, 4 로 변하므로 2 * i + 1 (홀수 수열공식) 을 사용하면 1, 3, 5, 7, 9를 생성할 수 있다. j 값은 0, 1 을 가지므로 (2 * i + 1) 에 j 값을 더해주면 각 배열요소의 두번째 값은 2, 4, 6, 8, 10 이 된다.
Array 생성자 함수 사용
const rows = 5
const columns = 2
const _2dArray = new Array(rows)
for (let i = 0; i < rows; i++) {
const element = new Array(columns)
for (let j = columns * i; j < columns * i + columns; j++) {
element[j - columns * i] = j + 1
}
_2dArray[i] = element
}Array 생성자 함수를 사용해서 같은 동작을 구현할 수도 있다. element 의 인덱스값은 0, 1 두개만 가질수 있다. 만약 3번째 행인 [5,6] 을 만드려면 앞서 설명한것처럼 행의 현재 인덱스값(2)와 열의 갯수(2)를 곱한 것만큼 건너뛰어야 한다. 그래서 j 의 초기값은 4가 된다. 외부반목문이 세번째 반복될때(인덱스 i 가 2인 경우) 내부 반복문에서 j 의 값은 4, 5 가 된다. 그러므로 j 값(4, 5)에서 현재 행의 인덱스 * 열의 갯수(4)를 빼주면 element 의 인덱스값은 0 과 1 만 가지게 된다. 나머지 경우도 동일하다.
const rows = 5
const columns = 2
const _2dArray = new Array(rows)
for (let i = 0; i < rows; i++) { // i: 0, 1, 2, 3, 4
const element = new Array(columns)
for (let j = 0; j < columns; j++) { // j: 0, 1
element[j] = (columns * i + 1) + j
}
_2dArray[i] = element
}
console.log(_2dArray) // const _2dArray = [[1, 2], [3, 4], [5, 6], [7,8], [9, 10]]Array 생성자 함수를 사용할 경우에는 이미 값을 저장할 메모리 공간이 만들어져 있으므로 push 를 사용하는 대신 대괄호를 이용하여 인덱스 위치를 지정해서 값을 저장한다.
* 2차원 배열을 조회하는 방법
const fruits = [['apple', 570], ['orange', 270], ['strawberry', 30]]
for(let fruit of fruits){
for(let i in fruit){
switch(i){
case '0':
console.log('name', fruit[i])
break;
case '1':
console.log('price', fruit[i])
break;
}
}
}2차원 배열은 반복문을 사용하면 간단하게 조회가 가능하다. 위 코드에서는 for ~ of 와 for ~ in 문을 사용하여 과일의 이름과 가격을 조회하고 있다. switch ~ case 문을 사용하여 해당 값들을 출력하는데 한가지 주의할 점은 자바스크립트 배열은 객체이기 때문에 배열의 인덱스는 프로퍼티 이름처럼 문자열로 조회하고 있다는 점이다.
* 2차원 배열을 변경하는 방법
const fruits = [['apple', 570], ['orange', 270], ['strawberry', 30]]
for(let fruit of fruits){
fruit.push(Math.floor(Math.random()*100 + 1))
}
console.log(fruits)2차원 배열의 요소를 변경하는 방법은 다양하다. 가장 간단한 방법은 직접 행과 열을 이용해서 변경할수도 있다. fruits[2][1] = 240 과 같다. 위 코드는 배열의 push 메서드를 사용하여 과일 데이터에 각 과일의 재고량을 랜덤값으로 추가하고 있다. 2차원 배열의 각 요소도 배열이기 때문에 배열 메서드를 사용할 수 있기 때문이다.
* 2차원 배열의 요소를 삭제하는 방법
const fruits = [['apple', 570], ['orange', 270], ['strawberry', 30]]
delete fruits[1]
console.log(fruits)2차원 배열에서 요소를 삭제하는 가장 손쉬운 방법은 delete 키워드를 사용하는 것이다. 하지만 아래와 같이 배열의 길이는 줄어들지 않고, 두번째 요소는 empty 로 표기된다.
const fruits = [['apple', 570], ['orange', 270], ['strawberry', 30]]
fruits.splice(1, 1)
console.log(fruits)두번째 방법은 splice 메서드를 사용하는 것이다. 삭제하고자 하는 위치와 갯수를 설정하면 그에 맞게 삭제된다. 첫번째 방법과 다르게 배열길이도 변경되고, empty 로 표기되는 대신 배열요소의 자리가 이동한다.
* 2차원 배열을 출력하는 방법
const fruits = [['apple', 570], ['orange', 270], ['strawberry', 30]]
console.log(fruits.toString())위 2차원 배열은 toString 메서드를 사용하면 문자열로 변경해서 화면에 출력해준다.
const fruits = [['apple', 570], ['orange', 270], ['strawberry', 30]]
console.table(fruits)console 객체의 table 메서드는 2차원 배열을 아래와 같이 좀 더 깔끔하게 정리해서 출력해준다.
* 객체들의 배열을 2차원 배열로 변경하기
const persons = [
{name: 'sunrise', age: 23},
{name: 'victoria', age: 19},
{name: 'daniel', age: 28},
{name: 'ammy', age: 21},
{name: 'smith', age: 32},
]
for(let i in persons){
persons[i] = [persons[i]['name'], persons[i]['age']]
}
console.log(persons)위 코드는 사람에 대한 정보를 담고 있는 객체들의 배열을 2차원 배열로 변경한다. 결과는 아래와 같다.
* 2차원 배열을 객체들의 배열로 변경하기
const persons = [
[
"sunrise",
23
],
[
"victoria",
19
],
[
"daniel",
28
],
[
"ammy",
21
],
[
"smith",
32
]
]
for(let i in persons){
persons[i] = {name: persons[i][0], age: persons[i][1]}
}
console.log(persons)위 코드는 2차원 배열을 간단한 방법으로 프로퍼티를 추가한 객체들의 배열로 변환한다.
* 2차원 배열을 1차원 배열로 변환하는 방법
let _1dArray = []
const persons = [
[
"sunrise",
23
],
[
"victoria",
19
],
[
"daniel",
28
],
[
"ammy",
21
],
[
"smith",
32
]
]
for(let person of persons){
_1dArray = _1dArray.concat(person)
}
console.log(_1dArray)위 코드는 사람에 대한 정보를 담고 있는 2차원 배열을 아래와 같이 1차원 배열로 변환한다. 배열의 concat 메서드를 사용하면 빈 배열로부터 2차원 배열의 각 요소를 하나씩 추가하면서 1차원 배열로 만들어준다.
* 1차원 배열을 2차원 배열로 변환하는 방법
const persons = [
"sunrise",
23,
"victoria",
19,
"daniel",
28,
"ammy",
21,
"smith",
32
]
const columns = 2
const rows = persons.length / columns
const _2dArray = new Array(rows).fill(0)
for(let i=0; i<rows; i++){
const person = new Array(columns).fill(0)
for(let j=0; j<columns; j++){
person[j] = persons[columns*i+j]
}
_2dArray[i] = person
}
console.table(_2dArray)위 코드는 사람에 대한 정보를 담고 있는 1차원 배열을 2차원 배열로 변환한다. 열의 갯수(columns)는 2개이며, 행의 갯수(rows)는 persons 배열의 길이를 열의 갯수로 나눈 5이다. 2차원 배열(_2dArray)의 배열길이는 행의 갯수와 같다.
행의 갯수만큼 반복하면서 열의 갯수만큼 person 이라는 배열을 생성한다. 또한, 새로 생성된 person 배열을 2차원 배열에 추가한다.
열의 갯수만큼 반복하면서 person 배열에 persons 로부터 조회한 값을 추가한다. i 는 현재 행의 위치를 의미하며, j 는 현재 열의 위치를 의미한다. 또한, columns 는 열의 갯수이므로 columns * i 는 persons 배열에서 어디서부터 조회할지 위치를 알려주는 값이다.
* 그래프 그리기
<!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='graph'></div>
<script src="app.js"></script>
</body>
</html>index.html 파일을 위와 같이 작성하자!
body{
margin: 0;
padding: 0;
background: black;
height: 100vh;
/* border: 1px solid green; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#graph{
width: 720px;
height: 200px;
background: black;
border: 1px solid red;
position: relative;
}
.dot{
width: 5px; /* 그래프 선의 굵기 설정 */
height: 5px;
border-radius: 50%;
background: greenyellow;
position: absolute;
left: 0;
top: 0;
}style.css 파일을 위와 같이 작성하자! dot 요소는 새로 생성되는 사인값에 대한 하나의 점(x, y)을 의미한다. width, height 값은 점의 굵기(크기)를 나타낸다. graph 요소 안에서 dot 요소의 위치를 지정해줘야 하므로 graph 의 position 은 relative 로 설정하고, dot 의 position 은 absolute 로 설정하였다.
const graph = document.getElementById('graph')
const points = []
const dx = 1 // degree
let x = 0 // degree
let y = 0
let radx = 0 // radian
// 다음 (X,Y) 포인트 값 계산
function getNextPoint(){
radx = x * (Math.PI / 180)
y = Math.sin(radx)
points.push([x, y])
x += dx
// console.log(points)
}
// (X,Y) 포인트 값으로부터 DOM 객체 생성 및 화면에 표시
function displayPoint(point){
const pointEl = document.createElement('div')
pointEl.className = 'dot'
pointEl.style.left = `${point[0] * 2}px` // x-scale: 2배
pointEl.style.top = `${point[1]* 100 * -1 + 100}px` // y-scale : 100배 (반전 + 좌표이동)
graph.appendChild(pointEl)
}
// (X,Y) 포인트 값을 요소로 가지는 2차원 배열 생성
for(let i=0; i<360; i++){
getNextPoint()
}
console.log(points)
points.forEach(displayPoint)app.js 파일을 위와 같이 작성하자!
const graph = document.getElementById('graph')화면에 그래프를 보여주기 위하여 graph 요소를 검색한다.
const points = []
const dx = 1 // degree
let x = 0 // degree
let y = 0
let radx = 0 // radianpoints 배열은 그래프를 구성하는 각각의 점(X, Y)을 요소로 가지는 2차원 배열이다. dx 는 다음 포인트 값을 얻기 위하여 몇도씩 증가시킬지를 설정하는 값이다. 현재는 1도(degree)씩 증가한다. x, y 변수는 현재 포인트 값을 저장하기 위함이다. radx 는 sin 함수의 인자로 라디안값을 넣어줘야 하므로 추가한 변수이다.
function getNextPoint(){
radx = x * (Math.PI / 180) // degree 를 radian 으로 변경
y = Math.sin(radx) // sin 값 계산
points.push([x, y]) // 2차원 배열에 포인트 추가
x += dx // x 값 증가
// console.log(points)
}getNextPoint 함수는 그래프의 다음 포인트 값(X,Y)을 계산한다. 자세한 내용은 코드 주석으로 대신한다.
function displayPoint(point){
const pointEl = document.createElement('div') // DOM 객체 생성
pointEl.className = 'dot' // 스타일 설정
pointEl.style.left = `${point[0] * 2}px` // x-scale: 2배
pointEl.style.top = `${point[1]* 100 * -1 + 100}px` // y-scale : 100배 (반전 + 좌표이동)
graph.appendChild(pointEl) // 화면에 포인트 보여주기
}displayPoint 함수는 각 포인트(X,Y) 값 대하여 DOM 객체를 생성하고 화면에 포인트를 보여준다. 생성한 DOM 객체의 left, top 값을 getNextPoint 함수로 얻은 각 포인트의 (X,Y) 값으로 설정한다.
point[0] 은 x 축의 위치를 의미한다. x 값은 0~360도 범위에 있으나 스케일을 2배로 설정하여 0~720 사이의 범위에 있도록 한다. 이유는 css 파일에 설정한 graph 의 width 값이 720px 이기 때문이다.
point[1] 은 y 축의 위치를 의미한다. y 값은 -1~1 사이의 소수값이나 스케일을 100배로 설정하여 -100~100 사이의 범위에 있도록 한다. 이유는 css 파일에 설정한 graph 의 height 값이 200px 이기 때문이다.
수학적인 그래프는 위로 갈수록 y 값이 증가하지만, 웹페이지에서는 위로 갈수록 y 값이 감소하므로 -1 을 곱하여 포인트의 y 값을 반전시킨다. 또한, 그래프가 그려지는 div 요소의 y 방향 중앙지점이 (0, 0) 이 되어야 하므로 100px 만큼 좌표를 이동시켜준다.
for(let i=0; i<360; i++){
getNextPoint()
}반복문을 사용하여 360개의 포인트를 2차원 배열에 추가한다.
points.forEach(displayPoint)배열의 forEach 메서드를 이용하여 2차원 배열을 조회하면서 화면에 그래프를 그린다.
* 간단한 2D 픽셀아트
<!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>index.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;
}style.css 파일을 위와 같이 작성하자! cell 요소는 픽셀아트에서 하나의 정사각형을 의미한다. bright 스타일은 배열요소의 값이 1일때 적용된다.
const signDiv = document.getElementById('sign')
const sign = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 1, 0, 0, 0],
[0, 0, 1, 0, 1, 1, 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, 0, 0, 1, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]
function displaySign(value){
const cellEl = document.createElement('div')
cellEl.className = value === 0 ? 'cell' : 'cell bright'
signDiv.appendChild(cellEl)
}
const rows = sign.length
const columns = sign[0].length
for(let i=0; i<rows; i++){
for(let j=0; j<columns; j++){
displaySign(sign[i][j])
}
}app.js 파일을 위와 같이 작성하자!
const signDiv = document.getElementById('sign')화면에 픽셀아트를 보여주기 위하여 sign 요소를 검색한다.
const sign = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 1, 0, 0, 1, 0, 0, 0],
[0, 0, 1, 0, 1, 1, 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, 0, 0, 1, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]간단하게 하드코딩된 픽셀아트 데이터이다. 0 인 경우와 1 인 경우 배경색을 다르게 설정할 것이다.
const rows = sign.length
const columns = sign[0].lengthsign 배열(2차원 배열)의 행과 열의 갯수를 조회한다.
for(let i=0; i<rows; i++){
for(let j=0; j<columns; j++){
displaySign(sign[i][j])
}
}반복문을 이용하여 행과 열을 순회하면서 displaySign 함수를 실행하여 화면에 픽셀아트를 그린다.
function displaySign(value){
const cellEl = document.createElement('div')
cellEl.className = value === 0 ? 'cell' : 'cell bright'
signDiv.appendChild(cellEl)
}displaySign 함수는 행과 열로 조회된 배열의 값(value)를 활용하여 0 이면 'cell' 클래스를 적용하고, 1 이면 'cell bright' 클래스를 적용한다. 즉, value 값에 따라 서로 다른 배경색을 설정한다.
* 지도에 위치 표시하기
Quick Start Guide - Leaflet - a JavaScript library for interactive maps
← Tutorials Leaflet Quick Start Guide This step-by-step guide will quickly get you started on Leaflet basics, including setting up a Leaflet map, working with markers, polylines and popups, and dealing with events. Preparing your page Before writing any
leafletjs.com
<!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>
<!-- 지도 라이브러리 CDN 으로 추가하기 -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
<link rel='stylesheet' href='style.css'/>
</head>
<body>
<div id="map"></div>
<script src="app.js"></script>
</body>
</html>index.html 파일을 위와 같이 작성하자! 지도 라이브러리를 CDN (Content Delivery Network) 방식으로 추가한다. CDN 은 결국 라이브러리를 제공하는 회사에서 온라인으로 관련된 파일을 가져와서 사용하는 방식이다.
body{
margin: 0;
padding: 0;
}
#map { height: 400px; }style.css 파일을 위와 같이 작성하자! map 요소의 높이를 설정한다. map 요소에 지도가 그려진다.
const mapObj = L.map('map')
const coordinates = [
{
"name": "조선 팰리스 럭셔리 컬렉션 호텔, 서울 강남 (Josun Palace, a Luxury Collection Hotel, Seoul Gangnam)",
"coordinate": [
37.502642,
127.041787
]
},
{
"name": "그랜드 인터컨티넨탈 서울 파르나스 (Grand InterContinental Seoul Parnas, an IHG Hotel)",
"coordinate": [
37.50846,
127.061036
]
},
{
"name": "인터컨티넨탈 서울 코엑스 (InterContinental Seoul COEX, an IHG Hotel)",
"coordinate": [
37.513481,
127.057276
]
},
{
"name": "파크 하얏트 서울 (Park Hyatt Seoul)",
"coordinate": [
37.50845,
127.06335
]
},
{
"name": "안다즈 서울 강남 (Andaz Seoul Gangnam)",
"coordinate": [
37.525265,
127.028627
]
},
{
"name": "글래드 라이브 강남 (Glad Live Gangnam)",
"coordinate": [
37.508184,
127.036514
]
}
]
function displayLocation(lat, lon, msg){
const map = mapObj.setView([lat, lon], 13) // 첫번째 위치가 지도의 중앙점에 표시되며 한번만 실행됨
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
L.marker([lat, lon]).addTo(map)
.bindPopup(msg)
.openPopup()
}
coordinates.forEach(coord => {
displayLocation(coord.coordinate[0], coord.coordinate[1], coord.name)
})app.js 파일을 위와 같이 작성하자!
const mapObj = L.map('map')지도라이브러리에서 지도를 제어하기 위한 객체를 가져온다.
const coordinates = [
{
"name": "조선 팰리스 럭셔리 컬렉션 호텔, 서울 강남 (Josun Palace, a Luxury Collection Hotel, Seoul Gangnam)",
"coordinate": [
37.502642,
127.041787
]
},
{
"name": "그랜드 인터컨티넨탈 서울 파르나스 (Grand InterContinental Seoul Parnas, an IHG Hotel)",
"coordinate": [
37.50846,
127.061036
]
},
{
"name": "인터컨티넨탈 서울 코엑스 (InterContinental Seoul COEX, an IHG Hotel)",
"coordinate": [
37.513481,
127.057276
]
},
{
"name": "파크 하얏트 서울 (Park Hyatt Seoul)",
"coordinate": [
37.50845,
127.06335
]
},
{
"name": "안다즈 서울 강남 (Andaz Seoul Gangnam)",
"coordinate": [
37.525265,
127.028627
]
},
{
"name": "글래드 라이브 강남 (Glad Live Gangnam)",
"coordinate": [
37.508184,
127.036514
]
}
]호텔의 이름(name)과 위치 정보(coordinate)가 담겨진 배열이다. 위치 정보에는 위도(latitude)와 경도(longitude) 값이 포함되어 있다. 해당 데이터를 사용하여 지도에 호텔의 위치를 보여준다.
coordinates.forEach(coord => {
displayLocation(coord.coordinate[0], coord.coordinate[1], coord.name)
})호텔 정보가 포함된 coordinates 배열을 forEach 메서드로 순회하면서 각 호텔의 이름과 위치를 지도에 표시한다.
function displayLocation(lat, lon, msg){
const map = mapObj.setView([lat, lon], 13)
// 지도 배경 그리기
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
// 지도에 호텔 이름과 위치 표시하기
L.marker([lat, lon]).addTo(map)
.bindPopup(msg)
.openPopup()
}displayLocation 함수는 호텔의 위치(위도, 경도)와 이름 정보를 이용하여 지도에 해당 호텔의 위치를 보여준다. tileLayer 는 지도의 배경 이미지를 설정하는 메서드이다. 또한, marker 메서드는 지도에 호텔의 위치를 마커로 표시한다. 자세한 내용은 참고문서를 참조하기 바란다.
* 2차원 배열로 체스판 만들기
const board = [
["R", "N", "B", "Q", "K", "B", "N", "R"],
["P", "P", "P", "P", "P", "P", "P", "P"],
[" ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " "],
[" ", " ", " ", " ", " ", " ", " ", " "],
["p", "p", "p", "p", "p", "p", "p", "p"],
["r", "n", "b", "q", "k", "b", "n", "r"],
]
console.log(`${board.join("\n")}\n\n`)
// 킹의 폰을 2칸 앞으로 이동
board[4][4] = board[6][4]
board[6][4] = " "
console.log(board.join("\n"))
체스판을 디스플레이하고, 킹의 폰을 2칸 앞으로 이동시킨다.
* 연습과제 1
const _2dArray = []
for(let i=0; i<5; i++){
const element = []
for(let j=2*i; j<2*i+2; j++){
element.push(j+1)
}
_2dArray.push(element)
}
console.log(_2dArray)위 예제코드에서 동적으로 생성한 2차원 배열과 동일하게 반복문을 한번만 사용해서 구현해보자!
* 연습과제 2
function build2DArray(rows, columns){
// 구현하기
}
console.log(build2DArray(7, 3))Array 생성자 함수를 사용하여 행과 열에 대한 입력값이 주어지면 아래와 같이 해당 크기의 2차원 배열을 생성하는 함수를 완성해보자!
* 연습과제 3
예제코드에 주어진 아래 과일 데이터를 객체들을 요소로 가진 배열로 변경해보자!
const fruits = [['apple', 570], ['orange', 270], ['strawberry', 30]]
* 연습과제 4
아래 2차원 배열 데이터의 각 요소는 순서대로 과일의 이름, 단가, 수량을 나타낸다.
const fruits = [['apple', 570, 32], ['orange', 270, 65], ['strawberry', 30, 120]]먼저 단가와 수량을 이용하여 해당 과일의 최종 가격을 계산한 새로운 2차원 배열을 아래와 같이 구현해보자!
하지만 위 데이터를 처음 보는 사람은 각각의 값이 무엇을 의미하는지 알기 힘들다. 그래서 각각의 값이 의미하는 바가 프로퍼티로 추가된 객체들의 배열로 데이터를 변환해보자!
* 연습과제 5
그래프 예제를 참고하여 실시간으로 업데이트되는 사인 그래프를 그려보자!
setInterval 메서드를 사용하여 포인트를 계속 추가하고, 포인트 갯수가 360개를 넘어가면 360개만 추출하여 화면에 보여준다. 추출시작점(offset)과 추출범위(range)에 대한 변수를 추가하고, 아래와 같이 실시간 사인 그래프를 구현해보자!
* 연습과제 6
2D 픽셀아트 예제를 참고하여 아래와 같이 2차원 배열로 생성한 sign1, sign2, sign3, sign4, sign5 를 1초마다 순서대로 화면에 보여주도록 구현해보자! (단, sign5 를 보여준 다음에는 다시 sign1을 보여줘야 한다.)
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
// 구현하기'프론트엔드 > Javascript' 카테고리의 다른 글
| Tagged 템플릿 리터럴 (0) | 2022.07.16 |
|---|---|
| 자바스크립트 문법 13 - 함수(function)의 활용 (0) | 2022.01.26 |
| 자바스크립트 문법 9 - 배열(Array) 의 다양한 메서드 3 (분해와 융합) (0) | 2021.12.30 |
| 자바스크립트 문법 8 - 배열(Array) 의 다양한 메서드 2 (변경과 정렬) (0) | 2021.12.28 |
| 자바스크립트 문법 7 - 배열(Array) 의 다양한 메서드 1 (검색과 조회) (0) | 2021.12.27 |