3주차

.each() 선택된 객체의 수만큼 루프를 반복시킴

package control - list package - bracket highlighter : 코드의 열고 닫힘을 체크해주는 확장 플러그인

package control - install package - html-css-js prettify : 코드 정리해주는 확장 플러그인. 단 작동시키려면 node.js가 설치되어있어야 함 (단축키 ctrl + shify + h)

node.js - 자바스크립트 실행 환경을 서버사이드로 옮겨놓은 자바스크립트 라이브러리. 서버에서 쓰이는 응용프로그램을 자바스크립트로 프로그래밍..

*jquery를 이용한 ajax 통신 : 페이지 전환 없이 서버와 데이터 송수신을 가능케 하는 비동기통신 기법. jquery로 가능하게 되어 앞으로 더 많이 쓰일 것. 익혀둬야 할 것..

$.ajax()

server 측 환경

[app.js]

clicent 측 환경

[nodeServer > public > ajax01.html]

ex)

$.ajax({

url:url,

data:data,

method:"post",

success:function(data){}

});

개발자가 보통 url을 던져주면 그에 응답하는 데이터 형태를 요구할 수 있어야.

데이터는 plain text, xml, html, json 등 다양한 형태로 올 수 있지만 주로 쓰이는 데이터의 형태는 json

데이터 형태가 html일 경우 : 웹브라우저에서만 사용 가능

json일 경우 : 웹브라우저, 모바일웹, 안드로이드 앱, iOS 앱 등 다양한 경우에 사용 가능

json : JavaScript Object Notation 자바스크립트 객체표기법. object 형태를 띠고 있지만 실제 type은 string.

ex)

{"num"1, "name":"gura", "isMan":true, "weight":80.5}

num:1을 표현

-> html : <num>1</num>

-> json : "{"num":1}"

복잡한 ajax 구문을 한 줄로 표현 가능. jquery.form.js 플러그인

form이 정확하게 코딩(action, method, input name 등)되어있는 전제하에 사용

ex)

$("form").ajaxForm();

[nodeServer > public > ajax02.html]

*angular.js : 구글에서 배포하는 자바스크립트 라이브러리. 목적 1. 자바스크립트를 좀 더 편리하게 사용 2. 제이쿼리와 비슷한 기능의 강화. 다만 ui 기능은 없으므로 bootstrap을 같이 사용. 현재 외국에서 주로 쓰이고 있음. (ui -> bootstrap, js -> angular)

[helloAngular.html]

플러그인

외국의 개발자들이 취미 삼아 제작한 수많은 jquery plugin이 있음. 우리는 그저 갖다쓰면 될뿐..

원하는 플러그인을 검색한 뒤, 데모를 확인한 후(Try a demo), 다운로드(Download now), 사용법 참고(Fork on GitHub)하여 적용하면 끝.

ui 관련 플러그인은 js 외에 이미지, 폰트, css 파일 등 추가로 적용

$('selector').action({option}); <-  기본 구조!

ex)

imgLiquid : 이미지 비율이 깨지지 않는 선에서 지정된 크기에 맞게 변환해주는 플러그인

http://plugins.jquery.com/imgLiquid/

[plugin_imgLiquid.html]

fotorama : 간단한 사용법의 동적 이미지 슬라이드 플러그인. 터치 환경도 지원

http://plugins.jquery.com/fotorama/

[plugin_fotorama.html]

smooth scroll : 부드러운 스크롤링을 만들어주는 플러그인

http://plugins.jquery.com/smooth-scroll/

[smoothScroll.html]

and so on..

참고링크

node.js http://nodejs.org/

jquery ajax http://api.jquery.com/category/ajax/

jquery.form.js http://malsup.com/jquery/form/

angular.js https://angularjs.org/

jquery plugins http://plugins.jquery.com/