Post on 26-Jun-2015
description
JSTreinamento Javascript básico
Maio 2014
carlos.oliveira@vitrio.com.brkadunew@gmail.com
@kadunewwww.kadunew.com/blog
Carlos Eduardo – Kadu
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.
JAVASCRIPT
css
HTML
• Reaproveitamento do código;
• Organização da equipe;• Limpeza do Código;• Exemplo:
http://www.csszengarden.com/217/
Por que separar o desenvolvimento em camadas?
JS“Vamos começar”
• Linguagem de programação mais popular na Web;
• Suportada por todos os navegadores;• Adiciona dinamismo em nossas páginas.
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 com o usuário
(click, keyup...)
Alterar propriedades da página
O que posso fazer?
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
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
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.
Links úteis
• Documentação oficialhttp://api.jquery.com/
• Exemploshttp://jqapi.com/
• Tutoriaishttp://jqapi.com/
• Pluginshttp://jqapi.com/
Que papo é esse...
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
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
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
Minificar o arquivo
http://refresh-sf.com/yui/ http://fmarcia.info/jsmin/test.html http://developer.yahoo.com/yui/compressor/
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
Curti o lance de Javascript...Quero estudar!
http://www.codecademy.com/pt/tracks/javascript
Curti o lance de Javascript...Quero estudar!
JSTreinamento Javascript básico
Maio 2014
Perguntas?
JSTreinamento Javascript básico
Maio 2014
Obrigado Galera!
carlos.oliveira@vitrio.com.brkadunew@gmail.com
@kadunewwww.kadunew.com/blog