Visão geral sobre JavaScript e jQuery.

1. jQuery Iniciando (PARTE I)

2. Objetivos Nivelar conhecimentos sobre Javascript Apresentar o jQuery Não apenas utilizar, mas saber (de forma geral) como o jQuery funciona

3. Agenda Javascript Escopo Tipos OOP Eventos jQuery Introdução Vantagens Como funciona? Utilizando

4. ATENÇÃO Javascript NÃO É Java Javascript NÃO É Java Javascript NÃO É Java Javascript NÃO É Java Javascript NÃO É Java Javascript NÃO É Java

5. 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

6. 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

7. var i = 0; // global function teste() { var i = 0; // local returnfunction() // 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);

8. 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”])

9. Javascript - tipos Strings Objetos IMUTÁVEIS que contém um ou mais caracteres Métodos comuns: charAt(), indexOf(), toUpperCase(), toLowerCase(), replace(), split()

10. 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)

11. Javascript - tipos Boolean Objeto que representa valores lógicos (true ou false) Permite converter objetos não booleanos através do construtor

12. 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()

13. 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)

14. Javascript - oop Definimos classes usando prototype e function Podemos criar métodos públicos, privados e privilegiados Podemos criar atributos públicos e privados Métodos e atributos privados apenas podem ser acessados por métodos privilegiados Podemos criar também dados estáticos

15. function Pessoa(nome, idade) { var nome = nome; // private var idade = idade; // private functionficaMaisVelho(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;

16. 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)”);

17. Javascript - eventos Através do javascript podemos manipular os eventos dos objetos Eventos comuns: onload, onclick, onfocus, onblur

18. 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.”

19. 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)

20. jQuery – como funciona? Basicamente é criada uma função jQuery() que retorna um objeto É criado um alias $ para esta função Quando 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

21. 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

22. <script type=“text/javascript”> $(document).ready(function() { $(“a”).css(“border”, “9px solidred”); }); </script> <a href=“#”>teste1</a> <a href=“#”>teste2</a> <a href=“#”>teste3</a>

23. <script type=“text/javascript”> $(document).ready(function() { alert($(“#minhaDiv”).html()); }); </script> <div id=“minhaDiv”> <h1>Teste</h1> <p>Testando os dados!</p> </div>

24. <script type=“text/javascript”> $(document).ready(function() { $(“.teste”).css(“border”, “9px solidred”); }); </script> <a href=“#” class=“teste”>teste1</a> <a href=“#” class=“teste”>teste2</a> <a href=“#”>teste3</a>

25. Mais informações http://phrogz.net/js/classes/OOPinJS.html http://phrogz.net/js/classes/OOPinJS2.html http://www.w3schools.com/js http://docs.jquery.com