본문 바로가기

JavaScript224

[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.
[JavaScript] Owl Carousel을 활용한 캐러셀 구현하기 안녕하세요. 이번 시간에는 Owl Carousel이라는 플러그인을 사용하여 캐러셀을 간단하게 구현하려 합니다. 우선 Owl Carousel을 설치해야 합니다. html의 head 태그에 다음과 같은 코드를 넣어주세요. 아래는 전체 예제 코드입니다. 결과 영상입니다. Owl Carousel에 대한 좀 더 자세한 내용은 하단 링크의 공식 홈페이지를 참고해 주세요. https://owlcarousel2.github.io/OwlCarousel2/ 2023. 7. 29.
[JavaScript] Todo list 만들기 안녕하세요 오늘은 js로 투두리스트 만드는 법을 알아보겠습니다. 일전에도 투두리스트에 대해 만든 적이 있는데요 (이전 포스트 참고바랍니다.), 오늘은 이전과 달리 저장은 local Strorage를 사용할 것이고(localStroage포스트 참고) 완료가 될 때마다 게이지로 표시하여 달성률을 시각적으로 보여주도록 해보겠습니다. 완성 시 아래와 같이 동작합니다. 아래는 전체 코드입니다. todo.html 미니 투두리스트 추가 축하합니다! 해야할 일을 모두 완료했습니다. todo.css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } h1 { text-align: center; margin-top: 50px; } form { text-alig.. 2023. 7. 24.
[JavaScript] 텍스트 더보기 및 줄이기 구현하기 안녕하세요. 이번 시간에는 웹 브라우저에 표시되는 텍스트들을 일부만 표시하고 버튼 클릭 이벤트에 따라 표시되는 양을 조절하는 기능을 만들어보려 합니다. 흔히 sns 같은 게시글들을 보면 텍스트가 일정 줄까지만 입력되고 다음부터는 ... 와 같은 형태로 마무리된 뒤, 하단의 더보기 버튼을 클릭할 때 전체 내용을 확인할 수 있게 처리되어 있는 경우가 많은데요. 아래 예제는 이와 유사하게 텍스트가 길어질 경우 일정 길이까지는 ...로 표시한 뒤 더보기를 통해 전체 내용을 볼 수 있게 구현한 코드입니다. 우선 텍스트 내용 예시와 더보기/줄이기 텍스트가 포함된 html 파일입니다. 긴 텍스트 내용이 들어갑니다.긴 텍스트 내용이 들어갑니다.긴 텍스트 내용이 들어갑니다.긴 텍스트 내용이 들어갑니다. 더보기 줄이기 다.. 2023. 7. 14.
[javaScript] contenteditable 속성으로 row 수정,저장하기. 안녕하세요. 이전 포스트에 이어 오늘은 contenteditable 속성을 js로 동적 처리하여 테이블 내에서 수정,삭제할 수 있는 기능을 구현해보겠습니다. contenteditable에 대한 내용은 이전 포스트 참고바랍니다. UI는 이전 포스트와 큰 차이가 없지만, 옵션란이 생겼습니다. css에 font awesome 링크를 import 하여 아이콘들을 사용해 저장,수정,삭제를 나타내보도록 하겠습니다. class를 편집하는 내용은 이 포스트 참고 바랍니다. 아래는 전체 코드입니다. c.html 이름 나이 직업 옵션 김뫄뫄 25 학생 수정 삭제 박뫄뫄 30 사무직 수정 삭제 이뫄뫄 21 학생 수정 삭제 c.css /*fontawesome 아이콘 css 삽입*/ @import url('https://cdn.. 2023. 7. 9.
[JavaScript] C3.js를 활용하여 차트 그리기 안녕하세요. 이번 시간에는 C3.js라는 라이브러리를 활용해서 간단하게 차트를 그리는 방법에 대해 알아보겠습니다. 우선 C3.js 사용을 위해 head에 다음과 같은 CDN 코드를 추가해주세요. 아래의 예제는 일주일간의 최저기온과 최고기온을 꺾은선을 통해 표시하는 차트를 그린 코드입니다. 결과 이미지입니다. 그림처럼 차트에 특정 위치에 마우스 커서를 갖다댈 경우 해당 데이터에 대한 정보가 표시됩니다. 꺾은선 외에도 다양한 모양의 차트를 지원하며 아래와 같이 서로 다른 모양의 두개 이상의 차트를 한번에 표시할 수도 있습니다. 위의 예제에서는 평균 기온을 추가한 뒤 평균 기온의 경우 bar 형태로 표시되게 처리하였습니다. 위 코드에서 보다시피 data의 types 에서 원하는 모양의 차트를 설정해 줄 수 있.. 2023. 6. 29.
[Javascript] target 속성과 closest() 함수를 조합하여 ui 선택하기 안녕하세요. 이번 시간에는 자바스크립트의 target 속성과 closest() 함수를 사용하여 동적으로 추가된 ui를 선택하는 방법을 알아보겠습니다. Event 인터페이스의 target 속성은 이벤트가 발생한 대상 객체를 가리키며, closest() 함수는 현재 element에서 가장 가까운 조상을 반환합니다. 두 가지에 대한 좀 더 자세한 내용은 링크를 참조해 주세요. target : https://developer.mozilla.org/ko/docs/Web/API/Event/target Event.target - Web API | MDN Event 인터페이스의 target 속성은 이벤트가 발생한 대상 객체를 가리킵니다. 버블링과 캡처링 단계에서는 Event.currentTarget (en-US)과 다.. 2023. 6. 14.
[javascript] keyup 사용하여 테이블 검색 기능 만들기 안녕하세요 오늘은 자바스크립트의 'keyup' 을 사용해서 테이블 row들을 탐색하는 검색 기능을 만들어보겠습니다. info.html 검색 이름 국적 소속 성적 담당자 안나 독일 B반 B+ 윤OO 다케시 일본 B반 B- 윤OO 셰인 아일랜드 A반 A+ 김OO 강샤오 중국 C반 A- 박OO 애슐리 미국 B반 B+ 김OO 쳔동 대만 C반 C+ 박OO 다케시 일본 C반 A- 한OO 유코 일본 D반 C+ 한OO info.css /* 전체 테이블 스타일 */ table { width: 70%; margin: auto; /* 뷰포트 중앙에 위치 */ border-collapse: collapse; text-align: center; /* 텍스트 중앙 정렬 */ } /* 테이블 헤더 스타일 */ thead { bac.. 2023. 6. 9.

티스토리툴바