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.

Exemplo

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

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