O Client (HTML / CSS / Javascript)
Desenvolvimento web com Java
Agenda
•
•
•
•
•
•
Fundamentos
HTTP
HTML
CSS
Javascript
AJAX
#2
Desenvolvimento web com Java
A Web
Era pra ser:
• Um sistema de
obtenção de
documentos
“hiperligados”
• Documentos
• Sem estado
• Confiável
• Acadêmica
Acabou virando:
• A plataforma de
informação global
• Aplicações
• Com estado
• Insegura
• Comercial
#3
Desenvolvimento web com Java
A Web
Client
Request
?
Server
Response
#4
Desenvolvimento web com Java
APP
Aplicação
APP Server
Transporte
Maquina Virtual Java
Sistema Operacional
Dispositivos
Rede
Rede
Enlace
DEPLOYER
JSE APP
JEE APP
DEVELOPER
A Lasanha
Física
#5
Desenvolvimento web com Java
O HTTP
#6
Desenvolvimento web com Java
O HTTP
#7
Desenvolvimento web com Java
O HTTP
#8
Desenvolvimento web com Java
O HTTP
#9
Desenvolvimento web com Java
Exercício: Firebug
# 10
Desenvolvimento web com Java
Navegadores
Interpretador de:
– HTML
– CSS
– Javascript
– RSS
– …
– XULFF
Extensões
– Java Applets
– Flash
– …
– ActiveXIE
# 11
Desenvolvimento web com Java
HTML
Hyper Text Markup Language
Linguagem de Marcação de Hipertexto
Sistema de interpretação de simbolos
<rotulo>texto marcado</rotulo>
Texto + links + audio + video + …
# 12
Desenvolvimento web com Java
Exemplo
# 13
Desenvolvimento web com Java
Tipos de Tags
HTML 4.01 Spec (http://www.w3.org/TR/html4/), 9-18:
• Text - Paragraphs, Lines, and Phrases
• Lists - Unordered, Ordered, and Definition Lists
• Tables
• Links - Hypertext and Media-Independent Links
• Objects, Images, and Applets
• Style Sheets - Adding style to HTML documents
• Alignment, font styles, and horizontal rules
• Frames - Multi-view presentation of documents
• Forms - User-input Forms: Text Fields, Buttons, Menus, and more
• Scripts - Animated Documents and Smart Forms
# 14
Desenvolvimento web com Java
HTML bem formado
• Um único elemento raiz
– <html>………..</html>
• Abrir e fechar todas as tags
– <p>…</p>, <br/>
• Capitalização consistente
– <DIV></DIV>
• Aninhamento correto
– <b><i>negrito E italico</i></b>
• Atributos não repetidos com valor entre aspas
– <img src=“…” />
# 15
Desenvolvimento web com Java
Semântica x apresentação
# 16
Desenvolvimento web com Java
CSS
Cascading Style Sheets
Folhas de estilo em cascata
Linguagem de apresentação de
documentos estruturados
Aplicadas hierarquicamente
# 17
Desenvolvimento web com Java
HTML Semântico
# 18
Desenvolvimento web com Java
Usando CSS
# 19
Desenvolvimento web com Java
estilo.css
Seletor de Tag
Regra
Seletor de Classe
Seletor de Filhos
Seletor de Pseudoclasse
Seletor de ID
# 20
Desenvolvimento web com Java
Exemplo: CSS Zen Garden
# 21
Desenvolvimento web com Java
Diferenças entre navegadores
• Cada versão de navegador interpreta como quer
• Progamar para o padrão ou para o usuário?
• CSS Hacks
• Comentários condicionais
• Bibliotecas
• Testes
http://www.webdevout.net/browser-support-css
# 22
Desenvolvimento web com Java
Exercício: Web Developer Extensions
# 23
Desenvolvimento web com Java
Javascript
• A linguagem mais
popular e menos
compreendida do
mundo.
• JavaLivescript
• Funcional / OO?
• Problemas de projeto,
implementação,
documentação,
padronização e uso.
Douglas Crockford
http://developer.yahoo.com/yui/theater/
http://www.crockford.com/
# 24
Desenvolvimento web com Java
Idéias principais
• Implantação “load and go”
• Tipagem dinâmica
• Objetos genéricos
• Herança por protótipos
• Lambda (funções como objetos)
• “Linkage” por variáveis globais
• Coleta de lixo (mark and sweep)
# 25
Desenvolvimento web com Java
Valores
• Number (double)
– Math.*
• String (16 bit UCS2)
– Imutáveis
• Booleans
– Falsy: false, null,
undefined, “”, 0, NaN.
O resto é truthy.
• Objects
– Arrays []
– Date
– RegExp
• null
• undefined
• NaN
# 26
Desenvolvimento web com Java
Exercícios
• Entendendo a IEEE-754 (double)
• Diferenciando valores Truthy/Falsy
# 27
Desenvolvimento web com Java
Object
• Mapa nome/valor
(Hashtable)
• Não ordenado
• Nomes são rotulos ou
strings
• Valores podem ser de
qualquer tipo
(Number, String,
Object, function ….)
• Object Literal
var obj =
{nome:”Fulano”,
‘idade’:21};
var nome = obj.nome;
var idade = obj[‘idade’];
• Parametros Nomeados
myFunc({param1:value1,…})
• Incremento de Objetos
obj.novaProp = “voilà”;
# 28
Desenvolvimento web com Java
Objects
Prototypes:
Construção:
•
•
•
•
•
•
• {}
• new Object()
function object(o){
Function(){}
F.prototype = o;
return new F();
}
object(Object.prototype)
Object.prototype
Array.prototype
Function.prototype
Number.prototype
String.prototype
Boolean.prototype
Remoção:
• object[param] = undefined
• delete object[param]
Desenvolvimento web com Java
Linkage
pessoaFisica
CPF
123.456.789-00
Idade
21
pessoa
Nome
“Fulano”
Situação
1
var nome = pessoaFisica.nome; // “Fulano”
pessoaFisica.novaPropriedade = “uala”;
pessoaFisica.situação += 1;
•Classes
•Métodos
•Construtores
•Modulos
•Funções
# 30
Desenvolvimento web com Java
Exercício
• Adicionando o método “trim” à strings
# 31
Desenvolvimento web com Java
Expressões e operadores
Statements
• label: break
• for (;;)
• for (var name in obj)
– hasOwnProperty
• switch (expression)
– Strings OK
• throw / try / catch
• with
• Function / return;
• var
Operators
• +/+/+
• ==, != / === , !==
• && (guard)
– return a && a.member;
• || (default)
– var qtd = param || 10;
• &, |, ^, >>, >>>, <<
• typeof
# 32
Desenvolvimento web com Java
Functions
• Funções são objetos
var f = function(){…}
f.nome = “Fatorial”
• Inner functions:
function externa(){
var x = 10;
function interna(){
alert(x);
}
interna();
}
externa();
• Closures
function undead(){
var message = ”Ola";
function speak(){
alert(message);
}
setTimeout(speak,3000);
}
alert("Antes");
undead();
alert("Depois");
• {Blocos} não definem escopo
# 33
• Globais implicitas
Desenvolvimento web com Java
Exercícios
• Usando funções como objetos: calculadora
genérica
• Entendendo funções internas e closures
• Evitando problemas de escopo
# 34
Desenvolvimento web com Java
Functions
• Não existe verificação • eval(string)
de quantidade ou tipo
dos argumentos
• Tipos de invocação
(this and that)
– func(args)
– obj.func(args)
– new func(args)
– func.apply(obj,[args])
• arguments
# 35
Desenvolvimento web com Java
Exercício
• Adicionando Curry
– F(x,y) returns z
– curry(F,x) = G(y) returns z
– uncurry(G,x) = F(x,y)
# 36
Desenvolvimento web com Java
Estilo
• Muito importante, especialmente em
javascript.
• Sugestões:
– Escreva código legível por humanos
– Use ; e {}
– Cuidado com espaços, quebras de linhas,
virgulas, =/==/===, etc…
– Defina as variáveis no início da função
# 37
http://javascript.crockford.com/code.html
Desenvolvimento web com Java
O Navegador
Fetch
URL
Parse
Cache
Flow
Tree
Paint
Display
List
Pixels
# 38
Desenvolvimento web com Java
O Navegador
Flow
Paint
Script
Event
# 39
Desenvolvimento web com Java
O DOM
<html>
<head>
<title>Oi DOM</title>
</head>
<body>
<p>Oi Mundo</p>
</body>
</html>
HTML
• document.getElementById(id)
• document.getElementsByName(name)
• node.getElementsByTagName(tag)
HEAD
TITLE
TEXT
BODY
P
# 40
TEXT
Desenvolvimento web com Java
Exercício: Onde está o bug?
function calc() {
i = txtI.value;
n = txtN.value;
x = txtX.value;
resultado.value = (x * Math.pow(1 + i, n)).toFixed(2);
}
# 41
Desenvolvimento web com Java
DOMWalker
function walkTheDOM(node, func) {
func(node);
node = node.firstChild;
while (node) {
walkTheDOM(node, func);
node = node.nextSibling;
}
}
# 42
Desenvolvimento web com Java
Exercício
• Percorrendo e contando tags
# 43
Desenvolvimento web com Java
Exemplos
•
•
•
•
img.src = “http://url.da.outra.img”;
img.setAttribute(“src”, “http://url.da.outra.img”);
node.className += “ selected”;
p.style.color = “blue”;
•
var table = document.getElementById('table0');
var row = table.insertRow(-1);
var cell, text;
for (var i=0; i<2; i++) {
cell = row.insertCell(-1);
text = 'Row ' + row.rowIndex + ' Cell ' + i;
cell.appendChild(document.createTextNode(text));
}
# 44
Desenvolvimento web com Java
Exercício
• Consultando a API do DOM
– http://developer.mozilla.org/en/docs/Main_Page
– http://www.w3schools.com/Dom/dom_mozilla_vs_ie.asp
# 45
Desenvolvimento web com Java
Eventos
• Mouse
– click
– Dblclick
– mouseover …
• Form
– blur
– Focus
– keydown..
! Leak ! Event Handlers no IE6 (refcounts)
• Handlers
– node[“onxxxx”] = f(e)
– e = e || event
– target = e.target ||
e.srcElement
– e.cancelBoubble =
true:
If(e.stopPropagation){
e.stopPropagation()
}
– E.returnValue = false;
if ( e.preventDefault){
e.preventDefault();
}
# 46
Return false;
Desenvolvimento web com Java
Mashups
# 47
Desenvolvimento web com Java
Asynchronous Javascript And XML
• Request / callback
• XMLHttpRequest
• Content-type:
–
–
–
–
XML
JSON
Javascript
Text
• Comet
function createXMLHttpRequest() {
try { return new XMLHttpRequest(); } catch(e) {}
try { return new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
alert("XMLHttpRequest not supported");
return null;
}
...
var xhReq = createXMLHttpRequest();
xhReq.open("GET", "sumGet.phtml", true);
xhReq.onreadystatechange = onSumResponse;
xhReq.send(null);
...
function onSumResponse() {
if (xhReq.readyState != 4) { return; }
var serverResponse = xhReq.responseText;
...
}
# 48
http://ajaxpatterns.org
Desenvolvimento web com Java
Exercício
• Obtendo dados do servidor assíncronamente
# 49
Desenvolvimento web com Java
Padrões de Projeto
Clássicos
• Classes
• Singletons
• Privileged / public
• Modules / Packages
• Chaining
Javascript
• Power Constructor
• Prototypal Inheritance
• Parasitic Inheritance
• Lazy Functions
# 50
Desenvolvimento web com Java
Bibliotecas
•
•
•
•
•
•
•
•
•
Prototype
jQuery
YUI
Dojo
Script.aculo.us
Mootools
X
Rico
G*?
“Modus-operandi” no cliente:
1. O que funciona
2. O que é comum
3. O que é padrão
# 51
Desenvolvimento web com Java
Resumo
• HTTP é o idioma em que o servidor web e o
navegador escrevem mensagens um pro outro.
• HTML é a linguagem para definição de páginas.
• Quanto mais do visual puder ser definido fora do
documento usando CSS, mais flexível ele será.
• Javascript é uma linguagem para definir
interações e manipular a representação interna da
página (DOM).
• É possivel obter novos dados ou pedaços de
página sem re-enviar a página usando um objeto
XMLHttpRequest. Esta técnica chama-se AJAX.
# 52
Desenvolvimento web com Java
Dúvidas?
# 53
Download
