본문 바로가기

JavaScript228

[Javascript] 다운로드 이미지 미리보기 만들기 오늘은 이미지 다운로드 미리보기를 만들어보겠습니다. 오늘 알아볼 JavaScript 속성 download 속성은 태그가 링크된 리소스를 다운로드하기 위해 사용됩니다. 이 속성에 값(이 경우 'downloadedImage.jpg')을 지정하면, 사용자가 링크를 클릭할 때 해당 파일이 다운로드됩니다. 여기서 지정된 값은 다운로드될 파일의 이름을 나타내며, 사용자의 디바이스에 저장될 때 이 이름을 사용합니다. download 속성이 빈 문자열이거나 설정되지 않으면, 원본 파일 이름이 사용됩니다. 하지만 특정 값을 제공하면, 그 값이 다운로드 파일의 이름으로 사용됩니다 appendChild appendChild 메서드는 한 노드(여기서는 태그)를 특정 부모 노드의 자식으로 문서에 추가합니다. 이 경우 docum.. 2024. 3. 5.
[JavaScript] 마우스 이펙트 만들기 웹 서핑을 하다 보면 다양한 웹사이트와 블로그에서 창의적이고 매력적인 마우스 이펙트를 종종 보게 됩니다. 이러한 이펙트는 웹사이트에 생동감을 더하고, 사용자 경험을 향상시키는 데 큰 역할을 합니다. 오늘은 바로 그런 마우스 이펙트를 자바스크립트로 만들어 볼 것입니다. 마우스 이펙트는 웹사이트의 인터페이스에 독특한 터치를 추가하며, 사용자의 상호작용을 더 재미있고 몰입감 있게 만듭니다. 예를 들어, 마우스 커서를 따라 움직이는 애니메이션 요소, 클릭 시 흩어지는 효과, 마우스의 움직임에 반응하는 배경 등 다양한 형태가 있습니다. 자바스크립트는 이러한 동적인 이펙트를 생성하는 데 아주 적합한 언어입니다. HTML과 CSS와 함께 사용하여, 웹 페이지에 독특하고 상호작용적인 요소를 쉽게 추가할 수 있습니다. .. 2024. 2. 25.
[JavaScript] OpenWeatherMap API 사용하여 입력한 도시의 향후 5일 동안의 날씨 예보 정보 가져오기 안녕하세요 오늘은 OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드를 만들어보겠습니다. OpenWeatherMap API 를 사용하려면 https://openweathermap.org/ 에서 무료로 api 키를 발급받아야 합니다. api키를 발급 받은 후 index.html 파일에 다음과 같이 코드를 작성해줍니다. 5일 날씨 예보 예보 조회 그다음 script.js 파일에 다음과 같이 코드를 작성해 줍니다. async function fetchForecast() { let city = document.getElementById('city-input').value.trim(); if (city) { let apiKey = '발급받은 자신의 API 키'; // OpenWeatherMap .. 2024. 2. 21.
[JavaScript] OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드 만들기 안녕하세요 오늘은 OpenWeatherMap API 사용하여 간단한 날씨 정보 대시보드를 만들어보겠습니다. OpenWeatherMap API 를 사용하려면 https://openweathermap.org/ 에서 무료로 api 키를 발급받아야 합니다. api키를 발급 받은 후 index.html 파일에 다음과 같이 코드를 작성해줍니다. 날씨 정보 대시보드 날씨 조회 그다음 script.js 파일에 다음과 같이 코드를 작성해 줍니다. async function fetchWeather() { console.log('fetchWeather') let city = document.getElementById('city-input').value.trim(); if (city) { let apiKey = '발급받은 내.. 2024. 2. 12.
[JavaScript] 블록 익스플로러에 비트코인 조회 기능 추가하기 https://stickode.tistory.com/1016 https://stickode.tistory.com/1023 이전 게시글들에 이어 이더리움 익스플로러에 비트코인 조회 기능을 추가해서 여러 블록체인을 조회할 수 있는 블록익스플로러로 확장해보겠습니다. infura key 같은 경우는 위 게시글을 참고하시면 쉽게 하실 수 있습니다. 여기부터는 프로젝트 파일 구조 및 코드입니다 index.html Cryptocurrency Block Explorer Ethereum Block Lookup Get Ethereum Block Ethereum Transaction and Account Lookup Get Transaction Get Balance Get Current Ethereum Gas Price B.. 2024. 1. 9.
[JavaScript] DeepLink 사용해서 유튜브 앱 열기 안녕하세요. 오늘은 모바일 브라우저에서 Deeplink를 이용해 유튜브 앱을 열어보겠습니다. 유튜브외에도 다른 앱들도 가능하며, 직접 제작한 앱도 Intent-filter 설정으로 실행이 가능합니다. html 파일을 만들고 코드를 작성하겠습니다. DOCTYPE html> Open YouTube App 유튜브 앱 열기 document.addEventListener('DOMContentLoaded', function() { document.getElementById('openYouTubeButton').addEventListener('click', function() { openYouTubeApp(); }); function openYouTubeApp() { // 유튜브 앱을 열기 위한 Deeplink va.. 2024. 1. 6.
[JavaScript] 이더리움 익스플로러에 조회 기능 추가하기 저번 게시글(https://stickode.tistory.com/1016)에 이어서 오늘은 이더리움 블록익스플로러에 트랜잭션과 계정의 잔액, 그리고 현재 가스 가격을 조회하는 기능을 추가했습니다. 프로젝트 구조 코드 app.js // app.js const express = require('express'); // Express 모듈 불러오기 const app = express(); // Express 애플리케이션 생성 const { Web3 } = require('web3'); // Web3 모듈 불러오기 const web3 = new Web3('https://mainnet.infura.io/v3/발급받은 키'); // Infura를 통해 이더리움 메인넷에 연결 // BigInt 값을 문자열로 변환하여.. 2024. 1. 4.
[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] Phaser 에서 마우스 클릭으로 캐릭터 이동하기 안녕하세요 이번 시간에는 Phaser로 만든 게임에서 마우스 클릭한 위치로 캐릭터 이동하는 예제를 진행하겠습니다. Phaser로 간단한 게임을 만들고 싶으시면 아래 링크를 참고해주세요 https://stickode.tistory.com/943 1. 전체 코드 전체 코드입니다. 2. 결과 2023. 11. 27.

티스토리툴바