본문 바로가기

JS7

[JavaScript] 이더리움 블록 조회하는 간단한 사이트 만들기 오늘은 이더리움의 블록을 조회하는 간단한 사이트를 만들어보겠습니다. 이번 실습에서는 서버로 node.js를 사용하기 때문에, node.js가 설치 되어 있어야 합니다. 인퓨라(https://app.infura.io/dashboard)로 이동하셔서 로그인 하신 후 API key를 발급받으셔야합니다. web3 api으로 선택하셔서 Ethereum으로 발급된 key를 복사해주세요. 발급받을 때 형식은 'https://mainnet.infura.io/v3/~~~~~~'이라면 정상입니다. 여기부터는 프로젝트 파일 구조 및 코드입니다. index.html Ethereum Block Explorer Get Block app.js // app.js const express = require('express'); con.. 2023. 12. 26.
[JavaScript] 브라우저에서 동작하는 오목게임 만들기 - 실전편 https://stickode.tistory.com/912 저번글은 기본 기능만 있는 오목이었습니다. 이번엔 여러 기능을 더 추가해보겠습니다. 게임 초기화 취소 요청 Player Black Player White 점수: 0 0 취소 요청: 0 0 취소 사용: 0 0 2023. 9. 10.
[JavaScript] 브라우저에서 동작하는 오목게임 만들기 - 기본편 웹브라우저에서 동작하는 오목게임입니다. JS의 기본적인 동작을 파악하기 쉽도록 제작하였습니다. 감사합니다. 게임 초기화 2023. 8. 31.
[javascript] 그림판 만들기 안녕하세요! 오늘은 스틱코드로 웹에서 사용할 수 있는, 간단한 그림판을 만들어 그림을 그리고, 지우고, 다운받을수 있는 기능을 만들어 보겠습니다. 소스는 하단 포스팅을 참조 해주세요. https://stickode.com/detail.html?no=2467 스틱코드 stickode.com 그림판은 상단에 그림을 그릴수 있는 canvas 영역, 컬러 펜두께를 선택하는 부분 되돌리기, 지우기, 다운로드 하는 버튼으로 구성이 되어 있습니다. 먼저 board.php에 그림을 그릴수 있는 스케치북인 canvas를 구성하고, 도구부분을 만들어 보겠습니다. - 화면 구성하기 상단에 CSS를 연결해주는 코드를 작성하고 그림판영역, 컬러칩, 컬러피커, 펜굵기조절, 버튼(되돌리기, 지우기, 다운로.. 2021. 9. 25.
[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] 태그 추가 삭제 기능 빠르게 구현하기 안녕하세요. 웹페이지를 통해서 태그를 추가 삭제하는 기능을 빠르게 구현하는 방법을 공유하겠습니다. 태그를 추가하는 기능은 게시물 작성, 콘텐츠 등록 등 다양한 상황에서 사용되는 기능입니다. 스틱 코드에 등록해놓고 필요할 때마다 불러와 사용하면 빠르게 기능 구현이 가능합니다. stickode.com/detail.html?no=2133 스틱코드 stickode.com 1. 태그 추가 추가할 태그를 입력하고 엔터(Enter)를 누르면 태그가 추가됩니다. 2. 태그 중복 체크 이미 추가된 태그는 중복 체크하여 추가하지 못하도록 처리했습니다. 3. 태그 여러 개 추가 여러 태그를 추가할 수 있습니다. 4. 태그 삭제 삭제할 태그에 마우스를 옮기면 해당 태그만 색상이 변경됩니다. x 버튼을 누르면 태그가 삭제됩니다.. 2021. 5. 28.

티스토리툴바