Javascript no SAPO e libsapojs

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/


Não é um ”brinquedo”
para a web...


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.
●


Permite criar aplicações completas


Um bom manual de JavaScript

JavaScript.AJAX

AJAX

JavaScript.AJAX

Não é esconder e mostrar divs com
JavaScript

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
●

JavaScript.AJAX

Exemplo dum AJAX request

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>

JavaScript.AJAX

AJAX request – host restriction

JavaScript.AJAX

SOLUÇÕES

Apache Proxy
RewriteEngine On
RewriteRule ^/req.xml http://videos.sapo.pt/gamboa/rss [P]

Request -> http://localhost/req.xml

JavaScript.AJAX

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

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)
●

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
●

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


O que é:

Adicionar dinamicamente uma SCRIPT
●

tag na página (ficheiro js/json)
Esperar que seja carregado
●

Usar/Executar o conteúdo.
●


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”


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


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/(.*)


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/..../


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/.../


SAPO
●

Utility
–
Communication
–
Widget
–
Geo
–
Exception
–


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/(.*)


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/


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/


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
●

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)
●

Javascript no SAPO e libsapojs

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (17)

Semelhante a Javascript no SAPO e libsapojs

Semelhante a Javascript no SAPO e libsapojs (20)

Mais de codebits

Mais de codebits (20)

Último

Último (9)

Javascript no SAPO e libsapojs