Upload
jola
View
40
Download
0
Tags:
Embed Size (px)
DESCRIPTION
O Client (HTML / CSS / Javascript ). Agenda. Fundamentos HTTP HTML CSS Javascript AJAX. 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 - PowerPoint PPT Presentation
Citation preview
O Client (HTML / CSS / Javascript)
Agenda
• Fundamentos• HTTP• HTML• CSS• Javascript• AJAX
Desenvolvimento web com Java
# 2
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
Desenvolvimento web com Java
# 3
A Web
Desenvolvimento web com Java
# 4
?Client
Request
ServerResponse
A Lasanha
Desenvolvimento web com Java
# 5
APP Server
Maquina Virtual Java
Sistema Operacional
Dispositivos Rede
APP
JSE APP
JEE APP
D E
V E
L O
P E
R
D E
P L O
Y E
R
Aplicação
Transporte
Rede
Enlace
Física
O HTTP
Desenvolvimento web com Java
# 6
O HTTP
Desenvolvimento web com Java
# 7
O HTTP
Desenvolvimento web com Java
# 8
O HTTP
Desenvolvimento web com Java
# 9
Exercício: Firebug
Desenvolvimento web com Java
# 10
Navegadores
Desenvolvimento web com Java
# 11
Interpretador de:– HTML– CSS– Javascript– RSS– …– XULFF
Extensões– Java Applets– Flash– …– ActiveXIE
HTML
Hyper Text Markup LanguageLinguagem de Marcação de Hipertexto
Desenvolvimento web com Java
# 12
Sistema de interpretação de simbolos
<rotulo>texto marcado</rotulo>
Texto + links + audio + video + …
Exemplo
Desenvolvimento web com Java
# 13
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
Desenvolvimento web com Java
# 14
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=“…” />
Desenvolvimento web com Java
# 15
Semântica x apresentação
Desenvolvimento web com Java
# 16
CSS
Cascading Style SheetsFolhas de estilo em cascata
Desenvolvimento web com Java
# 17
Aplicadas hierarquicamente
Linguagem de apresentação de documentos estruturados
HTML Semântico
Desenvolvimento web com Java
# 18
Usando CSS
Desenvolvimento web com Java
# 19
estilo.css
Desenvolvimento web com Java
# 20
Seletor de Tag
Regra
Seletor de Classe
Seletor de Filhos
Seletor de Pseudoclasse
Seletor de ID
Exemplo: CSS Zen Garden
Desenvolvimento web com Java
# 21
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• Testeshttp://www.webdevout.net/browser-support-css
Desenvolvimento web com Java
# 22
Exercício: Web Developer Extensions
Desenvolvimento web com Java
# 23
Javascript
• A linguagem mais popular e menos compreendida do mundo.
• JavaLivescript• Funcional / OO?• Problemas de
projeto, implementação, documentação, padronização e uso.
Desenvolvimento web com Java
# 24
Douglas Crockford http://developer.yahoo.com/yui/theater/ http://www.crockford.com/
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)
Desenvolvimento web com Java
# 25
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
Desenvolvimento web com Java
# 26
Exercícios
• Entendendo a IEEE-754 (double)• Diferenciando valores Truthy/Falsy
Desenvolvimento web com Java
# 27
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 NomeadosmyFunc({param1:value1,…})
• Incremento de Objetosobj.novaProp = “voilà”;
Desenvolvimento web com Java
# 28
Objects
Construção:• {}• new Object()function object(o){
Function(){}F.prototype = o;return new F();
}object(Object.prototype)
Remoção:• object[param] = undefined• delete object[param]
Prototypes:• Object.prototype• Array.prototype• Function.prototype• Number.prototype• String.prototype• Boolean.prototype
Desenvolvimento web com Java
Desenvolvimento web com Java
Linkage
pessoaFisica
CPF 123.456.789-00
Idade 21
# 30
pessoa
Nome “Fulano”
Situação 1
var nome = pessoaFisica.nome; // “Fulano”pessoaFisica.novaPropriedade = “uala”;pessoaFisica.situação += 1;
• Classes• Métodos• Construtore
s• Modulos
• Funções
Exercício
• Adicionando o método “trim” à strings
Desenvolvimento web com Java
# 31
Expressões e operadoresStatements• 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
Desenvolvimento web com Java
# 32
# 33
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();
• Closuresfunction undead(){
var message = ”Ola";function speak(){
alert(message);}setTimeout(speak,3000);
}alert("Antes");undead();alert("Depois");
Desenvolvimento web com Java
• {Blocos} não definem escopo
• Globais implicitas
Exercícios
• Usando funções como objetos: calculadora genérica
• Entendendo funções internas e closures
• Evitando problemas de escopo
Desenvolvimento web com Java
# 34
Functions
• Não existe verificação 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
• eval(string)
Desenvolvimento web com Java
# 35
Exercício
• Adicionando Curry– F(x,y) returns z– curry(F,x) = G(y)
returns z– uncurry(G,x) = F(x,y)
Desenvolvimento web com Java
# 36
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
http://javascript.crockford.com/code.html
Desenvolvimento web com Java
# 37
O Navegador
Desenvolvimento web com Java
# 38
Parse FlowFetch
Cache TreeDisplay
ListURL
Paint
Pixels
O Navegador
Desenvolvimento web com Java
# 39
Flow Paint
EventScript
O DOM
<html> <head> <title>Oi DOM</title> </head> <body> <p>Oi Mundo</p> </body> </html>
• document.getElementById(id)• document.getElementsByName(name)• node.getElementsByTagName(tag)
Desenvolvimento web com Java
# 40
HTML
HEAD
BODY
TITLE
TEXT
P
TEXT
Exercício: Onde está o bug?
Desenvolvimento web com Java
# 41
function calc() {i = txtI.value;n = txtN.value;x = txtX.value;resultado.value = (x * Math.pow(1 + i,
n)).toFixed(2);}
DOMWalker
function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; }
}
Desenvolvimento web com Java
# 42
Exercício
• Percorrendo e contando tags
Desenvolvimento web com Java
# 43
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));}
Desenvolvimento web com Java
# 44
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
Desenvolvimento web com Java
# 45
Eventos
• Mouse– click– Dblclick– mouseover …
• Form– blur– Focus– keydown..
• 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();} Return false;
Desenvolvimento web com Java
# 46
! Leak ! Event Handlers no IE6 (refcounts)
Mashups
Desenvolvimento web com Java
# 47
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; ... }
Desenvolvimento web com Java
# 48
http://ajaxpatterns.org
Exercício
• Obtendo dados do servidor assíncronamente
Desenvolvimento web com Java
# 49
Padrões de Projeto
Clássicos• Classes• Singletons• Privileged / public• Modules / Packages• Chaining
Javascript• Power Constructor• Prototypal
Inheritance• Parasitic Inheritance• Lazy Functions
Desenvolvimento web com Java
# 50
Bibliotecas
• Prototype• jQuery• YUI• Dojo• Script.aculo.us• Mootools• X• Rico• G*?
“Modus-operandi” no cliente:1. O que funciona2. O que é comum3. O que é padrão
Desenvolvimento web com Java
# 51
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.
Desenvolvimento web com Java
# 52
Desenvolvimento web com Java
# 53
Dúvidas?