반응형

JavaScript 18

[HTML5] video / audio onloadeddata 로딩완료 이벤트 - 비디오 자동 재생하기

태그가 완전히 로드될때, javascript 실행하기 하는 이벤트 요소(Attribute)입니다. HTML Audio/Video DOM loadeddata Event 해당 프레임에서 비디오/오디오가 로딩이 완료되면 실행되 었는지 확인 해주는 이벤트입니다. onloadeddata 이벤트를 이용해서, 자동 플레이도 만들 수 있습니다. (하단 '자동 플레이 예제'를 참조하세요) Syntax In HTML: In JavaScript: Using addEventListener(): 예제 자동 플레이 예제 Your browser does not support HTML5 video. 자동 플레이 경우, muted="muted" 속성이 있어야 자동 재생이 됩니다. 음소거(muted)로 되어 있지 않은 비디오는 자동 재..

Web/WEB기본 2022.01.07

javascript file.type 실패시 + 파일 확장자 체크하기

file이 어떤 종류의 파일인지를 확인할때, MIME타임을 사용하면 가장 정확하다. javascript에서 file.type 속성을 이용하면 좋지만, 브라우저별로, 해당 값을 넘져주기 않을 때가 있어서, 확장자의 명으로 체크하는 방법을 메모해 둔다. 파일의 타입이 pdf인지 비교를 할때, Edge에서 file.type에서 이상한 결과가 나올때가 있다. if(file.type == 'application/pdf' || file.name.toLowerCase().endsWith('pdf')) { //code to execute } file.name.toLowerCase().endWith('pdf') endWidth() 끝부분이 다음과 같이 끝나면, true를 넘겨준다. 참고: https://stackover..

Web/Javascript 2018.03.27

[Javascript] replace 이용한 replaceAll 만들기

Javascript에서 replace를 사용하면, 처음 발견된 1개의 String(문자)만 처리됩니다. 모든 문자(String)에 변경을 위해서는, replaceAll함수를 선언해서 사용하면 처리된다. (사용예) var foo = fooString.replaceAll('찾는문자열', '변경문자열'); [ Regular Expression Based Implementation ] String.prototype.replaceAll = function(search, replacement) { var target = this; return target.replace(new RegExp(search, 'g'), replacement); }; [ Split and Join (Functional) Implementa..

Web/Javascript 2017.11.11

[JS] 소수점 2자리 자르기 float 2 decimal

javascript에서 2 decimal (소수점 2자리)로 round하려면, 해당 함수가 없답니다. 방법은 다음과 같이 하면 처리가 가능합니다. [방법1] 곱셈 나눗셈 방식 Math.round(num * 100) / 100 해당 방식으로 하면, 신기하게, 소수점 2자리에서 짤리게 됩니다. 참고: http://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places [방법2] .toFixed()를 이용한 소수점 반올림 var twoPlacedFloat = parseFloat(yourString).toFixed(2) 결과 값 >> parseFloat("1.555").toFixed(2); "1.55" parseFloat("1.556").t..

Web/Javascript 2017.01.28

Javascript로 excel 또는 csv 파일 만들기 (ExcellentExport.js 2.0) Edge 브라우저 지원

ExcellentExport.jsjavascript를 이용한 excel과 csv 다운로드 만들기 모듈 정말 간결하게 Excel을 다운로드 처리하게 만들었네요. 좋네요. (추가 내용: 2017/01/31) 1.4버전에서는 Microsoft Edge Browser에서 다운로드가 안됩니다. 2.0버전으로 수정해 주시면 됩니다. (추가내용: 2017/11/22)3.0+도 나옴. 해당 버전은 xlsx도 지원, 멀티탭도 지원된다고 하네요. Javascript export to Excel 100 200 300 400 500 600 Excel 다운로드 만들기 Export table to Excel 첨부파일 (과거버전) 첨부파일2 (Edge 엣지 브라우저 지원) 개인적으로 이름을 받는 형식으로 변경하면 좋을 것 같아서 ..

Web/Javascript 2015.03.31

새창 띄우기 window.open

[ javascript ] 새창 띄우기 ( window.open 함수 ) Javascript의 함수를 이용해서 새로운 팝업창을 만듭니다. URL영역은 과거에는 숨길 수 있었지만, 요즘의 사용하는 Browser에서는 숨길 수 없습니다. (참고) 파라미터 중에 WindowName이 같으면, 같은 창으로 띄워줍니다. 1. window.open(URL, WindowName [, WindowFeatures]); 1) URL - 웹 문서 URL 2) WindowName - open 창 이름 (target 이름) 3) WindowFeatures - fullscreen = 전체 창. (yes/no)(default : no) - location = 주소창이 활성화. (yes/no)(default : yes) - menu..

Web/Javascript 2014.10.24

javascritp 객체 전체 속성 확인하기

[펌출처] http://asrada2001.tistory.com/173 Javascript의 객체, 속성 이름 (객체 전체 확인하기) javascript의 객체의 속성은 객체.속성이름 으로 접근이 가능하다. 그리고 또 하나 다른 표현이 있는데 바로 객체['속성이름'] 이 그것이다. var obj = new Object(); obj.id = 'first'; obj.name = 'wave'; obj.age = '20'; obj.sex = 'male'; alert(obj.id); alert(obj['id']); 이제 객체 안을 통째로 들여다 보는 방법을 알아보자 위에서 언급한 객체['속성이름']의 표현식을 이용하면 된다. var msg = ''; for(var temp in obj){ msg += temp +..

Web/Javascript 2014.01.09

[javascript] 정규식을 이용한 숫자만, 소수점 이하 제거 추출하기

현재 정수형과 자연수 형의 값을 뽑아내는 정규식 숫자만 추출하는 정규식 (소수점 포함) 문자와 숫자가 포함된 형식에서 숫자만 추출하는 정규식 예제 입니다. > console.log( '-10.2em'.replace(/[^-\.0-9]/g,'') ); -10.2 자연수형의 정규식 (소수점 제거) 문자와 숫자가 포함된 형식에서 자연수(소수점 제거)만 추출하는 정규식 예제 입니다. > console.log( parseInt('-10.2em',10) ); -10 참고: 자바스크립트 정규식을 이용한 숫자, 한글 체크 : http://ji80903.tistory.com/306 자바스크립트 Number()와 parserInt(,) : http://hym77.kr/blog/?p=100 [추가: 소수점 자르기] 숫자의 ..

Web/Javascript 2013.10.31

jquery 의 innerHeight()함수 높이 HTML document 부분만

현재 $(window).innerHeight()를 사용하면, 사이즈가 틀리게 나온다. 그건 bookmark등의 높이가 height값에 제외해서 그렇다고 한다. $(window).height(); // returns height of browser viewport $(document).height(); // returns height of HTML document 다음과 같이 height값은 document를 사용하면 된다. 참고: http://stackoverflow.com/questions/3791049/javascript-jquery-how-do-i-get-the-inner-window-height

Web/Javascript 2013.10.01

IE전용 document.all(id또는 index no)와 event.srcElement와 sourceIndex

javascript에서 사용되는 all, event.srcElement, sourceIndex 등은 오직 IE에서 지원되는 속성이다. MSDN all property 내용 [ document.all() 대처법 ] document.all(변수) 변수로 "id", "name", "객체 순서 번호"가 올 수 있다. 현재 "id"와 같은 경우는 다음과 같이 수정은 할 수 있다."name"과 "객체 순서 번호"는 찾을 수 가 없었다. Mozilla 한국 커뮤니티 • 글 보기 - document.all 문제 해결법document.all[objectID] -> document.getElementById("objectID")function getObject(objectId) { // checkW3C DOM, then ..

Web/Javascript 2013.09.25

input 박스 enter 쳤을때, 처리하기 + 숫자만 입력 받기

에 엔터키를 이벤트 처리를 위해 onkeypress="return enterKey(event);" DHTML 이벤트를 추가한다. 해당 function에서 e.keyCode==13일때 함수 처리 출처: http://mystria.egloos.com/3998558 또다른 간단한 소스 태그에 숫자만 입력하기전화 번화 값 (949) 333-4444을 복붙하면, 9493334444로 입력이 됩니다. 참고: https://stackoverflow.com/questions/9626741/catch-input-earlier-than-onchange-and-preferably-only-numbersYou can limit the input to only numbers using a regular expression://..

Web/Javascript 2010.12.07

[javascript] Math 객체

기본 Math 함수 설명 ceil, floor, round ( 올림, 버림, 반올림 )% (나머지) (ex: x%2==0 : x를 2로 나누어서 떨어지는 나머지와 0이 같은지 체크함) Math.abs(-1) // 절대값. 결과는 1 Math.sin(1) // sin 값. 결과는 0.841470984807897 Math.cos(1) // cos 값. 결과는 0.54030230586814 Math.tan(1) // tan 값. 결과는 1.5574077246549 Math.log(2) // log 값. 결과는 0.693147180559945 Math.exp(1) // 지수 값. 결과는 2.71828182845905 Math.sqrt(9) // 제곱근 값. 결과는 3 Math.pow(2 , 4) // 거듭제곱 ..

Javascript Event요소

자바스크립트 이벤트 ..................................................... 아주 중요한 이벤트!!! 이벤트란 모든 행위를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트를 많이 준비해 놓고 있다. 예를 들어 사용자가 마우스를 클릭할 것이다.... 이건 click 이벤트로 준비! 이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내야 다음 일을 할 수 있을 것이다. 고맙게도 click이 일어났다는 걸 자동으로 알 수 있으니 얼마나 고마운 일인가... (Click, MouseOver, MouseOut, Submit...) 이벤트 핸들러란 ? 이러한 이벤트와 우리가 준비한 프로그램을 연결해 주는 구실을 한다 (onClic..

Web/WEB기본 2009.01.06
1
반응형