Arxiu de la categoria: JavaScript

Els pros i contres del JavaScript i jQuery

Anem a definir, amb poques paraules, el que és JavaScript, d’on ve i que podem fer amb ell.
JavaScript és un llenguatge interpretat pels navegadors, que s’usa per a la programació web (validació de dades per part de la capa client, millora de l’experiència d’usuari, …). Inicialment, es va anomenar LiveScript i fou inventat per enginyers de Netscape, més endavant es va re-anomenar a JavaScript. Molta gent deu pensar, o pensa, que el nom de JavaScript te a veure amb el llenguatge de programació Java, però, sincerament, només tenen de parescut el nom, res més.

Durant els darrers anys JavaScript s’ha tornat molt popular entre els programadors web.

Quins usos li podem donar al JavaScript? doncs, com hem començat a introduïr-ho més amunt. Passarem a enumerar unes quantes:

  • El podem fer servir per validar dades
  • Per millorar l’experiència d’usuari (cosetes que es mouen per la pàgina, efectes xulixaxis 😀 ).
  • També per el tan anomenat AJAX, que, no és més que, enviar dades a un servidor i pintar-les, o no, per pantalla.
  • Detecció del navegador que s’està usant
  • Manipulació de cookies
  • Analítica web,…

Ara que sabem el que podem fer, anam a llistar els Pros i Contres del Javascript

Pros:

  • Rendiment: El JavaScript s’executa íntegrament en el navegador del client salvant temps de peticions i d’amplada de banda del servidor web.
  • És un llenguatge d'”scripting” lleuger i relativament fàcil d’aprendre.
  • Com hem dit abans, s’executa al navegador del client, per això el resultat i el procés es relativament ràpid.
  • Es poden usar extensions de tercers per comprobar els fragments de codi.

Contres:

  • En temes de seguretat, executant codi JavaScript maliciós, podria fer-se servir per aprofitar errades del navegador i fer-se amb el control de l’ordinador.
  • En temes d’interpretació, cada navegador interpreta el JavaScript d’una manera diferent.

Ara passem a definir el que és jQuery. jQuery és una llibreria dissenyada per simplificar la programació de JavaScript. El programador que usa aquesta llibreria, usa menys quantitat de codi sense que la funcionalitat es vegi alterada.

Cal dir que a part de jQuery hi ha altres llibreries que ens poden ajudar a la programació amb JavaScript, tals com Mootools, Dojo, Prototype, … Unes més orientades a efectes visuals i d’altres més orientades a manipulació de la página.

Anem a posar un exemple de codi de Javascript i jQuery, que fan exactament el mateix. Volem el valor d’un element:

JavaScript:

jQuery:

A vegades podem trobar-ho escrit de la següent forma, ambdues fan el mateix:

Com podem veure, amb el jQuery escrivim menys i és més fàcil de recordar. Podem dir que el jQuery ens ofereix un “Syntactic Sugar” per a la programació JavaScript.

Anem a citar els Pros i Contres del jQuery:

Pros:

  • Amb jQuery ens oblidam de les compatibilitats entre navegadors. Amb un sol codi escrit, sabem que funcionarà a tots els navegadors suportats per la versió de jQuery que usem.
  • jQuery és fàcil d’usar en comparació amb altres llibreries i, es clar, que amb el propi JavaScript.
  • jQuery te una extensa llista de llibreries/funcions
  • jQuery te molt bona documentació i una gran comunitat.
  • jQuery suporta la funcionalitat AJAX. El JavaScript també, però hauriem d’escriure la funcionalitat per a cada navegador. jQuery amb un codi es suficient per fer-lo anar amb tots els navegadors.

Contres:

  • Ja no escriurem codi nadiu JavaScript, ens hem de limitar a usar les funcions de la llibreria.
  • Es necessari incloure un fitxer per poder usar la funcionalitat.

En resum, no hi ha res que sigui bò o dolent, simplement és diferent.

Com a opinió personal, usar jQuery facilita molt la tasca de programació i a més, per la gran comunitat que té, es molt fàcil trobar com fer una acció desitjada.

Article traduït lliurament de The Pros and Cons of JavaScript and jQuery | JavaLobby DZone.

Com crear límits (bounds) amb la API de Google Maps v3

A la feina necessitava posar a un mapa varis punts i seguidament fer un zoom i centrar la vista en el centre d’aquests punts.
Per això esto he utilitzat la següent funció javascript, que m’he creat. Es necessaria la crida a l’API de google maps versió 3.

Com podeu veure, és facileta, sols guardam en unes variables la latitut i longitut màximes, latitut i longitut mínimes, amb les que crearem els punts per l’objecte bounds, el qual es una parella d’objetos latln. Uno serà el punt SO, el de latitut longitut mínims i l’altre serà el punt NE, el de latitut longitut màxima.
El paràmetre list és un array de JSON on tenim les diferents dades del punt a afegir, tals com la latidut i longitut.
Una vegada creat el bound, simplement hem de pasar-lo al mapa. Ho podem fer de la següent forma:

No és necesari fer un map.setCenter(), perque ja ho fa automàticament el fitBounds.

Després de l’Open Pizza Night de Google

Després d’un aterratge quasi forçós, vaig assistir a l’open pizza night ahir horabaixa mateix.

Va començar a les 18h a la sala de descans de les oficines de Google Espanya. Varem poder fer fotos, però només allà dins. Oblidau-vos de veure com eren les oficines.

El ponent de la jornada va ser en Raúl de Benito, Enginyer de Google de les oficines de Londres. Va fer la ponencia sobre la API de YouTube. Seguidament varem fer un taller de programació amb la API on interactuavem amb el video mitjançant Javascript i altres coses.

Mentre feiem el taller dugueren les pizzes :-D, a part hi havia geleres amb beure i menjar el qual estava a disposició dels assistents. Ens tractaren beníssim!!.

Quan va finalitzar la jornada, donaren l’oportunitat de presentar projectes personals tals com jisko, tuenti (els dos en beta privada), dilandau (un cercador de mp3 bastant currat!!) i dos més però que no están online.

I res més, cap a l’hotel a mirar The IT Crowd i a dormir per agafar l’avió a les 8 del matí cap a palma.

Promet que posaré fotos, però encara no he arribat a casa, estic a un curs de .NET ¬¬_

Actualització 31/03/08 – 21:30h: He vist que a mobuzz.tv han posat el video, aquí el teniu –> http://dosisdiaria.mobuzz.tv/shows/pizza_birra_google

GoogleMaps a l’estil Lightbox

L’altre dia vaig veure per can anieto2kuna manera diferent de presentar el googleMaps.
Hi ha una modificació del lightbox per mostrar el mapa.
Podeu trobar més informació tant a la web de anieto2k com a la pròpia web del qui ha fet aquesta modificació.

Web | Google Maps LightBox
anieto2k | anieto2k | Google Maps al estilo Lightbox
LightBox | LightBox JS

[JavaScript] Limitar el màxim de caracters en un textarea (II)

En David Martin :: Suki_:: m’ha passat una manera més eficient de fer aquesta feina, que en molt de gust vos pas:
<textarea rows="4"
onKeyUp="this.value = this.value.slice(0, 50)"
onBlur="this.value = this.value.slice(0, 50)"
onMouseout="this.value = this.value.slice(0, 50)"
name="textarea"></textarea>;

[JavaScript] Limitar el màxim de caracters en un textarea

Per una web, necessitava limitar el nombre de caracters d’un textarea. Vaig trobar una funció javascript molt fàcil d’entendre i fàcil d’executar:

Simplement posam la següent línia a l’event onKeyDown del textarea:

if(this.value.length >= 50){ alert('Has superat el tamany màxim permés'); return false; }

En el textarea queda d’aquesta manera:

<textarea name="descripcion"
onkeydown="if(this.value.length >= 50){ alert('Has superat el tamany màxim permés'); return false; }">
</textarea>

En aquest cas, es limita el màxim de caraters a 50. Si es vol canviar, només s’ha de canviar el valor.

Trobat a: WebTaller.com