본문 바로가기

javascript7

[javascript][toy]마우스 트레이서 내용 소개 이번에는 재미 삼아 마우스가 이동할 때 뒤에 문자나 그림이 따라다니는 기능을 구현해봤습니다. 단순하게 MouseTracker 객체 생성하고 해당 객체에 형식에 맞게 이미지나 글자를 push 해주면 마우스를 따라다니는 것처럼 보이게 됩니다. 구현 소스 See the Pen MouseTracer-class by kjg20260 (@kjg20260) on CodePen. 2022. 8. 10.
[javascript]Date 객체 포맷 변환 Date 객체 포맷 변환 javascript에서 Date 객체를 내가 원하는 포맷/패턴으로 출력하기 위해서 만든 함수입니다. Date 객체의 prototype에 정의하여 생성되는 생성된 어느 Date 객체에서든 사용할 수 있게 하였습니다. ※ 주의 : javascript 에서는 일반적인 객체는 객체의 prototype을 상속하기 때문에 prototype의 수정은 위험할 수 있습니다. 단순하게 format으로 들어오는 문자열에서 특정 문자들을 차례대로 바꿔주는 함수이기 때문에 응용해서 수정하여 사용 가능합니다. 아래는 소스코드입니다. 소스 코드 See the Pen DateToCustomString by kjg20260 (@kjg20260) on CodePen. 2022. 4. 7.
[javascript]랜덤하게 밝은 색 코드 반환하기 함수 구현 목적 여러 색을 랜덤 하게 뽑고 싶은데(차트 라인 별 색상 등) 너무 알록달록하여 밝은 색들만 랜덤하게 뽑고 싶어서 구현해 봤습니다. 구현 방법 랜덤하게 헥스 코드(#○○○○○○)로 반환하는 함수입니다. 헥스 코드는 16진수 6자리로 이루어져 있습니다. 이중 2자리씩 앞에서 부터 R(빨강색), G(녹색), B(파란색)을 나타내며 00(0)~FF(255)까지 총 256단계로 각각의 색의 강도를 나타냅니다. 해당 색은 빛의 삼원색을 서로 더하는 가산혼합으로 3가지 색이 모두 0인 경우 #000000 검정, 모두 FF 인 경우 #FFFFFF로 흰색이 됩니다. 이처럼 각 색의 값의 합이 높을 수록 밝아지므로 모든 색상 값을 반 이상으로 랜덤 하게 뽑았습니다. RGB 값이 128, 16진수로는 80 이.. 2022. 1. 26.
[javascript]Array(배열) 비우기 배열 비우기 개발을 하다 보면 배열을 비워야 할 경우가 발생하는데 그때 사용할 수 있는 방법들입니다. 1. 빈 배열 대입 let array = [1,2,3,4,5]; array = [] console.log(array) // [] 단순하게 빈 배열 대입하여 배열을 비울 수 있습니다. 2. 배열의 길이 수정 let array = [1,2,3,4,5] array.length = 0 console.log(array) // [] 배열의 길이를 0으로 수정하면 배열을 비울 수 있습니다. ※ 배열의 길이를 수정하면 해당 길이만큼 배열의 크기가 바꿔지며 현재 길이보다 크게 변경 할 경우 해당 자리에 빈 값이 들어가며 sparse Array가 됩니다. 3. 배열 자르기 let array = [1,2,3,4,5] arr.. 2022. 1. 21.