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

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

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

Apresentações semelhantes


Apresentação em tema: "O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2."— Transcrição da apresentação:

1 O Client (HTML / CSS / Javascript)

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

3 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

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

5 A Lasanha Desenvolvimento web com Java # 5 APP Server Maquina Virtual Java Sistema Operacional DispositivosDispositivosRedeRede APPAPP JSE APP JEE APP D E V E L O P E R D E P L O Y E R AplicaçãoAplicação TransporteTransporte RedeRede EnlaceEnlace FísicaFísica

6 O HTTP Desenvolvimento web com Java # 6

7 O HTTP Desenvolvimento web com Java # 7

8 O HTTP Desenvolvimento web com Java # 8

9 O HTTP Desenvolvimento web com Java # 9

10 Exercício: Firebug Desenvolvimento web com Java # 10

11 Navegadores Desenvolvimento web com Java # 11 Interpretador de: –HTML –CSS –Javascript –RSS –… –XUL FF Extensões –Java Applets –Flash –… –ActiveX IE

12 HTML Hyper Text Markup Language Linguagem de Marcação de Hipertexto Desenvolvimento web com Java # 12 Sistema de interpretação de simbolos texto marcado Texto + links + audio + video + …

13 Exemplo Desenvolvimento web com Java # 13

14 Tipos de Tags HTML 4.01 Spec (http://www.w3.org/TR/html4/), 9-18:http://www.w3.org/TR/html4/ 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

15 HTML bem formado Um único elemento raiz – ……….. Abrir e fechar todas as tags – …, Capitalização consistente – Aninhamento correto – negrito E italico Atributos não repetidos com valor entre aspas – Desenvolvimento web com Java # 15

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

17 CSS Cascading Style Sheets Folhas de estilo em cascata Desenvolvimento web com Java # 17 Aplicadas hierarquicamente Linguagem de apresentação de documentos estruturados

18 HTML Semântico Desenvolvimento web com Java # 18

19 Usando CSS Desenvolvimento web com Java # 19

20 estilo.css Desenvolvimento web com Java # 20 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 # 21

22 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 Desenvolvimento web com Java # 22

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

24 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

25 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

26 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

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

28 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à”; Desenvolvimento web com Java # 28

29 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

30 Linkage pessoaFisica CPF Idade21 Desenvolvimento web com Java # 30 pessoa Nome“Fulano” Situação1 var nome = pessoaFisica.nome; // “Fulano” pessoaFisica.novaPropriedade = “uala”; pessoaFisica.situação += 1; var nome = pessoaFisica.nome; // “Fulano” pessoaFisica.novaPropriedade = “uala”; pessoaFisica.situação += 1; Classes Métodos Construtores Modulos Classes Métodos Construtores Modulos Funções

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

32 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 Desenvolvimento web com Java # 32

33 # 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(); Closures function undead(){ var message = ”Ola"; function speak(){ alert(message); } setTimeout(speak,3000); } alert("Antes"); undead(); alert("Depois"); Closures function 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 {Blocos} não definem escopo Globais implicitas

34 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

35 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

36 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

37 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 Desenvolvimento web com Java # 37

38 O Navegador Desenvolvimento web com Java # 38

39 O Navegador Desenvolvimento web com Java # 39

40 O DOM Oi DOM Oi Mundo document.getElementById(id) document.getElementsByName(name) node.getElementsByTagName(tag) Desenvolvimento web com Java # 40 HTML HEAD BODY TITLE TEXT P P

41 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); } function calc() { i = txtI.value; n = txtN.value; x = txtX.value; resultado.value = (x * Math.pow(1 + i, n)).toFixed(2); }

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

43 Exercício Percorrendo e contando tags Desenvolvimento web com Java # 43

44 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

45 Exercício Consultando a API do DOM –http://developer.mozilla.org/en/docs/Main_Pagehttp://developer.mozilla.org/en/docs/Main_Page –http://www.w3schools.com/Dom/dom_mozilla_vs_ie.asp Desenvolvimento web com Java # 45

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

47 Mashups Desenvolvimento web com Java # 47

48 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

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

50 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

51 Bibliotecas Prototype jQuery YUI Dojo Script.aculo.us Mootools X Rico G*? “Modus-operandi” no cliente: 1.O que funciona 2.O que é comum 3.O que é padrão Desenvolvimento web com Java # 51

52 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

53 Desenvolvimento web com Java # 53 Dúvidas?


Carregar ppt "O Client (HTML / CSS / Javascript). Agenda Fundamentos HTTP HTML CSS Javascript AJAX Desenvolvimento web com Java # 2."

Apresentações semelhantes


Anúncios Google