A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

O Client (HTML / CSS / Javascript)

Apresentações semelhantes


Apresentação em tema: "O Client (HTML / CSS / Javascript)"— Transcrição da apresentação:

1 O Client (HTML / CSS / Javascript)

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

3 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

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

5 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

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

12 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 + …

13 Desenvolvimento web com Java
Exemplo

14 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

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

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

17 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

18 Desenvolvimento web com Java
HTML Semântico

19 Desenvolvimento web com Java
Usando CSS

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

21 Exemplo: CSS Zen Garden
Desenvolvimento web com Java Exemplo: CSS Zen Garden

22 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

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

24 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

25 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)

26 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

27 Exercícios Entendendo a IEEE-754 (double)
Desenvolvimento web com Java Exercícios Entendendo a IEEE-754 (double) Diferenciando valores Truthy/Falsy

28 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à”;

29 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]

30 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

31 Exercício Adicionando o método “trim” à strings
Desenvolvimento web com Java Exercício Adicionando o método “trim” à strings

32 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

33 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

34 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

35 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)

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

37 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

38 Desenvolvimento web com Java
O Navegador

39 Desenvolvimento web com Java
O Navegador

40 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

41 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); }

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 Percorrendo e contando tags

44 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)); }

45 Exercício Consultando a API do DOM
Desenvolvimento web com Java Exercício Consultando a API do DOM

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

47 Desenvolvimento web com Java
Mashups

48 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;

49 Exercício Obtendo dados do servidor assíncronamente
Desenvolvimento web com Java Exercício Obtendo dados do servidor assíncronamente

50 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

51 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

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

53 Desenvolvimento web com Java
Dúvidas?


Carregar ppt "O Client (HTML / CSS / Javascript)"

Apresentações semelhantes


Anúncios Google