20. JavaScript i PHP

Índex | Tema 19

Dinamització dels documents HTML

Els documents construïts exclusivament amb els recursos del llenguatge HTML són estàtics; és a dir, es mostren sempre de la mateixa manera. Les possibilitats d'interacció de l'usuari són molt reduïdes, i es limiten als hipervincles i a la captació i tramesa de dades amb formularis.

Hi ha diversos recursos per a fer dinàmics els documents HTML: les imatges animades, els applets de Java i el Flash i altres formats de pel·lícula.

Però aquests recursos es limiten a inserir elements dinàmics en un document HTML, però no constitueixen un veritable llenguatge de programació que permeti la interacció amb l'usuari i la captació de dades externes.

JavaScript

El JavaScript és un llenguatge desenvolupat inicialment per Netscape i actualment acceptat per tots els navegadors, que es pot aplicar dins dels documents HTML. Els programes en JavaScript formen part del document HTML, de manera que el llenguatge pot considerar-se, si més no a efectes pràctics, com una extensió del llenguatge HTML, tot i que és diferent d'aquest.

Amb el JavaScript es fa possible:

Que l'aspecte amb què un document es presenta en pantalla sigui variable, d'acord amb diverses circumstàncies.
Que en el marc dels documents puguin realitzar-se càlculs - en el sentit més ampli de la paraula - i presentar-ne els resultats.
Que a partir dels resultats obtinguts es duguin a terme tasques diferents.
Que la tria del destí en el canvi dels documents quedi condicionada per diversos factors.

En aquest tema només podem un petit tast del que es pot fer amb el JavaScript i indicar els punts de contacte entre l'HTML i el JavaScript.

Què fa un programa de JavaScript?

A grans trets, els programes de JavaScript actuen de la manera següent:

Capten les dades inicials necessàries; aquestes dades poden provenir
de l'usuari, que les introdueix mitjançant formularis o quadres de diàleg.
d'un altre document.
de l'ordinador de l'usuari (data, hora, marca del navegador, cookies...)
Obtenen noves dades a partir de les dades inicials, mitjançant:
càlculs matemàtics.
manipulació de textos.
ordenació de nombres o de textos.
etc.
Prenen decisions segons determinades circumstàncies: si tal dada té tal valor, fes això; en cas contrari, fes allò altre.
I, finalment, apliquen les dades finals obtingudes:
Indiquen el resultat d'un càlcul.
Presenten un text o un altre d'acord amb les circumstàncies.
Fan possible la presentació seqüencial d'un conjunt d'imatges.
Canvien determinats aspectes formals, com ara un color de fons.
Condueixen a un document determinat entre un conjunt de documents possibles.
etc.

Organització dels documents amb JavaScript

A grans trets l'organització d'un document amb JavaScript és la següent:

A HEAD s'inclouen les dades fixes inicials i les especificacions sobre la tasca requerida, generalment organitzades en forma de funcions:

<script type="text/javascript">
//<![CDATA[
dades i funcions
//]]>
</script>

En XHTML podem prescindir de la segona línia i de la penúltima línia si el programa no conté els símbols &, < i >. En HTML en prescindim sempre.

A BODY s'inclouen les referències a les funcions definides a HEAD, en els punts adequats per a ésser executades. La manera d'incloure les especificacions depèn del moment en què s'ha d'executar cada programa. Hi ha tres suposits bàsics:

a) Execució mentre el document es carrega; en aquest cas s'inclou, intercalat entre les etiquetes HTML,

<script type="text/JavaScript">funció()</script> (<script>funció()</script>)

Exemple

b) Execució en el moment just en què el document s'ha carregat (o descarregat) del tot. S'indica així:

<body onload | onunload="funció">

Exemple

c) Execució quan l'usuari fa una determinada acció amb el cursor en un determinat element. La fórmula general és:

<element gestor="funció">

Exemple

En els casos b) i c) es fan servir uns atributs especials anomenats gestors d'esdeveniments, que fan de pont entre l'HTML i el JavaScript, i que han estat tipificats pel W3C. Els principals són

onload	en concloure's la càrrega del document
onmouseover	en posar el cursor damunt l'element
onmouseout	en retirar el cursor de damunt l'element
onclick	en fer clic damunt l'element
onchange	en seleccionar en un select

Identificadors

Com ja sabem, els elements d'un document poden ésser identificats amb l'atribut name. Alguns programes de javaScript exigeixen aquesta identificació; però d'altres exigeixen un identificador diferent, id.

A la llarga totes les identificacions d'elements s'hauran de fer amb id, però en el seu estat actual els navegadors no ho permeten totalment.

Programació en el servidor

En molts casos es fa necessària la manipulació de dades en el servidor. Alguns casos típics són els següents:

L'usuari omple un formulari - amb finalitats comercials o no -; les dades són processades en el servidor, incloses en alguna mena de llista i generalment es genera un document de confirmació que només veu qui ha tramès les dades.
L'usuari participa en un fòrum: tramet un formulari amb les seves opinions, i aquestes passen a engruixir un document on s'acumulen totes, que són accessibles a tots els qui han participat en el fòrum o al públic en general.
L'usuari fa una consulta en una bases de dades situada en el servidor, i la reposta li és subministrada amb un document HTML personalitzat.

Per a aconseguir aquestes i altres actuacions semblants, el servidor ha d'estar proveït d'algun programa que processi les dades i generi els documents HTML de resposta.

Hi ha diversos programes que fan aquesta comesa: el CGI, l'ASP, el PHP...

Exemple

Curs de JavaScript

Podeu consultar el curs de JavaScript d'aquesta mateixa col·lecció:

Curs de JavaScript