Carregar apresentação
A apresentação está carregando. Por favor, espere
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 ( 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 = “ img.setAttribute(“src”, “ 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?
Apresentações semelhantes
© 2024 SlidePlayer.com.br Inc.
All rights reserved.