본문 바로가기

javascript7

제이쿼리 버리기 - Bye jQuery 장점도 많고 알아두면 매우 편리한 jQuery. 나에게 코딩의 즐거움을 선사했고 너무나도 유용하게 잘 썼던 제이쿼리. 그러나 그간 브라우저들도 많이 좋아져서 제이쿼리가 아니어도 충분히 어렵지 않게 많은 것들을 구현할 수 있게 되었고, 제이쿼리 기반으로 뭔가를 뚝딱 만들어 나눌 때 이용자의 환경에도 꼭 제이쿼리가 설치되어 있어야 한다는 전제가 있는 것도 좀 불편하고, 설치되어 있는 제이쿼리 마저도 버전에 따라 문제가 발생할 수도 있고, 제이쿼리가 워낙 제공하는 기능이 많다보니 처리 속도 면에서는 조금 느린 듯 하고, 이제 브라우저는 최저 IE11 까지만 지원을 고려하면 될 것도 같고, 그래서, 이런저런 이유로인해 최근엔 제이쿼리를 가급적 안쓸려고 하고 있네요. 또한, 개인적으로는 개발속도나 소스가 조금 길.. 2020. 9. 17.
스크롤 바닥치면 뭔가 하기 제목 그대로... 편의상 jquey를 썼으나 일반 js 로 하기에도 높이 값들 가져오는 명령만 다를뿐 큰 차이는 없음 (초보시라면 위 이미지 출처 사이트에 추가 설명이 잘 되어 있으니 한번 보시는 것을 추천) var noMore = false; $(window).scroll(function() { var scrollTop = $(window).scrollTop(); var innerHeight = $(window).height(); var scrollHeight = $(document).height(); if (scrollTop + innerHeight >= scrollHeight) { //스크롤이 바닥치면 뭐할지 여기에 정의 시작 if (!noMore) { $("body").append(""); } n.. 2020. 8. 7.
비밀번호 보이기 감추기 요즘 웹/모바일 사이트 비밀번호 입력창에 종종 보이는 그것 원리는 단순, input 의 type 을 password 와 text 로 교차시키기 소스와 예제는 아래 참고 https://jsfiddle.net/alikong/mshf9nv4/ 2020. 8. 6.
나타났다 사라지는 토스트 메시지 - toast alert를 띄우자니 촌스럽고, 모달창은 좀 오바인거 같고... 그럴때 쓸 수 있는 알림창(?) 정식 명칭은 Toast message 라고 하는듯... 암튼 토스트 알림창 jQuery를 썼고, 사라지는 타이머가 주르륵 달려가게 만들어 보았음 아래는 예시: (Result 탭을 눌러보자) jsfiddle.net/alikong/x4duhj95/ html에 추가해주고, CSS 도 추가해주고 toast('저럴수가!!'); 이렇게 메시지를 넣어 쓰면 됨 (기본 값은 3초 노출) toast('저럴수가!!', 1000) 이나 toast('저럴수가!!', "고정") 으로 보여지는 시간 조정 가능 (1000=1초) 현재는 아래쪽에 나오게 되어 있으나, 위로 바꾸고 싶으면 CSS 에서 #toast 의 bottom 을 top.. 2020. 8. 2.
ajax 처리 후 로딩중 감추는 타이밍 $.ajax({ cache: ..., type: "POST", url: "...", data: {...}, success: function (data) { ... }, error: function() { ... }, complete: hideLoading }); (jQuery를 쓴다고 치고.. )보통 위처럼 ajax 호출을 하게 되는데... (물론 .done() 이나 .fail() 로 연계해서 쓸 수도 있고..) 아무튼, 일반적으로 ajax 호출 직전에 로딩중을 보여주고... success 와 error 에 로딩중 감춤을 넣어서 써왔으나, 이번에 ajax로 파일 다운로드 하는걸 하다보니 서버에서 파일이 아직 안왔는데 로딩이 빨리 사라지더이다 그래서 고민하다 complete: 에 hideLoading (=.. 2020. 8. 2.
이미지 클릭하면 다운로드 시키기 가끔 이미지를 브라우저에 보여주는게 아니라 다운로드 시켜야 할 때가 있음 예전 같으면 숨겨진 아이프레임으로 폼을 전송해서 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.

티스토리툴바