이번 글은 jQuery의 함수인 each의 주의사항을 다뤄본다. each 함수는 기본적으로 for문이라고 봐도 무방하다. jQuery에서 제공하는 일반적인 iterator function 이다. callback 개념이 부족하다면 발생할 수 있는 경우와, each 함수의 return에 대해 알아볼 것이다. 반복문을 쓰는 이유 중 하나의 예로, 배열에 있는 값 중 원하는 값을 찾기 위해 루프를 돌린다고 가정하자. 코드는 아래와 같다. someArray = new Array(); someArray[0] = 't5'; someArray[1] = 'z12'; someArray[2] = 'b88'; someArray[3] = 's55'; someArray[4] = 'e51'; someArray[5] = 'o322'..

들어가며: 모든 사이트에 하나씩은 있는 팝업을 구현하는 방법에 대해서 설명을 하려고 합니다. 팝업을 열어주는 방법은 매우 간단하게 구현이 가능하지만, 오늘 하루 열지 않기, 하루 동안 열지 않기를 구현하기 위해서는 쿠키(cookie)를 사용해야 합니다. 쿠키는 간단하게 말하면, 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버에서 인터넷 사용자의 컴퓨터에 설치하는 작은 기록 정보 파일을 말합니다. 사용자의 접속을 기록으로 남길 수 있고, 사용자가 방문한 시간으로부터 30초, 10분 등 다양하게 쿠키를 저장하고, 만료(expire)를 시킬 수 있습니다. 만료를 시킨다는 내용은 그 시간 이후에 이 쿠키파일을 없애겠다 라는 말입니다. ..

들어가며 처음에 javascript, jQuery, ejs를 사용을 하다보면 각 역할을 유기적으로 연결하는게 참 어려운 문제라고 생각합니다. ejs에서 선언한 값을 어떻게 가져오는지, jQuery로 가져온뒤에 javascript에서는 어떻게 처리를 해야하는지도 감이 안올때가 있습니다. 간단한 예제중에 입력창에 입력을 받고, 입력한 데이터를 가져오는 버튼을 구현하면서 ejs와 jQuery, javascript를 전체적으로 연결하는 연습을 할 수 있습니다. 아래 예제는 입력창과 버튼을 ejs로 생성을 하고, javascript에서 jQuery를 이용해 input과 button의 reference의 값을 가져온 뒤에 이벤트를 바인딩하고 결과를 가져오는 예제입니다. 소스코드 search_view.ejs 아래 소..

JSON APIs와 Ajax를 이용해 데이터 로딩 및 완료 된 데이터를 처리해 HTML 화면에 출력하는 예제 들어가며 만약 날씨 정보와 같이 수시로 변하는 데이터를 HTML을 통해 화면에 출력을 해주고 싶다면 어떻게 해야할까요? 이처럼 고정값이 아닌, 항상 변하는 값을 HTML을 통해 출력해야 하기 때문에 로컬 파일이나, 클라우드에 있는 파일에서 값을 가져와 HTML페이지에 출력을 해줘야 합니다. 그렇다면 데이터를 어떻게 어디서 어떤 형태로 가져오는지 알아보겠습니다. APIs(Application Programming Interfaces)는 애플리케이션 사이에 소통하는 인터페이스를 말합니다. 우리가 흔히 말하는 Google APIs도 같은 애플리케이션 간에 소통하는 인터페이스를 제공합니다. 우리가 특정 ..

요즘 시간이 날때마다, AngularJS를 조금씩 공부하고 있다. AngularJS는 보통 자바스크립트 MVW(Model View Whatever) 프레임워크라고 하고, jQuery는 자바스크립트 Library라고 한다. 예전부터 AngularJS에 대한 궁금증을 가지고 있었는데.. 드디어 시간을 내서 AngularJS에 대해서 공부를 했다. 아래 소스를 보면, 간단하게 AngualrJS와 jQuery의 차이점에 대해서 파악해 볼 수 있다. 동일한 결과를 가져오는 두가지의 소스이다. 먼저, jQuery를 이용한 방법이다. 먼저, HTML에는 TABLE과, TBODY를 설정했다. 이어서, Javascript 파일에서 아래의 ArrayData를 $.each를 사용해서 반복한다. $(function() { v..

이클립스에서 JSDT를 사용하여서 jQuery의 Code를 Assist 해보도록 하자. 1. 먼저 메뉴의 Help - Eclipse Marketplace를 선택한다. 2. JSDT로 검색한다. 3. 현재 최신 버전은 JSDT jQuery 1.7.0이다. 4. Install 을 클릭한다. 5. 아래 화면이 나오면 Confirm을 클릭한다. 6. I accept the terms of the license agreement를 클릭하고, Finish를 클릭한다. 7. 설치가 완료되면, 이클립스를 재시작한다. 8. 재시작 후, 적용할 프로젝트에서 마우스 우클릭, Properties를 클릭한다. 9. JavaScript - Include Path 를 클릭하고, Add JavaScript Library를 클릭한다...

참조문서 : http://api.jquery.com/ 제이쿼리는 DOM을 조작하거나 Ajax 요청을 할 때 널리 쓰이는 라이브러리다. 제이쿼리로 할 수 있는 건 모두 DOM API로도 할 수 있다. 하지만 제이쿼리를 쓰면 다음과 같은 장점이 있다. 브라우저 호환성을 걱정안해도 된다. Ajax 관련 API가 무척 단순하다. 내장된 DOM API를 더 유용하고 단순하게 바꾼 메소드를 제공한다. 주로 달러기호($)로 표현하며, 제이쿼리를 불러올 때는 1 cs 이런식으로 CDN을 이용하면 된다. 1. DOM 기다리기 제이쿼리에서는 브라우저가 페이지를 완전히 읽고 DOM을 구축한 다음에만 호출되는 콜백함수가 있다. $(document).ready(function () {} // 단축표기 $(function() {..

특정 영역을 제외한 부분을 클릭했을 때 이벤트를 발생시켜야 할 때가 있다. 그때는 다음과 같이 하면 된다. $('html').click(function(e) { if(!$(e.target).hasClass("area")) { alert('영역 밖입니다.'); } }); 즉 특정 영역에 class명을 부여하고 클릭한 곳에 그 클래스명이 없으면 이벤트를 발생시키는 로직입니다.

One Two Three Four Five 를 다음과 같이 배열로 만드는 방법은 여러가지 겠지만 간단히 map 함수를 이용할 수 있다. [1, 2, 3, 4, 5] var arr = $.map($("li"), function(item) { return $(item).attr("value"); });

First Child Last 다음과 같을 때 First 를 Second로 바꾸고 싶을 때 어떻게 하면 될까?! $(".parent").contents() 를 하면 다음과 같이 나온다. ["First", Child, "Last"] $(".parent").contents()[0].textContent = "Second" 하면 First 값이 Second로 바뀐다.