Your SlideShare is downloading. ×
  • Like
Lib.SAPO.JS  - Codebits2007
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Lib.SAPO.JS - Codebits2007

  • 2,269 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,269
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
10
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Lib.SAPO.JS
      • Codebits 2007 – 14/11/2007
      • 9 da manhã??!! -_-
      • Cláudio Gamboa <gamboa@co.sapo.pt>
  • 2. Lib.SAPO.JS
    • JavaScript
        • AJAX
        • JSON
        • Script tag hack
    • Lib.SAPO.JS
        • O que é
        • Vantagens
        • Estrutura
    • Exemplos
  • 3.
      • JavaScript
    • ” The World's Most Misunderstood Programming Language ”
    • By...
  • 4.
      • JavaScript The World's Most Misunderstood Programming Language
    • By:
    • Douglas Crockford
    • http://www.crockford.com/
  • 5.
      • JavaScript The World's Most Misunderstood Programming Language
    • Não é um ”brinquedo”
    • para a web...
  • 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.
      • JavaScript The World's Most Misunderstood Programming Language
    • Permite criar aplicações completas
  • 8.
      • JavaScript The World's Most Misunderstood Programming Language
    • Um bom manual de JavaScript
  • 9. JavaScript.AJAX
    • AJAX
  • 10. JavaScript.AJAX
    • Não é esconder e mostrar divs com JavaScript
  • 11. JavaScript.AJAX
    • A synchronous J avaScript a nd X ML
    • 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. JavaScript.AJAX
    • Exemplo dum AJAX request
  • 13. JavaScript.AJAX
    • Exemplo dum AJAX request
    • <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot; http://www.w3.org/TR/html4/loose.dtd &quot;>
    • < html > < head > < title >AJAX Request< /title > < script type=&quot;text/javascript&quot; src=&quot;http://js.sapo.pt/Prototype/&quot;></ script > < script type=&quot;text/javascript&quot;> 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; text &quot; id=&quot; url &quot; size=&quot; 40 &quot; value=&quot;&quot; /> < input type=&quot; button &quot; name=&quot; b &quot; value=&quot; Request It &quot; onclick=&quot;myRequest();&quot; /> < hr /> < div >< span id=&quot; output &quot;></ span > items no XML</ div > </ body > </ html >
  • 14. JavaScript.AJAX
    • AJAX request – host restriction
  • 15. JavaScript.AJAX
    • AJAX request – host restriction
  • 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. 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. JavaScript.JSON
    • JSON
  • 19. JavaScript.JSON
    • J ava S cript O bject N otation
    • ( ”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. JavaScript.JSON
    • String
    • Number
    • Boolean
    • Object
    • Array
    • null
    • {
    • &quot;nome&quot;: &quot;Claudio Gamboa&quot;,
    • &quot;idade&quot;: 26,
    • &quot;solteiro&quot;: true,
    • &quot;gosta&quot;: {
    • &quot;musica&quot;: [&quot;Emperor&quot;, &quot;Moonspell&quot;, &quot;Borknagar&quot;],
    • &quot;cinema&quot;: [&quot;LOTR&quot;, &quot;Matrix&quot;, &quot;Se7en&quot;, &quot;Snatch&quot;],
    • &quot;series&quot;: [&quot;House MD&quot;, &quot;Seinfeld&quot;],
    • &quot;livros&quot;: [&quot;Perfume&quot;, ”Aparição”]
    • },
    • &quot;filhos&quot;: null
    • }
  • 21. JavaScript.JSON
    • JSON como resposta dum AJAX Request
    • function callBack(obj)
    • {
    • var req = obj.responseText;
    • var myObj = eval('(' + req + ')');
    • alert(myObj.nome);
    • }
  • 22. JavaScript.JSON
    • JSON como Classe
  • 23. JavaScript['Script'].Tag(Hack)
    • SCRIPT TAG HACK
  • 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. 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. Vamos mudar de assunto
    • ...
  • 27.
      • Lib.SAPO.JS
    • O que é
    • Vantagens
    • Estrutura
  • 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.
      • 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.
      • 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.
      • 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.
      • Lib.SAPO.JS('Estrutura')
    • /SAPO/
    • /Prototype/
    • /YUI/
    • /Bundles/
    • /Snippets/
    • http://js.sapo.pt/(.*)
  • 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.
      • 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.
      • Lib.SAPO.JS('Estrutura')
    • SAPO
      • Utility
      • Communication
      • Widget
      • Geo
      • Exception
  • 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.
      • 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.
      • 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.
      • 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.
      • Exemplos
    • SAPO.Utility.Dumper
    • SAPO.Utility.String
    • SAPO.Utility.Url
    • SAPO.Widget.Contextmenu
    • SAPO.Widget.Tooltip
    • SAPO.Communication.Syndication
    • Prototype
    • Ajax.Request
  • 41.
      • Perguntas??
    • ...
  • 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)