NF1 - Arquitectures i tecnologies de la programació Web en entorn client

De wikiserver
Dreceres ràpides: navegació, cerca

Introducció Javascript

Abans de començar: Gens d'espantar-se per l'argot tècnic. Per a qui comença des de zero, aquestes coses són el primer que hagués de conèixer: Què és això de programa, llenguatge, scripts o guions....

El primer a aclarir què és el del programa, alguna cosa que realment no és exclusiu de la informàtica, tots hem programat alguna vegada: en posar el vídeo perquè gravi quan no estem a casa, quan posem el despertador,... En el cas d'un programa informàtic el que programem és un ordinador i els programes habitualment es fan escrivint-los en un cert llenguatge. Concretant, un programa no és mes que una sèrie d'instruccions que li donem a un sistema perquè faci coses. En altres paraules, i en el cas que ens concerneix, és dir-li a l'ordinador com fer una determinada tasca. Pot per tant ser alguna cosa tan simple com dir-li que sumeix dos nombres i ens digui el resultat fins a alguna cosa tan complex com dir-li que controli tot un edifici: temperatura, portes, il·luminació... En el nostre cas és alguna cosa bastant senzill, anem a dir-li a l'ordinador que quan presenti nostra pàgina web al visitant faci coses com posar a la pàgina la data del dia, fer que una imatge es mogui d'un costat a un altre, respondre d'una determinada forma a la pulsació del ratolí, etc.

Per escriure un programa no ens val ni el català, ni el castellà, ni l'anglès, ni cap dels llenguatges que habitualment usa l'home per comunicar-se. Per entendre'ns amb un ordinador s'utilitzen els llenguatges informàtics. Existeixen dos grans grups de llenguatges a l'hora d'escriure un programa: Els compilats i els interpretats.

Quan usem llenguatges compilats seguim els següents passos:

  1. Nosaltres escrivim el programa (codi font),
  2. Un programa ho tradueix al llenguatge intern de l'ordinador (es compilen)
  3. S'obté així un nou fitxer que és el que s'executa tantes vegades com es desitgi.

Els programes així obtinguts són els que s'emmagatzemen en fitxers amb un nom acabat en .exe o en .com, si treballem en els sistemes operatius DOS o Windows. Podríem resumir: Un programa compilat es tradueix una vegada i s'executa quantes vegades es desitgi. A aquest grup pertanyen els llenguatges tradicionals com a C, Pascal, Ada i uns altres.

L'altre grup és el dels llenguatges interpretats. En aquests el programa s'escriu (codi font), i l'ordinador va llegint cada instrucció, la tradueix i l'executa. O sigui, és necessari traduir el programa cada vegada que s'executa. Qui tradueix les instruccions del programa? Doncs molt senzill, un altre programa: el traductor o intèrpret. A aquest grup pertany el llegendari Basic, el Perl i els anomenats llenguatges de script com són Bash, Python, Javascript, Vbscript. Els programes escrits en aquests dos últims llenguatges són interpretats pels navegadors d'Internet com Mozilla Firefox, Chrome, IE.

Javascript

Escriure un programa per tant és simplement escriure instruccions perquè les executi l'ordinador, utilitzant per a això un cert llenguatge. És com escriure en anglès: necessites conèixer el vocabulari i la gramàtica de l'idioma de Shakespeare. En el nostre cas usem com a llenguatge el Javascript i necessites conèixer les seves regles i el seu vocabulari. Com ja saps es tracta d'un llenguatge interpretat i els programes escrits amb aquests llenguatges són coneguts com scripts o guions. Malgrat el seu nom no té res a veure amb Java, aquest últim és un llenguatge una mica més complex amb el qual es poden construir programes de propòsit general com podria fer-se amb C++ o Visual Basic (la particularitat que tenen els programes Java és que poden funcionar en qualsevol ordinador i amb qualsevol sistema operatiu). Les aplicacions escrites per a Internet en Java són conegudes com applets.

L'única raó de ser de Javascript són les pàgines web. Amb Javascript no poden construir-se programes independents, només poden escriure's scripts que funcionaran a l'entorn d'una pàgina Web, interpretat per un explorador, d'aquí la importància de conèixer para quin explorador escrivim els guions. I aquí ve el primer obstacle: no tots els exploradors integren en la mateixa forma els guions Javascript.

La primera versió de Javascript es deu a Netscape, que ho va introduir amb la versió 2.0 del seu explorador, posteriorment han anat sorgint noves versions havent estat estandarditzat per la European Computer Manufacturers Asociation (ECMA).http://www.ecma-international.org/ecma-262/5.1/

Posaríem preguntar-nos per què l'esforç d'aprendre Javascript, ja és bastant amb l'HTML per construir pàgines Web. En part això és cert, amb un bon programa editor podem obtenir una pàgina per publicar a la xarxa, però aquesta pàgina Web consistiria en: text, imatges i hipervíncles, amb els atributs com a colors, tipus de lletra i poc més sobre els quals l'autor pot actuar. Però i si volguéssim posar un menú desplegable?, i si volem que el visitant pugui moure una imatge per la pantalla? I si necessitem validar el text entrat per l'usuari en un formulari?... En resum, si volem anar més enllà de la simple presentació d'un document en pantalla, i volem controlar a l'explorador no hi ha mes remei que utilitzar un programa. Per què en Javascript? molt simple: és suportat per tots els exploradors, és senzill i és el que està sent contemplat pels organismes de normalització.

Execució de programes fets amb Javascript

Habitualment quan vols executar un programa n'hi ha prou amb buscar l'arxiu corresponent i fer un senzill clic de ratolí o prémer la tecla enter.

Però què passa amb els programes en Javascript?. El normal és que l'execució es realitzi de forma automàtica quan el navegador carrega una pàgina, o quan l'usuari passa el ratolí per una imatge, o quan prem el botó d'un formulari, etc. Aquests canvis provoquen els anomenats esdeveniments que són rebuts pel navegador que reaccionarà en la forma adequada: si fas clic en un enllaç es genera un esdeveniment i el navegador obre una nova pàgina. Aquests esdeveniments són els que s'aprofiten perquè s'executin les instruccions que nosaltres escrivim en Javascript. A cada esdeveniment se li pot associar una funció perquè faci alguna cosa predeterminat per nosaltres. Per exemple quan el navegador carrega una pàgina es produeix un esdeveniment que pot aprofitar-se per fer que s'obri una altra finestra (les conegudes com a finestres popup tan usades per a missatges publicitaris), o quan passem el ratolí per una enllaç es produeix un altre esdeveniment que pot aprofitar-se per cridar a una funció que modifiqui el color en què es mostra l'enllaç, o quan l'usuari prem una tecla.

Els esdeveniments tenen la naturalesa d'objectes, o sigui, posseeixen mètodes i propietats. Així quan es produeix un esdeveniment podem saber qui ho dispara, en què posició de la pantalla s'ha disparat i altres propietats depenents de cada esdeveniment en concret. I aquí ve un de les causes per als teus futurs maldecaps: cada navegador maneja els esdeveniments de manera alguna cosa diferent. Però seguim amb el tema de l'execució dels programes, vegem què és això del flux de programa. Quan el navegador comença a llegir el script per executar-ho ho fa en ordre seqüencial, o sigui, comença amb la primera instrucció, segueix per la segona i així fins a arribar al final. Això és el que es coneix com a execució seqüencial o lineal. Però de vegades és necessari saltar-se instruccions, per exemple, construeixes una pàgina a la qual només poden entrar determinades persones, hauràs d'escriure una funció que demani el nom de qui desitgi veure la pàgina, si és una persona autoritzada mostra la pàgina i si no ho és no la mostra. El teu programa no ha seguit un flux lineal, unes vegades executarà la part de mostrar la pàgina i unes altres no. Una altra situació bastant comuna: desitges que el teu programa recorri totes les imatges de la teva pàgina i vagi canviant el seu contingut, no vas a escriure el mateix codi una vegada i una altra, l'ideal seria escriure les instruccions i poder-les repetir.. Qualsevol llenguatge de programació té solucionat aquest assumpte mitjançant les anomenades sentències de control del flux de programa. Són sentències que permeten que s'executin condicionalment alguns passos (condicionals) o repetir una sèrie d'instruccions una vegada i una altra (bucles).

Variables, dades, objectes

Per començar a utilitzar Javascript (i qualsevol llenguatge de programació) és necessari conèixer alguns conceptes bàsics, no podem començar a fer una casa si no sabem que existeixen els maons. Un programa és una llista d'instruccions, però aquestes instruccions s'hauran d'executar sobre alguna cosa, si donem una instrucció escriure hem d'especificar què és el que cal escriure. És evident doncs que en les instruccions del programa també han de figurar les dades amb que treballar. Per exemple el nom d'una persona és Juan, aquesta paraula és una dada. El preu d'una poma és 0.5 euros, aquest nombre és una altra dada. Aquestes dades no solen usar-se tal qual sinó que s'emmagatzemen en uns elements amb nom denominats Variables. En els exemples previs usaria una variable, nom, per guardar Juan, o preu per guardar el 10. Si ara dic a l'ordinador que escrigui nom, l'ordinador escriurà el seu contingut, o sigui, Juan. 

window.alert("El meu nom: "+nom).

Nota: Aquesta possibilitat ja no funciona en els navegadors moderns. Veure:

http://support.mozilla.org/ca/questions/885558

El codi mínim per fer aquest exercici és crear una pàgina web, per exemple: nom.html, i fer doble clic sobre ella: 

<html>
     <script type="text/javascript">
        nombre="alex";
        window.alert(nombre); 
     </script> 
  </html>

Mitjançant el símbol + s'ha concatenat ambdues cadenes. S'ha usat un operador, alguna cosa que no és nou si has estudiat alguna vegada matemàtiques. Els operadors són símbols usats per realitzar operacions amb les dades, són els símbols +, -, /, *, respectivament sumar, restar, dividir i multiplicar. Com saps aquests operadors s'usen amb dades numèriques: 4 + 5 són 9. Aquestes dues instruccions que has escrit podrien tancar-se en un bloc amb un nom, per exemple mepresento() i tindries una funció. Podríem definir una funció anomenada quehoraes() que tanqui les instruccions necessàries perquè aparegui en pantalla l'hora actual. És a dir, mitjançant les funcions vam crear les ordres que després podrem donar-li al navegador perquè actuï segons el nostre desig.

Fins a aquí has vist els elements bàsics existents en qualsevol llenguatge de programació, però alguna vegada hauràs llegit que Javascript és un llenguatge que utilitza objectes, a diferència de Java que és un llenguatge orientat a objectes. I què és això d'objectes? Els objectes són com una extensió de les variables, una estructura que ens permet agrupar diferents valors i noms de funcions. Una variable numèrica només pot contenir això, un nombre: 10 o 20 o 2000, una cadena tipus només pot guardar una sèrie de caràcters ACAD, LI18P. Un objecte va mes allà, pot guardar diverses coses alhora. Sona rar?.

Vegem un exemple molt senzill: un rectangle es caracteritza per la longitud dels seus costats i per la forma de dibuixar-ho. En un programa el rectangle s'assimilaria a un objecte que tindria dues propietats: base i altura, i un mètode: com_dibuixar-ho. Aquest com_dibuixar-ho seria una funció que dibuixa rectangles. Si un programa defineix la variable mirectángulo com un objecte d'aquest tipus i conté la instrucció mirectangulo.com_dibuixar-ho, dibuixaria en pantalla un rectangle. La finestra de l'explorador que tens davant és un objecte amb propietats com: altura, amplària, nom... i mètodes com obrir, tancar, moure... Anem a fer alguna cosa amb un objecte que es diu window, per a això obre una altra finestra del teu navegador i escriu en la barra d'adreces: 

javascript:window.close()

Has vist el que ocorre? Has usat el mètode close() de l'objecte window per tancar la finestra. Un altre exemple, escriu 

javascript:window.alert(window.closed)

ara has usat el mètode alert de l'objecte window per mostrar una finestra amb el valor de la propietat closed, que diu si la finestra està tancada o oberta. Els objectes són bastant mes complicats que l'aquí exposem, però Javascript no és un llenguatge orientat a objectes, encara que pot crear-los i per descomptat manipular-los. Els scripts manipulen els objectes propis del llenguatge i els que li proporciona el navegador. I heus aquí la causa dels teus primers maldecaps com a programador en javaScript: els sistemes d'objectes dels diferents navegadors no coincideixen al 100%.

Beneficis d'utilitzar javascript en les pàgines web

  • JavaScript millora l'experiència visual d'una pàgina web. Si una pàgina web estigués feta només amb codi HTML, tan sols seria text (i imatges estàtiques)
  • JavaScript permet múltiples efectes dins les pàgines, per exemple:
    • la hora del sistema en la pàgina
    • Popups i tooltips
    • text que col.lapsa
    • Page timeout
    • canvis de color i foses (fades)
    • Fontsizing i fades
    • Ultimate fader
    • Embedded audio
    • Print page/element
    • Scrolling banners
    • Flying text
    • News scroller
    • Automated popups
    • Image transitions
    • Toggle buttons
  • JavaScript afegeix interactivitat amb l'usuari
  • JavaScript proporciona integració amb d'altres plugins. JavaScript no proporciona només accés als objectes HTML, també proporciona accés a objectes específics del navegador com ara plugins (e.g. Adobe Acrobat, Media Player).
  • JavaScript permet validació dels formularis en el cantó del client. Una validació inicial dels formularis és possible per eliminar simples errors, como assegurar-se de que el format de data, DNI, mail o telefon són correctes,... Com a resultat, l'usuari té una resposta més ràpida que no pas si el control dels errors el fes el servidor.
  • JavaScript permet accedir a informació del sistema

http://ezinearticles.com/?What-Are-the-Benefits-of-JavaScript?&id=4743036

Client side vs. Server side

Client-server.jpg

Client-side

El client és el sistema on s'està executant el navegador web. JavaScript és el principal llenguatge de script per a la web. Els scripts en el cantó de client (client-side scripts) són interpretats pel navegador.

  1. l'usuari fa una petició (request) d'una pàgina al servidor web
  2. el servidor troba la pàgina i l'envia a l'usuari
  3. la pàgina es carrega en el navegador client alhora que s'executen els scrips (Javascript) que aquesta conté. Els scripts s'executen durant o al final de la càrrega.

Server-side

El servidor és el sistema on la pàgina web i altre contingut viu (típicament un servidor Apache). El servidor envia pàgines web a l'usuari/client després que aquest hagi fet una petició.

  1. L'usuari fa una petició al servidor.
  2. el script (típicament PHP) en la pàgina s'interpreta, creant o canviant contingut HTML, i produint una pàgina web final amb contingut HTML i amb el codi Javascript intacte.
  3. s'envia la forma final de la pàgina al client

http://www.yourwebskills.com/clientserver.php

Altres llenguatges interpretats. Comparativa

Llegirem el fitxer de text ara_mateix.txt 

Ara mateix,
enfilo aquesta agulla amb el fil d'un propòsit que no dic,
i em poso a apedaçar.
Cap dels prodigis que anunciaven taumaturgs insignes
no s'ha complert.
I els anys passen de pressa,
de res a poc, i sempre amb vent de cara.

utilitzant diferents llenguatges de script interpretats. Aquests normalment ens permetrant treballar de forma interactiva amb la consola, o bé executar totes les comandes en bloc cridant a un script que contingui totes les ordres.


Bash

Bash ja està instal.lat per defecte en els sistemes Linux. Amb Bash podem utilitzar qualsevol de les comandes pròpies del sistema: 

$ cat ara_mateix.txt
Ara mateix,
enfilo aquesta agulla amb el fil d'un propòsit que no dic,
...

$ man cat

CAT(1)                          User Commands                          CAT(1)

NAME
cat - concatenate files and print on the standard output

SYNOPSIS
cat [OPTION]... [FILE]...
...

I si volem llegir el fitxer línia a línia, ho podem fer com a mínim d'aquestes tres maneres:

fitxer ara_mateix.sh: 

#!/bin/bash

FILENAME=ara_mateix.txt
while read line
do
echo $line
done < $FILENAME

Donem permisos d'execució i executem el script: 

$ sudo chmod a+x ara_mateix.sh
$ ./ara_mateix.sh
Ara mateix,
enfilo aquesta agulla amb el fil d'un propòsit que no dic,
i em poso a apedaçar.
Cap dels prodigis que anunciaven taumaturgs insignes
no s'ha complert.
I els anys passen de pressa,
de res a poc, i sempre amb vent de cara.

Hi ha altres maneres de fer-ho:

ara_mateix2.sh: 

#!/bin/bash
cat ara_mateix.txt | while read a
do
echo $a
done

ara_mateix3.sh: 

#!/bin/bash
for a in 'cat ara_mateix.txt'
do
echo $a
done

Python

http://es.wikipedia.org/wiki/Python

Evidentment, per utilitzar Python has de tenir instal.lat aquest llenguatge (tant per a Linux com Windows)

http://chuwiki.chuidiang.org/index.php?title=Leer_y_escribir_ficheros_en_python

Per executar comandes python invoquem al seu intèrpret de comandes: 

$ python
Python 2.7.3 (default, Aug  1 2012, 05:16:07)
[GCC 4.6.3] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>>

i ara ja podem introduir les comandes adequades: 

>>> f = open("ara_mateix.txt")
>>> f
<open file 'ara_mateix.txt', mode 'r' at 0xb7323f40>
>>> f.read()
"Ara mateix,\nenfilo aquesta agulla amb 
el fil d'un prop\xc3\xb2sit que no dic,\ni em poso a apeda\xc3\xa7ar.\nCap
 dels prodigis que anunciaven taumaturgs insignes\nno s'ha complert.
\nI els anys passen de pressa,\nde res a poc,
 i sempre amb vent de cara.\n\n"
>>> f.close()
>>> quit()

Però és millor utilitzar un script Python (fitxer amb extensió .py que conté comandes python i executar totes les instruccions de forma desatesa: 

fitxer ara_mateix.py:

import sys
fitxer = open('fitxer.txt','r')
for linia in fitxer:
print linia
$ python ara_mateix.py
Ara mateix,
enfilo aquesta agulla amb el fil d'un propòsit que no dic,
i em poso a apedaçar.
Cap dels prodigis que anunciaven taumaturgs insignes
no s'ha complert.
I els anys passen de pressa,
de res a poc, i sempre amb vent de cara.

Perl

http://es.wikipedia.org/wiki/Perl 

ara_mateix.pl:

# Leer un fichero de texto
my $filename = 'ara_mateix.txt';
open INFILE,$filename;
my $linia;
while ( $linia = <INFILE>) {
chomp($linia);
# Incluir aquí debajo el código para procesar la línea
print $linia . "\n";
}
close INFILE;

$ perl ara_mateix.pl
Ara mateix,
enfilo aquesta agulla amb el fil d'un propòsit que no dic,
...

Javascript

http://www-archive.mozilla.org/js/js-file-object.html http://www.html5rocks.com/en/tutorials/file/dndfiles/

I amb Javascript també ho podem fer això de llegir un fitxer de text? En teoria si... però no és fàcil.

https://developer.mozilla.org/en-US/docs/SpiderMonkey/File_object

Com es comenta en l'enllaç: 

Warning: This section describes the File component of the SpiderMonkey JavaScript interpreter.
File is non-standard, not generally compiled into distributions, is a potential source of
huge security holes, and not well tested.

Utilitzem el SpiderMonkey com a intèrpret de comandes. També l'utilitzarem en la següent pràctica.

El fitxer que volem testejar és el script ara_mateix.js: 

var data;
var file = new File("/home/joan/M06_WEB/comparar_scripts/ara_mateix.txt");
file.open("read", "text");
data = file.readln();
file.close();

i l'executem però no funciona: 

~/M06_WEC/js-1.8.5/js/src$ ./js /home/M06_WEC/comparar_scripts/ara_mateix.js
/home/M06_WEC/comparar_scripts/ara_mateix.js:2: ReferenceError: File is not defined

Es queixa de que no troba l'objecte File. Per tal de què conegui què és un objecte File, tal com es comenta en l'enllaç, hauríem de compilar el SpiderMonkey amb aquesta compatibilitat: 

$ make -f Makefile.ref JS_HAS_FILE_OBJECT=1

però de totes maneres no compila... s'hauria d'estudiar amb més deteniment i trobar una solució que de totes maneres no seria compatible amb totes les plataformes.

Nota. En entorns Windows possiblement llegir un fitxer de text amb Javascript sigui més fàcil: 

Set oFSO = CreateObject("Scripting.FileSystemObject")


PHP

Amb PHP es pot accedir a llegir un fitxer, però estem parlant de fitxers en el cantó del servidor, no del client. En aquest cas utilitzarem el PHP en línia de comandes, que evidentment és la manera no-habitual de treballar amb PHP. Amb això es vol recalcar que PHP és un llenguatge de script que no té perquè estar associat a un servidor web i un navegador web. Els usuaris de Windows hauran d'esbrinar quina possibilitat tenen d'utilitzar PHP en línia de comandes. En cas de què no fos possible o fos complicat, executaran el codi en un entorn web. 

$ sudo apt-get install php5-common php5-cli

<?php
// archivo txt
$filas=file('ara_mateix.txt');
// iniciamos contador y la fila a cero
$i=0;
$numero_fila=0;
echo $filas[0];
while($filas[$i]!=NULL){
echo $filas[$i];
$i++;
}
?>

I executem el codi en línia de comandes: 

$ php ara_mateix.php

Fixem-nos que no cal tenir instal.lat un servidor web. L'existència del llenguatge PHP és independent de què el servidor web Apache estigui present.

Elecció d'un IDE per a programació web/javascript

Cas d'ús. Editor gedit. Introducció

Quan anem a programar amb qualsevol llenguatge de programació és important utilitzar un entorn on ens sentim còmodes per tal de millorar la productivitat i l'eficàcia. En el cas de què ens ocupa (per pàgines web utilitzant llenguatges HTML, PHP, CSS, Javascript) potser no està molt justificat utilitzar un IDE com Eclipse o Netbeans. Per exemple, en un entorn Ubuntu per defecte tenim l'editor de text gedit que és molt configurable i ampliable.

Exemple d'ús. Utilitzar l'editor gedit com a IDE per a desenvolupament web. L'editor gedit és el que ve per defecte a Ubuntu.

El primer de tot és escollir les preferències bàsiques per a poder programar de forma còmoda:

  • Mostra els números de línia
  • Ressalta la línia actual
  • Ressalta els claudàtors concordants
  • Tabulació: amplada adequada de la tabulació
  • Habilita sagnat automàtic?
  • Visualitza > Mode ressaltat poden triar el llenguatge (HTML, PHP, Javascript)
  • una altra possibilitat: Mostrar el marge dret de la columna (per ex, 80 caràcters). Això és útil per a la llegibilitat del codi, i per si s'ha d'imprimir.
  • Connectors?

Instal.lar tidy per a validar HTML

A la pàgina web dels plugins per a gedit veiem que existeix un validador de sintaxi HTML:

Primer de tot hem de tenir instal.lat tidy 

$ sudo apt-get install tidy

i després seguir les instruccions. Bàsicament el que fem en instal.lar un plugin és copiar els fitxers a .local/share/gedit/plugins/, i si es vol una instal.lació per a tot el sistema/usuaris, copiar-ho a /usr/lib/gedit/plugins/.

Amb Tidy podem fer un check dels errors i avisos d'incompatibilitat (important Ctrl-F9, quadre inferior on surten els missatges), i també ens pot netejar (tidy) el codi per tal de què sigui compatible amb XHTML.

Escriure els nostres plugins per a gedit

També podem escriure els nostres plugins, amb llenguatge C o python:

Alternatives: Windows, MAC, Linux

Cada programador ha de conèixer i triar les eines que li poden anar bé. Un cop triat un editor de text que s'ajusti a les seves necessitats, seria interessant perdre una mica de temps estudiant les possibilitats de configurar-lo amb la idea de millorar la productivitat i fer fàcils les tasques repetitives. La idea és que ens hem de centrar en la programació, no hem de perdre temps en errors tontos de sintaxi...

Multiplataforma:

  • Sublime Text2 (http://www.sublimetext.com/2). Està molt bé, és de pagament.
  • Aptana Studio 3 (MAC, Windows, Linux). Alumnes han reportat que va molt bé.

Els usuaris de Windows/Mac hauran de trobar les eines que els vagin millor, adaptades a la seva manera de trebalalr. Per exemple:

Firebug. Execució en línia de comandes i execució en el navegador

Use Firebug console for interactive testing

Can also use Firebug Lite in Internet Explorer. Not great, but better than nothing

Minitutorial:

Nota: en l'ordinador del professor per activar i desactivar el FireBug és Fn+F12, doncs F12 a seques activa/desactiva la wireless...

Què és i per a què serveix Firebug?

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page

  • Always at your service

Firebug is always just a keystroke away, but it never gets in your way. You can open Firebug in a separate window, or as a bar at the bottom of your browser. Firebug also gives you fine-grained control over which websites you want to enable it for.

  • Inspect and edit HTML

Firebug makes it simple to find HTML elements buried deep in the page. Once you've found what you're looking for, Firebug gives you a wealth of information, and lets you edit the HTML live.

  • Tweak CSS to perfection

Firebug's CSS tabs tell you everything you need to know about the styles in your web pages, and if you don't like what it's telling you, you can make changes and see them take effect instantly.

  • Visualize CSS metrics

When your CSS boxes aren't lining up correctly it can be difficult to understand why. Let Firebug be your eyes and it will measure and illustrate all the offsets, margins, borders, padding, and sizes for you.

  • Monitor network activity

Your pages are taking a long time to load, but why? Did you go crazy and write too much JavaScript? Did you forget to compress your images? Are your ad partner's servers taking a siesta? Firebug breaks it all down for you file-by-file.

  • Debug and profile JavaScript

Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, use the JavaScript profiler to measure performance and find bottlenecks fast.

  • Quickly find errors

When things go wrong, Firebug lets you know immediately and gives you detailed and useful information about errors in JavaScript, CSS, and XML.

  • Explore the DOM

The Document Object Model is a great big hierarchy of objects and functions just waiting to be tickled by JavaScript. Firebug helps you find DOM objects quickly and then edit them on the fly.

  • Execute JavaScript on the fly

The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol' fashioned command line for JavaScript complete with very modern amenities.

  • Logging for JavaScript

Having a fancy JavaScript debugger is great, but sometimes the fastest way to find bugs is just to dump as much information to the console as you can. Firebug gives you a set of powerful logging functions that help you get answers fast.

  • Just the way you like it

Using Firebug gives a lot of possibilities for web development to your hands. Though you're feeling something is not working as you would like it to? No problem. Firebug offers a lot of options to adjust it to your needs.

  • Search and you shall find

Sometimes you know what you're looking for, but you can't see it in the panel. Using the quick search box in Firebug's toolbar you can search inside Firebug's panels and see the results highlighted as you type.

  • Cookies

Firebug allows to view and manage cookies in your browser. You can deny cookies for specific sites, filter cookies, create new and delete existing cookies. You can also break into the debugger when specific cookie changes its value and see the line of script that caused the change.

Instal.lació de Firebug a Firefox

Primer de tot hem de mirar quina versió tenim del Firefox, i instal.lar una versió de Firebug compatible amb aquesta versió. Per exemple, si tenim Firefox 11.0 podem instal.lar la versió 1.9.2 del Firebug.

clico sobre el fitxer firebug-1.9.2.xpi i comença el procés d'instal.lació automàtica del add-on de Firefox, que estarà disponible després de reiniciar el Firefox.

Dins del Firefox totes les utilitats del Firebug estan a Tools > Web Developer.

Firebug i la consola/línia de comandes

The command line is one of the oldest tools in the programming toolbox. Firebug gives you a good ol' fashioned command line for JavaScript complete with very modern amenities.

  • Get your hands dirty

If you know your way around the DOM, sometimes there's no faster way to get answers than to just use JavaScript to snoop around. Firebug's command line lets you do just that - enter whatever JavaScript you like. It will be executed as if it were part of the page, and the returned values displayed in the console.

  • Autocomplete

Using the tab key you can autocomplete the name of variables and object properties. Keep hitting it to cycle through the complete set of possibilities, and use shift-tab to go backwards.

Autocomplete works at many levels. You can start hitting tab before you type anything to cycle through global variables. You can hit tab after typing "document.b" to cycle thorugh all properties that start with "b". You can even hit tab after a complex expression like "document.getElementsByTagName('a')[0]." to see all properties of the first link in the document.

  • Go big

If one line is making you feel a little cramped, don't panic. Firebug's command line can be expanded to a larger text editor so you can experiment with entire scripts instead of just one-liners.

  • Smart paste

So you've written a bunch of JavaScript in your editor and you want to test it out real quick. Just paste it into the command line. If it's more than one line, Firebug will automatically open the big text editor with your script ready to go.

  • Bookmarklet heaven

Creating bookmarklets has never been easier. Just hit the "Copy" button in the multi-line editor and your script will be copied to the clipboard in bookmarklet format.

  • Don't forget to click

Unlike a traditional command line, the output of each command is not static text, it is living hypertext. Any objects that are output to the console are hyperlinks that you can click to inspect the object in whichever Firebug tab is most appropriate.

  • Don't forget to right-click

Context menus contain a whole world of fun features waiting to be discovered. Different kinds of objects have their own context menus, so when you see a link to an object in the Firebug console, try right-clicking it.

  • Don't forget to middle-click

If you haven't already learned the magic of middle-click and tabbed browsing, now is a good time to learn. Just like when you middle-click a link in the Firefox browser, middle-clicking a link to a file or URL in the Firebug console will open it in a new tab.

For those without a middle mouse button, you can also hold down the control key (or command on Mac) and click for the same effect.

  • Inspect and command

After you've found an HTML element using the Inspect tool, you often want to use the command line to manipulate it. Firebug makes it easy; just use the "$0" variable to reference the last element you inspected, or "$1" for the one before that.

  • Command and inspect

The command line is a wonderful launching pad for using the other tabs to inspect objects. Instead of hitting enter to see the result on the console, hit Shift+Enter and the result will be inspected in either the DOM tab, the HTML tab, the Script tab, or the CSS tab, whichever is most appropriate.

  • Command Line History

The command line maintains its own history of executed expressions and so, you can easily go back and execute an expression again. Just use up & down arrows or click on the red button on the left side of the command line to see a history popup with all entries.

Tasques a realitzar

L'objectiu de l'alumne és familiaritzar-se amb el firebug com a entorn de desenvolupament i depuració, i trobar un workflow que li permeti augmentar la productivitat en l'àmbit d'edició HTML, CSS i Javascript.

Un exemple senzill: demo.html: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org">
    <title></title>
  </head>
  <body>
    <h1>
      My First Web Page
    </h1>
    <p id="demo">
      My First Paragraph
    </p>
    <script type="text/javascript">
		document.getElementById("demo").innerHTML="My First JavaScript 1";
		document.getElementById("demo").innerHTML="My First JavaScript 2";
		document.getElementById("demo").innerHTML="My First JavaScript 3";
    </script>
  </body>
</html>
  • L'alumne posarà tres punts d'inspecció en les tres línies Javascript, i has de veure com s'executa el codi pas a pas i com canvia el contingut de l'etiqueta demo
  • Introdueixes un error de sintaxi:
document.getElementByI("demo").innerHTML="My First JavaScript 2";

L'execució del script s'atura en l'error, però aparentment no s'informa del missatge d'error. Per veure l'error que s'ha produït has d'anar a la Consola, i sota la pestanya Errors pots veure la informació de l'error que s'ha produït i en quina línia. En aquest cas el problema està en què a getElementByI li falta una lletra (error de sintaxi)

  • Pots veure que en la consola de Firebug, a sota de tot, tens el símbol >>>, de manera que pots introduir directament línies de comandes. Prova per exemple:
>>> 2+2
>>> alert("WEC");
>>> document.getElementById("demo").innerHTML="My First JavaScript 3000";

Casos pràctics

En el següent exemple hi ha un error de sintaxi: 

<body>
	<script type="text/javascript">
	
	var str="IMG_0234.JPG*F16*100.0mm*1/320 s*Canon*Canon EOS 550D";
	var arrayFoto = str.split("*");
	document.write("Nom de l'arxiu: "+arrayFoto[0]};
	
	</script>
</body>

L'error que dóna el firebug és: 

missing ) after argument list
[Break On This Error] 	

document.write("Nom de l'arxiu: "+arrayFoto[0]};

Integració del codi Javascript amb etiquetes HTML

Existeixen, al menys, tres maneres d'integrar Javascript en les pàgines Web.

  • Incloure JavaScript directament en el mateix document HTML
  • Incloure JavaScript en una etiqueta HTML
  • Incloure JavaScript en un document a part
  • Etiqueta NOSCRIPT

Incloure Javascript directament en el mateix document HTML

Existeix una etiqueta HTML anomenada SCRIPT . Podem utilitzar-la en qualsevol lloc de la pàgina però és recomanable utilitzar-la ÚNICAMENT en la capçalera del document, és a dir, dintre de la etiqueta <HEAD>. 

<html>
       <head>
               <script type="text/JavaScript">
                  ----------------------------
                  ----- codi JavaScript ------
                  ----------------------------
               </script>
       </head>
       <body>
             La meva Pàgina amb codi JavaScript
       </body>
</html>

Veiem que s'ha afegit un l'atribut 'type' a la etiqueta SCRIPT. És necessari indicar el llenguatge de Script que s'utilitzarà. Com sabem, existeixen més llenguatges de SCRIPTS Web a part del JavaScript (com pot ser el JScript o el VBScript).

Incloure JavaScript en una etiqueta HTML

Aquesta és una manera d'utilitzar JavaScript poc freqüent però en casos especials ens convé fer-la servir. Normalment la utilitzarem per definir esdeveniments dels components de la pàgina. 

<html>

       <body>
             <p onclick="alert('Hola a Tots')">La meva Pàgina amb codi JavaScript</p>
       </body>
</html>

S'ha associat l'event 'onclick' a un fragment de codi JavaScritp. Normalment no s'utilitza codi directament si no que es fa la crida a alguna funció i el codi es treu de la pàgina per evitar que es generi un caos innecessari.

Incloure JavaScript en un document a part

Es pot enllaçar tots els documents javascript que es vulguin a una pàgina HTML. La manera de fer-ho és mitjançant la etiqueta <script>. 

...
<head>
<script type="text/javascript" src="primer_document_amb_codi_javascript.js">
<script type="text/javascript" src="segon_document_amb_codi_javascript.js">
....
<script type="text/javascript" src="últim_document_amb_codi_javascript.js">
</head>
....

Podem observar que s'ha afegit una nova propietat a la etiqueta SCRIPT. Aquesta propietat, anomenada 'src', permet posar una URL del fitxer que vulguem enllaçar. Si el fitxer javascript es troba en el mateix servidor i dintre de la mateixa carpeta només caldrà posar el nom del fitxer. Però si el fitxer Javascritp es troba dintre de una altre carpeta s'haurà d'indicar la seva localització utilitzant rutes relatives.

Etiqueta NOSCRIPT

Els usuaris dels navegadors Web poden deshabilitar JavaScript. Durant molt de temps s'ha utilitzat aquest llenguatge de programació per introduïr codi maliciós als ordinadors clients i per aixó aquests permeten desactivar l'ús dels scripts. En el cas que la pàgina que s'està desenvolupant necessiti JavaScript es pot mostrar un missatge a l'usuari per tal que pugui activar aquesta funcionalitat. El missatge s'escriurà dintre de la etiqueta <NOSCRIPT>. 

<html>
...
<body>
<noscript> Aquesta pàgina necessita l'ús de JavaScript per tal de poder funcionar correctament.</noscript>
</body>
</html>

Exercicis

Exercici 1

Escriu un programa amb llenguatge JavaScript on apareixi una finestra mostrant el missatge "Hola Món".


Exercici 2

Modificar el script anterior per tal que: Tot el codi JavaScript es trobi en un arxiu extern anomenat codigo.js i el script segueixi funcionant de la mateixa manera. Després del primer missatge, s'ha de mostrar un altre missatge que digui "Sóc el primer script" Afegir alguns comentaris que expliquin el funcionament del codi Afegir a la pàgina XHTML un missatge d'avís per als navegadors que no tinguin activat el suport de Javascript


Exercici 3

1.- El usuario debe introducir su nombre y apellidos, en este orden. (Prompt)

2.- Una vez hecho esto, se debe mostrar un cuadro de diálogo con el siguiente mensaje: ¿Es usted Apellidos, Nombre? (confirm)

3.- si se da aceptar, muestre mensaje "has aceptado", sino "No has aceptado"


Bibliografia / Webgrafia

Joan Quintana Compte

Jose Antonio Rodriguez

Introducció a Javascript

Internetmania

Obtingut de «http://wikiserver.infomerce.es/index.php?title=NF1_-_Arquitectures_i_tecnologies_de_la_programació_Web_en_entorn_client&oldid=14261»