본문 바로가기
728x90
반응형

Javascript

[Javascript] eval() 사용방법 몇 개월간을 기다려오던 스터디 모임에서 스터디를 시작하기 위해 문제를 내주었다. eval() 함수를 이용해서 데이터를 확인하는 내용의 문제였다. 이 문제에서 가장 중요했던 부분은 eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(0(){$(".2").3();$(4).5(\'6\',"#7",0.. 더보기
[Javascript] Moment.js 자바스크립트에서는 날짜/시간을 다루기 위해 Date 객체를 사용합니다. 다양한 출력 함수를 지원하고 있지만 필요한 기능은 직접 만들어야 할때가 있습니다. '2016-06-19' 이라던지 '07:40'같은 포맷을 출력하려면 별도 함수나 프로토타입 함수를 만들어야 합니다. 또한 서버, 브라우져의 시간대가 다를 경우 이를 고려하여 개발할 때는 여간 까다로운 일이 아니죠. moment.js는 이런 기능 뿐 아니라 자바스크립트 Date 객체를 좀 더 쉽게 다룰 수 있도록 도와 줍니다. 인스턴스 시간을 다루기 위해 Date 객체 대신 monent 객체를 사용합니다. moment 생성자는 다양한 문자열을 파라매터로 받을 수 있는데 두번 째 파라매터로 형식을 지정해 주면 됩니다. moment('2015-06-15', .. 더보기
[Javascript] Thymeleaf 1. Thymeleaf 기본 표현 자세한 문법은 Thymeleaf 사이트의 튜토리얼을 참고하는게 좋습니다. 기본 표현, 조건문, 반복문 세가지를 중점으로 보겠습니다. Thymeleaf Document 참고 (https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#standard-expression-syntax) Simple expressions: Variable Expressions: ${...} Selection Variable Expressions: *{...} Message Expressions: #{...} Link URL Expressions: @{...} Fragment Expressions: ~{...} Literals Text li.. 더보기
[Javascript] var, let, const 차이점 1. 변수 선언 방식 우선, var는 변수 선언 방식에 있어서 큰 단점을 가지고 있다. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리 할 수 있겠으나, 코드량이 많아 진다면 어디에서 어떻게 사용 될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. 그래서 ES6 이후, 이를 보완하기 위해 추가 된 변수 선언 방식이 let 과 const 이다. 위의 코드에서 변수 선언 방식만 바꿔보자. let name .. 더보기
[Javascript] Lodash 사용해서 값찾기 lodash _.find() 알아보기 먼저 find()에 대하여 알아봅니다. find()는 원하는 값을 배열 / 객체에서 쉽게 찾아 사용할 수 있습니다. 배열의 경우 비교적 간단하게 원하는 값을 찾을 수 있지만 객체의 경우는 어떤가요? 뭔가 일치하는 값을 찾으려면 변환에 변환을 거치고 어렵게 원하는 값을 구할 수 있습니다. 하지만 find()를 사용하면 여러 값을 가지는 데이터에 대하여 매우 간단하게 원하는 값을 찾는 것이 가능합니다. 먼저 아래는 문법입니다. _.find(collection, [찾을 조건]) _.find(collection, {찾을 조건}) 찾을 Collection 대상에서 찾을 조건을 넘겨줘야 하는데 객체 / 배열 모두 가능합니다. 그렇다면 아래에서 예제를 통하여 어떻게 사용하는지 알.. 더보기
[Javascript] 파일 업로드 화면 view js 파일 $(document).ready(function () { $('input[type=file][data-ipss-upload]').on('change', function (e) { var $this = $(this); var file = this.files[0]; if (!file) { return; } var accept = $this.attr('accept'); var isProductImage = $this.attr('data-ipss-upload-product-image'); var limit = $this.attr('data-ipss-upload-limit'); var dimension = $this.attr('data-ipss-upload-dimension'); var .. 더보기
[Javascript] Input 값 실시간 감지 Input 타입에는 여러 가지가 있습니다. select, checkbox, text, password 등 수 많은 타입을 내장하고 있는데, select나 checkbox 같은 경우에는 값의 변경을 단순히 onchange로도 확인할 수 있습니다. 다만, text나 textarea의 경우에는 값을 적고 있을 때에는 onchange로는 값의 변경을 감지할 수 없습니다. 왜냐하면 onchange 이벤트가 걸리는 시점이 blur(focus와 반대로 오브젝트를 떠나는 시점)이기 때문입니다. 따라서 onchange로는 text나 textarea의 실시간 값 변경을 감지할 수 없습니다. 업무를 하던 중에 실시간으로 값의 변경을 감지해서 앞의 10글자 정도는 고정으로 가져가도록 유지하게 해야하는 때가 있었는데 찾아보니 .. 더보기
[Javascript] 원하는 위치로 이동 div1로 이동 #2 : JQuery Import #3 : 스크롤 이동할 함수 작성 #4 : 이동하고 싶은 태그를 선택하여 offset()함수를 이용하여 절대좌표가 있는 객체를 가져온다. #5 : JQuery animate의 scrollTop 함수를 이용하여 절대좌표 top 위치로 이동한다. (400은 이동시간) (추가) 위 소스는 해당 div의 가장 맨위로 이동한다. 아래는 해당 div의 중간에 위치하도록 하는 방법이다. var offset = $("#div1").offset(); var winH = $(window).height(); $('html, body').animate({scrollTop : (offset.top - winH/2)}, 400); *offset - document 안에서의 위치 .. 더보기
728x90
반응형

티스토리툴바