Treinamento Javascript básico
Maio 2014
carlos.oliveira@vitrio.com.br
kadunew@gmail.com
@kadunew
www.kadunew.com/blog
Carl...
São as informações que a página pretende
apresentar.
Separando Responsabilidades
Essa parte é responsável pela estética. C...
• Reaproveitamento do
código;
• Organização da equipe;
• Limpeza do Código;
• Exemplo:
http://www.csszengard
en.com/217/
P...
“Vamos começar”
• Linguagem de programação mais popular na
Web;
• Suportada por todos os navegadores;
• Adiciona dinamismo em nossas págin...
Cliente e servidor
PHP, ASP...
Javascript
Mas bhá, face bombando.
O Script é baixado e executado no
navegador do usuário
Java != Javascript
Manipular o HTML
dinamicamente
Validação de
formulários
Carregar conteúdo
condicional
Ocultar revelar
elementos
Interagir ...
Eventos
 onclick: clica com o mouse
 onsubmit: disparado antes de submeter o
formulário.
 ondblclick: clica duas vezes ...
 onclick: clica com o mouse
 onsubmit: disparado antes de submeter o
formulário.
 ondblclick: clica duas vezes com o mo...
Exemplo 1
Exemplo 2
Exemplo 3
• Mudar a forma de escrever
Javascript;
• Aumento de produtividade;
• Cross-Browser
• Open Source
JS
Plugins
Plugins trazem novas
funcionalidades para a
biblioteca.
 Validação de formulários;
 Datagrids;
 Slide shows;
 Formatação de números.
Exemplo
• http://plugins.jquery.com/maskedinput/
Links úteis
• Documentação oficial
http://api.jquery.com/
• Exemplos
http://jqapi.com/
• Tutoriais
http://jqapi.com/
• Plu...
Que papo é esse...
jQuery, uso moderado
 Em projetos pequenos ou em projetos com
pouco javascript, não use JQuery.
 Quando eu uso?
Em siste...
Minificar o arquivo
 Aprendemos diversas boas práticas de
codificação;
 Código limpo, legível...;
 Dar bons nomes a var...
Minificar o arquivo
• Cara... nada disso é necessário no momento
do navegador renderizar a página, sabia?!.
• Ainda tem ma...
Minificar o arquivo
 http://refresh-sf.com/yui/
 http://fmarcia.info/jsmin/test.html
 http://developer.yahoo.com/yui/co...
Minificar o arquivo
 jQuery + Plugins + Meus códigos... É
necessário tudo isso?
 Se vamos usar, por exemplo, jQuery com ...
Curti o lance de Javascript...
Quero estudar!
http://www.codecademy.com/pt/tracks/javascript
Curti o lance de Javascript...
Quero estudar!
Treinamento Javascript básico
Maio 2014
Perguntas?
Treinamento Javascript básico
Maio 2014
Obrigado Galera!
carlos.oliveira@vitrio.com.br
kadunew@gmail.com
@kadunew
www.kadu...
Introdução básica ao JavaScript
Introdução básica ao JavaScript
Introdução básica ao JavaScript
Introdução básica ao JavaScript
Introdução básica ao JavaScript
Próximos SlideShares
Carregando em…5
×

Introdução básica ao JavaScript

760 visualizações

Publicada em

Apresentação feita para o treinamento dos colaboradores da Vitrio.
Público alvo do treinamento: Analistas de conteúdo, Designers e equipe de Marketing Digital.
O principal assunto era uma breve introdução ao JavaScript ,jQuery e plugins. Entretanto, abrangemos outros tópicos, tais como: Desenvolvimento em Camadas, requisições, performance de web sites e algumas ferramentas.

Publicada em: Internet
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
760
No SlideShare
0
A partir de incorporações
0
Número de incorporações
222
Ações
Compartilhamentos
0
Downloads
29
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução básica ao JavaScript

  1. 1. Treinamento Javascript básico Maio 2014 carlos.oliveira@vitrio.com.br kadunew@gmail.com @kadunew www.kadunew.com/blog Carlos Eduardo – Kadu
  2. 2. São as informações que a página pretende apresentar. Separando Responsabilidades Essa parte é responsável pela estética. Cores, tamanhos, layout... Através dela é possível tomar decisões baseadas na interação com o usuário. Parte dinâmica da interface. JAVA SCRIPT css HTML
  3. 3. • Reaproveitamento do código; • Organização da equipe; • Limpeza do Código; • Exemplo: http://www.csszengard en.com/217/ Por que separar o desenvolvimento em camadas?
  4. 4. “Vamos começar”
  5. 5. • Linguagem de programação mais popular na Web; • Suportada por todos os navegadores; • Adiciona dinamismo em nossas páginas.
  6. 6. Cliente e servidor PHP, ASP... Javascript Mas bhá, face bombando.
  7. 7. O Script é baixado e executado no navegador do usuário
  8. 8. Java != Javascript
  9. 9. Manipular o HTML dinamicamente Validação de formulários Carregar conteúdo condicional Ocultar revelar elementos Interagir com o usuário (click, keyup...) Alterar propriedades da página O que posso fazer?
  10. 10. Eventos  onclick: clica com o mouse  onsubmit: disparado antes de submeter o formulário.  ondblclick: clica duas vezes com o mouse  onmousemove: mexe o mouse  onmousedown: aperta o botão do mouse  onmouseup: solta o botão do mouse (útil com os dois acima para gerenciar drag'n'drop)  onkeypress: ao pressionar e soltar uma tecla  onkeydown: ao pressionar uma tecla.  onkeyup: ao soltar uma tecla. Mesmo acima.  onblur: quando um elemento perde foco  onfocus: quando um elemento ganha foco  onchange: quando um input, select ou textarea tem seu valor alterado  onload: quando a página é carregada  onunload: quando a página é fechada
  11. 11.  onclick: clica com o mouse  onsubmit: disparado antes de submeter o formulário.  ondblclick: clica duas vezes com o mouse  onmousemove: mexe o mouse  onmousedown: aperta o botão do mouse  onmouseup: solta o botão do mouse (útil com os dois acima para gerenciar drag'n'drop)  onkeypress: ao pressionar e soltar uma tecla  onkeydown: ao pressionar uma tecla.  onkeyup: ao soltar uma tecla. Mesmo acima.  onblur: quando um elemento perde foco  onfocus: quando um elemento ganha foco  onchange: quando um input, select ou textarea tem seu valor alterado  onload: quando a página é carregada  onunload: quando a página é fechada Eventos
  12. 12. Exemplo 1
  13. 13. Exemplo 2
  14. 14. Exemplo 3
  15. 15. • Mudar a forma de escrever Javascript; • Aumento de produtividade; • Cross-Browser • Open Source
  16. 16. JS
  17. 17. Plugins
  18. 18. Plugins trazem novas funcionalidades para a biblioteca.
  19. 19.  Validação de formulários;  Datagrids;  Slide shows;  Formatação de números.
  20. 20. Exemplo • http://plugins.jquery.com/maskedinput/
  21. 21. Links úteis • Documentação oficial http://api.jquery.com/ • Exemplos http://jqapi.com/ • Tutoriais http://jqapi.com/ • Plugins http://jqapi.com/
  22. 22. Que papo é esse...
  23. 23. jQuery, uso moderado  Em projetos pequenos ou em projetos com pouco javascript, não use JQuery.  Quando eu uso? Em sistema complexo, em um site muito grande ou se o Javascript for muito complexo... JS
  24. 24. Minificar o arquivo  Aprendemos diversas boas práticas de codificação;  Código limpo, legível...;  Dar bons nomes a variáveis, escrever bons comentários, escrever código identado, com bom espaçamento visual etc. JS
  25. 25. Minificar o arquivo • Cara... nada disso é necessário no momento do navegador renderizar a página, sabia?!. • Ainda tem mais, todas essas práticas adicionam bytes e mais bytes aos arquivos. JS
  26. 26. Minificar o arquivo  http://refresh-sf.com/yui/  http://fmarcia.info/jsmin/test.html  http://developer.yahoo.com/yui/compressor/
  27. 27. Minificar o arquivo  jQuery + Plugins + Meus códigos... É necessário tudo isso?  Se vamos usar, por exemplo, jQuery com 3 plugins e mais 2 arquivos da aplicação, poderíamos simplesmente juntar todos em 1 ou 2 arquivos. JS
  28. 28. Curti o lance de Javascript... Quero estudar! http://www.codecademy.com/pt/tracks/javascript
  29. 29. Curti o lance de Javascript... Quero estudar!
  30. 30. Treinamento Javascript básico Maio 2014 Perguntas?
  31. 31. Treinamento Javascript básico Maio 2014 Obrigado Galera! carlos.oliveira@vitrio.com.br kadunew@gmail.com @kadunew www.kadunew.com/blog

×