개발자의 끄적끄적

[javascript/jquery] javascript video end event example / 자바스크립트 비디오 종료 이벤트 예제 html 에서 video 태그를 다루다 보면 스크립트로 각종 이벤트를 제어해야하는 경우가 종종 있습니다. 그중에서 영상이 종료된 이벤트를 감지하는 방법을 공유해보고자 합니다. 우선 아래와 같은 video 태그가 있다고 가정하고, 위 영상이 종료된 후 무언가 처리를 하고 싶으면 아래와 같이 ended eventListner 를 등록하시면 됩니다. 그리고 그 안에 처리하고자 하는 로직을 작성하시면 됩니다! video.addEventListener('ended', function() { // to do }); 참고들 하세요!

[javascript/jquery] javascript video timeupdate event example / 자바스크립트 비디오 재생시간 변경 이벤트 예제 html 에서 video 태그를 이용하여 영상을 재생하다보면 현재 재생되고 있는 시간을 따로 표기하거나 남은시간을 계산하거나 하는 경우가 있습니다. 그럴때는 영상의 현재 재생 위치를 실시간으로 저장하고 있어야 합니다. video 태그의 timeupdate 이벤트를 이용하여 실시간으로 재생위치정보를 가져올 수 있습니다. 우선 아래와 같은 video 태그가 있다고 가정하고, 아래나와있는 내용처럼 eventListner 를 이용해서 timeupdate 이벤트를 선언해서 사용하시면 됩니다. video.addEventListener('timeupdate'..

[javascript/jquery] how to catch video seeking event / 비디오태그 seek 이벤트 예제 html 에서 영상을 재생할때 video 태그를 사용합니다! 그중에서 video 재생중 탐색 즉, 영상재생위치를 앞이나 뒤로 이동하는 것을 제어해야 하는 경우가 있습니다. 그럴때 사용하는 event 가 seeking 입니다. 우선 아래와 같은 video 태그가 있다고 가정하고, 위 video 가 재생되는 중 재생위치 검색을 제어하고 싶으면 아래와 같은 eventListner 를 생성하고 로직을 작성하시면 됩니다! video.addEventListener('seeking', function() { // to do }); 참고들 하세요!

[javascript/jquery] javascript keyboard events / 자바스크립트 키보드 이벤트 종류 javascript 에서 input 값을 제어하다보면 키보드 이벤트를 사용해야하는 경우가 있습니다! 그럴때 사용되는 키보드 이벤트 3가지를 공유하고자 합니다. keydown keypress keyup 위에 나와있는 것처럼 keydown / keypress / keyup 이렇게 3가지가 있는데요, 3가지다 키보드 입력 이벤트지만 약간 다릅니다. keydown - 키보드를 눌렀을때 keypress - 키보드를 누르거나 누르고 있는중 keyup - 키보드를 눌렀다가 때었을때 이렇게 약간씩 다릅니다. 숙지하셨다가 상황에 맞는 키보드 이벤트를 사용하시면 됩니다! 참고들 하세요!

[javascript/jquery] javascript beforeunload ajax example / 자바스크립트 beforeunload ajax 예제 javascript 에서 사용자가 화면을 벗어나거나 새로고침하는 이슈를 체크하기위해서 beforeunload 라는 이벤트를 사용합니다! 개발하는 내용이나 상황에 따라서는 특정함수를 호출하도록 하고, ajax 로 서버에 데이터를 전송하기도 합니다. 이번에는 beforeunload 이벤트발생시 함수를 호출하는 방법과 ajax 로 데이터 전송시 주의사항을 공유하고자 합니다! beforeunload 위에 나온것처럼 beforeload 라는 이벤트를 적용하려면 아래와 같이 작성하시면 됩니다! window.addEventListener('beforeunload'..

[javascript/jquery] javascript qrcode library / 자바스크립트 qrcode 생성 라이브러리 [링크] javascript 에서 qrcode 를 생성하는 라이브러리가 있어서 공유하고자 합니다! 사용법도 간단하구요! 들어가셔서 다운받으시고 상단에 script 만 로드하시면 사용가능합니다! (참고로 jquery 는 반드시 로드되어 있어야 합니다!) 아래 링크 남길테니 들어가셔서 확인해보시고 도움이 되셨으면 좋겠습니다! javascript qrcode library site url : https://github.com/davidshimjs/qrcodejs GitHub - davidshimjs/qrcodejs: Cross-browser QRCode generator for jav..

[javascript/jquery] javascript ip address api site / 자바스크립트 아이피 확인 api 사이트 [링크] 자바스크립트에서 접속자의 아이피를 확인할 수 있는 사이트가 있어서 공유하고자 합니다! 완전 무료는 아니지만, 1000건까지는 무료로 제공되니 참고하셔서 사용하시면 될듯합니다! 아래 링크 들어가시면 가격대부터 사용법까지 잘나와 있습니다! 사용법은 엄청 간단하네요! 참고들 하세요! javascript ip address api site : https://geo.ipify.org/ IP Geolocation API IP Geolocation API by IPify enables application developers to support precise location ..

[javascript/jquery] javascript DOMException: The play() request was interrupted by a new load request error 해결 방법 javascript 에서 video or audio 파일을 태그에 넣어서 재생하려고 할때 아래와 같은 에러가 발생하는 경우가 있습니다! DOMException: The play() request was interrupted by a new load request 그럴때는 아래와 같이 예외처리 조건문을 작성해주면 됩니다! 우선, video.play() 의 결과를 playPromise 라는 변수에 담고, var playPromise = video.play(); 아래 구분을 그대로 play() 하는 바로 밑줄..