곰효뇽
JavaScript
[JavaScript] canvas / wave
index.html js > main.js import { WaveGroup } from "./wavegroup.js"; class App { constructor() { // 1. 캔버스 생성하기 this.canvas = document.createElement('canvas'); this.ctx = this.canvas.getContext('2d'); document.body.appendChild(this.canvas); //웨이브 그룹생성하기 this.WaveGroup = new WaveGroup(); // 2. window 사이즈 조절 될 때 window.addEventListener('resize', this.resize.bind(this),false); this.resize(); window...
JavaScript
[JavaScript] canvas / network
index.html main.js import utils from './utils.js' // 1. 캔버스 불러오기 const canvas = document.querySelector('canvas') canvas.width = window.innerWidth canvas.height = window.innerHeight const ctx = canvas.getContext('2d') // 2. Particle 클래스 정의 class Particle { constructor(x, y, radius, velocity) { this.x = x this.y = y this.radius = radius this.velocity = velocity; } draw() { ctx.beginPath() ctx.arc(..
JavaScript
[JavaScript] bookList
index.html Book List 2021년도 2020년도 2019년도 2018년도 글쓴이 제목 년도 000 000 000 000 2000 js > main.js function loadItems() { return fetch('data/data.json') .then(Response => Response.json()) .then(data => data.bookList); } function displayItems(bookList) { const container = document.querySelector('.table'); container.innerHTML = "글쓴이제목년도"+ bookList.map(book => createHTMLString(book)).join(""); } function..
