Java Corporativo - HTML CSS Javascript
-
Upload
robson-mamede -
Category
Documents
-
view
179 -
download
6
Transcript of Java Corporativo - HTML CSS Javascript
![Page 1: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/1.jpg)
Java Corporativo
(RIAs)
HTML, CSS e
Javascript
Edson Koiti Kudo Yasojima
![Page 2: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/2.jpg)
Rich Internet Application (RIA)
Oferece interfaces ‘ricas’ e novas
experiências ao usuário, tanto web como
desktop.
Web 2.0
Animações, Interação, Produtividade,
Marketing
![Page 3: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/3.jpg)
Rich Internet Application (RIA)
Vantagens:
Melhores Interfaces
Equilíbrio Client/Server
Comunicação Assíncrona (AJAX)
Deficiências:
‘Obrigatoriedade’ do uso de scripting
Tempo de carregamento
Novos paradigmas para arquitetura de aplicações
Deficiência em indexação de busca
![Page 4: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/4.jpg)
Rich Internet Application (RIA)
Tecnologias: atualmente estas possuem a detenção de mais de 50% do mercado atual das RIAs:
Adobe Flash
HTML 5 (Scridb e Youtube)
Java
Microsoft (Silverlight)
Fonte: http://www.statowl.com/
![Page 5: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/5.jpg)
Rich Internet Application (RIA)
Alguns exemplos:
www.templatemonster.com
http://thejit.org/demos/
http://maps.google.com/
E mais milhares de outros por aí...
![Page 6: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/6.jpg)
Rich Internet Application (RIA)
O que se pode utilizar para criar RIAs?
Adobe – Flash/Flex
Java – Richfaces, Icefaces, Vaadim,
Primefaces, JBossSeam, JavaFx
Microsoft – Silverlight
HTML 5
Google – GWT, SmartGWT.
Jquery, DojoToolkit, Scriptaculous
![Page 7: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/7.jpg)
Rich Internet Application (RIA)
Conhecimentos desejáveis:
HTML
CSS
Javascript (Jquery, Scriptaculous, etc.)
Actionscript (Adobe)
C# (Microsoft)
JavaEE (Vários frameworks de RIA para
Java)
![Page 8: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/8.jpg)
HTML
Hiper Text Markup Language
Linguagem de marcação
<a></a>
<br/>
Utiliza Tags para interpretar e processar
texto
![Page 9: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/9.jpg)
HTML – Estrutura básica
![Page 10: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/10.jpg)
HTML – Algumas tags Importantes
<div> - Definem e ‘encapsulam’ estruturas.
<table>, <tr>, <td> - Definem a construção de tabelas.
<a> - Criam hiperlinks.
<img> - Utilizada para carregar imagens
<form> - Definem formulários
<script> e <link> - Utilizados para invocar arquivos externos como CSS e Javascript
![Page 11: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/11.jpg)
HTML - Sintaxe
Uma sempre inicia e se fecha dentro da
mesmo
O conteúdo da página sempre estará
entre tags
A maioria das tags permitem o uso de
atributos
![Page 12: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/12.jpg)
HTML – XHTML??
XHTML – XML (eXtensible Markup
Language)
Mais regras
Melhor padronização (W3C)
Mais consistente
Possibilidade de extensão da linguagem
de marcação (JSF, Jboss Seam, etc.)
![Page 13: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/13.jpg)
XHTML – Algumas
Padronizações Errado: <p><div><a></div></p></a> Certo: <p><div><a></a></div></p>
Errado: <HTML></HTML>
Certo: <html></html>
Errado: <br>
Certo: <br/>
Errado: <td rowspan = 3>
Certo: <td rowspan = “3” ou ‘3’>
![Page 14: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/14.jpg)
XHTML - Continuação
Cabeçalho de um documento XHTML
Lista completa das tags XHTML
http://www.w3schools.com/tags/default.asp
![Page 15: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/15.jpg)
XHTML - IDEs
Alguns interessantes ambientes para
desenvolvimento em xhtml.
Netbeans
Eclipse
Aptana
Notepad++
Dreamweaver
![Page 16: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/16.jpg)
HTML - Prática
Definindo um projeto
New > Web Project > Basic Template > Ok
![Page 17: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/17.jpg)
HTML - Prática
Adicionando o título <h1> e um
paragrafo qualquer <p>.
![Page 18: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/18.jpg)
HTML - Prática
Experimente também utilizar tags como
<b> e <i>, negrito e itálico
respectivamente
![Page 19: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/19.jpg)
HTML - Prática
Utilizando a tag <a>, pode-se direcionar o
usuário para outras páginas ou para
seções dentro da própria página.
![Page 20: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/20.jpg)
HTML - Prática Para carregar imagens utiliza-se a tag <img>,
passando atributos da url (caminho) da imagem e opcionalmente o alt (texto complementar). Lembre de passar o caminho da imagem de acordo com a localização da página.
![Page 21: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/21.jpg)
HTML - Prática Outro atributo importante é a <table> pra construção
de tabelas. Esta tag utiliza outras duas tags <tr> e <td> para organizar as linhas e colunas.
![Page 22: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/22.jpg)
HTML - Prática
Formulários <form> são bastante utilizados em HTML para coletar dados.
Dentro de cada formulário, pode haver várias tags <input> que serão de vários tipos e podem ter valores distintos.
Como de costume, é sempre bom ter um editor que ofereça auxílio de código ou uma documentação HTML em mãos para entender todos os inputs e atributos.
![Page 23: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/23.jpg)
HTML - Prática
![Page 24: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/24.jpg)
HTML - Prática
Os <iframe> permitem que você abra
outras páginas dentro da sua página
web.
Além disso ele também é utilizado para
incorporar materiais multimídia, como
vídeos, jogo em flash, webservices
(google maps) e etc.
![Page 25: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/25.jpg)
HTML - Prática
![Page 26: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/26.jpg)
CSS - Introdução
Cascate Style Sheets
Definem padrões de como elementos
HTML serão mostrados ao usuário.
Surgiram no HTML 4.0 como meio de
resolver problemas de interface
Permitem organizar estilos e estrutura de
páginas web.
![Page 27: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/27.jpg)
CSS - Organização
A utilização de um CSS se dá por um arquivo
separado ou por um bloco de comandos em
parte da página através da tag <style>.
![Page 28: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/28.jpg)
CSS - Organização
Lembrando que por padrões de
organização, é altamente recomendável
que o CSS sempre fique em um arquivo
separado do arquivo HTML.
Para utilizar o arquivo CSS fora do
documento HTML, basta ‘linkar’ na
página HTML com a tag <link>
![Page 29: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/29.jpg)
CSS - Sintaxe
A sintaxe do CSS é bastante simples,
basicamente as são constituídas de
seletores e declarações entre chaves ({ })
body { background-color: red; font-size: 20px; }
Seletor Declaração Declaração
Propriedade Valor
![Page 30: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/30.jpg)
CSS - Sintaxe Exemplo:
estilo.css
pagina.html
![Page 31: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/31.jpg)
CSS - Sintaxe
O CSS também permite localizar e
manipular elementos pelo seu atributo
‘id’ e também criar e atribuir classes a
estes elementos utilizando o atributo
‘class’.
#id_do_elemento
Seletor
.nome_da_classe
Seletor
![Page 32: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/32.jpg)
CSS - Sintaxe
ATENÇÃO!!
Não escrever nomes de classes ou ids
começando com números
pelamordedeus!!
O CSS, assim como o Javascript possui
incopatibidade entre browsers, algumas
coisas são permitidas por alguns, e outros
não.
![Page 33: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/33.jpg)
CSS - Sintaxe
Exemplo
![Page 34: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/34.jpg)
CSS - Sintaxe
Beleza, mas qual a diferença entre ‘class’
e ‘id’?
Ambos funcionam da mesma maneira, no
entanto, por padrões de boas práticas,
utilizamos ‘id’ em uma relação de 1-1
enquanto que no ‘class’ utilizamos de 1-N,
ou seja, uma classe ‘X’ no CSS pode alterar
muitos elementos que tenham o atributo
‘class = X’
![Page 35: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/35.jpg)
CSS - Sintaxe
#quadrado
{...}
.quadrado
{...}
<div id=‘quadrado’>
<div class=‘quadrado’>
<p class=‘quadrado’>
<h1 class=‘quadrado’>
1..1
1..N
![Page 36: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/36.jpg)
CSS - Sintaxe
É possível também utilizar a estrutura
tag.nome_da_classe em um seletor CSS.
Apenas as tags que tenham determinada
classe irão sofrer as mudanças.
Exemplo: div.quadrado {..}
Quem se tornará um quadrado
realmente, ‘p’ ou ‘div’?
![Page 37: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/37.jpg)
CSS - Sintaxe
ATENÇÃO!!
Não coloque espaço em valores que
precisem especificar a unidade.
Incompatibilidade de Browsers...
Exemplo:
Certo: font-size:20px
Errado: font-size:20 px
![Page 38: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/38.jpg)
CSS - Background
Backgrounds ou fundo de tela, possuem
vários sub-atributos, mais importantes:
Background-color
Background-image
Background-repeat
Background-position
![Page 39: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/39.jpg)
CSS - Background
Background-color, permite adicionar uma
cor ao fundo de tela de um elemento. Os
parâmetros podem ser passados através
do nome da cor em inglês ou
representação hexadecimal.
Exemplo:
![Page 40: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/40.jpg)
CSS - Background
ATENÇÃO!!
Quanto ao uso de cores, sempre é
recomendável o uso de cores seguras
para web, evitando erros na
‘renderização’ de alguns browsers.
Lista de cores seguras: http://erikasarti.net/html/tabela-cores-seguras-web-safe/
![Page 41: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/41.jpg)
CSS - Background
Background-image: adiciona uma
imagem como fundo de um elemento. É
representada por uma ‘url’ onde indica o
caminho da imagem local ou remoto.
![Page 42: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/42.jpg)
CSS-Background
![Page 43: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/43.jpg)
CSS-Background
Caso a imagem seja menor que a área
do elemento, ela irá se repetir até
preencher toda a extensão do elemento.
Imagem inicial
![Page 44: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/44.jpg)
CSS-Background Para controlar a repetição de imagens, o
atributo background-repeat pode ser utilizado. Podendo controlar se a repetição irá na horizontal ou vertical, ou se ela irá ou não acontecer de fato.
Valores assumidos:
no-repeat: não repete a imagem
repeat-x: repete apenas na horizontal
repeat-y: repete apenas na vertical
repeat: repete vertical e horizontal (padrão)
![Page 45: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/45.jpg)
CSS-Background
Exemplo
no-repeat:
repeat-x:
repeat-y:
![Page 46: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/46.jpg)
CSS-Background Caso haja, a necessidade de posicionar o
background, pode-se usar o atributo background-position, podendo indicar a posição inicial da imagem.
Valores assumidos: bottom: abaixo
right: direita
left: esquerda
top: acima
É possível também a concatenação de valores (ex: direita e acima = right top)
![Page 47: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/47.jpg)
CSS-Textos Texto são imprescindíveis na construção de
páginas web. Eles são altamente customizáveis no CSS e possuem vários atributos, dentre os quais são: color: cor do texto text alignment: alinhamento do texto
text decoration: decoração do texto (sublinhado, cortado, piscando..)
text transformation: todas as letras minúsculas, maiúsculas, apenas a primeira letra maiúscula.
text indentation: espaçamento no inicio do paragrafo em pixels.
![Page 48: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/48.jpg)
CSS Textos
Exemplo tudo-em-um:
![Page 49: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/49.jpg)
CSS - Fontes
Fontes são o tipo de forma que as letras
do texto irão tomar. Fontes podem ser do
tipo com serifa ou sem. Os que não tem
serifa são mais fáceis para leitura.
Alguns atributos:
font-family: tipo da fonte (times, arial..)
font-style: estilo (normal, itálico..)
font-size: tamanho da fonte em pixels
![Page 50: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/50.jpg)
CSS - Fontes
ATENÇÃO!!!
Ao escolher sua font-family, verifique a
tabela de fontes seguras para web,
evitando erros de renderização entre
browsers.
Tabelas de fontes seguras: http://www.fonttester.com/help/list_of_web_safe_fonts.html
![Page 51: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/51.jpg)
CSS - Fontes
Exemplo completo:
![Page 52: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/52.jpg)
CSS - Links Links possuem algumas características que
indicam quando você já visitou o link, quando o mouse ‘passa por cima’, quando está ativo etc. É possivel customizar esses estado apenas mudando o seletor de um link:
a:link {..} – Link normal
a:visited {..} – Link visitado
a:hover {..} – Link com o mouse ‘em cima’
a:active {..} – Link ativo
![Page 53: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/53.jpg)
CSS – Atributos importantes Existem tambem outros atributos bastante
importantes no uso do CSS. Eles são de extrema importancia na criação de layouts e posicionamento dos elementos CSS. Segue alguns:
margin: espaçamento externo
padding: espaçamento interno
border: propriedades da borda
width/height: largura/altura
content: conteúdo
![Page 54: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/54.jpg)
CSS – Atributos importantes
Esquema
![Page 55: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/55.jpg)
CSS – Atributos importantes
Exemplo
![Page 56: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/56.jpg)
CSS - Outros
Existem vários outros elementos que
possuem estados e podem ser editados
via CSS. É claro que para ter um melhor
domínio é fazendo uso de ferramentas
que auxiliem a escrita de folhas de estilo.
Muitas das IDEs já possuem auxilio ao CSS,
cabe a cada um explorar mais estes
elementos.
![Page 57: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/57.jpg)
Javascript - Introdução
Esta é uma das mais populares
linguagens de programação para web.
Baseado no ECMAScript. Tornou-se muito
adotada pois é bastante leve, rápida e é
suportada por todos os browsers
existentes mais famosos no mercado.
![Page 58: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/58.jpg)
Javascript - Características
Dinâmica
Linguagem fracamente tipificada
Paradigmas funcional e OO
MUITO diferente de Java
Utiliza conceitos de prototipagem
![Page 59: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/59.jpg)
Javascript - Sintaxe
Exemplo
![Page 60: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/60.jpg)
Javascript - Sintaxe
O Javascript permite acessar a página
html via um objeto chamado document.
Com ele é possível acessar elementos da
página como divs, links, etc. e alterá-los
de acordo com o desejado em tempo
de execução, sem precisa recarregar
toda a página necessariamente.
![Page 61: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/61.jpg)
Javascript - Sintaxe
Exemplo
![Page 62: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/62.jpg)
Javascript - Sintaxe O código javascript pode ser separado da
página HTML, em um arquivo separado com extensão ‘.js’. É altamente recomendável fazer essa separação por padrões de organização de código.
Para utilizar o arquivo separado basta utilizar a tag <script> para ‘chama-lo’ dentro da página.
Exemplo:
![Page 63: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/63.jpg)
Javascript - Sintaxe
Como não é uma linguagem fortemente
tipificada, o conceito de variáveis é
muito genérico. Uma variável é tratada
como uma referência na memória e
pode assumir várias formas (até mesmo
de funções).
![Page 64: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/64.jpg)
Javascript - Sintaxe
Testem isso:
Vai funcionar??
![Page 65: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/65.jpg)
Javascript - Sintaxe
Entendam funções no javascript como
objetos. Cada função, quando chamada
é instanciada (assim como um objeto) e
passa a existir na memória, assim como
variáveis criadas dentro dela. Estranho
né?
Veja um exemplo a seguir..
![Page 66: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/66.jpg)
Javascript - Sintaxe
Exemplo
Resultado?
![Page 67: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/67.jpg)
Javascript - Sintaxe
O Javascript também admite
‘instanciações’ de objetos (vulgo ‘new
Objeto()’) através do uso do ‘new’ que
nem em Java/C#. Mas com algumas
pecularidades....
Veja a seguir:
![Page 68: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/68.jpg)
Javascript - Sintaxe
user.name e name serão iguais??
![Page 69: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/69.jpg)
Javascript - Sintaxe
Condicionais não possuem muita
diferença com outras linguagens, veja os
exemplos:
![Page 70: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/70.jpg)
Javascript - Sintaxe
Loops também não diferem muito da
linguagem Java:
![Page 71: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/71.jpg)
Javascript - Sintaxe
Basicamente o javascript, é utilizado da
seguinte forma:
Cria-se uma função
Utiliza-se a função em eventos dos
componentes
onclick, onfocus, onselect..
Ou para alterar propriedades do design.
document.getElement().innerHTML == “blablabla”
![Page 72: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/72.jpg)
Javascript - Sintaxe
Além disso é também utilizado para
realizar chamadas AJAX (Assynchonous
Javascript and XML), ou seja, acessar um
serviço remotamente e mostrar ao
usuário sem precisar recarregar toda a
página HTML.
![Page 73: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/73.jpg)
Javascript - Sintaxe
Mostrar exemplo ajax
![Page 74: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/74.jpg)
Javascript - Problemas
Linguagem ‘difícil’ de se aprender
Pouca organização em relação a
linguagens atuais (Java, C#..)
O grande problema de Cross-Browser!!
Não pense que seu código irá funcionar
perfeitamente em todos os navegadores sem
a devido teste! Isso é chato não é?
![Page 75: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/75.jpg)
Javascript - JQuery
Jquery é uma das mais famosas e
utilizadas bibliotecas Javascript criadas
inicialmente por John Resig.
Simplifica a escrita e resolve a maioria dos
problemas cross-browser
Utiliza objeto próprio para fazer
operações de forma efetiva e correta na
maioria dos browsers
![Page 76: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/76.jpg)
Jquery - Instalação
Para ‘instalar’ o jquery, basta fazer o
download da biblioteca e adicioná-la na
página web com a tag <script>
![Page 77: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/77.jpg)
Jquery - Sintaxe
A sintaxe do jquery se organiza de forma
simples.
$(“div”).addClass(“meuCSS”).show(“slow”);
Objeto JQuery Chamada de métodos concatenados
![Page 78: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/78.jpg)
Jquery – Seletores e Eventos
Utilizando Jquery e expressões CSS e
Xpath, podemos selecionar praticamente
qualquer coisa de desejamos na página.
Basta passar dentro do objeto do Jquery.
Exemplo: $ ( " # o r d e r e d l i s t " ) . a d d C l a s s ( " r e d " ) ;
$ ( " # o r d e r e d l i s t > l i " ) . a d d C l a s s ( " b l u e " ) ;
![Page 79: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/79.jpg)
Jquery – Seletores e Eventos
Se quisermos aplicar mudanças apenas
quando o usuário passar o mouse em
cima do link podemos utilizar a seguinte
abordagem: $ ( " # o r d e r e d l i s t l i : l a s t " ) . h o v e r ( f u n c t i o n ( ) {
$ ( t h i s ) . a d d C l a s s ( " g r e e n " ) ;
} , f u n c t i o n ( ) {
$ ( t h i s ) . r e m o v e C l a s s ( " g r e e n " ) ;
} ) ;
![Page 80: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/80.jpg)
Jquery – Seletores e Eventos
Caso a busca seja de multiplos objetos, o
Jquery, tem um ‘for’ implementado que
otimiza nosso código. Vamos tentar:
$ ( " # o r d e r e d l i s t " ) . f i n d ( " l i " ) . e a c h ( f u n c t i o n ( i ) {
$ ( t h i s ) . a p p e n d ( " A C H O U ! " + i ) ;
} ) ;
![Page 81: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/81.jpg)
Jquery – Seletores e Eventos
Caso o Jquery ache mais de um elemento, ele retorna em forma de array, onde podemos selecionar como um array convencional:
$( "# rese t " ) .c l ick( func t ion( ) { $ ( " fo rm" ) [0 ] . rese t ( ) ;
} ) ;
O método reset(), é do Javascript puro e ele reseta praticamente qualquer input ou form
![Page 82: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/82.jpg)
Jquery – Seletores e Eventos
Este é para o caso de resetar todos os forms da página:
$ ( " # r e s e t " ) . c l i c k ( f u n c t i o n ( ) { $ ( " f o r m " ) . e a c h ( f u n c t i o n ( ) {
t h i s . r e s e t ( ) ;
} ) ;
} ) ;
Pergunta: por quê não estamos utilizando $(this) acima?
![Page 83: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/83.jpg)
Jquery – Seletores e Eventos
O Jquery também pode fazer buscas mais complexas como: $ ( " l i " ) . n o t ( " : h a s ( u l ) " ) . c s s ( " b o r d e r " , " 1 p x s o l i d b l a c k " ) ;
$ ( " a [ n a m e ] " ) . c s s ( " b a c k g r o u n d " , “ b l u e " ) ; $ ( " a [ h r e f * = ' / c o n t e n t / g a l l e r y ' ] " ) . c l i c k ( f u n c t io n ( ) { / / f a ç a a l g o
} ) ;
Simples, não é?
![Page 84: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/84.jpg)
Jquery – Seletores e Eventos
Criando um organizador de tópicos:
$ ( ' # f a q ' ) . f i n d ( ' d d ' ) . h i d e ( ) . e n d ( ) . f i n d ( ' d t ' ) .
c l i c k ( f u n c t i o n ( ) {
$ ( t h i s ) . n e x t ( ) . s l i d e T o g g l e ( ) ;
} ) ;
Conseguiram interpretar o código?
![Page 85: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/85.jpg)
Jquery – Seletores e Eventos
Buscando por tags raiz de uma tag: $ ( " a " ) . h o v e r ( f u n c t i o n ( ) {
$ ( t h i s ) . p a r e n t s ( " p " ) . a d d C l a s s ( " h i g h l i g h
t " ) ;
} , f u n c t i o n ( ) {
$ ( t h i s ) . p a r e n t s ( " p " ) . r e m o v e C l a s s ( " h i g h
l i g h t " ) ;
} ) ;
![Page 86: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/86.jpg)
Jquery – Usando Ajax
Vamos ao exemplo prático!
![Page 87: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/87.jpg)
Jquery – Animando
Jquery fornece funcionalidades para criar
animações, ainda permite que você crie
suas próprias animações.
No website do jquery além de
animações, existem vários outros plugins
que podem ser muito úteis para
determinados problemas.
![Page 88: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/88.jpg)
Jquery – Animando
$("a") . toggle( funct ion() {
$ ( " . s tu f f " ) .h ide( ' s low' ) ;
} , funct ion() {
$ ( " . s tu f f " ) . show( ' fas t ' ) ;
} ) ;
![Page 89: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/89.jpg)
Jquery – Animando
Criando uma animação, exemplo: $ ( " a " ) . t o g g l e ( f u n c t i o n ( ) {
$ ( " . s t u f f " ) . a n i m a t e ( { h e i g h t : ' h i d e ' ,
o p a c i t y : ' h i d e ' } , ' s l o w ' ) ; }
, f u n c t i o n ( ) {
$ ( " . s t u f f " ) . a n i m a t e ( { h e i g h t : ' s h o w ' ,
o p a c i t y : ' s h o w ' } , ' s l o w ' ) ;
} ) ;
![Page 90: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/90.jpg)
Jquery – Utilizando plugins
Plugins javascript são muito fáceis de se
utilizar, basta baixar e salvar plugins com
a extensão .js e importá-los na mesma
página HTML do jquery utilizando a tag
script.
Como exemplo vamos utilizar o
tablesorter plugin para organizar tabelas:
![Page 91: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/91.jpg)
Jquery – Utilizando plugins
Após a chamada, o código do plugin já
está integrado com o jquery. Basta
chamar o método no código: $ ( " # l a r g e " ) . t a b l e s o r t e r ( ) ;
$ ( " # l a r g e " ) . t a b l e s o r t e r ( {
w i d g e t s : [ ' z e b r a ' ]
} ) ;
![Page 92: Java Corporativo - HTML CSS Javascript](https://reader031.fdocuments.net/reader031/viewer/2022020710/557212a7497959fc0b90aaea/html5/thumbnails/92.jpg)
Java Corporativo
(RIAs)
HTML, CSS e
Javascript
Edson Koiti Kudo Yasojima