3/9/10. Web apps. Web vs. Desktop - desenvolvimento

Tamanho: px

Começar a partir da página:

Download "3/9/10. Web apps. Web vs. Desktop - desenvolvimento"

Débora Bicalho Vasques
5 Há anos
Visualizações:

1 Aula 2 PROGRAMAÇÃO WEB Web apps Aplicação acedida via um browser Acesso (tipicamente) baseado em contas de utilizador Dados dos utilizadores guardados de forma centralizado no servidor 93 Web vs. Desktop - desenvolvimento Web multi-plataforma com uma única code base Manutenção facilitada Maior facilidade de logging Fim da pirataria!? Acesso limitado aos recursos das máquinas cliente Investimento em hardware e desempenho Segurança de dados e privacidade Desktop Tecnologia estável Grrr Maior controlo do utilizador?! Acesso directo às máquinas Responsabilidade do utilizador Responsabilidade do utilizador 94 1

2 Web vs. Desktop - utilizadores Web Acesso facilitado Manutenção facilitada Maior riscos de segurança/ privacidade Maior segurança dos dados Menor segurança dos dados Necessidade de conectividade Pior desempenho Pior hardware Modelo de negócio baseado em subscrições Desktop Requerem instalação Utilizador mantém controlo Menores riscos de segurança/ privacidade Necessidade de gerir backups Necessidade de gerir backups Não Melhor desempenho Melhor hardware Modelo de negócio baseado em compra (?) 95 A world of pages Each http request: a new page! Not ideal for best usability: - How to break this model? - Special execution containers in the browser - Client side scripting! 96 Making the web dynamic How to create dynamic contents? Server side - creating contents dynamically Client side - Client side scripting - code runs on the client (browser) ECMAScript (JavaScript, JScript), VBScript - Code runs on a virtual machine (in the browser) Java applets, Flex, Silverlight, JavaFX 97 2

3 Containers Applets, Flex, Silverlight Applet + Java, tested and tried - download time Java WebStart / ClickOnce + Desktop experience + disconnected operation - download time Flash / Silverlight / JavaFX + Vector graphics - needs plug-in 98 Client-side scripting Conteúdo dos documentos guardado num Document Object Model (DOM) DOM manipulado por código JavaScript Browser faz o rendering do DOM Código JavaScript consegue alterar o coneteúdo e visualização do documento 99 Programação Web JAVASCRIPT 100 3

4 JavaScript alias ECMAScript Uma linguagem de Scripting - Interpretada pelo browser Não é Java!! - mas sintaxe semelhante Nem sequer da Sun - Netscape 101 JavaScript exemplo 102 (Como declarar o encoding? e não só) HTML XHTML (servido como HTML) XHTML (servido como XML) Em XHTML: usar utf-8 e deixar de fora a declaração XML

5 JavaScript exemplo 104 JavaScript exemplo 2 Funções Variáveis Estruturas de controlo Eventos Objectos Manipulação do DOM 105 (ficheiros externos) 106 5

6 JavaScript variáveis Sistema de tipos fraco (ʻweakly typedʼ ) - as variáveis não têm tipo, os valores têm var v = teste ; v = false; Declaração implicita - variável criada no momento da primeira atribuição Tipos typeof v == string typeof v == boolean - string; number; boolean; object; function; null; undefined 107 JavaScript estruturas de controlo As que seriam de esperar (Java): - if/else; while; do/while; for; switch; try/catch mas também - for/in (arrays associativos, listas) for (prop in document) { document.write(prop + " = " + document[prop] + "<br />"); } - with function ola (form) { var nome = form.nome.value; var o = document.getelementbyid( id"); o.firstchild with (o) { var ant = firstchild; var txt = document.createtextnode("olá "+nome); if (ant) { replacechild(txt, ant); } else { appendchild(txt); } } o.replacechild(txt, ant) form.nome.value = ""; return false; } o.appendchild(txt) 108 JavaScript eventos onload / onunload <body onload= setup() > onfocus / onblur / onchange <input type="text" name="nome" onchange= validanome() /> onsubmit <form onsubmit="return ola(this) > onmouseover / onmouseout <input type="submit" value="ok" onmouseover="javascript:this.style.color='red'" onmouseout="javascript:this.style.color='black'" /> 109 6

7 JavaScript objectos Early vs. late binding - e também o very late binding matar objectos - personobj = null Scope: tudo público! Static: tudo instância! 110 Tipos de objectos Nativos definidos pela norma ECMA Object, Function, Array, String, Number, Date, built-in nativos e pré-instanciados - Global; Math host não nativos - p.e. objectos do DOM e do BOM Referência: 111 (Browser Object Model BOM) 112 7

8 JavaScript OO? Encapsulamento - Sim, mas sem information hiding Agregação - Sim, mas sem information hiding Herança - Possui mecanismo de suporte Polimorfismo - Sim, via late binding 113 Definição de classes Factory Constructor Prototype Hybrid constructor/prototype!! Dynamic prototype Hybrid factory 114 Hybrid constructor/prototype function StringBuffer(str) { this.strings = new Array(str); this.append = new Function( str, this.string.push(str) ); this.tostring = function () { return this.strings.join( ); } } StringBuffer.prototype.append = function (str) { this.strings.push(str); } StringBuffer.prototype.append = function (str) { return this.strings.join( ); } Constructor Prototype var sb1 = new StringBuffer( ); var sb2 = new StringBuffer( test ); 115 8

9 Dynamic prototype function StringBuffer(str) { this.strings = new Array(str); if (typeof StringBuffer._initialized == undefined ) { Car.prototype.append = function (str) { this.string.push(str); } Car.prototype. tostring = function () { return this.strings.join( ); } } Car._initialized = true; } var sb1 = new StringBuffer( ); var sb2 = new StringBuffer( test ); 116 Herança object masquerading - the call() method - the apply() method prototype chaining hybrid method 117 Herança hybrid method function StringBuffer(str) { this.strings = new Array(str); } StringBuffer.prototype.append = function (str) { this.strings.push(str); } StringBuffer.prototype.toString= function () { return this.strings.join( ); } function StringBufferSep (str, separator) { StringBuffer.call(this, str); this.sep = separator; } StringBufferSep.prototype = new StringBuffer(); StringBuffer.prototype.toStringSep= function () { return this.string.join(this.sep); } Object masquerading Prototype chaining 118 9

10 119 The End! JAVASCRIPT 120 Programação Web DOCUMENT OBJECT MODEL (DOM)

11 DOM API for accessing and manipulating structured documents "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document. (w3schools) Represents the structure of XML and HTML documents as a tree 122 DOM levels The DOM is separated into 3 different levels: - Core DOM standard model for any structured document - XML DOM standard model for XML documents - HTML DOM standard model for HTML documents Defines: - objects - properties - methods 123 XML DOM Node object properties The primary data type for the entire DOM - x.nodename the name of x - x.nodevalue the value of x - x.parentnode the parent node of x - x.childnodes the child nodes of x

XML DOM Document object methods The root of a document tree - x.getelementsbytagname(name) get all elements with a specified tag name - x.appendchild(node) insert a child node into x - x.

12 XML DOM Document object methods The root of a document tree - x.getelementsbytagname(name) get all elements with a specified tag name - x.appendchild(node) insert a child node into x - x.removechild(node) remove a child node from x HTML DOM objects <!DOCTYPE html PUBLIC " //W3C//DTD XHTML 1.0 Strict//EN" " strict.dtd"> <html xmlns=" xml:lang="pt" lang="pt"> <head> <meta http equiv="content Type" content="text/html; charset=utf 8" /> <title>exemplo de JavaScript 1</title> <script type="text/javascript"> function ola (form) { var nome = form.nome.value; var par = document.getelementbyid("dados"); var ant = par.firstchild; var txt = document.createtextnode("olá "+nome); if (ant) { par.replacechild(txt, ant); } else { par.appendchild(txt); } form.nome.value = ""; return false; } function valida(nome) { alert("!"+nome+"!") } </script> </head> <body> <form onsubmit="return ola(this)"> Nome: <input type="text" name="nome" onblur="valida(this.value)" /><input type="submit" value="ok" onmouseover="javascript:this.style.color='red'" onmouseout="javascript:this.style.color='black'" /> </form> <div id="dados"></div> </body> </html>

13 The End! DOCUMENT OBJECT MODEL (DOM) 128 Tarefa 129 MVC Pattern Delegate

14 MVC: Model-View-Controller Interaction model for Smalltalk Divides interactive application into three types of components - Model: Contains core program functionality and data - View: Renders the model as an interface for the user - Controller Handles user input Translates interface events into program functions 131 MVC-like em DHTML Web page (Controller) JavaScript 1 2 Web Server (Model) Browser 3 4 HTML/CSS (View)

Documentos relacionados

Desenvolvimento Web. JavaScript aula II variáveis (cont.) e diálogos. Professor: Bruno Gomes

Desenvolvimento Web. JavaScript aula II variáveis (cont.) e diálogos. Professor: Bruno Gomes INSTITUTO FEDERAL DE EDUCAÇÃO CIÊNCIA E TECNOLOGIA CURSO TÉCNICO INTEGRADO EM INFORMÁTICA CAMPUS CURRAIS NOVOS Desenvolvimento Web JavaScript aula II variáveis (cont.) e diálogos Professor: Bruno Gomes