HTML, CSS & Javascript Architecture (extended version) - Jan Kraus
O Client (HTML / CSS / Javascript )
description
Transcript of O Client (HTML / CSS / Javascript )
![Page 1: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/1.jpg)
O Client (HTML / CSS / Javascript)
![Page 2: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/2.jpg)
Agenda
• Fundamentos• HTTP• HTML• CSS• Javascript• AJAX
Desenvolvimento web com Java
# 2
![Page 3: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/3.jpg)
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
![Page 4: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/4.jpg)
A Web
Desenvolvimento web com Java
# 4
?Client
Request
ServerResponse
![Page 5: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/5.jpg)
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
![Page 6: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/6.jpg)
O HTTP
Desenvolvimento web com Java
# 6
![Page 7: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/7.jpg)
O HTTP
Desenvolvimento web com Java
# 7
![Page 8: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/8.jpg)
O HTTP
Desenvolvimento web com Java
# 8
![Page 9: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/9.jpg)
O HTTP
Desenvolvimento web com Java
# 9
![Page 10: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/10.jpg)
Exercício: Firebug
Desenvolvimento web com Java
# 10
![Page 11: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/11.jpg)
Navegadores
Desenvolvimento web com Java
# 11
Interpretador de:– HTML– CSS– Javascript– RSS– …– XULFF
Extensões– Java Applets– Flash– …– ActiveXIE
![Page 12: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/12.jpg)
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 + …
![Page 13: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/13.jpg)
Exemplo
Desenvolvimento web com Java
# 13
![Page 14: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/14.jpg)
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
![Page 15: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/15.jpg)
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
![Page 16: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/16.jpg)
Semântica x apresentação
Desenvolvimento web com Java
# 16
![Page 17: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/17.jpg)
CSS
Cascading Style SheetsFolhas de estilo em cascata
Desenvolvimento web com Java
# 17
Aplicadas hierarquicamente
Linguagem de apresentação de documentos estruturados
![Page 18: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/18.jpg)
HTML Semântico
Desenvolvimento web com Java
# 18
![Page 19: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/19.jpg)
Usando CSS
Desenvolvimento web com Java
# 19
![Page 20: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/20.jpg)
estilo.css
Desenvolvimento web com Java
# 20
Seletor de Tag
Regra
Seletor de Classe
Seletor de Filhos
Seletor de Pseudoclasse
Seletor de ID
![Page 21: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/21.jpg)
Exemplo: CSS Zen Garden
Desenvolvimento web com Java
# 21
![Page 22: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/22.jpg)
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
![Page 23: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/23.jpg)
Exercício: Web Developer Extensions
Desenvolvimento web com Java
# 23
![Page 24: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/24.jpg)
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/
![Page 25: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/25.jpg)
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
![Page 26: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/26.jpg)
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
![Page 27: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/27.jpg)
Exercícios
• Entendendo a IEEE-754 (double)• Diferenciando valores Truthy/Falsy
Desenvolvimento web com Java
# 27
![Page 28: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/28.jpg)
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
![Page 29: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/29.jpg)
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
![Page 30: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/30.jpg)
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
![Page 31: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/31.jpg)
Exercício
• Adicionando o método “trim” à strings
Desenvolvimento web com Java
# 31
![Page 32: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/32.jpg)
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
![Page 33: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/33.jpg)
# 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
![Page 34: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/34.jpg)
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
![Page 35: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/35.jpg)
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
![Page 36: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/36.jpg)
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
![Page 37: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/37.jpg)
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
![Page 38: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/38.jpg)
O Navegador
Desenvolvimento web com Java
# 38
Parse FlowFetch
Cache TreeDisplay
ListURL
Paint
Pixels
![Page 39: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/39.jpg)
O Navegador
Desenvolvimento web com Java
# 39
Flow Paint
EventScript
![Page 40: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/40.jpg)
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
![Page 41: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/41.jpg)
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);}
![Page 42: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/42.jpg)
DOMWalker
function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; }
}
Desenvolvimento web com Java
# 42
![Page 43: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/43.jpg)
Exercício
• Percorrendo e contando tags
Desenvolvimento web com Java
# 43
![Page 44: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/44.jpg)
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
![Page 45: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/45.jpg)
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
![Page 46: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/46.jpg)
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)
![Page 47: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/47.jpg)
Mashups
Desenvolvimento web com Java
# 47
![Page 48: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/48.jpg)
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
![Page 49: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/49.jpg)
Exercício
• Obtendo dados do servidor assíncronamente
Desenvolvimento web com Java
# 49
![Page 50: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/50.jpg)
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
![Page 51: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/51.jpg)
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
![Page 52: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/52.jpg)
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
![Page 53: O Client (HTML / CSS / Javascript )](https://reader036.fdocuments.us/reader036/viewer/2022081506/5681459a550346895db28d95/html5/thumbnails/53.jpg)
Desenvolvimento web com Java
# 53
Dúvidas?