• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Lib.SAPO.JS  - Codebits2007
 

Lib.SAPO.JS - Codebits2007

on

  • 3,418 views

 

Statistics

Views

Total Views
3,418
Views on SlideShare
3,358
Embed Views
60

Actions

Likes
0
Downloads
9
Comments
0

5 Embeds 60

http://blog.pdvel.com 56
http://64.233.183.104 1
http://74.125.113.132 1
http://www.slideshare.net 1
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Lib.SAPO.JS  - Codebits2007 Lib.SAPO.JS - Codebits2007 Presentation Transcript

    • 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
      • 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
    • JavaScript.AJAX
      • Exemplo dum AJAX request
    • 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 >
    • JavaScript.AJAX
      • AJAX request – host restriction
    • 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
      • 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)
    • 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
      • }
    • 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)