JavaScript228 [JavaScript] CoinGecko API 와 chart api를 사용하여 기간에 따른 암호화폐 가격 변동을 라인 차트로 표시하기 보호되어 있는 글 입니다. 2024. 3. 28. [JavaScript] 탭 레이아웃 만들기 오늘은 자바스크립트를 활용하여 탭 레이아웃을 만들어 보겠습니다. 코드입니다. DOCTYPE html> 탭 레이아웃 예제 Tab 1 Tab 2 Tab 3 Tab 1 Tab 1의 내용입니다. Tab 2 Tab 2의 내용입니다. Tab 3 Tab 3의 내용입니다. function openTab(evt, tabName) { // 모든 탭 콘텐츠를 숨깁니다. var tabcontent = document.getElementsByClassName("tabcontent"); for (var i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } // 모든 탭 링크에서 "active" 클래스를 제거합니다. var tablinks = do.. 2024. 3. 24. [JavaScript] 리뷰 만들기 오늘은 리뷰만들기를 해보겠습니다. 다음은 app.js파일의 설명입니다. 1. reviews 배열은 리뷰 데이터를 저장합니다. 각 리뷰는 사람의 이름, 직업, 이미지 URL, 그리고 리뷰 텍스트를 포함하는 객체입니다. 2. document.getElementById와 document.querySelector를 사용해 HTML 문서의 요소들을 선택합니다. 3. window.addEventListener('DOMContentLoaded', function () {...}); 코드는 문서의 로딩이 완료되었을 때 초기 리뷰를 화면에 표시하기 위해 사용됩니다. 4. showPerson 함수는 주어진 person 인덱스에 해당하는 리뷰 정보를 UI에 표시합니다. 5. nextBtn, prevBtn, randomBtn.. 2024. 3. 23. [JavaScript] Bootstrap 버튼 클릭 스크롤 위치 이동 기능 만들기 안녕하세요. 이번 예제에서는 Bootstrap을 사용하여 버튼 클릭시 스크롤 위치 이동하는 기능을 만들어보겠습니다. 이 기능을 Scrollspy 라고 합니다. 1. Scrollspy란? Scrollspy는 웹 페이지에서 스크롤 이벤트를 사용하여 사용자가 스크롤할 때 특정 섹션 또는 요소가 화면에 보이는지 감지하는 기능입니다. 이를 통해 페이지 내 탐색을 돕고 사용자 경험을 향상시킬 수 있습니다. 주로 단일 페이지 애플리케이션(SPA) 또는 긴 페이지가 있는 웹사이트에서 사용됩니다. 2. 전체코드 Item 1 Item 2 Item 3 Item 4 Item 1 부트스트랩은 HTML, CSS, JavaScript로 구성된 가장 인기 있는 오픈 소스 프론트엔드 프레임워크 중 하나입니다. 트위터에서 만들어졌으며,.. 2024. 3. 22. [JavaScript] CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화하기 안녕하세요 오늘은 CoinGecko API 와 chart api를 사용하여 암호화폐 시장 데이터를 실시간으로 받아와 차트로 시각화 해보겠습니다. 다음은 index.html 의 코드입니다 Crypto Market Data Bitcoin Ethereum Litecoin Show Data 다음은 script.js 의 코드입니다. // 전역 변수로 차트 인스턴스를 저장 let myChart; document.getElementById('show-data').addEventListener('click', async () => { const cryptoCurrency = document.getElementById('crypto-select').value; const ctx = document.getElementBy.. 2024. 3. 19. [JavaScript] 카운터 만들기 오늘은 카운터 만들기를 해보겠습니다. 이해를 돕기위해 알아야 할 내용은 1. html의 클래스로는 여러개의 클래스 명들이 들어올 수 있다. 2. `.` 과 `#`은 CSS선택자 입니다. `#`은 id선택자 `.`은 클래스 선택자입니다. 3. document.querySelectorAll(".btn")는 클래스 속성이 btn인 모든 요소를 찾아서 반환합니다. 4. btn.addEventListener("click", function (e) { ... }) 의 function (e) { ... } 는 이벤트가 발생했을 때 실행할 함수를 정의합니다. `e` 이벤트 객체로, 이벤트에 대한 정보를 담고 있습니다. 4.1. e.currentTarget 은 이벤트 리스너가 부착된 요소를 가리킵니다. 5. e.curr.. 2024. 3. 17. [JavaScript] 웹페이지 로딩화면 안녕하세요 오늘은 자바스크립트를 활용해서 웹페이지 로딩화면을 만들어 보겠습니다. 오늘 배워볼 자바스크립트 메서드입니다. setTimeout JavaScript에서 제공하는 내장 함수로, 특정 함수나 코드를 지정된 시간이 지난 후에 한 번 실행하도록 예약합니다. 이 함수는 비동기적으로 작동하며, 지정된 대기 시간(밀리초 단위)이 경과한 후에 콜백 함수를 실행시킵니다. 코드입니다. DOCTYPE html> 로딩 화면 예제 로딩 중... 페이지 로드 완료! document.addEventListener('DOMContentLoaded', function() { setTimeout(function() { document.getElementById('loadingScreen').style.display = 'no.. 2024. 3. 14. [JavaScript] CoinGecko API를 사용하여 현재 특정 가상화폐의 KRW 가격을 조회하여 나타내기 안녕하세요 오늘은 CoinGecko API를 사용하여 현재 특정 가상화폐의 KRW 가격을 조회하는 기능을 구현해보도록 하겠습니다. index.html 파일에 다음과 같이 코드를 작성해줍니다. Crypto Price Checker Bitcoin Ethereum NEAR Check Price script.js 에 다음과 같이 코드를 작성해줍니다. // 'Check Price' 버튼에 클릭 이벤트 리스너 추가 document.getElementById('check-price').addEventListener('click', async () => { // 선택된 가상 화폐를 가져옴 const cryptoCurrency = document.getElementById('crypto-select').value; //.. 2024. 3. 10. [Javascript] Color Flipper 만들기 오늘은 Js를 이용해 Color Flipper을 만들겠습니다. app.js파일은 고정된 수의 색상값이 있고, 이 중에서 하나를 무작위로 골라 배경색과 텍스트를 업데이트하는 코드입니다. hex.js파일은 무작위 16진수 색상을 생성하고 배경색과 텍스트를 업데이트하는 코드입니다. index.html color flipper simple hex background color : #f1f5f8 click me app.js const colors = ["green", "red", "rgba(133,122,200)", "#f15025"]; // 색상 배열을 정의합니다. 이 배열의 색상들은 배경색으로 사용됩니다. const btn = document.getElementById("btn"); const color = .. 2024. 3. 8. 이전 1 ··· 6 7 8 9 10 11 12 ··· 26 다음
