본문 바로가기

자바스크립트5

포스팅 내 테이블 자동 정렬 검색을 해보면 쉽게 가져다 쓸만한 '테이블을 동적으로 정렬'하는 스크립트나 플러그인이 정말 많습니다. 보통은 헤더를 클릭하면 작동하고, 오름순 내림순 반복 처리할 수도 있습니다. (아래 이미지 처럼) 하지만 이미 널려 있는 걸 저까지 또 만들 필요는 없을 것 같고, 지극히 개인적으로, 그저 가끔이라도 포스팅할 때 내용에 어떤 목록이 필요해서 테이블을 썼는데 다 쓰고보니 이왕이면 정렬해서 보여주면 좋을 것 같을 때가 종종 있길래 (글 쓸 때 이미 머리속에 정렬된 순서대로 쓰는게 아닌 이상...) 그런 포스팅 시에 간단히 사용할 수 있는 스크립트와 적용 방법을 공유하려 합니다. 사실 뭐.. 별건 아니고 그냥 해보니 이런 것도 되더라... 정도? (뒷북이라면 뭐... 어쩔수 없.....ㅋ) 주 기능은... 글.. 2020. 10. 28.
제이쿼리 버리기 - Bye jQuery 장점도 많고 알아두면 매우 편리한 jQuery. 나에게 코딩의 즐거움을 선사했고 너무나도 유용하게 잘 썼던 제이쿼리. 그러나 그간 브라우저들도 많이 좋아져서 제이쿼리가 아니어도 충분히 어렵지 않게 많은 것들을 구현할 수 있게 되었고, 제이쿼리 기반으로 뭔가를 뚝딱 만들어 나눌 때 이용자의 환경에도 꼭 제이쿼리가 설치되어 있어야 한다는 전제가 있는 것도 좀 불편하고, 설치되어 있는 제이쿼리 마저도 버전에 따라 문제가 발생할 수도 있고, 제이쿼리가 워낙 제공하는 기능이 많다보니 처리 속도 면에서는 조금 느린 듯 하고, 이제 브라우저는 최저 IE11 까지만 지원을 고려하면 될 것도 같고, 그래서, 이런저런 이유로인해 최근엔 제이쿼리를 가급적 안쓸려고 하고 있네요. 또한, 개인적으로는 개발속도나 소스가 조금 길.. 2020. 9. 17.
파일 업로드 미리 보기 파일.. 특히 이미지 같은거 올릴 때 파일 선택하면 실제 업로드 하기 전에 미리 보여주기 대략 위 예시같은 기능... function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { document.getElementById('preview').src = e.target.result; }; reader.readAsDataURL(input.files[0]); } else { document.getElementById('preview').src = ""; } } 구현은 단순 https://jsfiddle.net/alikong/hkzxegm6/ 2020. 8. 14.
이미지 클릭하면 다운로드 시키기 가끔 이미지를 브라우저에 보여주는게 아니라 다운로드 시켜야 할 때가 있음 예전 같으면 숨겨진 아이프레임으로 폼을 전송해서 php를 통해 다운로드 시키는 방법을 썼겠지만 요즘엔 더 간단히 자바스크립트나 html 만으로 처리가 가능함 방법 1. a 태그에 download 를 넣어 줌 (확장자를 제외한 파일명을 넣어 줄 수 있음. 없어도 됨) 단점은, IE, Edge, Safari, Opera 는 지원을 안한다는 점과 이미지가 사이트와 같은 도메인에 있어야 한다는 점 방법 2. function dataURLtoBlob(dataurl) { var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n = bstr.le.. 2020. 8. 2.
캔버스에 박스 그리기 Html상 Canvas 에 박스를 그려주는 자바스크립트 테두리가 있거나 없거나 1px 짜리 테두리도 깔끔하게 여러 박스 겹침 가능 채우기 색상과 테두리 색상에 투명도 적용 가능 캔버스 id 가 canvas 라고 가정했을때... function drawBox2canvas(ctx, x, y, w, h, color, borW, borColor) { if (!borW) { borW = 0; } ctx.fillStyle = color; ctx.fillRect(x+(borW), y+(borW), w-(borW*2), h-(borW*2)); if (borW) { ctx.lineWidth = borW; ctx.strokeStyle = borColor; ctx.strokeRect(x+(borW/2), y+(borW/2).. 2020. 8. 1.

티스토리툴바