반응형

취업/자바스크립트 9

[JS] INPUT 소수점 컨트롤 및 소수점 한번만 입력하게 하기

HTML JS let decimalType = 1; function isNumberKey(evt) { let charCode = (evt.which) ? evt.which : event.keyCode; if (charCode != 46 && charCode > 31 && (charCode 57)) return true; // Textbox value let _value = event.srcElement.value; // 소수점(.)이 두번 이상 나오지 못하게 if(decimalType == '특정타입') { // 특정 타입의 경우 아예 입력 못하게 막기 if (charCode == 46) { return false; } } else { let _pattern0 = /^\..

[JS] AJAX 로딩바 사용시 async: false를 꺼줘야 한다.

ajax 사용시 유독 오래 업로드 되는 구간이 있어서 해당 부분을 처리해야했다. 그런데, 안먹힌다. 뭘해도 업로드 끝나고 작동되는 문제가 있었다. 제이쿼리 이벤트 바인딩이 느려서인가? document.getElementById로 잡아보기도하고, 이것도 느리니 아예 함수 호출시 내장으로 변수에 할당해서 구현해보기도 하였다. 그래도 안된다... 찾다보니 async를 꺼보라네? 그렇다 ajax 내 async : false 상태가 되면 이전단계에선 호출이 안되는 것... 즉 모든 이벤트가 끝나고 작동되게 되는 것이다.(error/success/complete) 더보기 what it is saying is, if your request is async: false then you should not use aja..

[JS] Masonry 레이아웃 구성하기.

처음에는 https://pang2h.tistory.com/227 masonry 레이아웃 구성하기 이런 식으로 이미지, 혹은 내부 요소를 구성하는 방법이 필요해서 검색 좀 해봤습니다. 개인적으로 몇몇과 함께 하고 있는 프로젝트에서 갤러리 레이아웃이 필요해서요. 이 스타일로 페이지를 pang2h.tistory.com 이분의 코드를 사용했다. 그런데 말야... 너무 느리다.. 이미지 200개가 뜨는데 10초 걸리는게 말이 되나? 그래서 엎었다. 그래서 찾아보니까 우연히보니 이미 잘 만들어놓은 코드가 있더라. 무엇보다 JS로 컨트롤하는 것이 아니라 CSS로 컨트롤해서 더 빠르고. Cinderella wearing European fashion of the mid-1860’s Rapunzel, clothed in..

[Node.js] text파일 읽어와서 excel파일로 저장하기.

text를 이전에 만들어놨는데, 파일 안 형식은 json파일과 동일하다. [ {'이름': "홍길동", '나이':'70'}, {'이름': "홍길동2", '나이':'72'}, {'이름': "홍길동3", '나이':'70'}] 대충 위와 같이 이렇게 구성되어 있는데, 이를 읽어오기 위해서 fs모듈을 사용하고, xlsx를 사용하였다. sheetjs보다 좋은게 너비 설정이 가능해서 참 좋네~(sheetjs는 이건 유료 기능) // array 데이터 이용 const xlsx = require('xlsx'); const path = require('path'); const fs = require('fs'); let file = './해당 text.txt'; let textString; fs.readFile(file, ..

[owlCarosel] ver 1.2.1 mouse event detect! 마우스 이벤트 감지

회사에서 그지 같은 오래된 코드를 줬다. 문제는 레퍼런스도 적용이 안될만큼 오래된 코드... 공식문서 봐도 이벤트가 안 먹힌다. https://www.jqueryscript.net/demo/Powerful-Customizable-jQuery-Carousel-Slider-OWL-Carousel/ Owl Carousel How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. 2. Set up your HTML You don't need any special mar..

[JS] 부트스트랩 3.* Navbar 현재 페이지 active 상태로 두기

기존 scrollspy가 적용된 template를 수정해서 써야하는 일이 생겼다. 하지만 이것은 기본적으로 scrollspy가 적용되어 scroll에 따라 먹히는 부분... 그래서 페이지 이동에 따라 작동되도록 nav를 수정해야했다. Link (current) Link nav는 위와 같은 상태로 둔다. https://getbootstrap.com/docs/3.4/components/#navbar Components · Bootstrap Extend form controls by adding text or buttons before, after, or on both sides of any text-based . Use .input-group with an .input-group-addon or .input..

[JS] 프리티포토 모바일 크기 수정하기.

워드프레스 라이브러리 같은데, 엄청 오래된 라이브러리다. 아마도 수정이 되어야 했을 거 같은데 안되어서...그냥 있는 버그였다. jquery.prettyPhoto.js 파일에서 코드 난독화를 제거하고, imageWidth, imageHeight를 찾아보면 -200을 수정해야한다. 예쁜 사진에서 같은 문제가 발생했고 rafael.dev에서 게시한 것과 동일한 CSS 코드 수정 사항을 찾았습니다. 다만, 이전 버튼과 다음 버튼이 사라지고 스타일이 정말 이상해서 여전히 좋지 않은 것 같습니다. 크기 조정 계산으로 인해 문제가 발생한 것 같아서 js 소스에서 크기 조정 기능의 스니펫을 찾으려고 하면 아래와 같이 쉽게 솔루션을 얻을 수 있습니다. 저는 3.1.6 버전을 사용하고 있습니다 _fitToViewport..

[JS] prettyPhoto 프리티 포토. 다른 태그 클릭시 이벤트 일으키기

wordpress 라이브러리 같은데, 보통 위의 경우로 구성되어 있다. 하지만 제목을 따로 두는 경우가 있어 그 제목을 클릭시 이벤트를 일으켜야 했다. 제목 설명 특정 url을 div에 박아 두어 해당 부분을 작동되게 해두었는데, 문제는 이벤트 발생이 안된다는 것. 원인은 하단에 있다. $("a[data-gal^='prettyPhoto']")[0].click(); // 위의 내용이 일치하는 것을 찾는것인지 몰랐던 부분의 문제였다. // href로 하여 해당 주소가 맞는 것으로 클릭 이벤트를 호출하니 문제가 해결되었다. 아래처럼 하니 작동이 원활하게 진행되었다 $('클릭 클래스').click(function() { let url = $(this).attr("val"); $(`.css a[href='${ur..

728x90