Javascript no SAPO e libsapojs

2,980 views

Published on

Noções de Javascript e aplicações práticas.
Library de Javascript do SAPO
Exemplos práticos de integração dos serviços do SAPO com Javascript.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,980
On SlideShare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
45
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript no SAPO e libsapojs

  1. 1. Lib.SAPO.JS Codebits 2007 – 14/11/2007 9 da manhã??!! -_- Cláudio Gamboa <gamboa@co.sapo.pt>
  2. 2. Lib.SAPO.JS JavaScript ● AJAX ● JSON ● Script tag hack ● Lib.SAPO.JS ● O que é ● Vantagens ● Estrutura ● Exemplos ●
  3. 3. JavaScript ”The World's Most Misunderstood Programming Language” By...
  4. 4. JavaScript The World's Most Misunderstood Programming Language By: Douglas Crockford http://www.crockford.com/
  5. 5. JavaScript The World's Most Misunderstood Programming Language Não é um ”brinquedo” para a web...
  6. 6. 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. ●
  7. 7. JavaScript The World's Most Misunderstood Programming Language Permite criar aplicações completas
  8. 8. JavaScript The World's Most Misunderstood Programming Language Um bom manual de JavaScript
  9. 9. JavaScript.AJAX AJAX
  10. 10. JavaScript.AJAX Não é esconder e mostrar divs com JavaScript
  11. 11. 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 ●
  12. 12. JavaScript.AJAX Exemplo dum AJAX request
  13. 13. JavaScript.AJAX Exemplo dum AJAX request <!DOCTYPE HTML PUBLIC quot;-//W3C//DTD HTML 4.01 Transitional//ENquot; quot;http://www.w3.org/TR/html4/loose.dtdquot;> <html> <head> <title>AJAX Request</title> <script type=quot;text/javascriptquot; src=quot;http://js.sapo.pt/Prototype/quot;></script> <script type=quot;text/javascriptquot;> 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=quot;textquot; id=quot;urlquot; size=quot;40quot; value=quot;quot; /> <input type=quot;buttonquot; name=quot;bquot; value=quot;Request Itquot; onclick=quot;myRequest();quot; /> <hr /> <div><span id=quot;outputquot;></span> items no XML</div> </body> </html>
  14. 14. JavaScript.AJAX AJAX request – host restriction
  15. 15. JavaScript.AJAX AJAX request – host restriction
  16. 16. 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
  17. 17. 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
  18. 18. JavaScript.JSON JSON
  19. 19. 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) ●
  20. 20. JavaScript.JSON { quot;nomequot;: quot;Claudio Gamboaquot;, String ● quot;idadequot;: 26, quot;solteiroquot;: true, Number quot;gostaquot;: { ● quot;musicaquot;: [quot;Emperorquot;, quot;Moonspellquot;, quot;Borknagarquot;], Boolean quot;cinemaquot;: [quot;LOTRquot;, quot;Matrixquot;, quot;Se7enquot;, quot;Snatchquot;], ● quot;seriesquot;: [quot;House MDquot;, quot;Seinfeldquot;], quot;livrosquot;: [quot;Perfumequot;, ”Aparição”] Object ● }, quot;filhosquot;: null Array } ● null ●
  21. 21. JavaScript.JSON JSON como resposta dum AJAX Request function callBack(obj) { var req = obj.responseText; var myObj = eval('(' + req + ')'); alert(myObj.nome); }
  22. 22. JavaScript.JSON JSON como Classe
  23. 23. JavaScript['Script'].Tag(Hack) SCRIPT TAG HACK
  24. 24. 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. ●
  25. 25. 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);
  26. 26. Vamos mudar de assunto ...
  27. 27. Lib.SAPO.JS O que é ● Vantagens ● Estrutura ●
  28. 28. 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.*)
  29. 29. 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”
  30. 30. 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
  31. 31. 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
  32. 32. Lib.SAPO.JS('Estrutura') /SAPO/ ● /Prototype/ ● /YUI/ ● /Bundles/ ● /Snippets/ ● http://js.sapo.pt/(.*)
  33. 33. 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/..../
  34. 34. 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/.../
  35. 35. Lib.SAPO.JS('Estrutura') SAPO ● Utility – Communication – Widget – Geo – Exception –
  36. 36. 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/(.*)
  37. 37. 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/
  38. 38. 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/
  39. 39. 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/
  40. 40. Exemplos SAPO.Utility.Dumper ● SAPO.Utility.String ● SAPO.Utility.Url ● SAPO.Widget.Contextmenu ● SAPO.Widget.Tooltip ● SAPO.Communication.Syndication ● Prototype Ajax.Request ●
  41. 41. Perguntas?? ...
  42. 42. 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) ●

×