jQuery+CSS+HTML 공부.
'HeadFirst JQuery' 7장 커스텀 이펙트를 위한 커스텀 함수 등을 보다.

setInterval() 함수를 이용해 디지털 시계를 표시하고 window.onfocus, window.onblur 메소드를 이용해 페이지가 포커스를 받았을 때와 잃었을 때 표시하는 예제 만들기.
이 자바스크립트의 onfocus, onblur 메소드는 광고용 페이지를 마구 띄우는 방식으로 악용되기도 했던 기술.

14/8/31 일

오늘의 jQuery 공부
7장 내용 대충 정리------------------------------------

* 자바스크립트의 window 객체 메소드들 :
window.name : 현재 창의 이름.
window.history : 현재 창에서 열었던 URL들을 저장하고 있다.
window.document : 현재 문서의 내용.
window.onfocus :
클릭, 키보드 입력, 기타 사용자의 입력행위 감지.
window.onBlur : 현재 창이 포커스를 잃었음을 감지.
window.setTimeout() : 함수나 문장 등의 실행전 일정시간 대기 시키기.
window.clearTimeout() : 기다리게 예약한 타이머 취소하기.
window.setInterval() : 함수나 문장 등의 반복실행 사이 일정시간 대기 시키기.
window.clearInterval() : 반복작업 사이 기다리게 한 타이머 취소하기.
ex) window.onblur = bluring;
window.onfocus = focusing;
function bluring(){ 현재창이 포커스를 잃었을 때 할일; }
function focusing(){ 현재창이 포커스를 얻었을 때 할일; }

* setTimeout() setInterval() .delay() 메서드 차이:
setTimeout(실행할 함수, 대기시간); //함수 실행전 일정시간 대기
setInterval(실행할 함수, 대기시간); //함수 반복 실행 간격 설정
fadeIn().delay(대기시간).fadeOut(); //뒤에 체인으로 연결된 메서드를 일정시간 대기시킨다.
* setTimeout(), setInterval()은 window 객체 전용 메서드라서 다른 객체에서 사용할 수 없다. 앞의 window. 는 생략 가능하다.
* clearTimeout()이나 clearInterval()을 사용하려면 setTimeout(), setInterval()을 매개변수로 전달시켜야 한다.
ex) loopTimer = setInterval(loop, 500); //반복 타이머 생성해 변수에 전달
clearInterval(loopTimer); //반복 타이머 취소

8장 내용 대충 정리(AJAX 관련)------------------------------

* AJAX(Asynchronous Javascript and XML): 비동기식 자바스크립트와 XML
AJAX를 사용하면 페이지 전체를 새로 고침하지 않고 필요한 부분만 업데이트가 가능하다.

* $.ajax() 메서드:
$.ajax({
url: "test.htm",
success: function(data){}
});
ex) $.ajax({
url: "test.xml", //불러올 파일 주소
cache: false, //결과를 사용자 컴퓨터에 캐시-서버 호출이 줄어듦
dataType: "xml", //서버에서 받을 것으로 예상되는 데이터 타입
success:function(xml){}
});
ajax 요청의 동일소스 정책: 위의 불러올 xml파일은 html파일과 같은 서버에 있어야 한다.
* 단축 메서드로 get, getJSON, getScript, post, load 메서드가 있다. .load() 메서드는 어떤 요소에서든 호출이 가능하고 반환받은 데이터는 해당 요소 안에 들어가지만 나머지 4개는 jQuery 객체를 이용해서 호출해야 한다. .load() 메서드로 다른 HTML 파일, 자바스크립트 파일, 텍스트, JSON(JavaScript Object Notation) 객체도 불러올 수 있다.

* .find() 메서드: 선택자에 일치하는 요소를 찾는 메서드.

9장 내용 대충 정리(JSON 관련)-------------------------------

* .serialize() .serializeArray() //데이터 보내기 위해 형식 맞추기
* $.post(urlToSend, data, function(json){ }); //서버에 데이터 보내기
* $.getJSON(urlToLoad, function(json){ }); //서버에서 데이터 가져오기
* echo json_encode(arrName); PHP의 연관배열을 JSON 객체형식 문자열로 변환하는 PHP 메소드.
* PHP의 데이터 정규화 및 소독용 메서드들:
htmlspecialchars($_POST["a"]); 문자열을 웹과 데이터 베이스에서 안전한 값으로 변환
empty($_POST["b"]); //값이 비어있는지 여부 확인
preg_match('', $var); //정규표현식, $var가 정해진 패턴과 일치하는지 검사
ex)
$fname = htmlspecialchars($_POST['textFirstName']);
if(preg_match('/[^\w\s]/i', $fname){ invalidName(); }
if(empty(fname){ notComplete(); }

//jQuery 코드:
$(document).ready(function(){ //브라우저가 준비되면
setInterval(getTime, 1000);
window.onblur = bluring;
window.onfocus = focusing;
function bluring(){ //현재창이 포커스를 잃었을 때 할일;
$("#display2").html("onBlur! ");
}
function focusing(){ //현재창이 포커스를 얻었을 때 할일;
$("#display2").html("onFocus! ");
}
function getTime(){
var ap = "";
var d = new Date();
var currHour = d.getHours();
(currHour < 12) ? ap="AM" : ap="PM";
(currHour == 0) ? currHour=12 : currHour=currHour;
(currHour > 12) ? currHour=currHour-12 : currHour=currHour;
var currMin = d.getMinutes().toString();
var currSec = d.getSeconds().toString();
if(currMin.length == 1){ currMin = "0" + currMin; }
if(currSec.length == 1){ currSec = "0" + currSec; }
$("#display").html(ap+" "+currHour+":"+currMin+":"+currSec+" ");
}
});
* 폰트의 색이나 글자체를 지정하는 HTMLCSS의 태그가 다르다.
HTML: <font color="red" face="Tahoma">HTML</font>
CSS: <span style="color:blue; font-family:Tahoma;">CSS</span>