0
jQuery<br />Iniciando (PARTE I)<br />
Objetivos<br />Nivelar conhecimentos sobre Javascript<br />Apresentar o jQuery<br />Não apenas utilizar, mas saber (de for...
Agenda<br />Javascript<br />Escopo<br />Tipos<br />OOP<br />Eventos<br />jQuery<br />Introdução<br />Vantagens<br />Como f...
ATENÇÃO<br />Javascript NÃO É Java<br />Javascript NÃO É Java<br />Javascript NÃO É Java<br />Javascript NÃO É Java<br />J...
Javascript<br />Linguagem de script dinâmica  e orientada à objetos<br />Implementação da especificação ECMA-262 (ECMAScri...
Javascript - escopo<br />Podemos declarar variáveis e funções no contexto global ou no contexto local (privado)<br /> Caso...
var i = 0; // global<br />function teste()<br />{<br />	var i = 0; // local<br />returnfunction() // closure<br />	{<br />...
Javascript - tipos<br />Object<br />Tudo em javascript é objeto<br />Podem ser alterados em runtime<br />Todos objetos pos...
Javascript - tipos<br />Strings<br />Objetos IMUTÁVEIS que contém um ou mais caracteres<br />Métodos comuns: charAt(), ind...
Javascript - tipos<br />Number<br />Objeto que representa valores numéricos<br />Caso valor não puder ser representado num...
Javascript - tipos<br />Boolean<br />Objeto que representa valores lógicos (true ou false)<br />Permite converter objetos ...
Javascript - tipos<br />Array<br />Armazena mais de um valor em uma única variável<br />Possui apenas índices NUMÉRICOS (a...
Javascript - tipos<br />Functions<br />Podem ser nomeadas ou anônimas (Lambda e Closures)<br />Qualquer função pode ser at...
Javascript - oop<br />Definimos classes usando prototype e function<br />Podemos criar métodos públicos, privados e privil...
function Pessoa(nome, idade)<br />{<br />		var nome = nome; // private<br />		var idade = idade; // private<br />functionf...
Pessoa.prototype.comePorcaria = function()<br />{<br />this.come(-2);<br />}<br />Pessoa.prototype.comeFruta = function()<...
Javascript - eventos<br />Através do javascript podemos manipular os eventos dos objetos<br />Eventos comuns: onload, oncl...
jQuery<br />“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, ani...
jQuery - vantagens<br />Simplifica a forma de trabalhar com Javascript<br />É extensível<br />É leve (31 kb a versão de pr...
jQuery – como funciona?<br />Basicamente é criada uma função jQuery() que retorna um objeto<br />É criado um alias $ para ...
jQuery – utilizando<br />Para manipular um ou mais elementos apenas utilizamos $(SELETOR)<br />Existem vários valores para...
<script type=“text/javascript”><br />$(document).ready(function() {<br />	$(“a”).css(“border”, “9px solidred”);<br />});<b...
<script type=“text/javascript”><br />$(document).ready(function() {<br />alert($(“#minhaDiv”).html());<br />});<br /></scr...
<script type=“text/javascript”><br />$(document).ready(function() {<br />	$(“.teste”).css(“border”, “9px solidred”);<br />...
Mais informações<br />http://phrogz.net/js/classes/OOPinJS.html<br />http://phrogz.net/js/classes/OOPinJS2.html<br />http:...
Upcoming SlideShare
Loading in...5
×

jQuery básico (parte 1)

1,004

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,004
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×