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.

1. Treinamento Javascript básico
Maio 2014
carlos.oliveira@vitrio.com.br
kadunew@gmail.com
@kadunew
www.kadunew.com/blog
Carlos Eduardo – Kadu

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. • 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. “Vamos começar”

5. • Linguagem de programação mais popular na
Web;
• Suportada por todos os navegadores;
• Adiciona dinamismo em nossas páginas.

6. Cliente e servidor
PHP, ASP...
Javascript
Mas bhá, face bombando.

7. O Script é baixado e executado no
navegador do usuário

8. Java != Javascript

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?

11. 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

12.  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

13. Exemplo 1

14. Exemplo 2

15. Exemplo 3

17. • Mudar a forma de escrever
Javascript;
• Aumento de produtividade;
• Cross-Browser
• Open Source

19. JS

21. Plugins

22. Plugins trazem novas
funcionalidades para a
biblioteca.

23.  Validação de formulários;
 Datagrids;
 Slide shows;
 Formatação de números.

24. Exemplo
• http://plugins.jquery.com/maskedinput/

25. Links úteis
• Documentação oficial
http://api.jquery.com/
• Exemplos
http://jqapi.com/
• Tutoriais
http://jqapi.com/
• Plugins
http://jqapi.com/

26. Que papo é esse...

27. 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

29. 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

30. 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

31. Minificar o arquivo
 http://refresh-sf.com/yui/
 http://fmarcia.info/jsmin/test.html
 http://developer.yahoo.com/yui/compressor/

32. 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

33. Curti o lance de Javascript...
Quero estudar!
http://www.codecademy.com/pt/tracks/javascript

34. Curti o lance de Javascript...
Quero estudar!

35. Treinamento Javascript básico
Maio 2014
Perguntas?

36. Treinamento Javascript básico
Maio 2014
Obrigado Galera!
carlos.oliveira@vitrio.com.br
kadunew@gmail.com
@kadunew
www.kadunew.com/blog