jQuery básico (parte 1)

1,065 views
1,034 views

Published on

Visão geral sobre JavaScript e jQuery.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,065
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

jQuery básico (parte 1)

  1. 1. jQuery<br />Iniciando (PARTE I)<br />
  2. 2. Objetivos<br />Nivelar conhecimentos sobre Javascript<br />Apresentar o jQuery<br />Não apenas utilizar, mas saber (de forma geral) como o jQuery funciona<br />
  3. 3. Agenda<br />Javascript<br />Escopo<br />Tipos<br />OOP<br />Eventos<br />jQuery<br />Introdução<br />Vantagens<br />Como funciona?<br />Utilizando<br />
  4. 4. ATENÇÃO<br />Javascript NÃO É Java<br />Javascript NÃO É Java<br />Javascript NÃO É Java<br />Javascript NÃO É Java<br />Javascript NÃO É Java<br />Javascript NÃO É Java<br />
  5. 5. Javascript<br />Linguagem de script dinâmica e orientada à objetos<br />Implementação da especificação ECMA-262 (ECMAScript)<br />Utilizada primeiramente para dinamizar os elementos de uma página HTML<br />É case sensitive<br />
  6. 6. Javascript - escopo<br />Podemos declarar variáveis e funções no contexto global ou no contexto local (privado)<br /> Caso não utilizarmos var na declaração, será levado em consideração o contexto global referente ao contexto local<br />
  7. 7. var i = 0; // global<br />function teste()<br />{<br /> var i = 0; // local<br />returnfunction() // closure<br /> {<br />// aqui será utilizado o i do contexto da função teste()<br /> ++i; <br />alert(i);<br /> }<br />}<br />var testando = teste();<br />testando();<br />alert(i);<br />testando();<br />alert(i);<br />testando();<br />alert(i);<br />
  8. 8. Javascript - tipos<br />Object<br />Tudo em javascript é objeto<br />Podem ser alterados em runtime<br />Todos objetos possuem prototype (não deve-se alterar Object.prototype) onde podemos adicionar/alterar métodos e atributos<br />Dados podem ser acessados utilizando “.” (obj.identificador) ou como índice de um array (obj[“identificador”])<br />
  9. 9. Javascript - tipos<br />Strings<br />Objetos IMUTÁVEIS que contém um ou mais caracteres<br />Métodos comuns: charAt(), indexOf(), toUpperCase(), toLowerCase(), replace(), split()<br />
  10. 10. Javascript - tipos<br />Number<br />Objeto que representa valores numéricos<br />Caso valor não puder ser representado numericamente é um NaN (not a number)<br />Podem ser manipulados através de Math (Objeto para operações matemáticas)<br />
  11. 11. Javascript - tipos<br />Boolean<br />Objeto que representa valores lógicos (true ou false)<br />Permite converter objetos não booleanos através do construtor<br />
  12. 12. Javascript - tipos<br />Array<br />Armazena mais de um valor em uma única variável<br />Possui apenas índices NUMÉRICOS (a partir de ZERO)<br />Métodos comuns: join(), push(), unshift(), reverse(), pop(), shift(), sort()<br />
  13. 13. Javascript - tipos<br />Functions<br />Podem ser nomeadas ou anônimas (Lambda e Closures)<br />Qualquer função pode ser atribuída a uma variável (atenção em relação ao escopo)<br />
  14. 14. Javascript - oop<br />Definimos classes usando prototype e function<br />Podemos criar métodos públicos, privados e privilegiados<br />Podemos criar atributos públicos e privados<br />Métodos e atributos privados apenas podem ser acessados por métodos privilegiados<br />Podemos criar também dados estáticos<br />
  15. 15. function Pessoa(nome, idade)<br />{<br /> var nome = nome; // private<br /> var idade = idade; // private<br />functionficaMaisVelho(inc) { idade += inc} // private<br />this.toString = this.getNome = function() { return nome; }<br />this.getIdade = function() { return idade; }<br />this.come = function(qualidade) {<br />if (qualidade < 4) {<br />ficaMaisVelho(Math.abs(qualidade));<br /> } else {<br />ficaMaisVelho(qualidade/10);<br /> }<br /> }<br /> ++Pessoa.populacao;<br />}<br />Pessoa.populacao = 0;<br />
  16. 16. Pessoa.prototype.comePorcaria = function()<br />{<br />this.come(-2);<br />}<br />Pessoa.prototype.comeFruta = function()<br />{<br />this.come(10);<br />}<br />var fulano = new Pessoa(“Fulano”, 5);<br />fulano.comePorcaria();<br />fulano.comeFruta();<br />alert(fulano + “ tem “ + fulano.getIdade() + “ anos”);<br />alert(“existem “ + Pessoa.populacao + “ pessoa(s)”);<br />
  17. 17. Javascript - eventos<br />Através do javascript podemos manipular os eventos dos objetos<br />Eventos comuns: onload, onclick, onfocus, onblur<br />
  18. 18. jQuery<br />“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.”<br />
  19. 19. jQuery - vantagens<br />Simplifica a forma de trabalhar com Javascript<br />É extensível<br />É leve (31 kb a versão de produção)<br />É cross-browser (como os plugins podem ser criados por qualquer pessoa, podem não manter a compatibilidade)<br />
  20. 20. jQuery – como funciona?<br />Basicamente é criada uma função jQuery() que retorna um objeto<br />É criado um alias $ para esta função<br />Quando você acessa $(document) você está chamando a função jQuery() passando o objeto document por parâmetro<br />Quando acessa $.ajax() está chamando o método ajax() do objeto criado pela função jQuery<br />
  21. 21. jQuery – utilizando<br />Para manipular um ou mais elementos apenas utilizamos $(SELETOR)<br />Existem vários valores para o SELETOR os mais comuns são: seletor de tag, seletor de id e seletor de class<br />
  22. 22. <script type=“text/javascript”><br />$(document).ready(function() {<br /> $(“a”).css(“border”, “9px solidred”);<br />});<br /></script><br /><a href=“#”>teste1</a><br /><a href=“#”>teste2</a><br /><a href=“#”>teste3</a><br />
  23. 23. <script type=“text/javascript”><br />$(document).ready(function() {<br />alert($(“#minhaDiv”).html());<br />});<br /></script><br /><div id=“minhaDiv”><br /> <h1>Teste</h1><br /> <p>Testando os dados!</p><br /></div><br />
  24. 24. <script type=“text/javascript”><br />$(document).ready(function() {<br /> $(“.teste”).css(“border”, “9px solidred”);<br />});<br /></script><br /><a href=“#” class=“teste”>teste1</a><br /><a href=“#” class=“teste”>teste2</a><br /><a href=“#”>teste3</a><br />
  25. 25. Mais informações<br />http://phrogz.net/js/classes/OOPinJS.html<br />http://phrogz.net/js/classes/OOPinJS2.html<br />http://www.w3schools.com/js<br />http://docs.jquery.com<br />

×