Javascript no SAPO e libsapojs

Lib.SAPO.JS Codebits 2007 – 14/11/2007 9 da manhã??!! -_- Cláudio Gamboa <gamboa@co.sapo.pt>

Lib.SAPO.JS JavaScript ● AJAX ● JSON ● Script tag hack ● Lib.SAPO.JS ● O que é ● Vantagens ● Estrutura ● Exemplos ●

JavaScript ”The World's Most Misunderstood Programming Language” By...

JavaScript The World's Most Misunderstood Programming Language By: Douglas Crockford http://www.crockford.com/

JavaScript The World's Most Misunderstood Programming Language Não é um ”brinquedo” para a web...

JavaScript The World's Most Misunderstood Programming Language Não é um ”brinquedo” para a web... É uma linguagem de programação ● Pequena mas sofisticada ● Não tem ”class-oriented inheritance”, mas ● tem ”prototype-oriented inheritance” Objects as self containers ● Não se chama AJAX. ●

JavaScript The World's Most Misunderstood Programming Language Permite criar aplicações completas

JavaScript The World's Most Misunderstood Programming Language Um bom manual de JavaScript

JavaScript.AJAX AJAX

JavaScript.AJAX Não é esconder e mostrar divs com JavaScript

JavaScript.AJAX Asynchronous JavaScript and XML Criar aplicações web sem ser ● necessário fazer reload ao browser É assíncrono ● Usa o objecto XMLHttpRequest ● Recebe o conteúdo formatado em XML* ● É host restricted ●

JavaScript.AJAX Exemplo dum AJAX request

JavaScript.AJAX Exemplo dum AJAX request <!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\"> <html> <head> <title>AJAX Request</title> <script type=\"text/javascript\" src=\"http://js.sapo.pt/Prototype/\"></script> <script type=\"text/javascript\"> function myRequest() { var url = document.getElementById('url').value; new Ajax.Request(url, { method:'get', onSuccess: function(req){ var xml = req.responseXML; var aItems = xml.retElementsByTagName('item'); var totalItems = aItems.length; document.getElementById('output').innerHTML = totalItems; }, onException: function(r, e){ throw e; } }); } </script> </head> <body> <input type=\"text\" id=\"url\" size=\"40\" value=\"\" /> <input type=\"button\" name=\"b\" value=\"Request It\" onclick=\"myRequest();\" /> <hr /> <div><span id=\"output\"></span> items no XML</div> </body> </html>

JavaScript.AJAX AJAX request – host restriction

JavaScript.AJAX AJAX request – host restriction SOLUÇÕES Apache Proxy RewriteEngine On RewriteRule ^/req.xml http://videos.sapo.pt/gamboa/rss [P] Request -> http://localhost/req.xml

JavaScript.AJAX AJAX request – host restriction SOLUÇÕES PHP Proxy cat req.php <?php $content = file_get_contents('http://videos.sapo.pt/gamboa/rss'); header(”Content-type: text/xml”); echo $content; ?> Request -> http://localhost/req.php

JavaScript.JSON JSON

JavaScript.JSON JavaScript Object Notation (”jeison/jotason/jota esse on/...”) Formato duma estrutura de dados/ ● array associativo (JS Object) É text-based ● RFC 4627 ● Content type: application/json ● Pode encapsular funções (Class) ●

JavaScript.JSON { \"nome\": \"Claudio Gamboa\", String ● \"idade\": 26, \"solteiro\": true, Number \"gosta\": { ● \"musica\": [\"Emperor\", \"Moonspell\", \"Borknagar\"], Boolean \"cinema\": [\"LOTR\", \"Matrix\", \"Se7en\", \"Snatch\"], ● \"series\": [\"House MD\", \"Seinfeld\"], \"livros\": [\"Perfume\", ”Aparição”] Object ● }, \"filhos\": null Array } ● null ●

JavaScript.JSON JSON como resposta dum AJAX Request function callBack(obj) { var req = obj.responseText; var myObj = eval('(' + req + ')'); alert(myObj.nome); }

JavaScript.JSON JSON como Classe

JavaScript['Script'].Tag(Hack) SCRIPT TAG HACK

JavaScript['Script'].Tag(Hack) O que é: Adicionar dinamicamente uma SCRIPT ● tag na página (ficheiro js/json) Esperar que seja carregado ● Usar/Executar o conteúdo. ●

JavaScript['Script'].Tag(Hack) O que é: <script type=”text/javascript” src=”http://services.sapo.pt/Photos/JSON/gamboa?jsonTag=foo”> </script>”> // RSS em formato JSON var foo = {”rss”:{”channel”: ....}} alert(foo.rss.channel.item[0].title);

Vamos mudar de assunto ...

Lib.SAPO.JS O que é ● Vantagens ● Estrutura ●

Lib.SAPO.JS('O que é?') Repositório central de libs de ● JavaScript e widgets do SAPO É Open Source ● Tem classes utilitárias para ● simplificar o JavaScript e a vida dos programadores (SAPO.Utility.*)

Lib.SAPO.JS('Vantagens') Ter classes de JavaScript ● centralizadas (http://js.sapo.pt) Ter Widgets baseados nas classes ● Ter controlo de versões ● Ter o código organizado/separado ● Reutilizar código ● Não ter de reinventar a roda cada vez que ● se quer validar um endereço de email Farm estática e conteúdo ● ”jslinted”, ”jsmined” e ”gziped”

Lib.SAPO.JS('Vantagens') Criar ”packages” estáticos ● (Bundles) de vários ficheiros JavaScript e servir apenas um ficheiro para a aplicação. Torna o load da aplicação mais rapido ● Não corre o risco de ”partir” por um ● ficheiro não ter sido carregado Garante que todo o código necessário ● existe http://js.sapo.pt/Bundles/WebmessengerCliente.js 645 Kb -> 322 Kb -> 75 Kb

Lib.SAPO.JS('Vantagens') Criar ”scripts” (Snippets) em que ● as opções são passadas na query string. Disponibilizar apenas um ficheiro para ser ● reutilizado incluindo apenas uma script tag. Dar a possibilidade de o utilizador ● alterar as opções alterando apenas os parametros da query string. Lisbon Weather http://js.sapo.pt/Snippets/Meteo.js?c=LPLG

Lib.SAPO.JS('Estrutura') /SAPO/ ● /Prototype/ ● /YUI/ ● /Bundles/ ● /Snippets/ ● http://js.sapo.pt/(.*)

Lib.SAPO.JS('Estrutura') Prototype (Versão 1.8) ● Dragdrop – Effects – Builder – Controls – Slider – http://js.sapo.pt/Prototype/ http://js.sapo.pt/Prototype/Dragdrop/ http://js.sapo.pt/Prototype/..../

Lib.SAPO.JS('Estrutura') YUI (Versão 2.2) ● Dom – Event – Connection – Dragdrop – Calendar – ... – http://js.sapo.pt/YUI/ http://js.sapo.pt/YUI/Dom/ http://js.sapo.pt/YUI/.../

Lib.SAPO.JS('Estrutura') SAPO ● Utility – Communication – Widget – Geo – Exception –

Lib.SAPO.JS('Estrutura') SAPO.Utility ● Array (inArray, keyValue) ● Cookie (set, remove, get) ● Crypto (md5, sha1, sha256) ● Dumper (alertDump, returnDump, windowDump) ● CSS (set) ● String (trim, stripTags, htmlEntities(En|De)code, utf8(En|De)code ● ...) Url (getURl, getQueryString, base64(En|De)code ...) ● Validator (mail, isPortuguesePhone) ● Variable (isArray, isObject, isString, isNumber) ● http://js.sapo.pt/SAPO/Utility/(.*)

Lib.SAPO.JS('Estrutura') SAPO.Communication ● Syndication (push, – run, runAll) (Class para a ”Script Tag Hack”) http://js.sapo.pt/SAPO/Communication/Syndication/ http://js.sapo.pt/SAPO/Communication/Syndication/sample/

Lib.SAPO.JS('Estrutura') SAPO.Widget ● Contextmenu ● Dialog ● Tooltip ● Rating ● Maps ● Thumbs ● (Blogthis, Meteo, Photos, Search, Tags...) ● http://js.sapo.pt/SAPO/Widget/(.*) http://js.sapo.pt/SAPO/Widget/([^\\/]+)/sample/

Lib.SAPO.JS('Estrutura') SAPO.Geo ● Map ● Ver apresentação de Joaquim Muchaxo e António Cruz no PP às 11:45 ”SAPO Mapas & GIS” http://js.sapo.pt/SAPO/Geo/Map/

Exemplos SAPO.Utility.Dumper ● SAPO.Utility.String ● SAPO.Utility.Url ● SAPO.Widget.Contextmenu ● SAPO.Widget.Tooltip ● SAPO.Communication.Syndication ● Prototype Ajax.Request ●

Perguntas?? ...

Mais informação http://js.sapo.pt/ ● http://developer.sapo.pt/ ● http://prototypejs.org ● http://developer.yahoo.com/yui/ ● SAPO: http://www.sapo.pt/ ● Download: http://pdvel.com/ ● Meu blog: http://blog.pdvel.com/ (sucks) ●

Javascript no SAPO e libsapojs

0 comments

Notes on slide 1

1 Group