SlideShare a Scribd company logo
02
jQuery
본 교육자료는 팀 에어 내의 팀원 교육용으로 제작되었음을 알려드립니다. 팀에어 팀원 외 허락을 받지 않은 사람의 무단도용을 일체 금합니다.
HTML CSS JavaScript
+
Back-End
Front-End
Javascript는 엄청 활용된다.
전 시간에 올려놓았듯, 자바스크립트가 많은 곳에서 쓰인다.
자바스크립트 라이브러리도 많고, 프레임워크로도 많고... 너무 많다.
Web_05_ jQuery
Write less, Do more.
하지만 과연...?
$(document).ready(function() {
—
});
Word = Code
Javascript 대비해서 ‘약간’ 직관적임
<script src=“http://code.jquery.com/jquery-latest.min.js”></script>
<!— <script> 태그를 사용하거나 새로운 JS 파일 생성
1
2
jQuery를 먼저 불러오고, 그 다음에 스크립트를 사용해야함.
브라우저는 위에서부터 아래로 한줄씩 읽어가기 때문.
기본 한줄
기본적으로 다음과 같은 형태를 취하고 있음
구조적으로 이해하면 쉽게 응용가능
$(‘.object’).css(‘width’, $(window).height());
원
달라
어떠한 대상에
대하여
1 속성/행동을 지정
2 대상의 속성을 알아냄
기본 한줄_ 응용
기본적으로 다음과 같은 형태를 취하고 있음
구조적으로 이해하면 쉽게 응용가능
$(‘.object’).css(‘margin-left’, 100);
.val() = “Hello World!”;
..val().length;
.attr(‘type’) = email;
CSS 지정하기 [어떤 속성을, 얼마나 지정할지]
대상의 value 값을 가져옴 (textarea, input 등)
역시 여러개를 중첩해서 쓸 수 있음
대상의 속성(Attribute)중에서 하나를 가져옴
어떤 동작에 대하여
jQuery는 어떠한 동작에 대해서 함수를 지정할 수 있음
키보드나 마우스 클릭, 문서가 다 불러왔을 때 등 다양함
$(‘.tog’).click(function (event) {
/* add something *’
}
keydown, hover, focus, ready 등…
jQuery Animation
모든 브라우저에서 똑같이 보이게 하라.
브라우저 다르고, 브라우저가 돌아가는 엔진이 다르다.
그래서 CSS3로 Animation을 주기 힘들고 귀찮다.
어디서 봤다면 기분탓
애니메이션_ 기본
jQuery는 기본적으로 제공하는 애니메이션이 있음
이를 활용하여 간단하게 애니메이션 구현가능
$(‘.object’).animation(‘speed’, function() {});
slideUp / SlideDown
fadeIn / fadeOut
show/hide
애니메이션_ 활용
기본적으로 제공되는 애니메이션 외에도 직접 만들 수 있음
단, CSS로 하기 때문에 CSS에 해당 속성이 반드시 있어야 함.
$(‘.object’).animate({
‘property’ : value;
}, ‘speed’);
value에 “px” 등의 단위를 사용하지 못하며,
대상의 값을 가져올 때에는
parseInt(대상)을 사용하도록 한다.
fast / slow / 숫자(1000 = 1초)
FRONT END!
FRONT-END DEVELOPMENT CLEAR
Ruby lang 기초
예제와 짤방이 함께하는
Ruby on Rails 수업
숙제는 게임으로 진행할 예정
2차 회식
Forward [2015 1/2]
앞으로 해야될 것들
자세한 계획은 향후 올라오는 글 참고바람.
치킨 또는 다른 음식
+ 코딩 배틀 (Ruby)
conteam air hackathon project
GET READY
FOR THE
NEXT
LECTURE
(feat. 장문석쌤)
01
Ruby 기초
본 교육자료는 팀 에어 내의 팀원 교육용으로 제작되었음을 알려드립니다. 팀에어 팀원 외 허락을 받지 않은 사람의 무단도용을 일체 금합니다.
Made by 신원준

More Related Content

PDF
03 jsx
Jay Lee
 
PDF
자바스크립트의 또다른 발전, Backbone.js
JinKwon Lee
 
PDF
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
 
PDF
Mean 스택을 사용한 IoT 개발
Jay Park
 
PDF
서버학개론(백엔드 서버 개발자를 위한)
SU BO KIM
 
PDF
React를 이용하여 멀티플랫폼에서 개발하기
WebFrameworks
 
PDF
vuetiful korea 발표자료
치웅 이
 
PDF
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
YoungSu Son
 
03 jsx
Jay Lee
 
자바스크립트의 또다른 발전, Backbone.js
JinKwon Lee
 
[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문
종훈 박
 
Mean 스택을 사용한 IoT 개발
Jay Park
 
서버학개론(백엔드 서버 개발자를 위한)
SU BO KIM
 
React를 이용하여 멀티플랫폼에서 개발하기
WebFrameworks
 
vuetiful korea 발표자료
치웅 이
 
FullStack 개발자 만들기 과정 소개 (Android + MEAN Stack + Redis 다루기)
YoungSu Son
 

What's hot (20)

PPT
레일스를 이용한 애자일 웹 개발 가이드
Sukjoon Kim
 
PPTX
Deview2013 track1 session7
joshua wordsworth
 
PDF
Handlebars
Han Jung Hyun
 
PDF
Polymer Codelab: Before diving into polymer
Chang W. Doh
 
PDF
Nodejs를 이용한 개발
WebFrameworks
 
PDF
처음배우는 자바스크립트, 제이쿼리 #2
성일 한
 
PPT
Ruby on Rails와 함께 하는 애자일 웹 개발
Sukjoon Kim
 
PDF
알아봅시다, Polymer: Web Components & Web Animations
Chang W. Doh
 
PPTX
[하코사세미나] 한 시간 만에 배우는 Jquery
정석 양
 
PDF
jQuery 구조와 기능
Kenu, GwangNam Heo
 
PDF
이동현 - 오픈소스 DBMS 큐브리드 (2009Y05M30D)
Ubuntu Korea Community
 
PPTX
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XpressEngine
 
PDF
Vuejs를이용한서비스구축
Dexter Jung
 
PDF
Why javaScript?
Kim Hunmin
 
PDF
비개발자를 위한 Javascript 알아가기 #2
민태 김
 
PDF
Reflow and repaint 성능 비용
Doo Sung Eom
 
PDF
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
우영 주
 
PDF
Bootstrap
Choonghyun Yang
 
PDF
비개발자를 위한 Javascript 알아가기 #4.1
민태 김
 
PDF
혁신적인 웹컴포넌트 라이브러리 - Polymer
Jae Sung Park
 
레일스를 이용한 애자일 웹 개발 가이드
Sukjoon Kim
 
Deview2013 track1 session7
joshua wordsworth
 
Handlebars
Han Jung Hyun
 
Polymer Codelab: Before diving into polymer
Chang W. Doh
 
Nodejs를 이용한 개발
WebFrameworks
 
처음배우는 자바스크립트, 제이쿼리 #2
성일 한
 
Ruby on Rails와 함께 하는 애자일 웹 개발
Sukjoon Kim
 
알아봅시다, Polymer: Web Components & Web Animations
Chang W. Doh
 
[하코사세미나] 한 시간 만에 배우는 Jquery
정석 양
 
jQuery 구조와 기능
Kenu, GwangNam Heo
 
이동현 - 오픈소스 DBMS 큐브리드 (2009Y05M30D)
Ubuntu Korea Community
 
XECon2015 :: [2-2] 박상현 - React로 개발하는 SPA 실무 이야기
XpressEngine
 
Vuejs를이용한서비스구축
Dexter Jung
 
Why javaScript?
Kim Hunmin
 
비개발자를 위한 Javascript 알아가기 #2
민태 김
 
Reflow and repaint 성능 비용
Doo Sung Eom
 
[토크아이티] 프런트엔드 개발 시작하기 저자 특강
우영 주
 
Bootstrap
Choonghyun Yang
 
비개발자를 위한 Javascript 알아가기 #4.1
민태 김
 
혁신적인 웹컴포넌트 라이브러리 - Polymer
Jae Sung Park
 
Ad

Viewers also liked (20)

PPTX
4-3. jquery
JinKyoungHeo
 
PPTX
4-2. ajax
JinKyoungHeo
 
PPTX
High performance websites v1.0
Byungsun Youn
 
PDF
Web_03_Front-end Advance
team air @ Dimigo
 
PDF
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(2)_디자인사례_정덕주
KTH, 케이티하이텔
 
PDF
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
KTH, 케이티하이텔
 
PDF
Web publishing life
clearboth
 
PDF
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(1)_디자인프로세스,협업_한재기
KTH, 케이티하이텔
 
PPTX
Front-End Developer's work process
sonsanghun
 
PDF
KTH_Detail day_안드로메다에서 온 디자이너이야기_3차_디자인기본요소_박지환
KTH, 케이티하이텔
 
PDF
마크업개발자가 UX를 알아야 하는 이유
Woo Sanghun
 
PDF
[별천지 세미나] 세션1 Sencha로 끝장내는 Front-End 개발과 Architect
JongKwang Kim
 
PDF
Front end performance analysis v0.6
Ji-Tae Kim
 
PDF
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
KTH, 케이티하이텔
 
PDF
Node.js 현재와 미래
JeongHun Byeon
 
PDF
[2012널리세미나] Front-End 최적화의 끝판왕, CSM + Markup Complexity
Nts Nuli
 
PPTX
Node.js의 도입과 활용
Jin wook
 
PDF
[D2대학생세미나] frontend개발자가 들려주는 개발 이야기
NAVER D2
 
PDF
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
John Kim
 
PDF
Jquery핵심노토
jeong seok yang
 
4-3. jquery
JinKyoungHeo
 
4-2. ajax
JinKyoungHeo
 
High performance websites v1.0
Byungsun Youn
 
Web_03_Front-end Advance
team air @ Dimigo
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(2)_디자인사례_정덕주
KTH, 케이티하이텔
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_1차_디자인용어_지훈
KTH, 케이티하이텔
 
Web publishing life
clearboth
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_2차(1)_디자인프로세스,협업_한재기
KTH, 케이티하이텔
 
Front-End Developer's work process
sonsanghun
 
KTH_Detail day_안드로메다에서 온 디자이너이야기_3차_디자인기본요소_박지환
KTH, 케이티하이텔
 
마크업개발자가 UX를 알아야 하는 이유
Woo Sanghun
 
[별천지 세미나] 세션1 Sencha로 끝장내는 Front-End 개발과 Architect
JongKwang Kim
 
Front end performance analysis v0.6
Ji-Tae Kim
 
[발표자료]안드로메다에서 온 디자이너이야기 5차 next_web_지훈_20130221
KTH, 케이티하이텔
 
Node.js 현재와 미래
JeongHun Byeon
 
[2012널리세미나] Front-End 최적화의 끝판왕, CSM + Markup Complexity
Nts Nuli
 
Node.js의 도입과 활용
Jin wook
 
[D2대학생세미나] frontend개발자가 들려주는 개발 이야기
NAVER D2
 
NODE.JS 글로벌 기업 적용 사례 그리고, real-time 어플리케이션 개발하기
John Kim
 
Jquery핵심노토
jeong seok yang
 
Ad

Similar to Web_05_ jQuery (20)

PDF
3D 모델러 ADDIN 개발과정 요약
Tae wook kang
 
PDF
Java script 강의자료_ed13
hungrok
 
PDF
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
 
PDF
20131217 html5
DK Lee
 
PDF
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
현철 조
 
PDF
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Sang Seok Lim
 
PDF
Okjsp 13주년 발표자료: 생존 프로그래밍 Test
beom kyun choi
 
PDF
R.java가 사라졌어요 어떻하죠?:Aquery라이브러리와 안드로이드 개발팁
창규 김
 
PPTX
Hacosa jquery 1th
Seong Bong Ji
 
PDF
Isomorphicspring Isomorphic - spring web seminar 2015
sung yong jung
 
PDF
막하는 스터디 네 번째 만남 AngularJs (20151108)
연웅 조
 
PPTX
Hacosa js study 4주차
Seong Bong Ji
 
PPTX
요즘웹개발
Lee MyoungKyu
 
PDF
Embedded project presentation
Jae-yeol Lee
 
PDF
Javascript everywhere - Node.js | Devon 2012
Daum DNA
 
PDF
Front end dev 2016 & beyond
Jae Sung Park
 
PDF
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
LanarkSeung
 
PPTX
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
yongwoo Jeon
 
PPTX
Bootstrap에 대해서 정기철
Kichul Jung
 
PDF
Web Framework (웹 프레임워크)
Junsu Kim
 
3D 모델러 ADDIN 개발과정 요약
Tae wook kang
 
Java script 강의자료_ed13
hungrok
 
[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...
JinKwon Lee
 
20131217 html5
DK Lee
 
[NDC17] Unreal.js - 자바스크립트로 쉽고 빠른 UE4 개발하기
현철 조
 
Angularjs, ionic, cordova 기반 syrup store app 개발 사례 공유
Sang Seok Lim
 
Okjsp 13주년 발표자료: 생존 프로그래밍 Test
beom kyun choi
 
R.java가 사라졌어요 어떻하죠?:Aquery라이브러리와 안드로이드 개발팁
창규 김
 
Hacosa jquery 1th
Seong Bong Ji
 
Isomorphicspring Isomorphic - spring web seminar 2015
sung yong jung
 
막하는 스터디 네 번째 만남 AngularJs (20151108)
연웅 조
 
Hacosa js study 4주차
Seong Bong Ji
 
요즘웹개발
Lee MyoungKyu
 
Embedded project presentation
Jae-yeol Lee
 
Javascript everywhere - Node.js | Devon 2012
Daum DNA
 
Front end dev 2016 & beyond
Jae Sung Park
 
Create-React-App으로 SSR을 구현하며 배운 점 (feat. TypeScript)
LanarkSeung
 
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
yongwoo Jeon
 
Bootstrap에 대해서 정기철
Kichul Jung
 
Web Framework (웹 프레임워크)
Junsu Kim
 

More from team air @ Dimigo (6)

PDF
Web_07_Rails Advanced
team air @ Dimigo
 
PDF
Web_06_Ruby On Rails (임시)
team air @ Dimigo
 
PDF
Ruby_01_Ruby Basic
team air @ Dimigo
 
PDF
Web_04_Javascript
team air @ Dimigo
 
PDF
Web_02 CSS
team air @ Dimigo
 
PDF
Web_01 HTML
team air @ Dimigo
 
Web_07_Rails Advanced
team air @ Dimigo
 
Web_06_Ruby On Rails (임시)
team air @ Dimigo
 
Ruby_01_Ruby Basic
team air @ Dimigo
 
Web_04_Javascript
team air @ Dimigo
 
Web_02 CSS
team air @ Dimigo
 
Web_01 HTML
team air @ Dimigo
 

Web_05_ jQuery