Lib.SAPO.JS - Codebits2007
Loading...
Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.
Favorites, Groups & Events
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 "-//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
- 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
- {
- "nome": "Claudio Gamboa",
- "idade": 26,
- "solteiro": true,
- "gosta": {
- "musica": ["Emperor", "Moonspell", "Borknagar"],
- "cinema": ["LOTR", "Matrix", "Se7en", "Snatch"],
- "series": ["House MD", "Seinfeld"],
- "livros": ["Perfume", ”Aparição”]
- },
- "filhos": 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.
- 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)
More Info
© All Rights Reserved
Go to text version- Total Views 1126
- 1078 on SlideShare
- Comments 0
- Favorites 0
- Downloads 6
Most viewed embeds
All embeds
- Uploaded via SlideShare
- Uploaded as OpenOffice
0 comments
Post a comment