Assim como todo programador precisa ter noções sobre design e usabilidade, nós designers também precisamos dominar (mesmo que forma básica) algumas ferramentas que compõem o desenvolvimento de um site.
Nesse artigo, vamos mostrar o básico que todo webdesigner precisa ter desse framework javascript.
Mas espera aí, o que é um framework ?
“Framework é um conjunto de classes que colaboram para realizar uma responsabilidade para um domínio de um subsistema da aplicação.” — Fayad e Schmidt
Resumindo: é um conjunto de classes que fornecem facilidades genéricas, tornando o desenvolvimento cada vez mais rápido e organizado. (write less, do more / slogan do jQuery)
Javascript
Antes de começar com jQuery vamos ver o basicão de javascript:
Concatenando e declarando variáveis
//declarando variáveis
var foo = 'olá';
var bar = 'mundo';
// para concatenar, usa-se "+"
var foobar = foo + ', ' + bar; // resultado: "olá mundo"
Operadores de comparação
var foo = false;
/* as "chaves após o if são obrigatórias
* a condição só é executada se for verdadeira
*/
if(foo) {
//foo é false, nunca entrará aqui
}
if(foo) {
//foo é false, esse código não será executado
alert('foo é verdadeiro');
} else {
//esse código será executado
alert('foo não é verdadeiro');
}
Javascript inline (onde vamos escrever os códigos acima)
Javascript inline (onde vamos escrever os códigos acima)
E aí, vamos ao jQuery?
jQuery()
Dependendo da velocidade da internet do usuário (e de alguns outros fatores também) alguns elementos do layout podem demorar um pouco para carregar completamente; com isso os objetos que queremos manipular com jQuery.
Para executar o código apenas quando o Javascript estiver pronto, usamos o $(document).ready:
$(document).ready(function() {
alert('javascript está pronto !');
});
// existe uma forma simplificada do ready (faz a mesma coisa)
$(function(){
alert('javascript está pronto !');
});
Okay! E agora ?
Se você não conseguiu entender (ou mesmo que tenha) aqui vai uma explicação do que são e para que servem os “seletores” de jQuery.
Um pouco da Estrutura
Em jQuery, vamos sempre usar essa estrutura básica: $(objeto) …
Entenda como objeto aquilo que queremos selecionar para manipular (trocar classe, mostrar, ocultar, animar, etc). “Selecionar” um objeto com jQuery é muito similar ao que fazemos no CSS (incluindo também suas pseudo-classes):
// selecionando tags
$('p');
$('h1');
// tags com classes
$('div .bar');
$('span .foo');
// usando pseudo-classes
$('div:first'); // selection o primer div
$('div:visible'); // div's visiveis
$('#form :input'); // inputs dentro de form
Sendo assim, quando escrevemos $(document).ready(); o objeto em questão é o documento (document) chamando o evento ready() ; que verifica se o documento está pronto. São os eventos e efeitos que fazem a “mágica” do jQuery acontecer.
Alguns dos eventos e efeitos mais usados
click()
Como o nome sugere, esse evento é ativado quando clicar no objeto selecionado;
toggleClass() e toggle()
Esse evento serve para trocar a classe (toggleClass) ou o estado de visibilidade (toggle) de um determinado objeto;
fadeIn() e fadeOut()
Fazem o mesmo que show() e hide() – respectivamente – porém de forma mais elegante e menos “dura”.
css()
Com esse, é possível alterar qualquer prioridade css do objeto !
animate()
Esse é um dos mais legais. Faz animações com o objeto.
attr()
Funciona como um seletor, que “pega” o valor de determinado atributo ou “define” o seu valor.
html()
Define ou “pega” o valor que está entre as tags do objeto.
No próximo post vamos sair do lero-lero, colocar em prática o que vimos e criar alguns efeitos usando botões e formulários !
Até lá ;)
Pingback: 10 ferramentas que ajudam a produtividade - YEPA