JavaScript168 [javascript] setTimeout()사용하여 타이핑 효과 주기 안녕하세요! 오늘은 Javascript와 css를 사용하여 화면에 타이핑 효과를 주어 아래 처럼 보여줄 수 있도록 해보겠습니다. 이전에 작성했던 @keyframe에 대한 개념(https://stickode.tistory.com/814) 과 함께 setTimeout() 메서드를 사용할 예정입니다. 1.setTimeout() setTimeout() : 일정 시간이 지난 후에 함수를 실행하는 전역 호출 스케줄링 메서드. 1.(문법) let timerId = setTimeout ( func | code ,[delay],[arg1],[arg2], ...); 2. (파라미터 설명) func | code : 실행하고자 하는 코드로, 함수 또는 문자열 형태입니다. 대개는 이 자리에 함수가 들어갑니다. 하위 호환성을 위.. 2023. 9. 1. [JavaScript] 브라우저에서 동작하는 오목게임 만들기 - 기본편 웹브라우저에서 동작하는 오목게임입니다. JS의 기본적인 동작을 파악하기 쉽도록 제작하였습니다. 감사합니다. 게임 초기화 2023. 8. 31. [JavaScript] 폼 요소 이벤트 정리 및 예제 안녕하세요. 자바스크립트는 마우스 이벤트, 키보드 이벤트, 폼요소 이벤트 등 많은 종류의 이벤트가 있는데요, 오늘은 이벤트 종류 중에서 Form 태그와 함께 사용되는 폼 요소 이벤트를 정리하고, 해당 이벤트들에 대한 예제를 만들어보려고 합니다. 1. 이벤트란? 우선 자바스크립트의 이벤트가 무엇일까요? 모던자바스크립트와 모질라 사이트에서는 이벤트에 대해 아래와 같이 설명하고 있습니다. 이벤트(event)는 무언가 일어났다는 신호입니다. 모든 *DOM *노드는 이런 신호를 만들어 냅니다. 참고로, 이벤트는 *DOM에만 한정되진 않습니다. 출처: https://ko.javascript 이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생한 것(occurrence).. 2023. 8. 27. [JavaScript] Canvas로 클릭 이벤트를 받아 애니메이션 만들기(+루프) 안녕하세요. 지난 시간 canvas를 이용해 원을 이동시켰다면 오늘은 클릭 이벤트를 받아 시작과 정지를 만들고 원이 끝에 도착했을 때 다시 원점으로 돌아가 시작하는 기능을 만들어 보겠습니다. 먼저 지난 시간 예제의 링크입니다. https://stickode.tistory.com/886 html 파일 코드 입니다. DOCTYPE html> Document const canvas = document.getElementById("myCanvas"); //그리기객체 const context = canvas.getContext("2d"); let move_ev = false; // 시작 좌표 let x = 0; let ani; // 애니메이션 function MoveCircle(){ //캔버스 지우기 contex.. 2023. 8. 22. [Javascript] localStorage를 활용한 메모 애플리케이션 안녕하세요 이번 포스트에서는 JavaScript와 localStorage를 활용하여 간단한 메모 애플리케이션을 만들어보겠습니다. localStorage를 사용하면 웹 브라우저에서 데이터를 영구적으로 저장할 수 있으므로, 페이지를 새로고침해도 메모가 유지됩니다. 사용자는 입력 필드에 메모를 작성하고 추가할 수 있으며, 추가된 메모는 화면에 표시됩니다. 또한, 각 메모 옆에는 삭제 버튼이 있어 메모를 삭제할 수 있습니다. 이를 통해 JavaScript와 localStorage 의 기능을 익히고, 실제로 활용할 수 있는 예제를 만들어보겠습니다. localStorage는 웹 브라우저에서 제공하는 클라이언트 측 데이터 저장소입니다. 이를 사용하면 웹 애플리케이션에서 데이터를 영구적으로 저장하고 유지할 수 있습니다.. 2023. 8. 13. [JavaScript] 스크롤 시 고정 헤드 배경 영역 내려 가시성 높이기 안녕하세요 오늘은 js에서 css에서 적용가능한 변수를 선언하여 이를 이용해 상단 고정 헤드 + 스크롤이 내려가면 반응하여 하얀색 영역이 내려올 수 있도록 해보겠습니다. 사용할 것은 setProperty() 메서드 입니다. 이에 대해 간략히 알아보겠습니다. 사용법은 아래와 같습니다. setProperty(propertyName, value) setProperty(propertyName, value, priority) 메서드에 들어가는 파라미터 설명입니다. propertyName = 수정할 CSS 속성 이름(하이픈 대소문자)을 나타내는 문자열입니다. value (옵션) = 새 속성 값을 포함하는 문자열입니다. 지정하지 않으면 빈 문자열로 처리됩니다. priority (옵션) = CSS 우선 순위를 설정할 .. 2023. 8. 12. [JavaScript] 스크롤 위치에 따라 메뉴바 변경하기 안녕하세요. 이번시간에는 자바스크립트를 활용해 스크롤 위치에 따라 메뉴바를 다르게 보이게 하는 법을 알아보려 합니다. 웹사이트에서는 디자인에 따라 하나의 메뉴바만 있는게 아니라 중간 중간에 메뉴바가 있는 경우도 있는데요. 위의 사이트처럼 스크롤을 하다 어느 정도 위치부터는 중간에 위치한 메뉴바가 상단에 고정되는 형태를 만들어보려 합니다. 우선 기능을 구성하는 ui들입니다. 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 메뉴7 메뉴8 예제에서는 top-menu (맨 위 메뉴), content (첫번째 content 영역), middle_menu (중간의 메뉴), content2 (두번째 content 영역)으로 구성되어 있습니다. 이 포스팅에서는 메뉴바의 위치에 따른 변화가 중점이므로 메뉴바 ui의 경우 비교.. 2023. 8. 10. [Javascript] canvas로 애니메이션 만들기 안녕하세요. 오늘은 canvas 위에 원을 그려 애니메이션을 추가하겠습니다. DOCTYPE html> Document const canvas = document.getElementById("myCanvas"); //그리기객체 const context = canvas.getContext("2d"); // 시작 좌표 let x = 0; // 애니메이션 function MoveCircle(){ //캔버스 지우기 context.clearRect(0, 0, canvas.width, canvas.height); // 원 생성 context.beginPath(); context.arc(x, 150, 10, 0, Math.PI * 2, false); context.fill(); //x좌표값 추가함으로서 이동시키기 x .. 2023. 8. 7. [Javascript] 스크롤 이벤트를 활용한 동적 요소 표시 안녕하세요! 이번 포스팅에서는 자바스크립트의 스크롤 이벤트를 활용하여 웹 페이지에서 스크롤에 따라 동적으로 요소를 표시하는 예제를 소개하려고 합니다. 스크롤 위치에 따라 나타나고 사라지는 요소를 구현하면서 자바스크립트 이벤트 처리 및 CSS 스타일링을 함께 다루어보겠습니다. 이 예제는 웹 페이지의 스크롤 위치에 따라 보여지거나 숨겨지는 요소를 구현합니다. 스크롤 위치가 화면의 1/3 위치를 넘어가면 요소가 나타나고, 화면의 2/3 위치를 넘어가면 요소가 다시 숨겨집니다. 또한 스크롤 높이를 동적으로 요소에 표시하여 사용자가 현재 스크롤 위치를 확인할 수 있도록 구현되었습니다. 전체코드 입니다. index.html DOCTYPE html> 스크롤 이벤트 예제 /* 요소 스타일 */ #element { wi.. 2023. 8. 2. 이전 1 ··· 3 4 5 6 7 8 9 ··· 19 다음
