본문 바로가기

javascript33

[JavaScript] 마우스를 따라다니는 원 만들기 이번시간에는 [JavaScript] 를 사용해 마우스를 따라다니는 원을 만들어보겠습니다. 스틱코드를 즐겨찾기해주세요. https://stickode.com/detail.html?no=2671 스틱코드 stickode.com Html안에 javascript와 css를 구현해주었습니다. 마우스가 원을 따라다니기 위해서는 마우스의 좌표를 알아야합니다. 마우스의 좌표값은 clientX 와 clientY 를 이용해 알 수 있습니다. clientX, clientY는 브라우저 window의 좌표값을 전달합니다.(좌측상단기준) 페이지에서 떨어져있는 좌표값 pageX, pageY와는 다릅니다. 1. 마우스가 움직일때마다의 좌표값은 mousemove event를 .. 2021. 12. 23.
[javascript] 그림판 만들기 안녕하세요! 오늘은 스틱코드로 웹에서 사용할 수 있는, 간단한 그림판을 만들어 그림을 그리고, 지우고, 다운받을수 있는 기능을 만들어 보겠습니다. 소스는 하단 포스팅을 참조 해주세요. https://stickode.com/detail.html?no=2467 스틱코드 stickode.com 그림판은 상단에 그림을 그릴수 있는 canvas 영역, 컬러 펜두께를 선택하는 부분 되돌리기, 지우기, 다운로드 하는 버튼으로 구성이 되어 있습니다. 먼저 board.php에 그림을 그릴수 있는 스케치북인 canvas를 구성하고, 도구부분을 만들어 보겠습니다. - 화면 구성하기 상단에 CSS를 연결해주는 코드를 작성하고 그림판영역, 컬러칩, 컬러피커, 펜굵기조절, 버튼(되돌리기, 지우기, 다운로.. 2021. 9. 25.
[Javascript]TOP버튼 눌러 화면상단으로 스무스 하게 이동하기 이번 포스팅에서는 스크롤생성시 TOP버튼을 눌러 화면상단으로 이동하는 것을 만들어 보겠습니다. [JS]상단으로 이동 TOP버튼 만들기 https://stickode.com/detail.html?no=2450 스틱코드 stickode.com TOP 버튼을 눌러 화면상단으로 이동하기 버튼을 만들어 보겠습니다. Top버튼을 javascript로 만들어 두고 화면마다, 유용하게 사용할수 있습니다. 화면을 스크롤 하기 위해 scene를 두장으로 구성 해봅니다. (스크롤전 노랑배경, 스크롤 후 흰배경) 화면 전환 css는 index.php에 직접 작성합니다. Javascript top btn Top Scroll TOP 버튼의 설정을 자바스크립트로 만들어줍니다. TOP버튼은 스크롤이 생기기전 에.. 2021. 9. 20.
[JavaScript] 구글맵 API 클러스터링 만들기 안녕하세요.~ 이번시간에는 웹 프론트에서 Javascript와 구글맵 API를 이용해서 지도 클러스터링을 만들어 보겠습니다. 스틱코드 (stickode.com/mainlogin.html) 이번에도 역시 빠르게 만들기 위해 스틱코드 플러그인을 사용해서 만들어보겠습니다. 스틱코드는 자주쓰는 코드를 저장해서 쉽고 빠르게 사용할 수 있고, 다른사람들의 코드도 즐겨찾기를 통해 쉽게 내코드로 등록하여 사용할 수 있어 사용하는 사람이 늘어나고, 좋은 코드가 쌓일수록 강력해지는 플러그인 입니다. HTML 설정 스틱코드를 통해 HTML 코드를 설정해주도록 하겠습니다. 스틱코드를 사용하면 다음과 같이 코드가 완성됩니다. (YOUR API KEY 부분에 구글API 키를 넣으시면 됩니다.) HTML 전문입니다. 여기에 CSS.. 2021. 7. 10.
[JavaScript] 빠르게 To Do 리스트 만들기 이번 예제에서는 자바스크립트만을 이용해 To Do 리스트를 만들어보겠습니다. 따라하기 전, 스틱코드에 올라온 자바스크립트로 투두리스트 만들기 코드를 즐겨찾기 해주세요 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 ToDoList-HTML을 입력하면 자바스크립트로 투두리스트를 만들기 위해 필요한 html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 스틱코드로 만든 투두리스트 추가 모두 삭제 다음으로 필요한 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 ToDoList-CSS를 입력하면 자바스크립트로 투두리스트 만들기 - css 코드가 자동완성됩니다. 이제 호출태그로 완성된 코드 중 수정.. 2021. 7. 8.
[JavaScript] 버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기 자바스크립트을 활용하여 CSS 속성을 수정할 수 있습니다. 이를 활용하여, 버튼을 클릭했을 때 웹페이지화면을 다크모드/라이트모드로 전환할 수 있는 예제를 만들어보겠습니다. 먼저, 스틱코드에 올라온 '버튼 클릭으로 웹페이지 다크모드, 라이트모드 설정하기' 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 setWebDisplayAppearance-HTML을 입력하면 예제 구현에 필요한 html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 라이트/다크모드 전환 예제 [사용법] 상단 우측에 있는 버튼을 누르면 다크모드 혹은 라이트모드로 전환할 수 있습니다. 다음으로, 버튼을 누르면 웹페이지가 라이트.. 2021. 6. 26.
[JavaScript] 검색어 자동완성 만들기 안녕하세요.~ 이번시간에는 웹 프론트에서 Javascript를 사용해서 검색어 자동완성 기능을 만들어 보겠습니다. 이번시간에는 서버와의 통신은 이용하지 않고, 클라이언트 측에서만 구현해보도록 하겠습니다. 스틱코드 (stickode.com/mainlogin.html) 이번에도 역시 빠르게 만들기 위해 스틱코드 플러그인을 사용해서 만들어보겠습니다. 스틱코드는 자주쓰는 코드를 저장해서 쉽고 빠르게 사용할 수 있고, 다른사람들의 코드도 즐겨찾기를 통해 쉽게 내코드로 등록하여 사용할 수 있어 사용하는 사람이 늘어나고, 좋은 코드가 쌓일수록 강력해지는 플러그인 입니다. HTML 설정 스틱코드를 통해 HTML 코드를 설정해주도록 하겠습니다. 스틱코드를 사용하면 다음과 같이 코드가 완성됩니다. HTML 전문입니다. 여.. 2021. 6. 23.
[JavaScript] 입력 값 복사해서 다른 입력창에 값 넣어주기 자바스크립트을 활용하여 입력값을 복사해서 다른 입력창에 값을 넣어주는 예제를 만들어보겠습니다. 먼저, 스틱코드에 올라온 '입력된 값 복사해서 붙여넣기' 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 copyInputValue-HTML을 입력하면 이번 예제의 html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 주문고객 정보 보내시는 분: 연락처: 주소: 배송지 정보 주문 고객 정보와 동일 받으시는 분: 연락처: 주소: 다음으로 필요한 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 copyInputValue-CSS를 입력하면 이번 예제의 css 코드 샘플이.. 2021. 6. 14.
[JavaScript] 디지털 시계 만들기 자바스크립트을 활용하여 디지털 시계를 만들어보겠습니다. 먼저, 스틱코드에 올라온 '디지털 시계 만들기' 코드를 즐겨찾기 추가해주세요. 먼저 html 코드를 작성해봅시다. html 파일에서 스틱코드 호출태그인 digitalClockHTML을 입력하면 자바스크립트로 디지털 시계 만드는 html 코드가 자동완성됩니다. 일단 HTML 코드에서는 수정없이, JS 파일과 CSS 파일을 작성해보겠습니다. 다음으로 필요한 css 코드를 작성해줍니다. 이전과 마찬가지로 css 파일에서 스틱코드 호출태그인 digitalClockCSS를 입력하면 자바스크립트 배경색 바꾸기 - css 코드가 자동완성됩니다. 이제 호출태그로 완성된 코드 중 수정이 필요한 부분을 작성해줍니다. 수정이 필요한 부분은 body의 배경색(line 8.. 2021. 6. 2.

티스토리툴바