O documento apresenta uma introdução ao jQuery, cobrindo os seguintes tópicos: 1) Apresenta os objetivos do curso de introdução ao jQuery, como nivelar conhecimentos sobre JavaScript e mostrar como o jQuery funciona; 2) Discutem conceitos básicos de JavaScript como escopo, tipos, orientação a objetos e eventos; 3) Explica as vantagens do jQuery, como simplificar o trabalho com JavaScript, e como ele funciona; 4) Mostra exemplos básicos de como utilizar seletores e métodos jQuery.

1. jQueryIniciando (PARTE I)

2. ObjetivosNivelar conhecimentos sobre JavascriptApresentar o jQueryNão apenas utilizar, mas saber (de forma geral) como o jQuery funciona

3. AgendaJavascriptEscopoTiposOOPEventosjQueryIntroduçãoVantagensComo funciona?Utilizando

4. ATENÇÃOJavascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É Java

5. JavascriptLinguagem de script dinâmica e orientada à objetosImplementação da especificação ECMA-262 (ECMAScript)Utilizada primeiramente para dinamizar os elementos de uma página HTMLÉ case sensitive

6. Javascript - escopoPodemos 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; // globalfunction teste(){ var i = 0; // localreturnfunction() // 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 - tiposObjectTudo em javascript é objetoPodem ser alterados em runtimeTodos objetos possuem prototype (não deve-se alterar Object.prototype) onde podemos adicionar/alterar métodos e atributosDados podem ser acessados utilizando “.” (obj.identificador) ou como índice de um array (obj[“identificador”])

9. Javascript - tiposStringsObjetos IMUTÁVEIS que contém um ou mais caracteresMétodos comuns: charAt(), indexOf(), toUpperCase(), toLowerCase(), replace(), split()

10. Javascript - tiposNumberObjeto que representa valores numéricosCaso 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 - tiposBooleanObjeto que representa valores lógicos (true ou false)Permite converter objetos não booleanos através do construtor

12. Javascript - tiposArrayArmazena mais de um valor em uma única variávelPossui apenas índices NUMÉRICOS (a partir de ZERO)Métodos comuns: join(), push(), unshift(), reverse(), pop(), shift(), sort()

13. Javascript - tiposFunctionsPodem 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 - oopDefinimos classes usando prototype e functionPodemos criar métodos públicos, privados e privilegiadosPodemos criar atributos públicos e privadosMétodos e atributos privados apenas podem ser acessados por métodos privilegiadosPodemos criar também dados estáticos

15. function Pessoa(nome, idade){ var nome = nome; // private var idade = idade; // privatefunctionficaMaisVelho(inc) { idade += inc} // privatethis.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 - eventosAtravés do javascript podemos manipular os eventos dos objetosEventos 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 - vantagensSimplifica 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çãoQuando você acessa $(document) você está chamando a função jQuery() passando o objeto document por parâmetroQuando acessa $.ajax() está chamando o método ajax() do objeto criado pela função jQuery

21. jQuery – utilizandoPara 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çõeshttp://phrogz.net/js/classes/OOPinJS.htmlhttp://phrogz.net/js/classes/OOPinJS2.htmlhttp://www.w3schools.com/jshttp://docs.jquery.com