O Client (HTML / CSS / Javascript)

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

O HTTP

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

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

HTML Semântico

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

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

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

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

DOMWalker function walkTheDOM(node, func) { func(node); node = node.firstChild; while (node) { walkTheDOM(node, func); node = node.nextSibling; }

Exercício Percorrendo e contando tags

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

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

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)

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;

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

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.

Dúvidas?

O Client (HTML / CSS / Javascript)

Apresentações semelhantes

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

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

O Client (HTML / CSS / Javascript)

Apresentações semelhantes

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

Apresentações semelhantes

Sobre projeto

Feedback