HighLight in your life~

Javascript 공부는 'Head First jQuery'로 시작해보는 것이 어떨지.. 생각해봅니다.

읽어 본 결과, 정말로 좋은 것 같습니다. Javascript 공부하기 전에 읽어보고 다른 책을 본다면 많은 도움이 될 듯 합니다.

아래의 내용은 저도 잘 못 하지만, 제가 모르는 책의 내용을 정리해보았습니다.

기본적인 내용입니다. 학생 혹은 Junior 개발자분들께서 한 번 읽어 보시면 좋을 듯 합니다.

-----------------------------------------------------------------------------------------------------

*window 객체의 onblur, onfocus 이벤트 핸들러를 이용하면 사용자가 브라우저를 어떻게 조작했는지 알 수 있어서 매우 편리하다.
*자바스크립트 windows객체의 onblur, onfocus 이벤트 핸들러를 jQuery의 .blur(), .focus() 메서드와 혼동하지 말라.
*jQuery의 .blur(), .focus() 메서드는 HTML 폼 필드를 비롯한 HTML 요소에 쓰라고 만든 거지 window 객체에 쓰라고 만든게 아니다.

*********************************************************************
window객체의 속성, 이벤트 핸들러, 메서드를 설명과 연결
*********************************************************************

window.name : 창의 이름에 접근할 수 있는 window객체의 속성
window.history : window객체의 속성이고 현재 창에서 열었던 URL을 저장하고 있음
window.document : window객체의 속성이고 현재 문서의 내용을 가리킴
window.onfocus : 클릭이나 키보드 입력, 기타 사용자가 입력하는 행위를 감지함
window.setTimeout() : window객체의 메서드이고 함수나 문장을 실행하기 전에 일정 시간 기다리도록 함
window.clearTimeout() : window객체의 메서드이고 기다리도록 예약한 타이머를 취소할 때 사용
window.setInterval() : window객체의 메서드이고 함수나 문장을 반복 실행하는 사이에 일정 시간 기다리게 함
window.clearInterval() : window객체의 메서드이고 반복 작업 사이에 기다리도록 만든 타이머를 취소함
window.onblur : window객체의 속성이고 현재 창이 포커스를 잃었음을 감지함

*window객체의 onfocus, onblur 이벤트 핸들러를 통해 현재 창이 포커스를 받거나 잃는 것을 감지할 수 있음

window.onfocus를 통해 창이 포커스를 받을 때를 알 수 있고 window.onblur를 통해 창이 포커스를 잃을 때를 알 수 있다.
window객체에는 사용자가 브라우저에서 무슨 일을 하고 있는지 알 수 있는 정보가 아주 많고 그런 정보에 따라 커스텀 함수를 실행항 수 있다.

window.onblur = blurResponse;
function blurResponse() {
}

window.onfocus = focusResponse;
function focusResponse() {
}


*******************************************************************************************
자바스크립트 => 시간에 따라 함수를 호출하는 타이머 메서드
*******************************************************************************************

setTimeout : 함수를 실행하기 전에 일정 시간 기다리게 하려면 저를 사용하세요.

setTimeout(myFunction, 4000);
myFunction : 타이머가 끝나면 실행할 함수
4000 : 타이머시간(밀리초)

setInterval : 나는 함수가 일정 시간마다 계속 실행되게 할 수 있어요
setInterval(repeatMe, 1000);
repeatMe : 일정 시간마다 실행할 함수
1000 : 함수 사이의 대기 시간(밀리초)

*******************************************************************************************
jQuery => 시간에 따라 함수를 호출하는 타이머 메서드
*******************************************************************************************

delay : 나는 내 뒤에 체인으로 연결된 메서드를 기다리게 만들 있어요

slideDown().delay(5000).slideUp();
slideDown : 이런 체인을 jQuery에서는 애니메이션 큐(Queue)라고 한다.
delay(5000): .delay(5000)메서드는 .slideUp()메서드와 .slideDown()메서드 사이에 5초를 기다리게 만든다.

*모든 브라우저가 window객체를 지원하나요?
=> 최근 브라우저는 모두 window객체를 지원합니다. 브라우저의 탭마다 window객체가 있고 각 window객체에는 해당 탭에 불러들인 웹 페이지를 나타내는 document 객체가 있다.

************************
window객체
************************
window객체는 자바스크립트의 최상위 객체이다.
window객체의 속성과 이벤트 핸들러, 메서드를 사용해서 브라우저 이벤트를 감지하고 대응할 수 있다.
창이 포커스를 받으면 onfocus 이벤트 핸들러가 동작합니다.
창이 포커스를 잃으면 onblur 이벤트 핸들러가 동작합니다.


************************
Ajax
************************
Ajax에 대해 들을 때마다 XMLHttpRequest 객체라는 걸 사용해야 한다고 들었는데, 맞는나요?
=> 맞는 얘기지만, jQuery를 사용할 때는 그렇지 않습니다. 웹 개발자는 그 객체에 대해 알 필요가 없어요. .ajax() 메서드를 사용하면 jQuery가 XMLHttpRequest 객체에 관한 세부사항을 다 처리합니다.
브라우저마다 Ajax 요청을 조금씩 다르게 처리해야 하는데, 이 작업도 jQuery가 방문자의 브라우저에 맞게 처리합니다.

서버에서 에러를 반환하거나 응답하지 않을 때는 어쩌죠? 계속 기다려야 하나요?
=> 그렇지 않아요. Ajax 요청을 보낼 때 매개변수를 사용해서 쵣 얼마나 기다릴지 정할 수 있습니다. 요청에 대해 성공적인 응답을 받았을 때 success 이벤트 핸들어가 실행되는 것과 마찬가지로 error, complete 같은
이벤트 핸들러가 있어서 여러 상황에 대응할 수 있습니다. 이런 이벤트 핸들러는 매 Ajax 요청마다 개별적으로 설정할 수도 있고 모든 Ajax 요청에 공통으로 설정할 수도 있습니다.

Ajax를 사용해서 페이지에 불러올 수 있는게 XML 외에 어떤 것이 있나요?
=> jQuery를 사용하면 모든 종류의 정보를 페이지에 불러올 수 있습니다. 다른 HTML파일, 자바스크립트 파일, 텍스트, JSON(Javascript Object Notatoin) 객체도 불러올 수 있습니다.

jQuery에 Ajax 단축 메서드가 또 있나요?
=> jQuery에는 Ajax에 대한 단축 메서드가 전부 다섯 가지 있습니다. get, getJSON, getScript, post, load 메서드입니다. 앞의 네 가지는 jQuery 객체를 이용해서 호출하지만 .load() 메서드는 어떤 요소에서든 호출할 수 있고
반환받는 데이터는 해당 요소 안에 들어갑니다.

언제 .load() 메서드를 사용하고 언제 .ajax() 메서들 사용하죠?
=> .load() 메서드는 getTimeAjax 함수에서 했던 것처럼 특정 데이터를 특정 요소 안으로 불러올 때 사용합니다. .ajax()메서드는 훨씬 더 복잡하고 많은 매개변수를 받을 수 있고 훨씬 더 다양하게 이용할 수 있습니다.
.ajax() 메서드를 이용해서 다양한 정보를 가져올 수도 있고 서버에 데이터를 보내서 처리할 수도 있습니다.


************************
Ajax
************************
=> 여러 기술의 조합입니다. Ajax를 사용하면 페이지 전체를 새로고침하지 않고도 필요한 부분만 업데이트할 수 있습니다.
데이터를 서버에 보내서 처리하게 한 다음에 돌려받는 특별한 요청을 생성했습니다.
jQuery에서는 .ajax()메서드를 통해 Ajax기능을 구현했습니다.

************************
XML
************************
데이터와 그 구조를 설명하는 데 쓰이는 엄격하지만 유연한 마크업 언어입니다.
정보를 저장하는 데도 쓸 수 있고 데이터를 전송할 때 형식을 맞추는 용도로도 쓸 수 있습니다.
RSS나 SOA/Web서비스, SVG같이 널리 쓰이는 웹 기술에 사용됩니다.

************************
ajax() 단축 메서드
************************
jQuery에는 ajax() 단축 메서드가 5개 있습니다. 이들 단축 메서드는 기본적으로 서로 다른 매개변수를 받게끔 설정되어 있긴 하지만 
결국 .ajax() 메서드를 호출한다는 점은 똑같습니다.
$.get
$.getJSON
$.getScript
$.post
$.load


----------------------------------
생활코딩 자바 웹 개발 과정
인프런 코드스쿼드 - 자바강의
----------------------------------


자바 웹 프로그래밍 Next Step

GDE

아래는 읽어봐야 할 책 목록이다.

이해하기 쉽게 풀어쓴] jQuery & jQuery Mobile  
실전 JQUERY 쿡북
HEAD FIRST HTML and CSS HTML5를 적용한 웹 제작 지침서
Head First JavaScript Programming 게임과 퍼즐로 배우는 자바스크립트 입문서
자바스크립트를 몰라도 배울 수 있는 Head First jQuery
HEAD FIRST JAVASCRIPT 대화형 웹 애플리케이션의 시작
HEAD FIRST AJAX 자꾸 가고싶은 웹 사이트의 비밀