Introdução básica ao JavaScript

827 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
827
No SlideShare
0
A partir de incorporações
0
Número de incorporações
242
Ações
Compartilhamentos
0
Downloads
36
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

×