Javascript no SAPO e libsapojs
-
Upload
codebits -
Category
Technology
-
view
2.767 -
download
0
description
Transcript of Javascript no SAPO e libsapojs
![Page 2: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/2.jpg)
Lib.SAPO.JS
● JavaScript● AJAX● JSON● Script tag hack
● Lib.SAPO.JS● O que é● Vantagens● Estrutura
● Exemplos
![Page 3: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/3.jpg)
JavaScript
”The World's Most Misunderstood Programming
Language”
By...
![Page 4: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/4.jpg)
JavaScript The World's Most Misunderstood Programming Language
By:
Douglas Crockford http://www.crockford.com/
![Page 5: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/5.jpg)
JavaScript The World's Most Misunderstood Programming Language
Não é um ”brinquedo” para a web...
![Page 6: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/6.jpg)
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.
![Page 7: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/7.jpg)
JavaScript The World's Most Misunderstood Programming Language
Permite criar aplicações completas
![Page 8: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/8.jpg)
JavaScript The World's Most Misunderstood Programming Language
Um bom manual de JavaScript
![Page 9: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/9.jpg)
JavaScript.AJAX
AJAX
![Page 10: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/10.jpg)
JavaScript.AJAX
Não é esconder e mostrar divs com JavaScript
![Page 11: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/11.jpg)
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
![Page 12: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/12.jpg)
JavaScript.AJAX
Exemplo dum AJAX request
![Page 13: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/13.jpg)
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>
![Page 14: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/14.jpg)
JavaScript.AJAX
AJAX request – host restriction
![Page 15: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/15.jpg)
JavaScript.AJAX
AJAX request – host restriction
![Page 16: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/16.jpg)
JavaScript.AJAX
AJAX request – host restrictionSOLUÇÕES
Apache Proxy
RewriteEngine OnRewriteRule ^/req.xml http://videos.sapo.pt/gamboa/rss [P]
Request -> http://localhost/req.xml
![Page 17: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/17.jpg)
JavaScript.AJAX
AJAX request – host restrictionSOLUÇÕESPHP 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
![Page 18: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/18.jpg)
JavaScript.JSON
JSON
![Page 19: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/19.jpg)
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)
![Page 20: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/20.jpg)
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}
![Page 21: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/21.jpg)
JavaScript.JSON
JSON como resposta dum AJAX Request
function callBack(obj){ var req = obj.responseText;
var myObj = eval('(' + req + ')');
alert(myObj.nome);}
![Page 22: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/22.jpg)
JavaScript.JSON
JSON como Classe
![Page 23: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/23.jpg)
JavaScript['Script'].Tag(Hack)
SCRIPT TAG HACK
![Page 24: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/24.jpg)
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.
![Page 25: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/25.jpg)
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);
![Page 26: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/26.jpg)
Vamos mudar de assunto
...
![Page 27: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/27.jpg)
Lib.SAPO.JS
● O que é● Vantagens ● Estrutura
![Page 28: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/28.jpg)
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.*)
![Page 29: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/29.jpg)
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”
![Page 30: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/30.jpg)
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
![Page 31: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/31.jpg)
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 Weatherhttp://js.sapo.pt/Snippets/Meteo.js?c=LPLG
![Page 32: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/32.jpg)
Lib.SAPO.JS('Estrutura')
● /SAPO/● /Prototype/● /YUI/● /Bundles/● /Snippets/
http://js.sapo.pt/(.*)
![Page 33: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/33.jpg)
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/..../
![Page 34: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/34.jpg)
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/.../
![Page 35: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/35.jpg)
Lib.SAPO.JS('Estrutura')
● SAPO– Utility– Communication– Widget– Geo– Exception
![Page 36: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/36.jpg)
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/(.*)
![Page 37: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/37.jpg)
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/
![Page 38: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/38.jpg)
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/
![Page 39: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/39.jpg)
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/
![Page 40: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/40.jpg)
Exemplos
● SAPO.Utility.Dumper● SAPO.Utility.String● SAPO.Utility.Url
● SAPO.Widget.Contextmenu● SAPO.Widget.Tooltip
● SAPO.Communication.Syndication
Prototype● Ajax.Request
![Page 41: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/41.jpg)
Perguntas??
...
![Page 42: Javascript no SAPO e libsapojs](https://reader033.fdocuments.us/reader033/viewer/2022052823/5558390cd8b42acb078b4a5b/html5/thumbnails/42.jpg)
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)