from EARTH to MARS

이번 포스팅에서는 자바스크립트를 활용하여 랜덤한 딜레이로 텍스트를 출력하는 효과를 가진 타이핑 애니메이션을 만들어 보겠다. 이러한 애니메이션은 웹 페이지나 애플리케이션에서 독특하고 흥미로운 텍스트 효과를 적용할 때 유용한다. 먼저 멋진 효과를 가진 타이핑 애니메이션을 구현해보기 전에, 랜덤을 구현하는 방식은 여러 가지가 있는데 먼저 그것들에 대해 알아보자. Math.random() 함수 사용하기 Math.random() 함수는 자바스크립트에서 가장 기본적으로 사용되는 함수 중 하나로, 0 이상 1 미만의 랜덤한 부동소수점 숫자를 반환한다. 이를 활용하여 원하는 범위의 랜덤 값을 구할 수 있다. // 1에서 10 사이의 랜덤한 정수값 구하기 function getRandomNumber(min, max) {..

불쾌감을 줄 수 있는 단어 필터링하기 이번 포스팅에서는 웹 사이트나 애플리케이션에서 사용자 입력의 안전성을 확보하기 위한 HTML 욕설 필터링에 대해 알아보겠다. 사용자들에게 쾌적하고 안전한 온라인 환경을 제공하는데 도움이 되는 이 기술은 온라인 커뮤니티나 웹 사이트 운영에 필수적이다. HTML 욕설 필터링은 사용자들이 웹 사이트의 텍스트 입력 필드를 통해 제출한 내용을 감시하고, 욕설이나 불쾌한 내용을 식별하여 차단하는 기능을 말한다. 이렇게 함으로써 불쾌한 콘텐츠를 제한하여 온라인 상에서의 협조와 문화를 증진시키고, 사용자들의 경험을 개선하는데 기여한다. 이를 구현하기 위한 가장 간단한 예시 코드를 제시해 드리겠다. 아래의 HTML 코드는 사용자 입력을 받는 폼과 필터링된 결과를 보여주는 div 요소..

개발을 하다보면, int = KH1, KH2, KH3...등등 여러가지 변수가 필요할 때가 있다. 이럴 때에는 모두 하나하나 바꾸기보다는, ChatGPT를 잘 활용하여 복잡한 변수 수정 시간을 매우 획기적으로 줄일 수 있다. 프로그래밍에서 반복적인 작업은 개발자들에게 항상 거슬리는 일 중 하나이며, 특히, 긴 코드에서 여러 변수 이름을 바꿔야 할 때는 매우 번거로운 작업이 될 수 있다. 이러한 상황에서, 챗GPT와 같은 강력한 언어 모델을 활용하여 자동화된 방법으로 변수 이름을 변경할 수 있다. 이 블로그에서는 챗GPT를 활용하여 변수 이름을 자동으로 바꾸는 방법에 대해 알아보겠다. 여기에서는 자바스크립트 코드 예시를 바탕으로, 기존 변수 이름을 새로운 이름으로 한 번에 대치하는 방법을 소개한다. 이러한..

더보기 자바스크립트로 백그라운드에서 웹 푸시 알림 전송하기 // 서비스 워커 등록 if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register('service-worker.js') .then(function(registration) { console.log('서비스 워커 등록 성공:', registration.scope); }, function(err) { console.log('서비스 워커 등록 실패:', err); }); }); } // 오후 11시에 실행될 함수 function sendNotification() { // 사용자가 알림을 허용한 경우에만 실행 ..

여기에 장문을 입력해주세요. 변환! 버튼이 태그 안에 있다면 로 바꿔주자.

Show Text

마우스를 가져오면 색깔이 변합니다. 마우스를 가져오면 배경색이 변합니다.

https://gurtn.tistory.com/168 [JS] 자동으로 글자 적는 타이핑 효과 구현하기 JavaScript를 이용하여 간단한 typing 효과를 구현할 수 있습니다. 전체 코드 See the Pen Text Typing Effect by hyukson (@hyukson) on CodePen. 코드 풀이 텍스트가 입력될 요소를 하나 생성해줍니다. // 텍스트 요소 c gurtn.tistory.com const $text = document.querySelector(".text"); // 글자 모음 const letters = [ "HTML", "CSS", "JavaScript" ]; // 글자 입력 속도 const speed = 100; let i = 0; // 타이핑 효과 const ty..

HTML+JS에 사용할 수 있다. 가장 간단히 위의 문을 사용할 수 있다. const getBrowserHiddenProps = () => { let hidden, visibilityChange if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = ..