본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript/[중요] Javascript26

Jquery 객체 생성시 이벤트 부여(FadeIn) Jquery를 활용하여 객체 생성시 이벤트를 주는 방법이다. 물론..앵귤러같은경우에는 데이터를 갱신만 하면 알아서 그려주지만... Jquery는 앵귤러처럼 양방향 바인딩이 아니니깐..어쩔수 없이 일일이 그리고 효과를 부여해야 한다. var pgContents = "Hello world!"; var item = $(pgContents).fadeIn(500); //효과 $('#대상').append(item);//객체생성 위 예제코드를 적용하면 append가 실행되면서 이벤트가 바로 처리된다. 비동기 방식으로 페이징 처리하거나 내용을 갱신하는경우 페이드인 효과를 고객이 주로 요구할 때 사용하면 편리하다. 2019. 4. 27.
Javascript Map, 맵 자바스크립트에서 Map 객체를 활용하여 데이터를 set, get 할 수 있는 방법이 es6문법편에서부터 자세히 소개 되어 있다. 해당 기능을 통해서 데이터를 나유롭게 가져 올 수 있고, 또한 반복문을 통해서 데이터를 출력 하는 것 도 가능 하다. 물론...배열에 json형식 데이터를 넣으면 맵처럼 사용 하기 쉽고 편하긴 하지만, 개인적으로 자바스크립트에서의 배열의 단점이 delete가 좀 귀찮고 delete된 객체가 비어버릴 경우 undefined나 null값이 들어가는 경우 때문에 이 Map을 활용 한 다면 조금 더 쉽게 key, value 형태로 객체를 다룰 수 있지 않을까 싶다. var map = new Map(); //맵 객체 선언 map.set("param","data"); //key, valu.. 2019. 4. 27.
자바스크립트 정규식 RegExp es6가 나옴에 따라 정규식을 만들어 주는 객체가 한개 생겼다. 정규식을 찾아서 일일이 할 필요가 없는 괜찮은 기능인 것 같다. var re = new RegExp("ab+c"); console.log(re); 생성자에 원하는 값을 넣어주면 자동으로 정규식으로 변환하여 준다. 2019. 4. 27.
자바스크립트 Promise 프로미스는 자바스크립트에서 동기 방식 처리를 위해 생긴 기술이다. 즉, 어떠한 행위를 걸어 놓고선 그 행위가 끝나면 다음 행위를 하라는 기술이다. 간단하게, ajax같은 기술을 사용하면 데이터를 받으면서 다른행위를 할 수 있는 것과 반대되는 개념이다. 1번부터 5번까지의 할 일이 있다면 반드시 1번 끝난 이후에 2번하라 라고 명령을 할 수가 있다. 아래 예제코드를 보면, function method(param){ //함수 선언 return new Promise(function(resolve,reject){ //프로미스 객체로 리턴 내부의 변수는 당연히 바꾸어서 사용 가능하다. if(param != null){ resolve('good working'); //resolve는 프로미스의 고유 기능, 성공시 .. 2019. 4. 27.
Formdata를 활용하여 ajax로 파일전송 하기 jquery.를 활용하다 보면 다량의 파일을 비동기 방식으로 전송해야 되는 요구사항을 많이 만난다. 사용자 입장에서는 화면이 바뀌지 않고 파일만 보내기 때문에 해당 페이지에서의 정보가 바뀌거나 새로고침이 되지 않아서 매우 편리하다. 이를 위해서는 Javascript에서 지원하는 formdata라는 객체를 활용하면 쉽다. //아래 내용이 일반 key, value로 전송되는 값이다. const sendingData = new FormData(); sendingData.append('id',1234); sendingData.append('text','텍스트'); //아래 부분은 input type file에서 파일 데이터를 가져와서 key, value로 전송하는 부분이다. //file1과 file2는 보내는 .. 2019. 4. 26.
Html 캔버스 Hover 이벤트 만들기 Html 캔버스에서는 그림을 그린 다음 그림을 1개의 객체로 보관하는 것이 아니라 그림 통째로 보관한다. 즉, html에서 div태그로 여러가지 그림을 그리면, 각각 이벤트나 움직임을 줄 수 있지만, 캔버스에서는 그렇지 않다. 왜냐하면 캔버스에서 객체는 1개이고, 그림을 사각형, 원형으로 그리더라도 그림1개로 저장되기 때문이다. 이를 해결하기 위해서는 수동으로 만드는 방법 밖에 없다. 원리는 간단하다. 사용자가 그림을 그릴 객체의 정보를 Javascript에서 배열이나 Object로 저장을 하고, 캔버스에서 마우스 이벤트를 감지하여 해당 영역에 값이 들어와있는지 계산하면 된다. const price = [50,50,20]; //x좌표, y좌표, 원 크기 const ctx = $(캔버스)[0].getCon.. 2019. 4. 26.

티스토리툴바