자바스크립트 예제14 타이핑 게임 ( setInterval, axios.get() 등 ) 새로운 지식보다는 게임이라서 로직에 빠져들어야 했다. +_+ 좋은 예제 Math.floor(Math.random() * array.length) buttonChange 1. 버튼 비활성화 상태에서 시작 2. axios 로 데이터 다운 후, 활성화 ::: removeChild('loading') # 버튼 동작 (비활성화- loading 후 활성화) - cursor: pointer; - cursor: not-allowed; #ccc ## 종료->게임오버?(초기화) # 타임아웃시 동작?? 클리어인터벌, 그리고??? 시간 초기화. 다시 스타트 # run() 1)getWords() -> buttonChange(게임시작) 2)실시간으로 상태체크 :checkInterval = setInterval(checkStatu.. 자바스크립트 예제 2023. 1. 21. js 타이머 업그레이드 + 할 일 + 시계 + 오디오 붙이기 타이머 디자인에 감동 받으며 따라했다가, 일상 프로그램으로 업데이트해서 실사용하기로 했다. Nas 에 올려놓고, 가족들이 사용하는 앱으로 만들기로 했다. 쉽게 생각했는데, 와우... 이것만 해도 엄청 복잡했다. Todo, Clock, 위치와 온도는 전에 Nomad 코더 따라하면서 했던것을 거의 복/붙 했다. 투두 리스트 로컬 스토리지 조작: 다시 스터디 후, 기능 업그레이드. 드래그 앤 드롭으로 구현하기. 오디오 객체 asmr 을 만들다가, 오디오 객체 다루면서... 주화 이비마에 빠져들었다. 오디오 객체 처음 다루면서, 뜬금없이 욕심이 나서, 나스에 아파치가 작동하고 있어서, 이걸 이용해보기로 했다. 네트워크 드라이브에 노래를 넣는다 -> php 에서 디렉토리를 읽은 후, json 형식으로 쏴준다. 오.. 자바스크립트 예제 2023. 1. 6. js ToDo 앱 : 로컬스토리지 저장/삭제 노마드 코더 ToDo 와 유사 https://www.youtube.com/watch?v=Ttf3CEsEwMQ 자바스크립트 예제 2023. 1. 5. 15개의 JavaScript 프로젝트 빌드 - 바닐라 JavaScript 코스 강의가 무려 8시간이 넘는 거였어... 덜덜 https://www.vanillajavascriptprojects.com/ Javascript Projects || John Smilga Javacript Projects Projects are the most practical way to learn any language, and Javascript is no exception. Solidify your knowledge of Javascript by creating these cool projects. join the course www.vanillajavascriptprojects.com https://www.youtube.com/watch?v=3PHXvlpOkf4 자바스크립트 예제 2023. 1. 5. JS 타임앤타이머 2) +-5분 추가. ToDo , 날씨 추가 지금까지 웹사이트 전체를 만들겠다. ERP 수준, 쇼핑몰 수준을 생각하다 보니, 지식이 모두 파편적이다 보니, 휘발성이 너무나 강했다. 그래서, 실제로 내가 사용할 수 있는 프로그램으로 만들면서, 아 이런거 있으면 좋을텐데,,,, 하는 것을 구현하면서 공부하기로 했다. 실용성 1. 알람 (정각 알람, 타이머, 현재 시간 등)) 대표적으로 시간관리, 투두 관리도 내가 원하는 대로. 2. asmr 플레이어 asmr 도 찾아서 듣는 것이 아니라, 미리 배정을 해놓는 것이다. 실시간 라디오 방송도? 3. 나만의 ToDo 투두 리스트를 큰 두 분류로 작성하게 한다. (즉시 할일, 오늘 할 일, 완료, 대기) 삭제, 수정, 분류 변경 추가. 드래그앤드롭 추가 4. DB와 서버 작업 일단은 로컬 스토리를 이용하지만,.. 자바스크립트 예제 2023. 1. 4. new Audio() 사용 Audio객체는 play()가 호출되어 재생이 시작 되면, 끝까지 재생이 완료되기 전에는 반복 호출하여 재생할 수 없다. 아래 코드는 for문으로 Audio객체.play()를 10회 반복 호출하지만, 브라우저에서 실행해보면 단 한번만 재생된다. (크롬을 제외한 브라우저에서 실행해보시길. 크롬은 사용자의 액션이 없는 상태에서의 오디오 자동재생이 금지되어 있다) 그러나 경우에 따라서는 동일한 음원 파일을 연달아 바로 재생해야할 때가 있다. 특히 게임 개발 중에는 미사일을 발사할 때마다 효과음이 중첩 재생되어야 한다. 필요할 때마다 매번 새로운 Audio 객체를 생성하여 재생하는 것도 방법이지만, 이 경우 Audio 리소스 로드에 시간이 걸려서 딜레이가 발생할 수 있다. 가장 좋은 방법은 미리 여러개의 Aui.. 자바스크립트 예제 2023. 1. 4. js 타임앤타이머 기록 (1) https://velog.io/@hanganda23/구글-타이머-JS로-만들기 자바스크립트로 구글 타이머 만들기 타이머 만들기 velog.io 이 글 무심코 봤다가, html, css, js 모두 기초 밖에 몰라서, 연습해보기로 함. 기능 추가해볼까? 5분 추가, -5분 추가 기능 처음부터가 아니라, 현재 지난 시간( 남은 핀수 또는 제거된 핀 수) 에 더하기. 음성 녹음 기능. 일정 시간 후, 녹음한 메세지 (? 회) 재생 위치 기반 오늘의 날씨. 주요 뉴스? 현재 시간에서 시간과 분 사이 : 깜빡이기 3항 연산자로 초((가 홀/짝 일 때마다 : 표시하고, 표시안하기 ${ss % 2 ? ` ` : `:`} let textTime = `${hh < 10 ? `0${hh}` : hh}${ss % 2 ? `.. 자바스크립트 예제 2023. 1. 3. 디지털 시계 : new Date() -> getMonth()+1, getDate(), getDay() const todayDiv = document.getElementById("today"); const nowDiv = document.getElementById("now"); const timeDiv = document.getElementById("time"); nowDiv.textContent = "new Date()"; todayDiv.textContent = "날짜"; timeDiv.textContent = "시간"; function getTime() { // console.log("getTime 테스트"); // const WEEKDAY = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; const WEEKDAY = ["일", "월", "화", "수", .. 자바스크립트 예제 2022. 12. 31. 스톱워치 + 타이머 예제 (setInterval & clearInterval) 유튜브 유노코딩 예제 : https://www.youtube.com/@user-mr8co8gy4p/featured 상당히 쉽게 설명하고, 예제가 좋다. 약간의 응용으로 타이머 추가. 00 : 00 : 00 스톱워치(시작) 정지 리셋 3min 5min 10min @font-face { font-family: 'LABDigital'; font-weight: normal; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/fontlab/LABDigital.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/fontlab/LABDigital.eot?#iefix') format('emb.. 자바스크립트 예제 2022. 12. 31. [노마드코더] snowflake 노마드 코더 짱이야. 노마드 코더 강의는 참으로 잘 짜여져있어. 그냥 대충 라이브로 떼우는 강의들과 비교하면 기분 상할꺼임. 노마드 코더 만세. body { background-color: black; } .snowflake { width: 8px; height: 8px; border-radius: 50%; background-color: white; animation: fall 10s linear; /* name-duration-linear일정속도 */ /* Math.random() * 20+최소_동작시간으로 */ position: absolute; top : 1px; } @keyframes fall { from {} to { transform: translateY(100vh); opacity: 0; .. 자바스크립트 예제 2022. 12. 30. 노마드 ToDo ( javascript - react) 리액트 input value 추출, 배열에 요소 추가, map 으로 리스트 꺼내서 보여주기 1. 입력값 알아내기 onChange 로 인풋 value 를 알아낸다. 2. onSubmit 시, 현재 toDo 를 기존 toDos 에 추가. : 배열 앞에 추가하기 위해 ( ... 스프레드 연산자 이용) submit 기본 동작(새로고침)을 막자. 입력없이, submit 하면 무시. submit 동작 끝에, 인풋박스를 공백으로 만든다. 3. toDos 배열을 화면에 보여주기 toDos 리스트를 map 으로 를 붙여서 loop 4. toDos 리스트에서 요소 삭제 1) 할 일 리스트 (삭제) 클릭 : ()=>deleteToDo(index) 2) toDos 배열.filter(삭제클릭한 인덱스가 아닌 것들로 필터 적용).. 자바스크립트 예제 2022. 12. 17. js 예제: clock - todo_list_날씨받기 노마드 코더 자바스크립트 입문 강의에 찬사를 보낸다. 정말 이 강의는 구성이 천재적이다. 딥다이브 ES6 까지 완료 후, 처음부터 2회독을 시작할까? 고민이 있었다. Array ~ DOM ~ 등은, 비동기 setTime, 콜백, fetch, promise, async 등은 실용적인 쉬운 예제들로 학습하기로 계획을 바꿨는데, 휴 다행이였다. 특히, 간단한 예제를 하면서, html css 를 지금껏 기초도 모른채 사용했다는 생각에, 주요 css 도 들여다보며, 연습하는 계기가 됐다. 여러 예제 중, 이론적으로는 생활코딩의 비동기 강의가 좋았고, 노마드코더의 바닐라 자바스크립트 강의. 이런 강의가 무료라니. 헐. 영어에 자막이라는 부분이 거부감이 있었으나, 오히려 코드에 더 집중하는 결과? ^^ 유튜브 풀스택.. 자바스크립트 예제 2022. 11. 6. 이전 1 2 다음