web_05_ jquery

02

jQuery

본 교육자료는 팀 에어 내의 팀원 교육용으로 제작되었음을 알려드립니다. 팀에어 팀원 외 허락을 받지 않은 사람의 무단도용을 일체 금합니다.

HTML CSS JavaScript

+

Back-End

Front-End

Javascript는 엄청 활용된다.

전 시간에 올려놓았듯, 자바스크립트가 많은 곳에서 쓰인다.

자바스크립트 라이브러리도 많고, 프레임워크로도 많고... 너무 많다.

Write less, Do more.

하지만 과연...?

$(document).ready(function() { —

});

Word = CodeJavascript 대비해서 ‘약간’ 직관적임

기본 한줄

기본적으로 다음과 같은 형태를 취하고 있음

구조적으로 이해하면 쉽게 응용가능

$(‘.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 신원준

web_05_ jquery

Education