1 / 53

O Client (HTML / CSS / Javascript )

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

jola
Download Presentation

O Client (HTML / CSS / Javascript )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. O Client (HTML / CSS / Javascript)

  2. Desenvolvimento web com Java Agenda • Fundamentos • HTTP • HTML • CSS • Javascript • AJAX

  3. Desenvolvimento web com Java A Web Era pra ser: • Umsistema de obtenção de documentos “hiperligados” • Documentos • Semestado • Confiável • Acadêmica Acabouvirando: • Aplataforma de informação global • Aplicações • Com estado • Insegura • Comercial

  4. Desenvolvimento web com Java A Web ? Client Request Server Response

  5. Desenvolvimento web com Java A Lasanha 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 SistemaOperacional Enlace Dispositivos Rede Física

  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 O HTTP

  10. Desenvolvimento web com Java Exercício: Firebug

  11. Desenvolvimento web com Java Navegadores • Interpretador de: • HTML • CSS • Javascript • RSS • … • XULFF • Extensões • Java Applets • Flash • … • ActiveXIE

  12. Desenvolvimento web com Java HTML Hyper Text Markup Language Linguagem de Marcação de Hipertexto Sistema de interpretação de simbolos <rotulo>textomarcado</rotulo> Texto + links + audio + video + …

  13. Desenvolvimento web com Java Exemplo

  14. 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

  15. 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=“…” />

  16. Desenvolvimento web com Java Semântica x apresentação

  17. Desenvolvimento web com Java CSS Cascading Style Sheets Folhas de estilo em cascata Linguagem de apresentação de documentosestruturados Aplicadashierarquicamente

  18. Desenvolvimento web com Java HTML Semântico

  19. Desenvolvimento web com Java Usando CSS

  20. Desenvolvimento web com Java estilo.css Seletor de Tag Regra Seletor de Classe Seletor de Filhos Seletor de Pseudoclasse Seletor de ID

  21. Desenvolvimento web com Java Exemplo: CSS Zen Garden

  22. 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

  23. Desenvolvimento web com Java Exercício: Web Developer Extensions

  24. Desenvolvimento web com Java Javascript • A linguagemmais popular emenoscompreendida do mundo. • JavaLivescript • Funcional / OO? • Problemas de projeto, implementação, documentação, padronizaçãoeuso. Douglas Crockford http://developer.yahoo.com/yui/theater/ http://www.crockford.com/

  25. Desenvolvimento web com Java Idéiasprincipais • Implantação “load and go” • Tipagemdinâmica • Objetosgenéricos • Herançaporprotótipos • Lambda (funçõescomoobjetos) • “Linkage” porvariáveisglobais • Coleta de lixo (mark and sweep)

  26. 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

  27. Desenvolvimento web com Java Exercícios • Entendendo a IEEE-754 (double) • DiferenciandovaloresTruthy/Falsy

  28. Desenvolvimento web com Java Object • Mapanome/valor (Hashtable) • Nãoordenado • Nomessãorotulosou strings • Valorespodem ser de qualquertipo (Number, String, Object, function ….) • Object Literal varobj = {nome:”Fulano”, ‘idade’:21}; varnome = obj.nome; varidade = obj[‘idade’]; • ParametrosNomeados myFunc({param1:value1,…}) • Incremento de Objetos obj.novaProp = “voilà”;

  29. Desenvolvimento web com Java 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

  30. Desenvolvimento web com Java Linkage varnome = pessoaFisica.nome; // “Fulano” pessoaFisica.novaPropriedade = “uala”; pessoaFisica.situação += 1; • Classes • Métodos • Construtores • Modulos • Funções

  31. Desenvolvimento web com Java Exercício • Adicionandoométodo “trim” à strings

  32. Desenvolvimento web com Java Expressõeseoperadores 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) • varqtd = param || 10; • &, |, ^, >>, >>>, << • typeof

  33. Desenvolvimento web com Java Functions • Funçõessãoobjetos varf = function(){…} f.nome = “Fatorial” • Inner functions: function externa(){ varx = 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ãodefinemescopo • Globaisimplicitas

  34. Desenvolvimento web com Java Exercícios • Usandofunçõescomoobjetos: calculadoragenérica • Entendendofunçõesinternase closures • Evitandoproblemas de escopo

  35. Desenvolvimento web com Java Functions • Nãoexisteverificação de quantidadeoutipo dos argumentos • Tipos de invocação (this and that) • func(args) • obj.func(args) • new func(args) • func.apply(obj,[args]) • arguments • eval(string)

  36. 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)

  37. Desenvolvimento web com Java Estilo • Muitoimportante, especialmenteemjavascript. • Sugestões: • Escrevacódigolegívelporhumanos • Use ; e {} • Cuidado com espaços, quebras de linhas, virgulas, =/==/===, etc… • Defina as variáveis no iníciodafunção http://javascript.crockford.com/code.html

  38. Desenvolvimento web com Java O Navegador

  39. Desenvolvimento web com Java O Navegador

  40. Desenvolvimento web com Java O DOM <html> <head> <title>Oi DOM</title> </head> <body> <p>OiMundo</p> </body> </html> • document.getElementById(id) • document.getElementsByName(name) • node.getElementsByTagName(tag) HTML HEAD TITLE TEXT BODY P TEXT

  41. Desenvolvimento web com Java Exercício: Ondeestáo bug? function calc() { i = txtI.value; n = txtN.value; x = txtX.value; resultado.value = (x * Math.pow(1 + i, n)).toFixed(2); }

  42. Desenvolvimento web com Java DOMWalker function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; } }

  43. Desenvolvimento web com Java Exercício • Percorrendoecontando tags

  44. 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 (vari=0; i<2; i++) { cell = row.insertCell(-1); text = 'Row ' + row.rowIndex + ' Cell ' + i; cell.appendChild(document.createTextNode(text)); }

  45. 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

  46. 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)

  47. Desenvolvimento web com Java Mashups

  48. Desenvolvimento web com Java Asynchronous JavascriptAnd 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; } ... varxhReq = createXMLHttpRequest(); xhReq.open("GET", "sumGet.phtml", true); xhReq.onreadystatechange = onSumResponse; xhReq.send(null); ... function onSumResponse() { if (xhReq.readyState != 4) { return; } varserverResponse = xhReq.responseText; ... } http://ajaxpatterns.org

  49. Desenvolvimento web com Java Exercício • Obtendo dados do servidorassíncronamente

  50. 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

More Related