티스토리

창조적고찰

검색하기

블로그 홈

창조적고찰

ismydream.tistory.com/m

ismydream 님의 블로그입니다.

구독자: 1

방명록 방문하기

주요 글 목록

event.stopPropagation(), event.preventDefault () 이해하기 event.stopPropagation(), event.preventDefault () 이해하기 event.stopPropagation() 을 이해하기 위해서는 우선 HTML 상에서 사용자 이벤트가 어떻게 전달되는지 이해해야 합니다. 웹에서의 클릭이벤트 전파propagation 의 사전적의미는 전파, 확산입니다. 사용자가 마우스로 웹페이지 내의 버튼을 클릭했을때 대부분의 사람들은 버튼만 반응했다고 생각하게 됩니다. 하지만 웹페이 내부에서는 버튼을 감싸고 있는 부모 태그들 또한 클릭 이벤트에 반응하게 됩니다. 이것을 Bubble Up(버블업)이라고 합니다. 위 슬라이드 우측의 문서구조를 보면 a 태그는 li, ul 의 두개의 부모태그가 있습니다.사용자가 a 태그를 클릭했을때 클릭이벤트는 a 태그를 감싸고 .. 공감수 41 댓글수 13 2013. 8. 20.
jQuery 를 배울 수 있는 사이트 jQuery 를 배울 수 있는 사이트 tryjQuery 사이트에서는 간단하게 자신이 알고 있는 jQuery 를 순차적으로 테스트 해 볼 수 있습니다. 테스트를 진행하면서 기존에 자신이 알고 있던 방법 외에 또 다른 방법을 찾을 수도 있고 변화된 jQuery 의 새로운 모습을 직접 실습해 볼 수도 있는 사이트입니다. 현재 4단계까지 진행했는데 시간도 오래 걸리지 않고 jQuery 에 문외한이셨던 분들은 쉽게 jQuery를 습득할 수 있으리라 생각됩니다. 한번씩 도전해 보세요. http://try.jquery.com 공감수 0 댓글수 0 2013. 8. 20.
jQuery event Handler 메소드 on() jQuery event Handler 메소드 on() 지금까지 별 의심없이 사용했던 on() 메소드에도 모르고 지나쳤던 부분이 있었네요.중요한 기능은 아니지만 코드를 한층더 가독성있게 코딩이 가능한 부분입니다. $(".buttonGroup .closest").on("click", function(){ $("li.item-a").closest("ul").css("background-color", "red"); }); $(".buttonGroup .parent").on("click", function(){ $("li.item-a").parents("ul").css("background-color", "red"); }); 예전에는 위처럼 코딩을 했었는데 on() 메소드 인자중의 하나가 selector 를 넘길.. 공감수 0 댓글수 0 2013. 8. 19.
jQuery closest(), parents() 메소드의 차이 jQuery closest(), parents() 메소드의 차이 일전에 jQuery 관련 코딩을 할때에는 closest() 메소드의 존재를 몰랐습니다.그래서 parents() 메소드를 사용하곤 했었는데 불편했던 점 중에 하나가 parens() 메소드의 경우는 자신부터 document root 까지 검색을 하기 때문에 검색 결과가 1개 이상일 수 있다는 점이었습니다.그래서 꼭 parents("tr")[0] 뭐 이런식으로 사용하곤 했습니다.하지만 closest 를 사용하면 closest("tr") 로 바로 사용하면 됩니다. 왜냐하면 closest() 메소드는 단 하나의 결과만을 리턴하기 때문이죠아래의 코드를 보면 이해가 쉬울 거라 생각됩니다. I II A B 1 2 3 C III $("li.item-a")... 공감수 13 댓글수 0 2013. 8. 19.
jQuery FullCalendar 달력 플러그인 jQuery FullCalendar 달력 플러그인 달력은 참 쓰이는곳이 많습니다. 개인, 조직의 일정관리에서부터 회의실 및 기타 예약 현황 관리까지 다양한 분야에 사용되고 있습니다.여기서 소개해 드리는 jQuery 플러그인은 제목에서 보다시피 달력 플러그인입니다. 아래와 같은 형태로 이뤄져 있으며 FullCalendar 라는 이름처럼 웹브라우저를 가득 채우는 형태로 구성되어 있습니다.네이버나 네이트의 일정관리처럼 month, week, day 로 일정을 보여주는 뷰가 존재합니다.기존 DB에 존재하는 데이터를 JSON 형태로 받아 이벤트를 등록하게 되면 아래와 같은 달력형태로 표현할 수 있습니다. 해당 플러그인은 단순히 달력형태로 보여주기만 할뿐 일정을 입력하는 기능은 존재하지 않습니다.입력하는 화면은 별.. 공감수 0 댓글수 0 2013. 8. 19.
HTML5 data - Attributes HTML5 data - Attributes 참고 사이트에서 HTML 5 data Attributes 에 대한 설명을 보면HTML5 에서 새롭게 소개된 HTML5 data Attributes 는 사용자 데이터 속성입니다. 태그내에 data- 로 시작하는 속성은 개인데이터로 규정한다는 내용입니다. 라고 적혀 있습니다.예를 들어 아래 코드를 보면 data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon" 이라는 data- 속성이 있습니다. 이 data- 속성은 HTML 태그내에서 별다른 역할을 하지 않는 단순한 데이터들 입니다.data-name="John Resig" 은 name="John Resig"="John Resig" 속성이며d.. 공감수 0 댓글수 0 2013. 8. 19.
Ajax를 사용한 파일 업로드 JQueryFileUpload 플러그인 Ajax를 사용한 파일 업로드 JQueryFileUpload 플러그인 Ajax 폼 전송이 대중화되지 않았을 때는 첨부파일 업로드는 대부분 ActiveX 를 사용하여 개발 되었다.첨부파일 같은 경우는 따로 파일서버로 전송을 하기 마련이고 이 파일서버로 전송된 결과 키값을 폼에 추가하여 폼 전송이 이뤄지는 형태였습니다. 제가 다뤘던 프로그램은 대부분 그렇게 처리했습니다. 물론 이미지또한 이미지 서버에서 처리했습니다.따라서 폼 전송과 파일 전송은 분리되었었고 파일 전송 부분은 대부분 ActiveX를 따로 설치해서 처리되었습니다.여기에 소개해드리는 JQuery 플러그인을 사용하면 Ajax 를 사용하여 손쉽게 파일을 업로드 할 수 있습니다.사이트에 ActiveX 프로그램을 하나라도 줄일 수 있을거라 생각됩니다. .. 공감수 0 댓글수 0 2013. 8. 19.
JSON 을 렌더링하는 JavaScript Templates JSON 을 렌더링하는 JavaScript Templates JAVA에서는 결과값을 HTML 코드로 렌더링하기 위해 JSP 파일내에서 EL 과 JSTL 을 사용합니다. JSP 내에서 을 사용해도 되지만 오류나 가독성으로 인해 권장되지는 않습니다.흐름을 살펴보면 JAVA 파일 내부에서는 필요한 데이터를 DB에서 가져오고 해당 데이터를 렌더링을 담당하는 JSP 파일로 넘겨 JSP 파일내에서 HTML 로 렌더링을 처리하게 됩니다.이때 JAVA 와 JSP 사이에서는 POJO 나 MODEL 객체를 사용하게 됩니다.여기서 설명하고자 하는 JavaScript Templates 는 JSP 에서 하는 일을 JavaScript가 대신하게 됩니다.JAVA에서는 DB에서 가져온 결과값을 JSON 으로 리턴하면 JavaScri.. 공감수 0 댓글수 0 2013. 8. 19.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.