O Client (HTML / CSS / Javascript)
Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java Agenda Fundamentos HTTP HTML CSS Javascript AJAX
A Web Era pra ser: Um sistema de obtenção de documentos “hiperligados” 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
Desenvolvimento web com Java A Web ? Client Request Server Response
A Lasanha Desenvolvimento web com Java D E V E L O P E R D E P L O Y E R JEE APP Aplicação JSE APP APP Server Transporte APP Maquina Virtual Java Rede Sistema Operacional Enlace Dispositivos Rede Física
Desenvolvimento web com Java O HTTP
Desenvolvimento web com Java O HTTP
Desenvolvimento web com Java O HTTP
Desenvolvimento web com Java O HTTP
Desenvolvimento web com Java Exercício: Firebug
Navegadores Interpretador de: HTML CSS Javascript RSS … XULFF Desenvolvimento web com Java Navegadores Interpretador de: HTML CSS Javascript RSS … XULFF Extensões Java Applets Flash ActiveXIE
HTML Hyper Text Markup Language Linguagem de Marcação de Hipertexto 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 + …
Desenvolvimento web com Java Exemplo
Tipos de Tags HTML 4.01 Spec (http://www.w3.org/TR/html4/), 9-18: 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
HTML bem formado Um único elemento raiz <html>………..</html> 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=“…” />
Semântica x apresentação Desenvolvimento web com Java Semântica x apresentação
CSS Cascading Style Sheets Folhas de estilo em cascata Desenvolvimento web com Java CSS Cascading Style Sheets Folhas de estilo em cascata Linguagem de apresentação de documentos estruturados Aplicadas hierarquicamente
Desenvolvimento web com Java HTML Semântico
Desenvolvimento web com Java Usando CSS
estilo.css Desenvolvimento web com Java Seletor de Tag Regra Seletor de Classe Seletor de Filhos Seletor de Pseudoclasse Seletor de ID
Exemplo: CSS Zen Garden Desenvolvimento web com Java Exemplo: CSS Zen Garden
Diferenças entre navegadores 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
Exercício: Web Developer Extensions Desenvolvimento web com Java Exercício: Web Developer Extensions
Javascript A linguagem mais popular e menos compreendida do mundo. 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/
Idéias principais Implantação “load and go” Tipagem dinâmica 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)
Valores Number (double) String (16 bit UCS2) Booleans Objects null 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
Exercícios Entendendo a IEEE-754 (double) Desenvolvimento web com Java Exercícios Entendendo a IEEE-754 (double) Diferenciando valores Truthy/Falsy
Object Mapa nome/valor (Hashtable) Não ordenado 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à”;
Objects Prototypes: Construção: Remoção: Object.prototype Desenvolvimento web com Java Objects Prototypes: Object.prototype Array.prototype Function.prototype Number.prototype String.prototype Boolean.prototype 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]
Linkage Desenvolvimento web com Java 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
Exercício Adicionando o método “trim” à strings Desenvolvimento web com Java Exercício Adicionando o método “trim” à strings
Expressões e operadores 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
Functions Funções são objetos Closures Inner functions: 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 Globais implicitas
Exercícios Usando funções como objetos: calculadora genérica Desenvolvimento web com Java Exercícios Usando funções como objetos: calculadora genérica Entendendo funções internas e closures Evitando problemas de escopo
Functions Não existe verificação de quantidade ou tipo dos argumentos Desenvolvimento web com Java 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)
Exercício Adicionando Curry F(x,y) returns z 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)
Estilo Muito importante, especialmente em javascript. Sugestões: 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 http://javascript.crockford.com/code.html
Desenvolvimento web com Java O Navegador
Desenvolvimento web com Java O Navegador
O DOM document.getElementById(id) document.getElementsByName(name) Desenvolvimento web com Java O DOM <html> <head> <title>Oi DOM</title> </head> <body> <p>Oi Mundo</p> </body> </html> HTML HEAD TITLE TEXT BODY document.getElementById(id) document.getElementsByName(name) node.getElementsByTagName(tag) P TEXT
Exercício: Onde está o bug? 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); }
Desenvolvimento web com Java DOMWalker function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; }
Desenvolvimento web com Java Exercício Percorrendo e contando tags
Exemplos Desenvolvimento web com Java 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)); }
Exercício Consultando a API do DOM 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
Eventos Mouse Form Handlers click Dblclick mouseover … blur Focus Desenvolvimento web com Java 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; ! Leak ! Event Handlers no IE6 (refcounts)
Desenvolvimento web com Java Mashups
Asynchronous Javascript And XML 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; http://ajaxpatterns.org
Exercício Obtendo dados do servidor assíncronamente Desenvolvimento web com Java Exercício Obtendo dados do servidor assíncronamente
Padrões de Projeto Clássicos Classes Singletons Privileged / public 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
Bibliotecas Prototype jQuery YUI Dojo Script.aculo.us Mootools X Rico Desenvolvimento web com Java Bibliotecas Prototype jQuery YUI Dojo Script.aculo.us Mootools X Rico G*? “Modus-operandi” no cliente: O que funciona O que é comum O que é padrão
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.
Desenvolvimento web com Java Dúvidas?