JERRY의 공부방🔥 JERRY의 공부방🔥

javascript

• [JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 번외편(feat. ES6)

  javascript 2019. 4. 28. 23:18

  안녕하세요, Jerry입니다! 조용한 알람(silence alarm) 웹 앱 만들기가 끝났습니다. 그런데 왜 웹 앱 만들기라는 제목으로 번외를 적냐? 5편 포스팅을 발행한 후 소스를 천천히 보니 마음에 들지 않는 부분이 있어서 코드를 수정을 했고, 수정한 부분을 공유하고 싶어 이렇게 번외 편으로 포스팅을 작성했습니다. 어느 부분인지 코드를 먼저 보고 코드 블록 이후에 설명을 적겠습니다. alarm.js const alarmContainer = document.querySelector('.js-alarm'); const currentTime = alarmContainer.querySelector('h1'); const setTime = alarmContainer.querySelector('input'); ..

  Read More

• [JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 5

  javascript 2019. 4. 27. 19:03

  안녕하세요, Jerry입니다. 우리가 어느새 5편까지 왔어요. 이제 마무리를 해야 하니 전편 소개를 정성 들여 이쁘게 해 볼까 합니다 :D [#1] querySelector( )와 백틱( ` )을 소개합니다. ▶ https://bejerry.tistory.com/15 [#2] setInterval( )과 ES6 맛보기! ▶ https://bejerry.tistory.com/16 [#3] typeof( )와 블록스코프! ▶ https://bejerry.tistory.com/17 [#4] classList 객체와 css 애니메이션 :) ▶ https://bejerry.tistory.com/18 자, 전 시간에 추가했던 CSS, 기억나시나요? 추가한 부분을 기존 alarm.css에서 걷어내고, 새로운 popu..

  Read More

• [JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 4

  javascript 2019. 4. 26. 22:08

  안녕하세요, Jerry의 공부방에서 웹 앱을 만들어보는 시간을 갖고 있는 Jerry입니다. 블로그에 포스트 리스트를 보니 썸네일(대표 이미지)들이 전부 마음에 안 들더라고요. 따로 썸네일용 이미지를 하나 제작하던가 해야겠어요. 벌써 4편입니다. 원래 계획은 3편 안에 끝내는 거였는데 호락호락하지 않네요. 포스팅하는 순간순간마다 추가적으로 무엇이든 설명하려고 해서 그런 것 같습니다 :) 좋은 자세라고 스스로를 위로하고 있습니다. 이전 포스팅들의 링크를 안내하고 시작할게요. 조용한 알람 웹 앱 만들기 - 1, 조용한 알람 웹 앱 만들기 - 2, 조용한 알람 웹 앱 만들기 - 3 입니다. 3편의 소스를 쭈욱 읽어보시고 이해하시는 게 중요한 것 같습니다. 이제 CSS에 코드를 추가하여 색깔이 깜빡이게 해 보아요..

  Read More

• [JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 3

  javascript 2019. 4. 24. 17:48

  안녕하세요, Jerry의 공부방의 Jerry입니다. 3편을 쓰기에 앞서 1편과 2편의 링크를 먼저 걸고 시작하겠습니다. 1편 : 조용한 알람(display alarm) 웹 앱 만들기 - 1(https://bejerry.tistory.com/15) 2편 : 조용한 알람(display alarm) 웹 앱 만들기 - 2(https://bejerry.tistory.com/16) 자, 정리를 간략히 하고 3편 이어 나가겠습니다 :) 1편에선 시간을 구하는 것까지 했습니다. 그리고 2편에선 우리가 멈춘 시간에게 생기를 불어넣어 시계가 움직이게 했죠! 정말 간단한 거지만 결과물을 보면 괜스레 기분 좋습니다 XD 그렇다면, 이번 시간엔 태그에 시간을 입력해서 현재시간과 세팅 시간(input에 사용자가 입력한 시간)이 ..

  Read More

• [JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 2

  javascript 2019. 4. 24. 15:18

  웁웁(!) 돌아왔습니다. 이전에 했던 CSS, HTML 소스는 여기서(https://bejerry.tistory.com/15) 확인 하실 수 있습니다. 이전 소스가 있어야 원할히 따라하실 수 있을 것 같습니다. (누가? 대체 누가 이걸 따라해?) 지난 시간 네, 이전 글에는 시간을 브라우저에 나타내긴 했습니다만 실시간으로 초가 올라가고, 분이 올라가지 않고 멈춰있었습니다. 우리가 필요한건 디지털 시계처럼 시간이 가는걸 브라우저에 나타내야 합니다. 이 때 우리에게 필요한 것은 setInterval( ) 메서드입니다. setInterval( ) mdn(https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)에..

  Read More

• [JavaScript/VanillaJS] 조용한 알람(silence alarm) 웹 앱 만들기 - 1

  javascript 2019. 4. 23. 14:04

  안녕하세요, Jerry입니다. 포스팅에 앞서 조용한 상황을 가정하고 시작해보려고 합니다. 회사나 조용한 곳에서 데스크탑 혹은 노트북으로 일을 보고 있습니다. 알람을 맞춰야 하는데 소리모드로 하자니 주위가 조용합니다. 진동모드로 하자니 제가 진동을 체크 못 할것 같습니다. 그렇다면 시간을 어떻게 맞춰야 할까요? 그래서 생각한 정말 정말 매우 매우 간단한 웹 앱을 하나 만들어보려고 합니다. 이름을 굳이 지어야 한다면, Silence Alarm으로 지어놓고 시작하겠습니다. (혹시 괜찮은 이름 있으면 댓글 남겨주세요 XD) 간단한 웹 앱에 무엇이 필요한지 체크해보겠습니다. 1. 현재 시간 2. (알람이 울릴)설정 시간 3. 새 창 4. 화면 눈에 띄게 깜빡거리기 이 정도면 될 것 같습니다. 설정한 시간이 현재 ..

  Read More

• [JavaScript/VanillaJS] 날짜 계산/날짜 포맷팅(setDate/format/...)

  javascript 2019. 4. 17. 15:42

  날짜를 가지고 코딩을 해야할 때가 있다. 어떻게 해야할까? 생각할 단계엔 짜증난다. 자료를 찾고 코딩을 하며 바뀌는 결과물을 보고 있다보면 재밌어진다. 오늘을 기준으로 3개월 전 날짜를 구해야 할 일이 있었다. 날짜 계산 / date format function init() { var prevDate = formerDate(); //...생략 } function formerDate() { var objDate = new Date(); objDate.setMonth(objDate.getMonth() - 3); // 3개월 전 var formerDate = formatDate(objDate); return formerDate; } /** * @since 2019-04-17 * date format funct..

  Read More

• [JavaScript/VanillaJS] 마우스 오버 및 휠 이벤트 (onmouseover, onmousewheel)

  javascript 2019. 4. 10. 14:29

  저번 포스팅(https://bejerry.tistory.com/8)에 이어서 계속 Sellery.me 클론을 해보려고 노력중입니다. (하루가 지나고 이틀이 지났는데도 성과물이 없다. 여전히 휠 이벤트로 div이동을 못하고 있다ㅠㅠ) 그래도 나름 진전이 있었습니다. HTML JS 일단 내 마우스의 위치가 어떤 div에 있는지를 알아냈습니다. 현재 마우스가 읽을 수 있는 div는 가장 하위의 div(class="section-content")이기 때문에 부모를 호출해서 나눠야하고, classList.js에선 각 div에게 다른 class name을 지정해주기 때문에 div를 구분할 수 있습니다. 소스를 컴파일하는 순서대로 가볼까요? 1. html을 전부 읽은 후 body가 끝나기 전, test.js(scro..

  Read More