창고

RIP Tutorial : 파이차트 그리기, 파이조각(Wedge) 그리기 원리, 캔버스 원형 그라디언트 파이 그래프를 그릴 때 보통은 시작 각도가 0도라서 시계 12시 방향이 아닌 3시 방향부터 그리기 시작한다. 이는 상황에 따라 다르겠지만 보통 긍정적(비율이 크기를 기대) /부정적(비율이 작기를 기대) 2개의 항목이 있는 파이 그래프에서는 아무래도 12시 방향부터 부정적 비율이 그려져야 가독성이 좋을것 같다는 생각을 했음. 기본 RIP 튜토리얼 사이트에 나온것에서 시작 각도만 조정해주면 된다. 여기서 필요한 개념이 라디안(radian)과 각도(degree) 사이의 변환인데, 캔버스에서 arc를 이용하기 위해선 각도를 라디안으로 변형해줄 필요가 있다. (각도는 0도부터 360까지, 라디안은 0부터 약 6..

깃허브에서 미리보기 : https://github.com/OhIkmyeong/marquee_text GitHub - OhIkmyeong/marquee_text Contribute to OhIkmyeong/marquee_text development by creating an account on GitHub. github.com 사용방법 : HTML : marquee 시킬 텍스트들을 감싼 ul에 클래스 "marqueeText"를 지정합니다. 기본 : 수평, 왼쪽방향으로 흐름 (왼 오) .marqueeText.vertical.down : 수직. 위에서 아래로 흐름 .marqueeText.vertical : 아래에서 위로 흐름..

1탄이었던 이전 포스팅 주소 : https://aosceno.tistory.com/492 커스텀 셀렉트 박스 만들기 - HTML DOM에는 select만 작성하고 vaniila JS로 알아서 DIV 생성 HTML CSS JS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64.. aosceno.tistory.com 감사한 덧글을 보고 class문법으로 리팩토링 해볼겸 기능도 추가하였습니다~! 추가된 기능 키보드 동작 (위 아래 화살표..

제로초(조현영)님의 인프런/유튜브 무료 강의 "렛츠기릿 자바스크립트" 공부 내용입니다. [무료] [리뉴얼] 렛츠기릿 자바스크립트 - 인프런 | 강의 본 강의에서는 자바스크립트를 활용해 프로그래밍 사고력을 기르는 연습을 합니다. 웹 게임인 구구단을 시작으로 끝말잇기, 숫자 야구, 반응 속도 테스트, 틱택토, 로또 추첨기, 가위바위보, 카 www.inflearn.com 본 강의에서 2022년 기준 12강에 해당하는 지뢰찾기를 class 문법으로 재구성했습니다. 기본 기능들은 강의 내용과 동일하며, 노란색 바탕은 추가한 기능입니다. 마우스 이벤트는 추가한 기능 때문에 addEventListener 부분이 다르니 유의해주세용 구현한 기능 form으로 행,열,지뢰의 갯수를 받아 table을 그린다. form의 s..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 //https://www.inflearn.com/course/레츠기릿-자바스크립트/lecture/80516 //https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes //https://ko.javascript.info/class class Test{ constructor(){ this.btn0 = document.getElementById('btn0'); this.btn1 = document.getElementById('b..

이번에 추가된 자바스크립트 최신 문법은 어디서 확인할 수 있나? 여기서 : https://tc39.es/ecma262/ ECMAScript® 2022 Language Specification The first and subsequent editions of ECMAScript have provided, for certain operators, implicit numeric conversions that could lose precision or truncate. These legacy implicit conversions are maintained for backward compatibility, but not provided for BigI tc39.es

어떻게 하면 jQuery를 쓰지 않고 html을 include 할 수 있을까? 기존 jQuery로 html을 include 하는 방법을 보다가 jQuery의 .load()를 바닐라 자바스크립트로 하면 어떻게 구현할 수 있을까 궁금해졌다. 스택오버플로우의 답변을 참고하여 만들었음 이전에 포스팅했던 jQuery 없이 html include하기는 AJAX를 사용해서 하는건데..훨씬 복잡하다. 이번에는 엄청 간단하게 fetch로 할거임! HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 include html without jquery Colored by Color Scripter cs JS - main.js 1 2 3 4 import { includeHTML } from..

쩨리쩨리님의 달력 만들기 달력만들기(1) CSS는 최소화 하였습니다. class 개념을 사용하여 HTML의 DOM은 id값만 있고, 이후 모듈이 되는 js에서 해당 함수로 생성만 하면, 해당하는 DOM에 달력이 자동으로 생성됩니다. 이전다음달 보기, 오늘 날짜 표시 같은 기능을 옵션으로 on/off 할 수 있게 해보았습니다. 이런식으로요 1 2 3 4 5 6 7 8 여기다 달력을 생성할 수 있게끔... let test = new ImCalendar(); test.startDraw({ target : 'test' ,prevNext : false ,HL_today : true }) Colored by Color Scripter cs HTML : 이 영역에선 달력을 넣고 싶은 DOM에 id만 지정해줍니다 1 ..

우선 최고의 참고 사이트 MDN 링크 (1)Reduce : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce Array.prototype.reduce() - JavaScript | MDN reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다. developer.mozilla.org (2)Rest parameters : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/rest_parameters Rest 파라미터 - JavaScript | MDN..

지난번에 만든 터치슬라이더는 웹에서는 터치이벤트를 제공하지 않기 때문에 반쪽짜리 슬라이더였음. 이번에는 웹에서는 mousedown + mousemove + mouseup / 터치 지원 환경에서는 touchmove, touchend시 좌우로 SNAP 되는 바닐라 자바스크립트 슬라이더를 만들어봤다. 다음은 소스코드 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 touch, grab 일시정지 0 1 2 3 4 5 ⬅ ➡ Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25..