웹개발자의 기지개

아주 간단한 팁이다. 별거없다. 홍길동 와 같이 보통의 HTML 코드에서 클릭하면 화면 상단으로 자동 이동된다. 이를 방지하도록 아래와 같이 간단히 처리하면 된다.

HTML5 의 기본태그인 video 태그로 동영상 재생 관련 사용법을 정리해 보았다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 동영상재생 body {margin: 0px; padding: 0px;} 현재의 브라우저는 지원하지 않습니다. Colored by Color Scripter cs 위에서 video 태그 내용이 재생관련 소스입니다. 그러면 이제 javascript 형태로 video 태그의 재생관련 사용법을 알아보자. 재생하기 document.getElementById('video1').play(); 멈추기 document.getElementById('video1').pause(); 현재 재생시간 document.getElementById('video1').cu..

javascript 상으로 웹브라우저 창을 닫을때 이벤트 처리해야 되는 경우가 생겼다. 1 2 3 4 window.onbeforeunload = function(event) { // 이벤트버블현상 처리막기 // event.preventDefault(); } Colored by Color Scripter cs 참고 : https://jaimemin.tistory.com/1539 [javascript] window.onbeforeunload 페이지를 벗어날 때 이벤트 처리 개요 개발을 진행하는데 스토리보드 요구사항 중 하나가 사용자가 해당 페이지를 벗어나거나 새로고침을 할 경우 해당 페이지 내에서 변경된 값들을 다시 기존의 값으로 초기화하는 것이었습 jaimemin.tistory.com

동영상 재생을 할때 주의를 환기시키려는 목적으로 정해진 시간마다 Alert 창이 뜨면서 영상재생 여부를 묻는 소스를 만들어 보았다. HTML5 video 기본태그에 setInterval 함수를 간단히 이용하면 되겠다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 현재의 브라우저는 지원하지 않습니다. document.getElementById('video1').play(); setInterval(function() { document.getElementById('video1').pause(); if (confirm("화면 영상을 잘 시청중이신가요 ? [10분마다 시청유도 확인]\n\n계속 시청을 원하시면 '확인'버튼을 눌러주세요.")) { document.getEl..

아주 간단하게 순수 javascript 상으로 Ajax 처리를 해보자. [ ajax.html ] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 Insert title here h1 {color:red;} function recvFn() { mydiv.innerHTML = xhr.responseText; } function fn() { xhr = new XMLHttpRequest(); xhr.open('GET',"test.html"); xhr.onload = recvFn; // 수신시 호출되는 함수 등록 xhr.send(); // ajax요청 } ajax test 확인 요청하기 Colored by ..

웹개발시 자주 쓰이는 파일업로드 input="file" 태그에서 유효성 체크하는 소스를 간략히 정리하고 소개해보았다. 아래의 백엔드 PHP 문법 코드가 살짝 가미되어 있는데 이부분은 ASP 나 JSP 등의 기타 백엔드 개발언어로 충분히 응용하면 될것이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 파일 찾기 기존 파일 :

javascript 의 경우 null 과 undefined 관련 처리를 해야 할때를 위해서 간단히 함수를 만들 수 있는데 아래의 괜찮은 소스를 올려보았다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 /** * 문자열이 빈 문자열인지 체크하여 결과값을 리턴한다. * @param str : 체크할 문자열 */ function isEmpty(str){ if(typeof str == "undefined" || str == null || str == "") return true; else return false ; } /** * 문자열이 빈 문자열인지 체크하여 기본 문자열로 리턴한다. * @param str : 체크할 문자..

보통의 경우 특히 모바일웹상에서 확대 축소 막기는 기본적으로 meta 태그 속성을 사용하면 된다. 아래 태그로 수정한다. 속성이름이 직관적이다. 하지만 안드로이드 웹앱의 경우 안드로이드 자체 네이티브 코드상으로 직접성으로 막을수 있도록 코드 속성을 아래와 같이 수정해 주면 된다. 웹뷰객체이름.getSettings().setSupportZoom(false); 웹뷰객체이름.getSettings().setBuiltInZoomControls(false); 더욱더 확실한 방법으로 javascript 이벤트 소스를 추가해주면 더 좋을 듯하다. 1 2 3 4 5 6 7 8 9 document.body.addEventListener('touchstart', function(e) { if ( (e.touches.leng..