Learn jQuery Day 13,14,15

Day13
이번것도 길다
초반부터 주구장창 강조하는 셀렉터의 조건을 최대한 상세히 적어 DOM에서의 검색 횟수를 최대한 줄이라는 것과 animate 메서드를 이용해 플래쉬의 모션트위닝 구현한 장면이 볼만하다.

ps. 짬을 이용해 보여주는 코드들은 크롬 개발자 도구에서도 확인 가능

+=5의 충격


bos.css('font-size', '+=5');

그 밖엔… 딱히 내가 animate 메서드를 이용할 일이 있겠나… 2가지 이상 효과를 줄때 queue를 이용하면 순서대로 할지, 동시에 할지를 설정할 수 있다는거 정도 기억하자

Day14
Day13에 숙제가 있었어? 😯

Day15
드디어 본격적으로 플러그인 제작에 들어가나보다.
아마도 jQuery 플러그인 중 ImageSlider가 가장 많지 않을까 싶은데… 오래전 대학때도 플래시로 처음 만들어봤던게 이미지 갤러리였다.

암튼 뭐… 30분 가량 따라하면 간단한 플러그인 하나 만들 수 있는데 종종 눈에 띄는 === 는 == 와 마찬가지로 값을 비교하긴 하지만 = 가 하나 더 늘어난 만큼 타입까지 비교한다고 한다. 흔히 0은 false, 그보다 큰 수는 true라고 인식하지만 === 로 검사해보면 0은 false가 아니고 1,2,3 역시 true가 아닌 것이 된다.

그 밖에 data-dir 프로퍼티도 눈에띈다. KnockoutJs에서의 data-bind 처럼 data-이름을 내맘대로 정할 수 있는데 이제보니 jQueyr에서 나온게 아니라 html5의 속성이라 한다. 친절한 예제까지 들어있는 [jquery].data() api 실습 참고

그리고… 쌤이 올려놓은 image를 사용하려다 잊혀진 기억속에서 간신히 placekitten.com을 떠올려 사용해봤더니 페이지 로딩시 이미지 width값을 제대로 가져오지 못하는 문제가 있다. 로컬 리소스가 아니라서 그런가? 확장자명이 jpg, gif, png 뭐 그런게 아니라서 그런가? Content-Type은 분명 jpeg인데 … 잘 모르겠다.

Accept-Ranges:bytes
Cache-Control:public
Connection:keep-alive
Content-Length:41539
Content-Type:image/jpeg
Server:cloudflare-nginx

결국 imgWidth=600 으로 fix. 😡


http://revirth.phps.kr/tuts/Day15.html

http://learnjquery.tutsplus.com/
Javascript parseInt() function 
Javascript Operators 
.outerWidth()
CSS3 border-radius Property
http://placekitten.com/
http://longgoldenears.blogspot.com/2007/09/triple-equals-in-javascript.html
[jquery].data() api 실습

Advertisements
%d bloggers like this: