o client (html / css / javascript). agenda fundamentos http html css javascript ajax desenvolvimento...

53
O Client (HTML / CSS / Javascript)

Upload: internet

Post on 21-Apr-2015

125 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

O Client (HTML / CSS / Javascript)

Page 2: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Agenda

• Fundamentos• HTTP• HTML• CSS• Javascript• AJAX

Desenvolvimento web com Java

# 2

Page 3: 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

Page 4: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

A Web

Desenvolvimento web com Java

# 4

?Client

Request

ServerResponse

Page 5: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

O HTTP

Desenvolvimento web com Java

# 6

Page 7: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

O HTTP

Desenvolvimento web com Java

# 7

Page 8: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

O HTTP

Desenvolvimento web com Java

# 8

Page 9: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

O HTTP

Desenvolvimento web com Java

# 9

Page 10: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Exercício: Firebug

Desenvolvimento web com Java

# 10

Page 11: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Exemplo

Desenvolvimento web com Java

# 13

Page 14: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Semântica x apresentação

Desenvolvimento web com Java

# 16

Page 17: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

HTML Semântico

Desenvolvimento web com Java

# 18

Page 19: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Usando CSS

Desenvolvimento web com Java

# 19

Page 20: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Exemplo: CSS Zen Garden

Desenvolvimento web com Java

# 21

Page 22: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Exercício: Web Developer Extensions

Desenvolvimento web com Java

# 23

Page 24: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Exercícios

• Entendendo a IEEE-754 (double)• Diferenciando valores Truthy/Falsy

Desenvolvimento web com Java

# 27

Page 28: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Exercício

• Adicionando o método “trim” à strings

Desenvolvimento web com Java

# 31

Page 32: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

# 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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

O Navegador

Desenvolvimento web com Java

# 38

Parse FlowFetch

Cache TreeDisplay

ListURL

Paint

Pixels

Page 39: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

O Navegador

Desenvolvimento web com Java

# 39

Flow Paint

EventScript

Page 40: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Exercício

• Percorrendo e contando tags

Desenvolvimento web com Java

# 43

Page 44: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Mashups

Desenvolvimento web com Java

# 47

Page 48: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Exercício

• Obtendo dados do servidor assíncronamente

Desenvolvimento web com Java

# 49

Page 50: O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

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). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2

Desenvolvimento web com Java

# 53

Dúvidas?