jquery básico (parte 1)

jQueryIniciando (PARTE I)

Objetivos

Nivelar conhecimentos sobre JavascriptApresentar o jQueryNão apenas utilizar, mas saber (de forma

geral) como o jQuery funciona

Agenda

Javascript◦Escopo◦Tipos◦OOP◦Eventos

jQuery◦Introdução◦Vantagens◦Como funciona?◦Utilizando

ATENÇÃO

Javascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É Java

Javascript

Linguagem de script dinâmica e orientada à objetos

Implementação da especificação ECMA-262 (ECMAScript)

Utilizada primeiramente para dinamizar os elementos de uma página HTML

É case sensitive

Javascript - escopo

Podemos declarar variáveis e funções no contexto global ou no contexto local (privado)

Caso não utilizarmos var na declaração, será levado em consideração o contexto global referente ao contexto local

var i = 0; // global

function teste(){

var i = 0; // local

return function() // closure{

// aqui será utilizado o i do contexto da função teste()++i; alert(i);

}}

var testando = teste();testando();alert(i);testando();alert(i);testando();alert(i);

Javascript - tipos

Object◦Tudo em javascript é objeto◦Podem ser alterados em runtime◦Todos objetos possuem prototype (não deve-se

alterar Object.prototype) onde podemos adicionar/alterar métodos e atributos

◦Dados podem ser acessados utilizando “.” (obj.identificador) ou como índice de um array (obj[“identificador”])

Javascript - tipos

Strings◦Objetos IMUTÁVEIS que contém um ou mais

caracteres◦Métodos comuns: charAt(), indexOf(),

toUpperCase(), toLowerCase(), replace(), split()

Javascript - tipos

Number◦Objeto que representa valores numéricos◦Caso valor não puder ser representado

numericamente é um NaN (not a number)◦Podem ser manipulados através de Math

(Objeto para operações matemáticas)

Javascript - tipos

Boolean◦Objeto que representa valores lógicos (true ou

false)◦Permite converter objetos não booleanos

através do construtor

Javascript - tipos

Array◦Armazena mais de um valor em uma única

variável◦Possui apenas índices NUMÉRICOS (a partir de

ZERO)◦Métodos comuns: join(), push(), unshift(),

reverse(), pop(), shift(), sort()

Javascript - tipos

Functions◦Podem ser nomeadas ou anônimas (Lambda e

Closures)◦Qualquer função pode ser atribuída a uma

variável (atenção em relação ao escopo)

Javascript - oop

Definimos classes usando prototype e function

Podemos criar métodos públicos, privados e privilegiados

Podemos criar atributos públicos e privadosMétodos e atributos privados apenas podem

ser acessados por métodos privilegiadosPodemos criar também dados estáticos

function Pessoa(nome, idade){

var nome = nome; // privatevar idade = idade; // privatefunction ficaMaisVelho(inc) { idade += inc} // private

this.toString = this.getNome = function() { return nome; }this.getIdade = function() { return idade; }

this.come = function(qualidade) {if (qualidade < 4) {

ficaMaisVelho(Math.abs(qualidade));} else {

ficaMaisVelho(qualidade/10);}

}++Pessoa.populacao;

}

Pessoa.populacao = 0;

Pessoa.prototype.comePorcaria = function(){

this.come(-2);}

Pessoa.prototype.comeFruta = function(){

this.come(10);}

var fulano = new Pessoa(“Fulano”, 5);fulano.comePorcaria();fulano.comeFruta();alert(fulano + “ tem “ + fulano.getIdade() + “ anos”);alert(“existem “ + Pessoa.populacao + “ pessoa(s)”);

Javascript - eventos

Através do javascript podemos manipular os eventos dos objetos

Eventos comuns: onload, onclick, onfocus, onblur

jQuery

“jQuery is a fast and concise JavaScript Library that simplifies HTML document

traversing, event handling, animating, and Ajax interactions for rapid web

development. jQuery is designed to change the way that you write

JavaScript.”

jQuery - vantagens

Simplifica a forma de trabalhar com Javascript

É extensívelÉ leve (31 kb a versão de produção)É cross-browser (como os plugins podem

ser criados por qualquer pessoa, podem não manter a compatibilidade)

jQuery – como funciona?

Basicamente é criada uma função jQuery() que retorna um objeto

É criado um alias $ para esta funçãoQuando você acessa $(document) você está

chamando a função jQuery() passando o objeto document por parâmetro

Quando acessa $.ajax() está chamando o método ajax() do objeto criado pela função jQuery

jQuery – utilizando

Para manipular um ou mais elementos apenas utilizamos $(SELETOR)

Existem vários valores para o SELETOR os mais comuns são: seletor de tag, seletor de id e seletor de class

<script type=“text/javascript”>$(document).ready(function() {

$(“a”).css(“border”, “9px solid red”);});</script><a href=“#”>teste1</a><a href=“#”>teste2</a><a href=“#”>teste3</a>

<script type=“text/javascript”>$(document).ready(function() {

alert($(“#minhaDiv”).html());});</script><div id=“minhaDiv”>

<h1>Teste</h1><p>Testando os dados!</p>

</div>

<script type=“text/javascript”>$(document).ready(function() {

$(“.teste”).css(“border”, “9px solid red”);});</script><a href=“#” class=“teste”>teste1</a><a href=“#” class=“teste”>teste2</a><a href=“#”>teste3</a>

Mais informações

http://phrogz.net/js/classes/OOPinJS.htmlhttp://phrogz.net/js/classes/OOPinJS2.htmlhttp://www.w3schools.com/jshttp://docs.jquery.com