javascript33 [Javascript] 자바스크립트로 5초 마다 변경되는 배너 만들기 안녕하세요. 오늘은 Javascript 를 이용하여 5초 마다 배너가 변경되도록 만들어 보겠습니다. 다음은 index.html 코드 입니다. 위와 같이 코드를 작성하면 다음과 같은 결과를 확인 할 수 있습니다. 2024. 4. 18. [Javascript] chart.js 를 사용하여 선 그래프 그리기 안녕하세요 오늘은 chart.js 라이브러리를 이용하여 선 그래프를 그려 볼려고 합니다. index.html 파일에 다음과 같이 코드를 작성해줍니다. 위와 같이 코드를 작성하면 다음과 같은 결과를 얻을 수 있습니다. 2024. 4. 9. [JavaScript] 브라우저에서 동작하는 지뢰찾기 만들기 - 기본편 간단한 지뢰찾기 게임입니다. 아래 코드 복사하시고 IDE가 제공하는 웹서버로 실행해보시면 바로 작동합니다. 유저가 승리하는 경우는 아직 구현 못했으며 깃발 표시기능은 구현하였습니다. 감사합니다. 2023. 9. 22. [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 ] Lodash 라이브러리 사용해보기. 안녕하세요, 오늘은 Lodash 라는 라이브러리를 사용해보겠습니다. Lodash는 자바스크립트 라이브러리로 객체, 배열 등의 데이터의 구조를 쉽게 변환하여 사용하게끔 도와주며, _ 라는 기호를 사용하여 lodash 라고 라이브러리명이 지어진 것 같습니다. 데이터를 다룰 때 복잡한 자바스크립트 코드 대신에 이 라이브러리를 사용함으로써 좀더 효율적인 코드를 작성할 수 있게 됩니다. 설치방법 : - CDN 사용 https://www.jsdelivr.com/package/npm/lodash - npm 사용 npm install --save lodash 먼저 간단한 예제를 통해 Lodash 라이브러리를 사용해보겠습니다. 다음은 fruits 라는 배열에서 값이 '복숭아'인 요소를 제거한 후 나머지 요소들을 출력하는.. 2022. 12. 2. [JavaScript] 현재시각 표시하기 안녕하세요, 오늘은 자바스크립트의 toLocaleTimeString() 메소드를 사용해서 현재 시각을 표시해보겠습니다. toLocaleTimeString() 은 Date 객체의 날짜의 시간 부분을 지역에 맞는 언어 포맷으로 반환하는 메소드입니다. 구현된 예제 시연 화면은 다음과 같습니다. 다음은 예제 전체 코드입니다. 2022. 10. 18. [ HTML / CSS ] 늘어나는 textarea 만들기 오늘은 늘어나는 textarea 를 구현해보겠습니다. 즉, 입력한 글자가 늘어남에 따라 textarea 의 높이도 길어지게 하겠습니다. 전체 시연 영상은 다음과 같습니다. 먼저 다음과 같이 textarea 요소를 body 태그 안에 작성합니다. rows="1" 속성으로 인해서 처음 시작 높이는 1줄이 됩니다. 그리고 oninput 이벤트 속성은 사용자가 요소에 정보를 입력하거나 요소의 값이 변경되면 실행됩니다. 즉, textarea 요소에 사용자가 입력을 할 때마다 해당 textarea의 높이는 스크롤높이와 동일하게 되고, 따라서 textarea의 높이는 고정되지 않고 사용자의 줄바꿈에 따라, 혹은 입력값이 늘어나고 줄어들 때마다 달라지게 됩니다. 영상에서 보이는 것처럼 입력 내용의 길이에 따라 text.. 2022. 8. 21. [Javascript] 작업 시간 측정하기 오늘은 두 가지 방법으로 Javascript에서 작업시간을 측정해보겠습니다. 첫번째 방법은 performance.now() 를 사용하는 방법입니다. 예시 코드입니다. let startTime = performance.now(); // 측정 시작 console.log('측정 시작.'); let sum = 0; for (let i = 1; i 2022. 8. 5. 이전 1 2 3 4 다음
