Stack/JavaScript

[JS] chart.js

index.html chart.js const MONTHS = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; export function months(config) { var cfg = config || {}; var count = cfg.count || 12; var section = cfg.section; var values = []; var i, value; for (i = 0; i < count; ++i) { value = MONTHS[Math.ceil(i) % 12]; values.push(value.substring(..

[JS] fusionChart

FusionCharts XT will load here!

[JS] 2022 데브매칭 상반기 - 프로그래밍 언어 검색

- client 언어검색 index.html App.js import { fetchLanguages } from "./api.js" import SearchInput from "./components/SearchInput.js" import SelectedLanguages from "./components/SelectedLanguages.js" import Suggestion from "./components/Suggestion.js" export default function App({ $target }) { this.state = { fetchedLanguages : [], selectedLanguages: [] } this.setState = (nextState) => { this.state = {..

[JS] 생성자 함수 복습

constructorFunction.html

[JS] Promise / Async / 에러 핸들링 복습

Promise new Promise 선언할 때 P 대문자로 적을 것 ! Async는 Promise를 간편하게? 쓰도록 해주는 애 에러 핸들링 try...catch 문법 try { 코드작성 } catch(e) { 코드작성 } 복습/promise.html 복습/error.html

[JS] Wave

index.html main.js import { WaveGroup } from './wavegroup.js' class App { constructor() { // 캔버스 생성하기 this.canvas = document.createElement('canvas'); this.ctx = this.canvas.getContext('2d'); document.body.appendChild(this.canvas); this.WaveGroup = new WaveGroup(); window.addEventListener('resize', this.resize.bind(this), false); this.resize(); window.requestAnimationFrame(this.animate.bind(this)..

[JS] JumpGame

mgame.html game.html

[JS] Network

index.html main.js import utils from './utils.js'; console.log(utils.randomFloatBetween(10, 15)); // 1. 캔버스 불러오기 const canvas = document.querySelector('canvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const ctx = canvas.getContext('2d'); //2. 파티클 클래스 정의 class Particle { constructor(x, y, radius, velocity) { this.x = x; this.y = y; this.radius=radius; this.velocity ..

[JS] 모듈

분리된 파일 export 지시자 외부모듈에서 해당 변수나 함수에 접근할 수 있도록 함(모듈 내보내기) import 지시자 외부모듈의 기능을 가져와서 사용할 수 있음(모듈 가져오기) index.html sayHi.js export function sayHi(user) { return `안녕! ${user}`; } export function sayHi2(user) { return `랄랄라! ${user}`; } // export { sayHi, sayHi2 }; // 두함수를 내보냄

[JS] canvas

1. html에 canvas 태그 추가하기 (default width=300px height 150px) 2. JavaScript - getContext()메서드 캔버스의 드로잉 컨텍스트를 반환해줌 1) 사각형 그리기 fillRect(x, y, width, height) 채워진 사각형 그리기 strokeRect(x, y, width, height) 선으로 된 사각형 그리기 clearRect(x, y, width, height) 지정된 사각형 영역을 지움 2) 패스 그리기(Illustrator의 펜툴과 비슷) beginPath() 새 경로를 만듦 closePath() 마지막 위치에서 시작 위치를 연결 stroke() 윤곽선 그리기 fill() 칠하기 moveTo(x, y) 지정된 위치에서 시작한다. (펜툴..