Bases de la programació, codi i depuració: HTML, CSS i JavaScript

Avui dia s’utilitza el web per a la navegació i cerca d’informació, però també per a l’oci, ja sigui per contactar amb altra gent a través de les xarxes socials o per passar l’estona entretenint-nos amb videojocs.

Si ens situem davant de l’ordinador i obrim el navegador, com que obre una finestra al món enmig d’una pluja d’informació inesgotable, poques vegades ens parem a pensar com funciona aquesta tecnologia i què hi ha al darrere que ens permet navegar, sol·licitar informació, registrar-nos en pàgines web i, fins i tot, jugar a videojocs d’una manera tan fàcil i ràpida.

Al darrere hi ha llenguatges de marques, d’estils i de programació, concretament HTML, CSS i JavaScript. La conjunció d’aquests tres elements permet als usuaris realitzar totes les tasques quotidianes a través del navegador web sense haver de fer molts esforços i mostrar la informació i les aplicacions web d’una manera atractiva i intuïtiva.

Les pàgines web que trobeu a la xarxa fan servir aquests tres llenguatges, considerats com els estàndards web: HTML, CSS i JavaScript.

Els tres llenguatges, HTML, CSS i JavaScript, són considerats com els estàndards de disseny web. Cadascú té la seva funció: amb l’HTML es generen els continguts, amb CSS es configura l’aspecte visual de les pàgines, i JavaScript serveix per crear les funcionalitats del lloc web al navegador.

El següent esquema resumeix la funció de cadascú dels tres llenguatges (veieu la imatge figura):

Veure el codi font d'un lloc web

Una manera de veure el codi que configura un lloc web és usar l’opció Veure codi font des del navegador (sigui Chrome, Firefox o Safari). Tots ells interpreten el codi dels tres llenguatges i mostren el resultat a la finestra del navegador. Per exemple, si esteu a Firefox, heu d’anar a Eines > Desenvolupador web > Codi font de la pàgina o usar la drecera de teclat CTRL+U.

HTML

El llenguatge de marques d’hipertext HTML (sigla en anglès d’HyperText Markup Language) és el codi que s’utilitza per estructurar una pàgina web i el seu contingut. L’HTML no és pas un llenguatge de programació, sinó més aviat un llenguatge de marques que consisteix en una sèrie d’elements, anomenats etiquetes, que s’utilitzen per definir el tipus de contingut, o per incloure-hi determinat tipus de contiguts.

L’origen de l’HTML es remunta als anys vuitanta, quan el físic Tim Berners-Lee va proposar un nou sistema d’hipertext per compartir fitxers i, juntament amb l’enginyer Robert Cailliau, va presentar el World Wide Web (W3).

Timothy "Tim" John Berners-Lee, conegut a com Tim Berners-Lee, és un científic britànic considerat el pare de la World Wide Web. Va establir la primera comunicació entre un client i un servidor usant el protocol HTTP en novembre de 1989.

La primera proposta oficial per convertir l’HTML en un estàndard va ser l’any 1993 per part de l’organisme Internet Engineering Task Force (IETF). Tot i els avenços, no van aconseguir que la seva proposta esdevingués l’estàndard oficial. Dos anys més tard, el 1995, van publicar HTML 2.0, que es va convertir en el primer estàndard oficial d’HTML.

A partir del 1996, els estàndards d’HTML els publica un altre organisme anomenat W3C (World Wide Web Consortium) i la seva primera recomanació fou l’HTML 3.2, un any més tard.

Estàndards i W3C

Un estàndard és un conjunt de regles normalitzades que descriuen els requisits d’un producte, procés o servei, amb l’objectiu de crear un mecanisme base per permetre que diferents elements de maquinari o programari utilitzat siguin compatibles entre si.

El W3C (World Wide Web Consortium), organització independent i neutral, desenvolupa estàndards relacionats amb el web, també coneguts com a recomanacions, que serveixen com a referència per construir una web accessible, interoperable i eficient en la qual es puguin desenvolupar aplicacions cada vegada més robustes i que arribin a més gent.

L’HTML 4.0 es va publicar l’any 1998 i suposa un gran avenç respecte de les versions anteriors, perquè incorpora els fulls d’estil CSS, la possibilitat d’incloure scripts, la millora d’accessibilitat de les pàgines dissenyades, taules complexes i millores en els formularis.

L’última especificació oficial d’HTML és HTML 4.01, que va ser publicada l’any 1999. Aquesta és una revisió de l’anterior versió i, per tant, no incorpora millores significatives. Davant de la pobra activitat d’estandardització del W3C, l’any 2004 les empreses Apple, Mozilla i Opera van decidir organitzar-se i crear una nova associació anomenada WHATWG (Web Hypertext Application Technology Working Group) l’activitat de la qual se centra en l’estàndard HTML5.

En aquesta unitat ens centrarem en l’estàndard HTML5.

Sintaxi d'un element HTML

Abans d’estudiar com és un document HTML, veurem com és la sintaxi d’aquest llenguatge. Cal remarcar que HTML és un llenguatge de presentació i no de programació, i que està organitzat com un llenguatge de marques o etiquetes.

Dins de la sintaxi d’HTML parlem d’elements. Els elements són aquell tipus de contingut que podem crear, com per exemple elements de text, d’imatge, o de so. Per indicar que al contingut hi ha un element, fem servir la sintaxi específica d’HTML, basada en etiquetes.

Les principals parts d’un element HTML són:

Etiqueta d’obertura: nom de l’element delimitat pels símbols <, >, respectivament. Mostra on comença l’element.
Etiqueta de tancament: el mateix nom de l’element que en l’obertura afegint-hi una barra inclinada (/) abans a l’inici. Mostra on finalitza l’element. Si no es tanca correctament l’etiqueta, pot ocasionar errors estranys en el codi HTML i, fins i tot, en l’aplicació dels estils CSS.
Contingut: contingut per mostrar a la pàgina web.
Element: conjunt de l’etiqueta d’obertura, el contingut i l’etiqueta de tancament.

Vegeu com es mostren aquestes parts a la figura:

Elements i etiquetes

Per exemple, l’element p és un paràgraf. S’insereix al contingut mitjançant les etiquetes <p> i </p>. L’element sencer quedaria així: <p>Aquí hi ha un paràgraf</p>.

L’element video és un arxiu de vídeo. S’insereix mitjançant l’etiqueta <video>.

Els elements poden tenir atributs, com es mostra a la figura:

Els atributs contenen informació addicional de l’element, com poden ser la classe o l’identificador, entre d’altres. Un element pot tenir diversos atributs. L’atribut s’afegeix dintre de l’etiqueta d’obertura de l’element i se li assigna un valor mitjançant el signe d’igual. El valor dels atributs es delimita mitjançant les cometes dobles (“ ”).

Estructura bàsica d'un document HTML

Una pàgina d’un lloc web és senzillament un document HTML, o sigui un arxiu amb l’extensió HTML. Un lloc web està format per un nombre determinat de documents HTML relacionats entre ells. Tots els documents HTML tenen la mateixa estructura bàsica, formada per la capçalera i el contingut.

Veieu a continuació l’estructura bàsica d’un document HTML:

<!doctype html>
<html>
  <head>
    <title> Primer document HTML </title>
  </head>
  <body>
    <p> Primer element en HTML </p>
  </body>
</html>

Si analitzem amb detall el codi anterior, veurem que tenim elements importants i imprescindibles per configurar un document HTML:

Declarem la versió del llenguatge HTML amb doctype. En aquest cas fem servir la declaració <!doctype html>, utilitzada per informar el navegador que el document representat és un document HTML5. És molt important afegir aquesta declaració perquè el navegador interpreti correctament la versió del document.
L’element HTML, que delimita el codi HTML. Tot el codi HTML que s’hagi d’incloure en el document estarà dins d’aquestes dues etiquetes.
L’element <head> que conté tota la informació relativa al document. No és visible al navegador, però inclou informació molt important, com les etiquetes meta (que inclouen les paraules clau i la descripció del contingut del document) i la vinculació a altres arxius CSS o JavaScript.
<body> és el cos de la pàgina. Dit d’una manera senzilla, dintre de <body> estarà tot el contingut visible de la pàgina, allò que es mostrarà a la pantalla. Aquí inclourem tot el codi HTML necessari per generar text, imatges i altres elements.

Descarregueu des d’aquest enllaç l’arxiu d’exemple: arxiu_exemple01.html. Podeu obrir-lo en l’editor de codi que feu servir habitualment per veure com és el codi, i fer-ne canvis i proves. També podeu obrir-lo al navegador que desitgeu per veure el resultat.

Element 'head'

Disposeu de la llista completa de propietats de l’element <head> en els Annexos d’aquesta unitat.

L’element <head> representa una col·lecció de metadades (dades sobre l’HTML: autor, paraules clau importants que descriuen el document, etc.) del document HTML. Aquest contingut no es mostra en el navegador, i solament pot haver-hi un element <head> en un document. Tot i que no es veu al navegador, és una part ben important d’una pàgina web.

Aquest element conté les etiquetes explicades a la taula taula:

Taula Etiquetes dins de l’etiqueta ‘head’

Etiqueta	Descripció
`<title>`	Té diverses funcions: mostrar el nom de la pàgina web a la pestanya del navegador, indicar el nom del marcador en guardar la web… És el text que els cercadors prenen per mostrar els resultats de cerca.
`<link>`	Especifica les relacions entre el document actual i un recurs extern, com ara els fulls d’estil.
`<meta>`	Representa informació sobre el document. Pot ser de diversos tipus, segons l’atribut que s’especifiqui.
`<script>`	Conté la vinculació al document JavaScript. Pot contenir també codi JavaScript.
`<style>`	Conté informació d’estil per a un document o part d’un document. Per defecte, s’espera que les instruccions d’estil escrites a l’interior d’aquest element siguin CSS, tot i que és preferible i recomanable la utilització de fulls d’estil externs.

Una de les parts més importants de la metainformació de la pàgina són les metadades (etiqueta <meta>), perquè permeten incloure qualsevol informació rellevant sobre la pròpia pàgina.

Vegeu un exemple d’ús de les etiquetes, tot i que no han d’anar necessàriament totes juntes, de l’element <head>:

<!doctype html>
<html lang="ca">
<head>
  <meta charset="utf-8">
 
  <title>Primera pàgina Web</title>
  <meta name="author" content="Javier Garcia">
   <meta name="description" content="Pàgina d'exemple amb el codi bàsic d'un document HTML">
  <link rel="stylesheet" href="css/es.css">
</head>
 
<body>
  <p>Primer element en HTML</p>
</html>

En aquest exemple, que podeu descarregar des de arxiu_exemple_02.html, veieu que s’han afegit algunes coses noves.

Si l’analitzem, en primer lloc veieu que s’ha afegit dintre de l’element <html> l’atribut lang=“ca” que indica l’idioma amb el qual està definit el document, en aquest cas el català.

Dintre de l’element <head> hem afegit la línia meta charset=“utf-8”. Aquest fragment indica que el document està configurat amb el codi de caràcters estàndard utf-8. Es el que habitualment farem servir.

A continuació, veieu que l’element <title> és un element important perquè mostra el títol de pàgina en la barra de navegació (vegeu la figura).

Figura L’element ‘title’ a la barra de navegació

La línia meta name=“author” especifica que l’autor del document és Javier Garcia. La línia meta name=“description” ofereix una descripció del document.

Per últim, l’element <link> vincula l’arxiu amb un altre arxiu, anomenat estils.css, que contindrà el codi per indicar els estils CSS de la pàgina.

Element 'body'

L’element <body> representa el contingut d’un document HTML, és a dir, tot allò que es veurà a la finestra del navegador. Per tant, és el cos visible de la pàgina HTML.

Només pot haver-hi un element <body> en un document.

El contingut dintre de <body> s’inclou amb els elements HTML. Per exemple:

<p> per generar paràgrafs.
<article>, <section>, <header>, <footer> són elements per estructurar el contingut en blocs.
<img> per inserir una imatge.
<video> per inserir un arxiu de vídeo.
<table> per crear una taula de contiguts.
<a> per crear hipervincles.

Elements en bloc i elements en línia

Cal diferenciar els elements de sintaxi HTML en dos grups: elements en bloc i elements en línia. Aquesta divisió fa referència al comportament dels elements respecte a l’espai que ocupen (vegeu la FigS103).

Els elements en bloc sempre comencen per una nova línia que ocupa tota l’amplada disponible (s’estén cap a l’esquerra i la dreta fins on pot).

Els elements en línia només ocupen l’espai delimitat per les etiquetes que defineixen l’element en lloc de trencar el flux del contingut.

Elements en bloc són:

Taula Etiquetes en bloc

Etiqueta	Descripció
`<div>`	Contenidor o bloc per a contingut. Es pot utilitzar per agrupar elements i aplicar estils CSS, de cara a la maquetació de la pàgina.
`<p>`	Representa un paràgraf de text. Està separat del contingut adjacent per un espai superior i inferior.

Altres elements en bloc són <table>, <ol>, i <ul>.

Es mostren alguns elements en línia habituals a la taula taula:

Taula Etiquetes en línia

Etiqueta	Descripció
`<br>`	Produeix un salt de línia en el text.
`<a>`	Crea un enllaç a altres pàgines web, fitxers, ubicacions dins d’una mateixa pàgina, adreces de correu electrònic o qualsevol altra URL.
`<img>`	Incrusta una imatge al document.
`<span>`	És el contenidor en línia genèric per a contingut textual que no representa res essencial. S’utilitza per aplicar estils CSS (utilitzant els atributs `class` o `id`) o per afegir atributs a peces de contingut.

Vegeu un exemple d’ús de les etiquetes HTML dins de l’element <body>:

<html lang="ca">
<head>
  <meta charset="utf-8">
 
  <title>Primera pàgina Web</title>
  <meta name="description" content="Exemple de la primera pàgina web">
  <meta name="author" content="Javier Garcia">
   <meta name="description" content="Pàgina d'exemple amb el codi bàsic d'un document HTML>
  <link rel="stylesheet" href="css/styles.css">
 
</head>
 
<body>
 
<h1>Elements de text</h1>
 
<p>Primer element en HTML. Dintre d'aquest paràgraf podem emfatitzar una paraula amb <strong>negreta</strong> o <i>cursiva</i>.</p>
 
<p>Un altre paràgraf aniria en un altre element. <br> Ara es realitza un salt de línea del text.</p>
 
<h2> Primera imatge en HTML</h2>
 
<p> A continuació inserim una imatge:</p>
 
<img src="images/imatge01.jpg" alt="Primera imatge"/>
 
 
</body>
</html>

Arxiu d'exemple

Descarregueu l’arxiu d’exemple: arxiu_exemple_03. Veieu que en el codi d’aquest document s’han inclòs dintre de <body> les etiquetes <h1>, <p>,<strong>, <em>, <h2>,<img>.

Elements de text

Un aspecte important d’HTML és donar una estructura adequada al contingut de text. Hem vist alguns elements que podem usar per configurar text, com ara l’element <p>. Veurem a continuació els elements bàsics per crear text i un exemple pràctic de com fer-lo.

L’element <p> serveix per crear l’estructura bàsica del text. Tots els continguts de text de la pàgina han d’estar estructurats amb paràgrafs, i no pot haver-hi cap fragment de text que no estigui dintre d’una etiqueta de paràgraf o de títol. Tingueu en compte que <p> és un element de bloc, per tant, es crearà un espai entre cada paràgraf.

El títol del contingut d’un paràgraf es defineix amb els encapçalaments. Els encapçalaments corresponen a les etiquetes <h1>, <h2>, <h3>, <h4>, <h5> i <h6>. Hi ha sis elements, cadascú amb diferent nivell d’importància. Podem definir fins a 6 nivells d’importància. <h1> és el més important i <h6> el menys important. Amb ells podem establir un títol de major importància jeràrquica, i un subtítol amb menor importància (vegeu la figura).

Habitualment el títol principal de la pàgina, o nom de la pàgina, serà <h1>, mentre que els títols dels continguts seran <h2>, els tìtols de continguts menys importants <h3>,i així succesivament.

Per exemple:

<h1> Títol principal</h1>
 
<p>Entradeta</p>
 
<h2>Títol secundari</h2>
<p> Text de segon nivell</p>
 
<h2>Títol secundari</h2>
<p>Text de segon nivell</p>

Altres elements de text són:

<strong>: serveix per donar èmfasi a una paraula o fragment de text i mostra el text en negreta.
<em>: serveix per donar èmfasi a una paraula o fragment de text i mostra el text en cursiva.
<blockquote>: crea un cita d’un text, ressaltada entre cometes.

Afegir enllaços

Crear enllaços entre recursos web, pàgines o enllaçar a altres recursos externs és una de les característiques essencials del llenguatge HTML. Recordeu que un lloc web és un conjunt de documents HTML vinculats entre si.

Veieu a continuació en la figura com és l’anatomia d’un enllaç, que crearem mitjançant l’element <a>:

A continuació teniu un exemple amb codi:

<a href="https://www.w3c.es/"> Enllaç a l'W3C </a>

Veieu en el codi anterior que:

<a> és l’element, compost de dues etiquetes, una d’obertura <a> i una de tancament </a>.
Dintre d’elles tenim el text de l’enllaç, que es veurà a la pantalla de color blau i subratllat (és l’estil per defecte, que després podrem canviar amb CSS).
Dintre de l’etiqueta d’obertura tenim l’atribut href. Aquest atribut conté la ruta de l’arxiu o recurs que vincularem. El valor d’aquest atribut fa referència a un recurs de la xarxa (indiquem l’URL) o bé a un altre document del nostre lloc web.

Descarregueu l’arxiu amb diversos exemples d’enllaços: arxiu_exemple_04.html.

Altres elements: llistes i taules

Els elements <ol> i <ul> es fan servir per crear llistes. Una llista és un conjunt de dades organitzades seqüèncialment. Les llistes poden ser ordenades (<ol>) o no ordenades (<ul>). Cada element dins la llista serà un element <li>. Veieu un exemple d’una llista ordenada:

<h1>Com preparar café</h1>
<ul>
<li>Obrir la cafetera</li>
<li>Posar el café</li>
<li>Encendre el foc</li>
<li> Posar la cafetera al foc</li>
<li> Esperar 10 minuts</li>
</ul>

El resultat que veuriem al navegador seria el següent (veieu la figura).

Veieu ara un exemple de llista no ordenada:

<h1>Llista de la compra</h1>
<ol>
<li>Patates</li>
<li>Oli</li>
<li>Ous</li>
<li>Maduixes</li>
<li>Peix</li>
</ol>

El resultat que obtindriem és el següent (veieu la figura).

Com heu vist a les imatges anteriors, el resultat d’una lista generada amb <ul> mostra els elements de la llista precedits amb vinyetes (punts), mentres que una llista feta amb <ol> crea automàticament la numeració de cada element de la llista.

Dintre de les bones pràctiques dels estàndards web es recomana crear els menús de navegació amb llistes no ordenades, de manera que cada element de la llista sigui un enllaç. En aquest recurs de CodePen veureu un exemple: https://codepen.io/A3DIOC/pen/RwBzaOe

L’element <table> representa dades tabulars, és a dir, informació presentada en una estructura de files i columnes amb cel·les que contenen les dades.

S’utilitzen per organitzar i mostrar dades estadístiques o relacionades entre si.

La taula bàsica s’estructura amb tres etiquetes: <table>, <tr> i <td>:

<table> és el conjunt de la taula.
<tr> és una fila.
<td> és una cel·la.

Veieu un exemple de taula senzilla:

<table>
  <tr>
    <td>Javier</td>
    <td>Garcia</td>
  </tr>
  <tr>
    <td>Pepa</td>
    <td>Calabuig</td>
  </tr>
</table>

A continuació veieu com quedaria la taula. Hem de tenir en compte que, per donar-li un aspecte més atractiu, treballarem el color, les vores i marges amb estils CSS:

Afegir comentaris

Tot i que els comentaris no formen part de l’estructura HTML com a tal, sí que són una part significativa del codi HTML. Un comentari és una construcció del llenguatge de programación destinada a incrustar anotacions llegibles per al programador en el codi font d’una aplicació. El seu propòsit és fer el codi font més fàcil d’entendre amb vistes al seu manteniment o reutilització.

En HTML els comentaris s’inclouen de la següent manera:

<!-- Aquest és un comentari escrit en llenguatge HTML. -->

A dins del comentari s’hi poden escriure tantes línies com calgui, mentre comenci i acabi amb els símbols corresponents: <!— i —>, respectivament.

<!-- 
Aquest és un comentari escrit 
en diverses línies
en llenguatge HTML. 
-->

Estandàrd HTML5

La versió HTML5 es va presentar al públic l’any 2014, i continua sent la versió d’HTML de referència. Va incloure novetats significatives en diversos àmbits, respecte a la versió d’HTML anterior. No només va incorporar noves etiquetes i eliminar d’altres, sinó que va suposar millores en àrees on abans es necessitava utilitzar altres tecnologies.

Una de les novetats més importants d’HTML5 és la incorporació d’elements per definir l’estructura d’un document HTML. Aquestes etiquetes serveixen per definir la capçalera d’un document, el contingut i el peu de pàgina, entre altres.

A la taula es mostren i descriuen les noves etiquetes d’estructura que incorpora HTML5:

Taula Taula d’etiquetes HTML5

Etiqueta	Descripció
`<header>`	Repsenta la capcalear de la pagina, que conté elments com el logotip, menu de navegació principal, capçaleres de secció, formularis de cerca, etc.
`<nav>`	EL seu contingut és el menu de navegació principal, o els diferents menus de navegació dintre del contingut.
`<section>`	Representa una agrupació temàtica de continguts, normalment amb una capçalera. Cada `<section>` ha d’estar identificada mitjançant la inclusió d’un encapçalament, que sera el titol del contingut (<h1>-<h6>).
`<article>`	Representa una composició autònoma en un document, pàgina, aplicació o lloc destinada a ser independent o reutilitzable. Cada `<article>` ha de ser identificat, generalment mitjançant la inclusió d’una capçalera (<h1>-<h6>) com un fill de l’element `<article>`.
`<aside>`	Sovint es representa com a barres laterals o insercions. Sovint contenen les definicions, com ara definicions del glossari, o bé anuncis relacionats, applicacions web, informació de perfil o enllaços relacionats en el bloc.
`<footer>`	Representa un peu de pàgina en la seva secció de contingut, el qual sol contenir informació sobre l’autor de la secció, les dades de drets d’autor o enllaços a documents relacionats.
`<address>`	Proporciona informació de contacte del seu element més proper `<article>` o l’ancestre `<body>` En aquest cas, s’aplicaria a tot el document.

Podeu veure com seria l’estructura de la pàgina web d’aquestes noves etiquetes a la figura:

Imatge i multimèdia

HTML5 permet inserir diversos recursos multimèdia, com imatge, àudio i vídeo.

Vegeu les etiquetes a la taula:

Taula Etiquetes HTML5 d’imatge i multimèdia

Etiqueta	Descripció
`<img>`	Representa una imatge en el document.
`<source>`	Especifica múltiples recursos multimèdia, ja sigui per l’element `<audio>` o `<video>`. S’utilitza per servir el mateix contingut multimèdia en múltiples formats suportats per diferents navegadors.
`<audio>`	S’utilitza per inserir contingut de so en els documents. Pot contenir una o més fonts d’àudio, i està representat mitjançant l’atribut `src` o l’element `<source>` (el navegador escull el més adequat).
`<video>`	S’utilitza per incrustar el contingut d’un vídeo en un document. L’element `<video>` conté una o més fonts de vídeo. Especifica una font de vídeo, mitjançant l’atribut `src` o l’element `<source>` (el navegador escull el més adequat).

Vegeu el codi d’exemple de les tres etiquetes més representatives: <img>, <audio> i <video>.

Exemple d'etiqueta 'img'

L’etiqueta <img> ha de portar l’atribut src amb la ruta per accedir a la imatge. L’atribut alt ofereix una breu descripció per facilitar-ne l’accessibilitat web. Aquest atribut proporciona una descripció alternativa de la image i, en cas que l’usuari tingui problemes de visió, el lector de pantalla llegirà la descripció:

<img src="images/imatgeProva.jpg" alt="Imatge de prova" />

Exemple d'etiqueta 'audio'

L’etiqueta <audio> conté l’atribut controls, que mostra els controls del reproductor . L’etiqueta <source> amb el seu atribut src, vincula l’arxiu d’àudio en diferents formats.

<audio controls="controls">
  <source src="track.ogg" type="audio/ogg" />
  <source src="track.mp3" type="audio/mpeg" />
  El seu navegador no suporta l'element audio.
</audio>

Exemple d'etiqueta 'video'

L’etiqueta <video> porta l’atribut src per vincular l’arxiu de vídeo. Amb els atributs controls, com en l’anterior exemple, permet mostrar els controls del reproductor, i preload permet precarregar el vídeo. L’etiqueta <source> serveix per vincular diversos formats del mateix vídeo, de manera que si el primer no és compatible amb el navegador, passarà a reproduir el segon format, i si no el tercer format d’arxiu vídeo.

<video id="the-video" preload="auto" controls="controls">
  <source src="your-movie_H264.mov">
  <source src="your-movie_Ogg.ogv">
  <source src="your-movie_WebM.webm">
</video>

Descarregueu els arxius d’exemple que mostren com inserir contingut multimèdia: n9.cl/kb5d

CSS

CSS (sigla en anglès de Cascading Style Sheets, fulls d’estils en cascada) és un llenguatge de fulls d’estil que s’encarrega de controlar l’aspecte i la presentació dels documents HTML, com ara el color, la mida, el tipus de lletra del text, la separació vertical i horitzontal entre els elements, etc.

Els fulls d’estil van aparèixer al voltant de l’any 1970, quan l’organisme W3C, encarregat de crear tots els estàndards relacionats amb la web, va proposar crear un llenguatge de full d’estil específic per al llenguatge HTML. Però no va ser fins a finals del 1994 i principis del 1995 que es va definir el nou llenguatge anomenat CSS i es va convertir en estàndard. A finals del 1996, el W3C va publicar la primera recomanació oficial, anomenada CSS nivell 1. El 1998 va publicar la segona recomanació oficial, anomenada CSS nivell 2. La següent recomanació, coneguda com a CSS nivell 3, continua en desenvolupament des del 1998.

Vegeu l’estat actual de cada component de CSS 3 a: www.w3.org/Style/CSS/current-work.

Hi ha diversos motius pels quals és convenient separar la presentació del contingut HTML:

Codi més transparent: tenir el codi separat fa els documents més nets i escurça el temps de càrrega.
Facilitat de les actualitzacions: totes les modificacions es poden realitzar d’una forma centralitzada.
Accessibilitat: les pàgines web són accessibles i amb menys obstacles, ja que es dóna accés al seu contingut des de qualsevol sistema i plataforma.
Usabilitat: CSS conté moltes funcions i mètodes amb els quals proporcionar funcions ampliades als seus visitants.
Cercadors: el menor codi font i l’estructura ordenada també fan més fàcil i ràpida la lectura per als robots de cerca. Les paraules clau més importants en textos i títols es processen conjuntament i no hi ha perill, per tant, que el cercador tiri la tovallola en l’enèsima nidificació de la taula.

Exemple d'estils CSS: CSS Zen Garden

El lloc web CSS Zen Garden http://www.csszengarden.com és un bon exemple de la utilitat de CSS. Veieu com a partir d’un unic arxiu HTML, es pot variar completament el disseny si apliquem un full d’estils diferent. En el lloc web podeu descarregar l’arxiu HTML i els fulls d’estil CSS per veure el seu codi.

Incloure codi CSS en un document HTML

Hi ha tres maneres d’incloure codi CSS en un document HTML:

Incloure CSS en els elements HTML.
Incloure CSS en el mateix document HTML.
Definir CSS en un arxiu extern.

1. Incloure CSS dintre dels elements HTML: amb aquest mètode el codi s’insereix dintre de les etiquetes HTML, mitjançant l’atribut style, com es mostra en l’exemple següent:

<p style="color: black; font-family: Verdana;">Un paràgraf de text</p>

En aquest exemple, s’està aplicant a un paràgraf (<p>) el color negre per al text (color:black;), i la tipografia Verdana (font-family:Verdana).

És el mètode menys utilitzat. L’inconvenient d’aquest mètode és que embruta el codi HTML innecessàriament i complica el manteniment i l’actualització del codi CSS. Únicament s’utilitza en casos molt concrets. Passa el mateix amb l’etiqueta HTML obsoleta <font>.

El mètode d’incrustar codi CSS dintre de les etiquetes HTML és el menys recomanable. Tampoc és correcte usar l’etiqueta <font> per aplicar estil visual, es considera una etiqueta obsoleta.

2. Incloure CSS en el mateix document HTML: s’introdueix el codi CSS en el mateix document HTML, però aquest cop dins d’una etiqueta <style>. Aquesta etiqueta només es pot situar dins de l’etiqueta <head>, com es mostra en l’exemple següent:

<!DOCTYPE html>
<html>
  <head>
    <title> Primer exemple de CSS </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
      p { color: black; font-family: Verdana; }
    </style>
  </head>
  <body>
    <p>Un paràgraf de text</p>
  </body>
</html>

Aquest mètode s’utilitza quan es defineixen estils específics per a un determinat document HTML que complementen els estils que s’inclouen per defecte en la resta de pàgines del lloc web. El principal inconvenient és que quan es vol realitzar alguna modificació en els estils definits, és necessari modificar totes aquelles pàgines que incloguin aquest mateix codi que es vol modificar.

3. Definir CSS en un arxiu extern: és el mètode més utilitzat i eficient. Tots els estils CSS s’inclouen en un fitxer de tipus CSS que enllaça al document HTML mitjançant l’etiqueta <link>, dins de l’element <head>. Poden crear-se i referenciar-se en un mateix document HTML tants fulls d’estil CSS com calgui.

<!DOCTYPE html>
<html>
  <head>
    <title> Primer exemple de CSS </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <link rel="stylesheet" type="text/css" href="/css/estils.css" />
  <link rel="stylesheet" type="text/css" href="/css/estils_responsive.css" />
    </head>
  <body>
    <p>Un paràgraf de text</p>
  </body>
</html>

En aquest fragment de codi veieu que s’està vinculant un full d’estils CSS anomenat estils.css, mitjançant l’atribut href de l’element <link>.

Els atributs que cal afegir a l’etiqueta <link> són:

rel: indica el tipus de relació que existeix entre el recurs enllaçat i el document HTML. El valor que sol prendre és stylesheet.
type: indica el tipus de recurs enllaçat. Per als fulls d’estil el seu valor sempre és text/css.
href: indica la ruta del fitxer CSS que conté els estils.

El mètode més eficient, i per tant el més recomanat, és vincular un arxiu extern CSS a totes les pàgines HTML del projecte web.

Sintaxi CSS

Un cop hem vinculat un arxiu extern, que anomenem full d’estils, és hora de conèixer la sintaxi del llenguatge CSS per veure com afegir els estils als elements HTML.

La sintaxi del llenguatge CSS està formada per un selector i una declaració. Vegeu l’estructura sencera d’una regla d’estil CSS a figura. S’anomena conjunt de normes (però sovint s’anomena regla o norma curta).

Com veieu a la imatge anterior, una declaració CSS està formada per:

Selector: nom de l’element al principi del conjunt de regles. Selecciona l’element o elements HTML als quals s’ha d’aplicar l’estil. El selector s’aplica a un o més elements.
Declaració: cada propietat CSS amb el seu valor.
Valor: a la dreta de la propietat, després dels dos punts (:), hi ha el valor de la propietat. Cada propietat tindrà els seus valors específics, segons el tipus de propietat. Per exemple, la propietat font-size té valors de mides de la font, mentre que la propietat color usa valors de color hexadecimal (#FF0000).

Una regla d’estil normalment agrupa més d’una declaració, i s’apliquen amb un selector, per exemple:

p{
color:#FF0000;
font-famliy: verdana;
font-size:2em;
}

A l’exemple anterior, el selector d’element és p, i el contingut que hi ha dins els claudàtors correspon a les propietats. Cada propietat especifica el seu valor:

la propietat color té el valor #FF0000, qué és l’expressió hexadecimal del color vermell.
la propietat font-family té el valor verdana, per tant indica que la tipografia sigui Verdana.
i la propietat font-size té el valor 2em, que és la mida de la lletra (les tipografies es mesuren amb unitats em, que és un sistema de mesura específic per pantalla).

S’han de tenir en compte, quant a la sintaxi, les següents normes:

Cada conjunt de regles (a part del selector) ha d’estar limitat per claudàtors ({ }).
Dins de cada declaració s’han d’utilitzar dos punts (:) per separar la propietat dels seus valors.
Dins de cada conjunt de regles s’ha d’utilitzar un punt i coma (;) per separar cada declaració de la següent.

Comentaris

Els comentaris en els fulls d’estil CSS s’indiquen de la manera següent:

/* Aquest és un comentari en CSS. */

Els comentaris poden ocupar diverses línies:

/* Aquest és un
   comentari CSS de diverses
   línies. */

Selectors

Els selectors són imprescindibles per aplicar de forma correcta els estils CSS en una pàgina. Mitjançant els selectors controlem de manera molt selectiva a quin elements s’apliquen els estils CSS.

Hi ha dos grups de selectors: els selectors bàsics i els selectors avançats.

Els selectors bàsics són essencials per poder aplicar els estils a un document. Són els següents:

Selector d’etiqueta
Selector de classe
Selector d’ID

Els selectors d'etiqueta

Un selector d’etiqueta selecciona tots els elements de la pàgina segons la seva etiqueta. Els selectors d’etiqueta coincideixen amb el nom de les etiquetes HTML: p, h1, o div, per exemple.

Vegeu com seleccionar tots els paràgrafs d’una pàgina. Ho farem amb el selector p, que coincideix amb el nom de l’etiqueta <p>:

p {
  ...
}

Per utilitzar aquest selector només cal indicar el nom de l’etiqueta HTML (sense els caràcters < , >) que correspon a l’element que es vol seleccionar. Si es volen aplicar els mateixos estils a diverses etiquetes diferents, es poden encadenar els selectors, separats per una coma:

h1, h2, h3 {
  ...
}

En aquest exemple els estils s’aplicaran a tots els elements h1, h2 i h3.

Organitzar els tipus de selectors

En els fulls d’estil complexes és habitual agrupar les propietats comunes de diversos elements en una única regla CSS, i posteriorment definir les propietats.

h1, h2, h3{...}
 
h1{...}
h2{...}
h3{...}

Els selectors de classe

Els selectors de classe permeten aplicar un estil només a un element que tindrà com atribut el selector de classe.

En el següent codi HTML tenim tres paràgrafs:

<div>
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et est adipiscing accumsan...</p>
  <p>Class aptent taciti sociosqu ad litora...</p>
</div>

Un selector d’element, en aquest cas, aplicaria estils a tots els paràgrafs. Si volem aplicar estils diferenciats a cada paràgraf, la solució exigeix utilitzar l’atribut class sobre l’element on es vol aplicar l’estil. Vegeu el seu ús en el següent codi HTML:

<div>
  <p class="destacat">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et est adipiscing accumsan...</p>
  <p>Class aptent taciti sociosqu ad litora...</p>
</div>

A continuació, es crea la regla anomenada .destacat en el full d’estils CSS amb totes les propietats que es volen definir.

.destacat { 
color:#FF00FF;
font-weight: bold;
}

Segons el codi anterior, el paràgraf amb la classe .destacat se li està aplicant el color vermell i està ressaltat en negreta.

El selector de classe va precedit per un punt, de manera que al codi CSS escriurem: .destacat. Malgrat això, l’atribut dins d’HTML no porta punt: class=“destacat”

Heu de tenir en compte que aquest selector es pot aplicar a diversos elements encara que no siguin el mateix tipus d’element. Per exemple, a un paràgraf i a un enllaç:

<div>
  <p class="destacat">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et <a href="#" class="destacat">est adipiscing</a> accumsan...</p>
</div>

El selector de classe és un dels més utilitzats i és molt útil per aplicar una regla d’estils a diversos elements que comparteixen característiques en una mateixa pàgina. Per exemple, per aplicar un format determinat a tots els paràgrafs de text del lloc web.

Els selectors d'ID

A diferència del selector de classe, hi ha ocasions en què és necessari aplicar estils CSS a un únic element de la pàgina. En aquests casos s’aplica el selector d’ID, que permet seleccionar un element de la pàgina a través del valor del seu atribut id.

La sintaxi dels selectors d’ID és molt semblant a la dels selectors de classe, però en aquests s’utilitza el símbol coixinet (#) com a prefix del nom de la regla CSS.

Veieu un exemple:

#destacat { ... }

En el codi HTML, es veu així:

<p>Primer paràgraf</p>
<p id="destacat">Segon paràgraf</p>
<p>Tercer paràgraf</p>

La principal diferència entre aquest selector i el selector de classe té a veure amb HTML i no amb CSS. En una mateixa pàgina, el valor de l’atribut ID ha de ser únic, de manera que dos elements diferents no poden tenir el mateix valor ID. La recomanació general és utilitzar el selector d’ID quan es vol aplicar un estil a un sol element específic de la pàgina i utilitzar el selector de classe quan es vol aplicar un estil a diversos elements diferents de la pàgina HTML.

Exemple d'ús de selectors d'ID

És una bona pràctica aplicar els selectors d’ID als elements que són únics en una pàgina, com els elements d’estructura de la pàgina: <article>, <header>, <footer>, etc. Els elements que tenen estils compartits (com títols, paràgrafs i enllaços,) tindran selectors de classe.

Veieu a continuació un exemple de l’ús dels selectors d’element, classe i ID. Els exemples estan realitzats a Codepen, una eina en línia molt útil per fer proves amb HTML i CSS, i fins i tot amb JavaScript): codepen.io/A3DIOC/pen/BaKYpQJ

Els selectors avançats són una mica més complexes. Hi tenim:

Selector universal
Selector descendent
Selector de fills
Selector adjacent
Selector d’atributs

Selector universal

El selector universal s’utilitza per seleccionar tots els elements de la pàgina. El selector universal s’indica mitjançant un asterisc (*).

* {
   ...
}

El selector universal és molt útil per aplicar estils a tot el contingut de la pàgina.

Selector descendent

El selector descendent selecciona els elements que es troben dins d’altres elements. Un element és descendent d’un altre quan es troba entre les etiquetes d’obertura i de tancament d’aquest primer, és a dir “dins” de l’altre element. La sintaxi formal del selector descendent és: selector1 selector2 selector3 … selectorN.

Veieu un exemple:

div p { ... }

Si el codi HTML és:

<div>
  <p>Paràgraf</p>
  <p>Paràgraf</p>
</div>
  <p>Paràgraf</p>

Els dos paràgrafs dintre del <div> es veuran afectats per aquest selector, mentre que el que queda a fora no entrarà dintre de la declaració.

En el selector descendent un element no ha de ser descendent directe de l’altre, ja que l’única condició és que un element ha de ser dins d’un altre, sense importar el nivell de profunditat en què es trobi.

Selector de fills

El selector de fills es tracta d’un selector semblant al selector descendent, però amb un funcionament molt diferent, ja que s’utilitza per seleccionar un element fill directe d’un altre element. S’indica mitjançant el símbol >:

p > span { ... }

El seu codi HTML és:

<p><span>Text1</span></p>
<p><a href="#"><span>Text2</span></a></p>

Selector adjacent

El selector adjacent s’empra per seleccionar elements que en el codi HTML de la pàgina es troben just a continuació d’altres elements. La seva sintaxi empra el signe + per separar els dos elements:

element1 + element2 {...}

Si es considera el següent codi HTML:

<body>
  <h1> Títol1 </h1>
 
  <h2> Subtítol </h2>
  ...
 
  <h2> Un altre subtítol </h2>
  ...
</body>

L’exemple anterior disposa de dos elements <h2>, però només un es troba immediatament després de l’element <h1>. Si es volen aplicar diferents colors en funció d’aquesta circumstància, el selector adjacent és el més adequat:

h2 {
  color: green; 
}
h1 + h2 {
  color: red;
}

Les regles CSS anteriors fan perquè tots els <h2> de la pàgina es vegin de color verd, excepte aquells <h2> que estiguin situats immediatament després de qualsevol element <h1>, que es mostren de color vermell.

Tècnicament, els elements que formen el selector adjacent han de complir les dues condicions següents:

element1 i element2 han de ser elements germans, de manera que el seu element pare ha de ser el mateix.
element2 ha d’aparèixer immediatament després d’element1 en el codi HTML de la pàgina.

El següent exemple és molt útil per als textos que es mostren com a llibres:

p + p {
  text-indent: 1.5em; 
}

En molts llibres, sol ser habitual que la primera línia de tots els paràgrafs estigui sagnada, llevat de la primera línia del primer paràgraf. Amb el selector p + p, se seleccionen tots els paràgrafs de la pàgina precedits per un altre paràgraf, de manera que no s’aplica al primer paràgraf de la pàgina.

Sagnat o 'indentation'

El sagnat (usat més habitualment el terme anglès indentation) és un tipus de notació secundària utilitzat per millorar la llegibilitat del codi font per part dels programadors, tenint en compte que els compiladors o intèrprets rarament consideren els espais en blanc entre les sentències d’un programa. En alguns llenguatges de programació com Haskell, Occam i Python, el sagnat s’utilitza per delimitar l’estructura del programa i permet establir blocs de codi.

Selector d'atributs

Els selectors d’atributs permeten seleccionar elements HTML en funció dels seus atributs i/o valors d’aquests atributs.

Els selectors d’atributs normalment tenen la sintaxi:

[nom_atribut]: selecciona els elements que tenen establert l’atribut anomenat nom_atribut, independentment del seu valor.
[nom_atribut = valor]: selecciona els elements que tenen establert un atribut anomenat nom_atribut amb un valor igual a valor.

Vegeu alguns exemples d’aquests tipus de selectors:

/* Es mostren de color blau tots els enllaços que tenen
  un atribut "class", independentment del seu valor. */
a[class] { color: blue; }
 
/* Selecciona tots els elements de la pàgina en què l'atribut
  "lang" és igual a "a", és a dir, tots els elements en anglès. */
* [lang=en] {...}

Veieu en aquest enllaç a Codepen un exemple dels selectors avançats: codepen.io/A3DIOC/pen/wvGyJNB?editors=1100

Combinació de selectors

Alguns cops és necessari restringir l’abast dels selectors. En aquest cas és molt útil la combinació de selectors. Per exemple:

p.destacat { ... }

El selector p.destacat s’interpreta com totes aquelles etiquetes <p> que tenen un atribut class igual a destacat.

Igual que amb els selectors de classe, també es pot restringir l’abast del selector d’ID mitjançant la combinació amb altres selectors. En el següent exemple s’aplica la regla CSS només a l’element d’etiqueta <p> que tingui un atribut ID igual a l’indicat:

p #avis { ... }

A primera vista, restringir l’abast d’un selector d’ID pot semblar absurd. En realitat, un selector de tipus p#avis només té sentit quan l’arxiu CSS s’aplica sobre moltes pàgines HTML diferents. En aquest cas, algunes pàgines poden disposar d’elements amb un atribut ID igual a avis i que no siguin paràgrafs, de manera que la regla anterior no s’aplica sobre aquests elements.

Per altra banda, és possible aplicar els estils de diverses classes CSS sobre un mateix element. La sintaxi és similar, però els diferents valors de l’atribut class se separen amb espais en blanc:

<p class="especial destacat error"> Paràgraf de text </ p>

Veieu a en aquest enllaç a Codepen un exemple de les combinacions de selectors: codepen.io/A3DIOC/pen/KKzQWxM.

Herència

L’herència es basa en el fet que quan s’estableix el valor d’una propietat CSS en un element, els seus elements descendents hereten de forma automàtica el valor d’aquesta propietat.

Considereu el següent exemple:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title> Exemple d'herència d'estils </title>
    <style type = "text/css">
      body { color: blue; }
    </style>
  </head>
  <body>
    <h1> Titular de la pàgina </h1>
    <p> Un paràgraf de text no gaire llarg </p>
  </body>
</html>

En l’exemple anterior, el selector <body> només estableix el color de la lletra per a l’element <body>. No obstant això, la propietat color és una de les que s’hereten de forma automàtica, de manera que tots els elements descendents de <body> mostren aquest mateix color de lletra, és a dir, implica canviar el color de lletra de tots els elements de la pàgina.

Encara que l’herència d’estils s’aplica automàticament, es pot anul·lar el seu efecte establint de forma explícita un altre valor per a la propietat que s’hereta, com es mostra en el següent exemple:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title> Exemple d'herència d'estils </title>
    <style type = "text/css">
      body {font-family: Arial; color: black; }
      h1 {font-family: Verdana; }
      p {color: red; }
    </style>
  </head>
  <body>
    <h1> Titular de la pàgina </h1>
    <p> Un paràgraf de text no gaire llarg </p>
  </body>
</html>

En l’exemple anterior, s’estableix en primer lloc el color i el tipus de lletra de l’element <body>, de manera que tots els elements de la pàgina es mostraran en aquest mateix color i tipus de lletra. No obstant això, les altres regles CSS modifiquen algun dels estils heretats.

D’aquesta manera, els elements <h1> es mostren amb el tipus de lletra Verdana establert pel selector h1 i es mostren de color negre, que és el valor heretat de l’element <body>. Igualment, els elements <p> de la pàgina es mostren del color vermell establert pel selector p i amb un tipus de lletra Arial heretat de l’element <body>.

Col·lisions d'estils

En els fulls d’estils complexos és habitual que diverses regles CSS s’apliquin a un mateix element HTML. El problema d’aquestes regles múltiples és que es poden donar col·lisions, com la del següent exemple:

p { color: red; }
p { color: blue; }

Si es considera el codi HTML:

<p> ... </p>

CSS té un mecanisme de resolució de col·lisions molt complex i que té en compte el tipus de full d’estil (de navegador, d’usuari o de dissenyador), la importància de cada regla i l’específic que sigui el selector.

El mètode seguit per CSS per resoldre les col·lisions d’estils es mostra a continuació:

Determinar totes les declaracions que s’apliquen a l’element per al medi CSS seleccionat.
Ordenar les declaracions segons el seu origen (CSS de navegador, d’usuari o de dissenyador) i la seva prioritat (paraula clau !important).
Ordenar les declaracions segons l’específic que sigui el selector. Com més genèric és un selector, menys importància tenen les seves declaracions.
Si després d’aplicar les normes anteriors, hi ha dues o més regles amb la mateixa prioritat, s’aplica la indicada en últim lloc.

Com en l’exemple anterior, els dos selectors són idèntics, les dues regles tenen la mateixa prioritat i preval la indicada en últim lloc, de manera que el paràgraf es mostra de color blau.

En el següent exemple, la regla CSS que preval es decideix per l’especificitat de cada selector:

p { color: red; }
p#especial { color: green; }
* { color: blue; }

Si es considera el codi HTML:

<p id="especial"> ... </ p>

A l’element <p> se li apliquen les tres declaracions. Com que el seu origen i la seva importància són iguals, decideix l’especificitat del selector. El selector * és el menys específic, ja que es refereix a “tots els elements de la pàgina”. El selector p és poc específic, perquè es refereix a “tots els paràgrafs de la pàgina”. Finalment, el selector p#especial només fa referència al “paràgraf de la pàgina l’atribut id sigui igual a especial”. Com que aquest és el més específic, la seva declaració és la que es té en compte i, per tant, el paràgraf es mostra de color verd.

Propietats

Hi ha moltes propietats CSS que permeten controlar acuradament el disseny per tal d’obtenir l’aspecte visual que es vol aconseguir. A continuació veurem les propietats bàsiques per modificar el disseny: les propietats de text, i les propietats del model de caixa.

Donar format visual al text

Per canviar l’aspecte del text les propietats més utilitzades són:

font-family: estableix la tipografia del text. Els valors associats són el nom de la font tipogràfica, per exemple: font-family:Verdana;
font-size: aplica la mida del text. Els valors es poden indicar en diverses unitats de mesura, com píxels, punts o em. Per exemple: font-size:12px;
font-weight: indica si la font està en negreta, per exemple font-wight:bold;
font style: s’usa per canviar l’estil del text a cursiva (font-sytle: oblique;)
color: adequat per canviar el color del text. Es pot indicar el valor amb el nom del color d’una llista de colors predefinida o bé indicar el valor en codi hexadecimal. Per exemple, color:blue; o color:#0000FF;
text-decoration: aquesta propietat permet aplicar un subratllat al text, amb la propietat underline.

Les unitats de mesura i les mides tipogràfiques en CSS

Les unitats de mesura en CSS són diverses: podem establir mides en píxels, percentatges, centímetres, em, etc. Per als usuaris que s’inicien en la programació web, el més comú és la utilització de píxels.

No es recomana l’ús de mides en centímetres perquè no tenen cap relació amb les unitats de mesura per mostrar gràfics en una pantalla. Per tant, les mides generals s’establiran en píxels o en percentatges.

Quant a les tipografies, CSS ofereix una sèrie d’unitats diferents per expressar la mida. Algunes s’usaven fa temps en la tipografia tradicional, com ara el punt (pt) i la pica (pc). D’altres són conegudes a partir de l’ús quotidià, com el centímetre (cm) i la polzada (in). I també hi ha una unitat “màgica” que es va inventar específicament per a CSS: el px. La unitat em en canvi, és relativa a la mida de la font de l’element (2 em significa dues vegades la mida de la font actual).

No hi ha cap restricció sobre quines unitats es poden utilitzar. Però, en general, s’utilitza un conjunt diferent d’unitats per mostrar contingut a la pantalla o per imprimir en paper. El recomanat són les unitats em, px, % per a la pantalla i em, cm, mm, in, pt, pc, % per a imprimir.

El W3C recomana l’ús de fonts relatives, com em, per tal de crear llocs web escalables.

Veieu en aquest enllaç a Codepen un exemple de les propietats de text CSS: codepen.io/A3DIOC/pen/qBZxRMq

El model de caixa, fons i vores

Un element HTML que serveix per maquetar i organitzar els elements d’un disseny és l’element <div>.

Aquest element no té cap significat específic, però fa la funció de “contenidor” per agrupar elements i donar-li al conjunt aspecte de bloc o caixa.

Les propietats que s’apliquen a un <div> ajuden a controlar molt bé l’aspecte visual d’un disseny elaborat amb CSS. El conjunt d’aquestes propietats i el seu comportament s’anomena model de caixa.

En el model de caixa podem aplicar color, vores, modificar l’amplada i l’alçada d’una caixa, etc.

Les propietats del model de caixa més importants són:

background-color: estableix el color de fons.
background-image: mostra una imatge de fons en format .jpg o .png, que serà una imatge decorativa.
border: crea una vora envoltant la caixa.
width estableix l’amplada.
height: estableix l’alçada.
margin: aplica un marge exterior a la caixa.
padding: crea un farcit o espai entre el límit de la caixa i el seu contingut.

Aquesta imatge (veieu figura) mostra l’esquema del model de caixa amb les seves propietats:

Veieu un exemple per veure com funciona el model de caixa i els estils aplicats: codepen.io/A3DIOC/pen/BaKYWJg?editors=1100

Tradicionalment el model de caixa i la maquetació del contingut es realitzava mitjançant l’element <div>, però actualment es fan servir altres elements d’HTML5: <header>, <article>, <section> <aside>, <footer>.

Aquests elements també tenen el comportament del model de caixa i a més tenen un valor semàntic que indica la seva funció en la pàgina.

Descarregueu des de l’enllaç un exemple de l’ús dels elements funcionals d’HTML5 i el model de caixa: codepen.io/A3DIOC/pen/WNwMpeW

A continuació veieu una taula resum amb una relació de les propietats CSS més utilitzades:

Taula Taula de propietats CSS

Propietat	Tipus	Valor	Descripció
`width`	-	Unitat de mesura, percentatge, auto	Estableix la mida de l’alçada de la caixa.
`height`	-	Unitat de mesura, percentatge, auto	Estableix la mida de l’amplada de la caixa.
`margin`	top \|\| bottom \|\| right \|\| left	Unitat de mesura, percentatge, auto	Estableix la separació entre la vora lateral de la caixa i la resta de caixes adjacents.
`padding`	top \|\| bottom \|\| right \|\| left	Unitat de mesura, percentatge, auto	Estableix la separació entre el contingut i les vores laterals de la caixa de l’element.
`border`	top \|\| bottom \|\| right \|\| left && width \|\| color \|\| style	Unitat de mesura \|\| hexadecimal \|\| solid, dashed, etc.	Estableix la vora lateral de la caixa.
`background`	color \|\| image \|\| repeat \|\| position \|\| attachment	hexadecimal \|\| url \|\| repeat, repeat-x, repeat-y, no-repeat \|\| Unitat de mesura, percentatge, left, center, right \|\| scroll, fixed	Permet mostrar un color de fons sòlid a la caixa d’un element.
`position`	-	static, relative, absolute, fixed, inherit	Permet modificar la posició en la qual es mostra cada caixa.
`top, right, bottom, left`	-	Unitat de mesura, percentatge, auto	Permet controlar el desplaçament de les caixes posicionades.
`float`	-	left, right, none	Estableix el tipus de posicionament flotant de l’element.
`display`	-	inline, block, none	Permet controlar la forma de visualitzar un element i fins i tot ocultar-lo.
`visibility`	-	visible, hidden	Permet fer visibles i invisibles als elements.
`overflow`	-	visible, hidden, scroll, auto	Permet controlar els continguts sobrants d’un element.
`color`	-	hexadecimal	Permet establir el color del text.
`text-align`	-	left, right, center, justify	Defineix l’alineació del contingut de l’element.
`text-decoration`	-	none, underline, overline, line-through, blink	Estableix la decoració del text (subratllat, ratllat, parpellejant, etc.)
`text-transform`	-	capitalize, uppercase, lowercase, none	Transforma el text original (el transforma a majúscules, a minúscules, etc.)
`line-height`	-	Unitat de mesura, percentatge	Permet establir l’altura de línia dels elements.
`vertical-align`	-	Sub, super, top, text-top, middle, bottom, text-bottom, unitat de mesura, percentatge	Determina l’alineació vertical dels continguts d’un element.

Propietats abreujades

CSS defineix una sèrie de propietats abreujades, (shorthand) que permeten establir els atributs de forma simultània per a totes les propietats de la taula.

El símbol && significa “i”, la conjunció copulativa. En canvi, el símbol || significa “o”, la conjunció disjuntiva.

Per exemple, per definir el fons del cos de la pàgina (<body>) es poden indicar per separat les quatre propietats, o bé agrupar-les en una sola mitjançant la redacció abreujada:

/* Color i imatge de fons amb propietats CSS*/
 
body {
  background-color: #222d2d;
  background-image: url("./graphics/colorstrip.gif");
  background-repeat: repeat-x;
  background-position: 0 0;
}
/* L'equivalent mitjançant una propietat 'shorthand' */
body{ background: #222d2d url(./graphics/colorstrip.gif) repeat-x 0 0; }

Tenen exactament la mateixa funcionalitat, però utilitzar el shorthand facilita la lectura i que no es cometin tants errors, a més d’una major agilitat i facilitat a l’hora de codificar els estils per part del programador.

JavaScript

JavaScript (JS) és un llenguatge de programació dinàmic que quan s’aplica a un document HTML proporciona interactivitat a la pàgina web. Per exemple, dona feedback quan es clica un botó o s’emplena una informació en un formulari, estils dinàmics, animació, jocs. Tècnicament, JavaScript és un llenguatge de programació interpretat. És a dir, no és necessari compilar els programes per executar-los ni necessita processos intermedis, ja que poden executar-se directament des del navegador.

JavaScript va néixer als anys noranta, quan s’iniciava el desenvolupament de les primeres aplicacions web i es començaven a incloure formularis cada cop més complexos. Al mateix temps, com que la velocitat de navegació era lenta, va sorgir la necessitat d’un llenguatge de programació que s’executés del costat del client per evitar el temps d’espera de resposta del servidor. La primera versió de JavaScript va ser un èxit. Per evitar guerres tecnològiques, es va decidir estandarditzar el llenguatge. Tanmateix, el 1997 l’especificació JavaScript 1.1 va ser enviada a l’ECMA (European Computer Manufacturers Association), que va crear un comitè amb l’objectiu d’estandarditzar un llenguatge d’script multiplataforma i independent de qualsevol empresa.

Com a estàndard, JavaScript defineix un conjunt de regles que s’han de seguir per escriure el codi font correctament.

La sintaxi a seguir compleix els següents aspectes:

No es tenen en compte els espais en blanc i les noves línies: l’intèrpret de JavaScript ignora qualsevol espai en blanc sobrant, de manera que el codi es pot ordenar de forma adequada per entendre-ho millor (tabulant les línies, afegint espais, creant noves línies, etc.)
Hi ha distinció entre majúscules i minúscules: si s’intercanvien majúscules i minúscules, l’script no funciona.
No es defineix el tipus de les variables: no cal indicar el tipus de dada que emmagatzema una variable. D’aquesta manera, una mateixa variable pot emmagatzemar diferents tipus de dades durant l’execució de l’script.
No cal acabar cada sentència amb el caràcter de punt i coma (;): encara que en JavaScript no és obligatori acabar cada sentència amb el caràcter de punt i coma (;), és convenient seguir la tradició.
Permet incloure comentaris: els comentaris s’utilitzen per afegir informació en el codi font del programa. Tot i que el contingut dels comentaris no es visualitza per pantalla, sí que s’envia al navegador de l’usuari juntament amb la resta de l’script. Cal extremar les precaucions sobre la informació inclosa en els comentaris.

Inclusió de codi JavaScript als documents HTML

Hi ha tres maneres d’incloure codi JavaScript en un document HTML:

Incloure JavaScript en els elements HTML.
Incloure JavaScript en el mateix document HTML.
Definir JavaScript en un arxiu extern.

1. Incloure JavaScript en els elements HTML: aquest mètode tracta d’introduir el codi dins d’una etiqueta <HTML>, com es mostra en l’exemple:

<span onclick="alert('Hello World!')">Haz click aquí</span>

És el mètode menys utilitzat. L’inconvenient d’aquest mètode es que embruta el codi HTML innecessàriament i complica el manteniment i l’actualització del codi JavaScript. Únicament s’utilitza en casos molt concrets.

2. Incloure JavaScript en el mateix document HTML: s’introdueix el codi JavaScript en el mateix document HTML, però aquest cop dins d’una etiqueta <script>. L’etiqueta se sol situar dins de l’etiqueta <head>, com es mostra en l’exemple:

<!DOCTYPE html>
<html>
  <head>
    <title> Primer document HTML </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
      alert("El meu primer missatge de prova");
    </script>
  </head>
  <body>
    <p>Un pàrrafo de text.</p>
  </body>
</html>

Per fer-ho correctament, a més, dins de l’etiqueta <script> s’hi ha d’afegir l’atribut type, el valor del qual és text/javascript. Es pot utilitzar aquest mètode quan aquest programa s’executa en un únic document HTML. D’altra manera, si se’n vol modificar el codi, cal modificar tots els documents on s’ha afegit aquest mateix bloc de codi JavaScript.

3. Definir JavaScript en un arxiu extern: l’últim mètode es realitza amb un document extern de tipus JavaScript enllaçat amb el document HTML mitjançant l’etiqueta <script>. Per exemple, en un fitxer JavaScript, anomenat codi.js, s’escriuria:

alert("Missatge de prova");

En el document HTML s’afegiria la corresponent referència al document anterior:

<!DOCTYPE html>
<html>
  <head>
    <title>Exemple de com incloure JavaScript des d'un fitxer extern</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="/js/codi.js"></script>
  </head>
  <body>
    <p>Un paràgraf de text</p>
  </body>
</html>

En l’etiqueta <script> s’han de definir els atributs type i src, on type indica el tipus de document que s’enllaça i src indica el propi document al qual fa referència l’etiqueta. Cada etiqueta <script> pot enllaçar un únic document a la vegada, però en un mateix document HTML es poden enllaçar tants documents JavaScript com calgui.

El principal avantatge d’aquest mètode és que simplifica el codi HTML, permet reutilitzar el codi en diverses pàgines i simplifica la modificació del codi JavaScript localitzat en un fitxer.

Etiqueta 'noscript'

Alguns navegadors no disposen d’un suport complet de JavaScript, d’altres navegadors permeten bloquejar-lo parcialment, i en altres ocasions és el mateix usuari qui en bloqueja l’ús, perquè creu que d’aquesta manera navegarà de forma més segura. En aquests casos, és habitual que si el lloc web requereix JavaScript per al seu correcte funcionament, s’inclogui un missatge d’avís per a l’usuari que indica que cal activar JavaScript.

Per tal de mostrar el missatge a l’usuari, JavaScript defineix l’etiqueta <noscript>, la qual s’ha de mostrar dins de l’etiqueta <body> (normalment a l’inici). Com es pot observar en l’exemple, l’etiqueta <noscript> pot contenir a la vegada qualsevol etiqueta de codi HTML:

<body>
<noscript>
  <p>Benvinguts a la meva pàgina web.</p>
  <p>Aquesta pàgina requereix l'ús de JavaScript per al seu funcionament. Si s'ha desactivat intencionadament, si us plau torneu-lo a activar.</p>
</noscript>
</body>

Programació en JavaScript

Hi ha diversos aspectes de la sintaxi i el funcionament de JavaScript, un llenguatge de programació que permet crear contingut nou i dinàmic, controlar arxius de multimèdia, crear imatges animades i moltes altres coses més, que cal controlar a l’hora de programar.

Comentaris

JavaScript defineix dos tipus de comentaris: d’una sola línia i els que n’ocupen més d’una.

Exemple d’un comentari en una sola línia:

//A continuació es mostra un missatge.
alert("missatge de prova");

Aquests missatges es defineixen afegint dues barres a l’inici de la línia a comentar.

Exemple d’un comentari en diverses línies:

/* Els comentaris en diverses línies són molt útils 
quan es necessita incloure molta informació 
en els comentaris del codi. */
alert("missatge de prova");

Els comentaris multilínia es defineixen delimitant el text del comentari mitjançant els símbols /* i */, respectivament.

Variables

Una variable és una posició de memòria identificada amb un nom que pot variar de contingut en l’execució d’un programa. En JavaScript les variables es creen mitjançant la paraula reservada var, la qual s’utilitza per definir per primer cop la variable, és a dir, per declarar una variable.

var numero_1;
var numero_2;

Si quan es declara una variable se li assigna també un valor, es diu que s’inicialitza:

var numero_3 = 5;

No és necessari inicialitzar la variable en el moment de declarar-la. Se li pot asignar el valor posteriorment.

var numero_3;
numero_3 = 5;

En Javascript no és necessari declarar les variables per poder utilitzar-les, tot i que és recomanable declarar totes les variables que s’hagin d’utilitzar. A més, les variables han de seguir l’esquema següent:

Només poden estar formades per lletres, xifres i els símbols de dólar ($) i guió baix (_).
El primer caràcter no pot ser una xifra.

Els següents exemples són correctes:

var $numero1;
var _$letra;
var $$$otroNumero;
var $_a__$4;

Aquests exemples, en canvi, són incorrectes:

var 1numero;       // Comença per un número
var numero;1_123;  // Conté un caràcter ";"

Tipus de variables

Els nombres s’utilitzen per emmagatzemar valors numèrics enters (integer) o decimals (float). Els nombres decimals utilitzen el punt (.) en comptes de la coma per separar la part entera i la decimal:

var iva = 16;        // variable tipus sencer
var total = 234.65;  // variable tipus decimal

Les cadenes de text s’utilitzen per emmagatzemar caràcters, paraules i/o frases. Per assignar el valor a la variable s’utilitzen les cometes simples (') o dobles (“) per delimitar l’inici i el final:

var mensaje = "Benvingut al nostre lloc web.";
var nombreProducto = 'Producte ABC';
var letraSeleccionada = 'c';

De vegades la mateixa variable pot contenir cometes. En aquest cas, s’utilitzen, per delimitar el valor de la variable, les cometes que no es facin anar en el valor:

/* El contingut d'aquesta cadena conté cometes simples, 
per això es delimita amb cometes dobles. */
var text1 = "Una frase amb 'cometes simples' a dins";
/* El contingut d'aquesta cadena conté cometes dobles, 
per això es delimita amb cometes simples. */
var text2 = 'Una frase amb 'cometes dobles' a dins';

Les cadenes de text poden contenir també caràcters especials, com es mostra en la taula.

Taula Taula de caràcters especials

El que es desitja incloure	El que s’ha d’incloure
Una nova línia	\n
Un tabulador	\t
Una cometa simple	\’
Una cometa doble	\“
Una contrabarra	\
Un backspace	\r

D’aquesta manera, l’exemple anterior, que contenia cometes simples i dobles dins del text, es pot refer de la següent manera:

var text1 = 'Una frase amb \'cometes simples\' a dins';
var text2 = "Una frase amb \"cometes dobles\" a dins";

Les variables de tipus booleà es coneixen també com a variables de tipus lògic. Aquest tipus de variable s’utilitza per emmagatzemar un valor que únicament pot ser true (verdader) o false (fals):

var clientRegistrat = false;
var ivaInclòs = true;

Un array és una col·lecció de variables que poden ser totes del mateix tipus o cada un d’un tipus diferent. La sintaxi per declarar i inicialitzar un array és:

var nom_array = [valor1, valor2, ..., valorN];

Un cop definit l’array, per tal d’accedir a cada un dels seus elements, cal indicar la seva posició. L’únic que s’ha de tenir en compte és que la primera posició d’un array s’inicia en 0.

var mesos = ["gener", "febrer", "març", "abril", "maig", "juny", "juliol", "agost", "setembre", "octubre", "novembre", "desembre"];
//Accedim a les posicions 0 i 10:
var mesTriat = dias[0];    // mesTriat = "gener"
var mesDiferent = dies[10];            // altreDia = "novembre"

Operadors

Els operadors permeten manipular el valor de les variables i realitzar operacions matemàtiques i/o amb cadenes i comparacions de les diferents variables.

Assignació: s’utilitza per emmagatzemar un valor dins d’una variable mitjançant el símbol =.

var numero1 = 3;

Increment i decrement: s’utilitzen únicament en variables numèriques per incrementar o disminuir en una unitat el seu valor.

var numero = 5;
++numero;
alert(numero);  // numero = 6
 
//El que equival a: 
var numero = 5;
numero = numero + 1;
alert(numero);  // numero = 6

El mateix exemple disminuint una unitat seria:

var numero = 5;
--numero;
alert(numero);  // numero = 4
 
//El que equival a:
var numero = 5;
numero = numero - 1;
alert(numero);  // numero = 4

Els operadors d’increment i decrement també es poden utilitzar com a sufix de la variable, però aleshores el seu comportament varia:

var numero1 = 5;
var numero2 = 2;
numero3 = numero1++ + numero2;
// numero3 = 7, número1 = 6
 
var numero1 = 5;
var numero2 = 2;
numero3 = ++numero1 + numero2;
// numero3 = 8, numero1 = 6

Si l’operador ++ s’indica com a prefix de la variable, el seu valor s’incrementa abans de realitzar qualsevol altra operació. Si s’indica com a sufix, el seu valor s’incrementa després d’executar la sentència en què apareix.

Negació: s’utilitza per obtenir el valor contrari del valor de la variable. El símbol per a la negació és !.

var visible = true;
alert(!visible);  // Mostra "false" i no "true".

AND: l’operació lògica AND obté el seu resultat combinant dos valors booleans mitjançant el símbol &&. Vegeu la taula:

Taula Taula de l’operació lògica AND

var1	var2	var1&&var2
true	true	true
true	false	false
false	true	false
false	false	false

var valor1 = true;
var valor2 = false;
resultat = valor1 && valor2; // resultat = false
 
valor1 = true;
valor2 = true;
resultat = valor1 && valor2; // resultat = true

OR: l’operació lògica AND obté el seu resultat combinant dos valors booleans mitjançant el símbol ||. Vegeu la taula:

Taula Taula de l’operació lògica OR

var1	var2	var1\|\|var2
true	true	true
true	false	true
false	true	true
false	false	false

var valor1 = true;
var valor2 = false;
resultat = valor1 || valor2; // resultat = true
 
valor1 = false;
valor2 = false;
resultat = valor1 || valor2; // resultat = false

Matemàtics: JavaScript permet realitzar operacions matemàtiques sobre els valors numèrics:
- Suma: expressada amb el símbol +
- Resta: expressada amb el símbol -
- Multiplicació: expressada amb el símbol *
- Divisió: expressada amb el símbol /
- Mòdul: expressada amb el símbol % (obté la resta de la divisió)
- Potència: expressada amb el símbol ||

var nombre1 = 10;
var nombre2 = 4;
 
resultat = nombre1 + nombre2;   // resultat = 14
resultat = nombre1 - nombre2;   // resultat = 6
resultat = nombre1 * nombre2;   // resultat = 40
resultat = ''nombre1 / nombre2;   // resultat = 2.5
resultat = nombre1 % nombre1;   // resultat = 2
resultat = nombre1 ** nombre1;   // resultat = 10000

Relacionals: els operadors relacionals són major que (>), menor que (<), major o igual (>=), menor o igual (<=), igual que (==) i diferent de (!=). El resultat d’aquestes operacions és sempre un booleà. Vegeu-ne exemples:

var nombre1 = 3;
var nombre2 = 5;
resultat = nombre1 > nombre2; // resultat = false
resultat = nombre1 < nombre2; // resultat = true
 
nombre1 = 5;
nombre2 = 5;
resultat = nombre1 >= nombre2; // resultat = true
resultat = nombre1 <= nombre2; // resultat = true
resultat = nombre1 == nombre2; // resultat = true
resultat = nombre1 != nombre2; // resultat = false

Aquests operadors poden utilitzar-se també amb variables de tipus cadena de text i el seu funcionament és el següent: es compara lletra a lletra començant per l’esquerra fins que es troba una lletra diferent entre les dues variables. Per determinar si una lletra és major o menor que una altra, les majúscules es consideren menors que les minúscules i les primeres lletres de l’alfabet són menors que les últimes.

var text1 = "hola";
var text2 = "hola";
var text3 = "adeu";
 
resultat = text1 == text3; // resultat = false
resultat = text1 != text2; // resultat = false
resultat = text3 >= text2; // resultat = false

Un altre operador relacional és l’operador in, que retorna true si la propietat especificada com a primer operant es troba dins de l’objecte indicat com a segon operant.

nomPrimerOperant in nomObjecte

Els següents exemples mostren el seu ús:

var sisMesos = new Array("gener", "febrer", "març", "abril", "maig", "juny");
0 in sisMesos;        // retorna true
3 in sisMesos;        // retorna true
6 in sisMesos;        // retorna false
"gener" in sisMesos; // retorna false (cal especificar l'índex de l'//array//, no el valor de l'índex)
"length" in sisMesos; // retorna true (//length// es una propietat de l'//array//)
 
// Objectes predefinits
"PI" in Math;          // retorna true
var cadenaNova = new String("abril");
"length" in cadenaNova;  // retorna true
 
// Objectes creats
var ordinador = {marca: "Acer", model: "Aspire", data: 2017};
"marca" in ordinador;  // retorna true
"model" in ordinador; // retorna true

Concatenació: les cadenes de caràcters poden unir-se mitjançant l’operador de concatenació, expressat amb el símbol +, el qual retorna una nova cadena de caràcters formada per les dues cadenes concatenades. No s’ha de confondre amb l’operador + de la suma de les variables de tipus numèric.

var cadena1 = "Hello ";   // Noteu que l'espai al final de la cadena forma part d'ella, com un caràcter més.
var cadena2 = "World!";
var resultat;
 
resultat = cadena1 + cadena2;  // resultat ="Hello World!"

També es pot expressar l’anterior concatenació de la següent manera:

var cadena1 = "Hello ";   // Noteu que l'espai al final de la cadena forma part d'ella, com un caràcter més.
var cadena2 = "World!";
 
cadena1 += cadena2;  // Ara cadena1 val "Hello World!".

Compte! Si realitzeu la següent operació:

var cadena = "cadena";
var resultat;
 
var resultat = cadena + 1;

El resultat que retorna és cadena1, és a dir, retorna una cadena composta pel mot cadena i el nombre 1.

Typeof: aquest operador retorna una cadena de caràcters indicant el tipus de l’operant evaluat. Vegeu els següents exemples:

var laMevaFuncio = new Function("5 + 2");
var forma = "rodona";
var mida = 1;
var avui = new Date();
 
//Utilitzant 'typeof' es retorna:
typeof laMevaFuncio;   // retorna "function"
typeof forma;       // retorna "string"
typeof mida;       // retorna "number"
typeof avui;         // retorna "object"
typeof noExisteix;    // retorna "undefined"
 
//Amb les paraules 'clau', 'true' i 'null' retorna:
typeof true;    // retorna "boolean"
typeof null;    // retorna "object"

Amb nombres o cadenes de caràcters, retorna:

typeof 63;            // retorna "number"
typeof 'Hello world'; // retorna "string"
 
/*En cas que s'utilitzi com a operant una propietat, 
l'operador 'typeof' retorna el tipus d'aquesta propietat:*/
typeof document.lastModified; // retorna "string"
typeof window.length;         // retorna "number"
typeof Math.LN2;              // retorna "number"
 
 
//Amb mètodes i funcions retorna:
typeof blur;        // retorna "function"
typeof eval;        // retorna "function"
typeof parseInt;    // retorna "function"
typeof shape.split; // retorna "function"
 
//En objectes predefinits retorna:
typeof Date;        // retorna "function"
typeof Function;    // retorna "function"
typeof Math;        // retorna "object"
typeof Option;      // retorna "function"
typeof String;      // retorna "function"

Operador condicional (ternari): és l’únic operador de JavaScript que necessita tres operants. L’operador assigna un dels dos valors, segons una condició:

condició ? valor1 : valor2

Si la condició es certa, és a dir, true, l’operador pren el valor1 i si no, pren el valor2:

var estat = (edat >= 18) ? "adult" : "menor";

Aquesta sentència assigna el valor adult a la variable estat si l’edat és major o igual a 18, i si no assigna el valor menor.

Condicionals

Una sentència condicional és un conjunt de comandes que s’executen si una, o diverses condicions, es compleix, és a dir, si és true.

Estructura if / if…else

S’utilitza per comprovar si una condició lògica és verdadera.

Cal no confondre el símbol = de l’assignació amb el símbol == de la comparació. Aquesta confusió dona lloc a molts errors de programació.

La seva sintaxi és:

if(condició) {
  ...
}

Si la condició es compleix, és a dir, si el seu valor és true, aleshores s’executen les instruccions que apareixen dins de { … }. Si, pel contrari, el seu valor és false, se salta aquestes instruccions i continua amb l’execució del programa.

var mostrarMissatge = true;
 
if(mostrarMissatge) {
  alert("Hello Wolrd!");
}
/* En una condició escriure només el nom de la variable, 
és el mateix que escriure nom_de_la_variable == true. */

Les condicions poden combinar diferents operadors lògics i relacionals:

/* Els operadors AND i OR permeten encadenar diverses
condicions simples per programar condicions
més complexes. */
 
var mostrat = false;
var usuariPermetMissatges = true;
 
if(!mostrat && usuariPermetMissatges) {
  alert("Es tracta del primer cop que es mostra el missatge.");
}

En aquest exemple, la condició a avaluar està formada per una operació AND sobre dues variables. Al seu torn, a la primera variable se li aplica l’operador de negació (!). Com que el valor de mostrat és inicialitzat a false, el valor !mostrat seria true. A més, com que la variable usuariPermetMissatges és inicialitzada a true, el resultat de !mostrat && usuariPermetMissatges seria igual a true && true, de manera que el resultat final de la condició if seria true i, per tant, s’executen les instruccions del bloc if.

L’estructura if pot ser més complexa i expressar que, si és compleix una condició, s’ha de fer de tal manera, o que si no es compleix, s’ha de fer de tal altra amnera. Això, expressat en codi, és:

if(condició) {
  ...
}
else {
  ...
}

En el següent exemple es vol comprovar si el valor de la variable edat és més gran o igual que el valor numèric 18. Si és el cas i la condició d‘if es compleix, s’executaran les seves instruccions i es mostrarà el missatge: “Ets major d’edat”. No obstant això, si el valor de la variable edat no és igual o més gran que 18, la condició d‘if no es compliria, de manera que automàticament s’executarien les instruccions del bloc else i, per tant, es mostraria el missatge: “Encara ets menor d’edat”.

var edat = 18;
 
if(edat >= 18) {
  alert("Ets major d'edat.");
}
else {
  alert("Encara ets menor d'edat.");
}

Per últim, l’estructura if…else es pot encadenar per fer diverses comprovacions seguides:

No és obligatori que la combinació d’estructures if…else acabi amb la instrucció else, ja que pot acabar amb una instrucció de tipus else if.

if(edat < 12) {
  alert("Encara ets molt jove.");
}
else if(edat < 19) {
  alert("Ets un adolescent.");
}
else if(edat < 35) {
  alert("Et trobes a la flor de la vida.");
}
else {
  alert("Comença a pensar a cuidar-te una mica més.");
}

Estructura switch

Mitjançant l’estructura if…else es poden realitzar comprovacions múltiples i prendre decisions complexes. No obstant, si totes les condicions depenen de la mateixa variable, el codi resulta massa redundant i és preferible implementar l’estructura switch.

switch(variable) {
  case valor_1:
    ...
    break;
  case valor_2:
    ...
    break;
  ...
  case valor_n:
    ...
    break;
  default:
    ...
    break;
}

Per tant, si teniu la variable tipusDeFruita, segons el tipus de fruita escollit el programa realitza unes accions determinades.

El codi seria:

switch (tipusDeFruita) {
  case "Maduixes":
    ...
    break;
  case "Pomes":
    ...
    break;
  case "Plàtans":
    ...
    break;
  case "Cireres":
    ...
    break;
  default:
    console.log("Disculpeu, no tenim aquest tipus de fruta.");
}

Bucles

Estructura for

L’estructura for permet realitzar repeticions, anomenades bucles, d’una forma molt senzilla:

for(inicialització; condició; actualització) {
  ...
}

El funcionament és, mentre la condició indicada es vagi complint a cada volta del bucle, realitzar les instruccions definides en els claudàtors {…}.

La sintaxi del for inclou:

Inicialització: s’estableix la variable inicial que controla la repetició.
Condició: es realitza la comprovacó de si la condició lògica és vertadera.
Actualitazció: s’assigna el nou valor després de cada volta a les variables que controlen la repetició.

var mensaje = "Hola, soc dins d'un bucle.";
 
for(var i = 0; i < 5; i++) {
  alert(mensaje);
}

La part d’inicialització de bucle en l’exemple anterior consisteix en var i = 0, ja que crea la variable i la inicialitza a 0. La inicialització només es té en compte a la primera volta del bucle, no es considera en la resta de repeticions.

La condició definida és i < 5, és a dir que mentre i sigui més petit que el valor númeric 5, repeteix les instruccions definides.

Perquè la variable i s’incrementi, s’indica a la zona d’actualització i++. En aquest cas, la variable i s’incrementa en una unitat després de cada repetició fins arribar a 4, com indica la condició.

És molt comú entre els programadors, anomenar i la variable que controla els bucles for, ja que recorda la paraula ‘índex’. El fet que sigui tan curt estalvia temps i espai.

Estructura for…in

L’estructura for…in és una estructura derivada de l’estructura for, la qual implica l’ús d’objectes com pot ser un array.

La seva sintaxi és:

for(índex in array) {
  ...
}

Per recórrer tots els elements d’un array, s’utilitza l’estructura for…in. També es podria utilitzar l’estructura for d’aquesta manera:

var mesos = ["gener", "febrer", "març", "abril", "maig", "juny", "juliol", "agost", "setembre", "octubre", "novembre", "desembre"];
 
for(var i = 0; i <= mesos.length-1); i++ {
  alert(mesos[i]);
}

Mesos.length-1 defineix la mida dels element de l’array mesos mitjançant la propietat length, donant com a resultat 12. Cal, a més, restar-li una unitat, perquè l’índex de l’array s’inicia en 0, per tant, està comprès entre el 0 i l’11, ambdós inclosos. Si no se li resta aquesta unitat, el bucle sortiria fora del límit i donaria error.

Però la forma més eficient de recórrer un array és mitjançant un bucle for…in. L’exemple anterior quedaria així:

var mesos = ["gener", "febrer", "març", "abril", "maig", "juny", "juliol", "agost", "setembre", "octubre", "novembre", "desembre"];
 
for(i in mesos) {
  alert(mesos[i]);
}

Aquesta estructura evita haver d’indicar la inicialització i les condicions que s’establirien en el bucle for simple, evitant així haver d’indicar la mida de l’array, ja que funcionaria de la mateixa manera tot i que l’array modifiqués el nombre d’elements.

Estructura while

L’estructura while permet crear bucles que s’executin cap o més vegades, depenent de la condició indicada en el bucle.

La seva sintaxi és:

while(condició) {
  ...
}

El funcionament del bucle while és que mentre es compleixi la condició indicada, les instruccions de l’interior del bucle es repeteixen indefinidament. Aquesta condició s’avalua a cada volta del bucle per comprovar que la condició se segueix complint. Ara bé, si la condició no es compleix ni tan sols el primer cop, el bucle no s’executa. Les variables que controlen la condició es modifiquen dins del propi bucle. Pel contrari, la condició es compliria sempre i el bucle es repetiria sempre, en bucle infinit, un error força comú en els programadors novells.

El següent exemple utilitza el bucle while per sumar tots els nombres menors o iguals que un altre nombre:

var resultat = 0;
var nombre = 100;
var i = 0;
 
while(i <= nombre) {
  resultat += i;
  i++;
}
 
alert(resultat);

Aquest programa suma tots els nombres menors o iguals a 100, en aquest cas. Es calcula 0 + 1 + 2 + 3 + 4 + 5 + …, fins arribar a 100.

Aquest tipus de condició, com la de l’exemple anterior, es resol fàcilment amb un bucle while, tot i que també es pot resoldre amb un bucle for.

Estructura do…while

El bucle do…while és molt similar al bucle while. En aquest tipus de bucle, les instruccions definides s’executen almenys la primera vegada.

La sintaxi és:

És molt important recordar que després del } while(condició) s’ha d’afegir el punt i coma (;). Sol ser un error comú oblidar-se’l.

do {
  ...
} while(condició);

En aquest cas, la condició es comprova després de cada repetició.

Amb aquest bucle és molt fàcil calcular el factorial d’un nombre:

var resultat = 1;
var nombre = 5;
 
do {
  resultat *= nombre;  // resultat = resultat * nombre
  nombre--;
} while(nombre > 0);
 
alert(resultat);

El resultat es multiplica en cada repetició pel valor de la variable nombre. Al mateix temps, en cada repetició es disminueix el valor de la variable nombre.

Sentències break i continue

L’estructura de control for és molt senzilla d’utilitzar, però té l’inconvenient que el nombre de repeticions només es poden controlar mitjançant les variables definides a la zona d’actualització del bucle.

Les sentències break i continue permeten manipular el comportament normal dels bucles for per aturar el bucle o per saltar-se algunes repeticions. Concretament, la sentència break permet acabar de forma abrupta un bucle i la sentència continue permet saltar-se algunes repeticions del bucle.

El següent exemple mostra l’ús de la sentència break:

var cadena = "En un lloc de la Manxa el nom del qual no vull recordar...";
var lletres = cadena.split("");
var resultat ="";
 
for (i in lletres) {
  if (lletres[i] == 'a') {
    break;
  }
  else {
    resultat += lletres[i];
  }
}
alert (resultat);
// Mostra: "En un lloc de l"

Si el programa arriba a una instrucció de tipus break;, surt immediatament del bucle i continua executant la resta d’instruccions que es troben fora del bucle. En l’exemple anterior, es recorren totes les lletres d’una cadena de text i quan es troba amb la primera lletra “a”, s’atura l’execució del bucle.

La utilitat de break és acabar l’execució del bucle quan una variable pren un determinat valor o quan es compleix alguna condició.

De vegades el que es vol és saltar-se alguna repetició del bucle quan es donen algunes condicions. Seguint amb l’exemple anterior, perquè el text de sortida elimini totes les lletres “a” de la cadena de text original cal escriure:

var cadena = "En un lloc de la Manxa el nom del qual no vull recordar...";
var lletres = cadena.split ( "");
var resultat = "";
 
for (i in lletres) {
  if (lletres [i] == 'a') {
    continue;
  }
  else {
    resultat += lletres [i];
  }
}
alert (resultat);
// Mostra: "En un lloc de l Mnx el nom del qul no vull recordr..."

En aquest cas, quan es troba una lletra “a” no s’acaba el bucle, sinó que no s’executen les instruccions d’aquesta repetició i es passa directament a la següent repetició del bucle.

La utilitat del continue és que permet utilitzar el bucle for per filtrar els resultats en funció d’algunes condicions o quan el valor d’alguna variable coincideix amb un valor determinat.

Funcions

Una funció és una petita part d’un programa que descriu una seqüència d’ordres o instruccions que compleixen una tasca específica dins d’una aplicació més gran. Aquesta funció s’executa al ser cridada des del programa principal, per una altra funció o per ella mateixa (funció recurrent).

Les funcions han de tenir un nom únic per poder ser cridades, un tipus de dada per al retorn del resultat, una llista de paràmetres d’entrada i el codi a executar. Vegeu la figura:

Hi ha dos tipus de funcions: funcions de què disposa JavaScript i funcions desenvolupades per l’usuari, segons les necessitats de l’aplicació.

Creació de funcions

Quan es desenvolupa una aplicació complexa és habitual utilitzar moltes vegades les mateixes instruccions. Quan una sèrie d’instruccions es repeteixen una i altra vegada, es complica molt el codi font de l’aplicació:

Podeu coéixer més sobre les Funcions predefinides de JavaScript en els annexos d’aquesta unitat.

El codi de l’aplicació és molt més llarg, perquè moltes instruccions estan repetides.
Si es vol modificar alguna de les instruccions repetides, s’han de fer tantes modificacions com vegades s’hagi escrit aquesta instrucció. Això es converteix en una feina molt pesada i molt propensa a cometre errors.

Les funcions són la solució a tots aquests problemes, ja que permeten agrupar un conjunt d’instruccions per realitzar una tasca concreta i es poden reutilitzar fàcilment i tants cops com sigui necessari.

En el següent exemple se sumen dues xifres i es mostra un missatge amb el resultat. Aquestes instruccions es repeteixen una i altra vegada:

var resultat;
 
var nombre1 = 3;
var nombre2 = 5;
 
// Se sumen les xifres i es mostra el resultat.
resultat = nombre1 + nombre2;
alert ( "El resultat és" + resultat);
 
nombre1 = 10;
nombre2 = 7;
 
// Se sumen les xifres i es mostra el resultat.
resultat = nombre1 + nombre2;
alert ( "El resultat és" + resultat);
 
nombre1 = 5;
nombre2 = 8;
 
// Se sumen les xifres i es mostra el resultat.
resultat = numero1 + numero2;
alert ( "El resultat és" + resultat);
...

Tot i que és un exemple molt senzill, sembla evident que repetir les mateixes instruccions al llarg de tot el codi no és gaire recomanable. La solució que proposen les funcions consisteix a extreure les instruccions que es repeteixen i substituir-les per una crida a la funció:

var resultat;
 
var nombre1 = 3;
var nombre2 = 5;
 
/ * En aquest punt es crida la funció que suma
    2 xifres i mostra el resultat. * /
 
nombre1 = 10;
nombre2 = 7;
 
/ * En aquest punt es crida la funció que suma
    2 xifres i mostra el resultat. * /
 
nombre1 = 5;
nombre2 = 8;
 
/ * En aquest punt es crida la funció que suma
    2 xifres i mostra el resultat. * /
...

Per fer la crida d’aquesta funció, en primer lloc, s’ha de crear la funció bàsica amb les instruccions comunes. Les funcions en JavaScript es defineixen mitjançant la paraula reservada function seguida del nom de la funció.

La seva sintaxi és:

function nom_funcio(parametres) {
  ...
}

El nom de la funció s’utilitza per cridar aquesta funció quan sigui necessari i se li assigna un nom únic per poder utilitzar-la dins del codi. Després del nom de la funció, s’inclouen dos parèntesis que reben els paràmetres d’entrada de la funció. Dins dels claudàtors {…} s’inclouen totes les instruccions que pertanyen a la funció:

function suma_i_resultat (nombre1, nombre2) {
  resultat = nombre1 + nombre2;
  alert ( "El resultat és" + resultat);
}

Les variables que necessiten les funcions s’anomenen paràmetres o arguments d’entrada. Abans que pugui utilitzar-los, la funció ha d’indicar quants arguments necessita i quin és el nom de cada un. Aleshores, quan es realitza la crida a la funció, s’han d’incloure els valors d’aquesta funció, separant els arguments amb una coma (,). En l’exemple anterior, els paràmetres són les variables nombre1 i nombre2, que són les dues variables necessàries per fer l’operació de la suma que s’ha definit en el codi font de la funció.

Un cop creada la funció, des de qualsevol punt del codi pot ser cridada perquè s’executin les seves instruccions. La crida a la funció es realitza simplement indicant el seu nom, incloent els parèntesis del final, els paràmetres d’entrada i el caràcter per acabar la instrucció:

var resultat;
 
var numero1 = 3;
var numero2 = 5;
 
suma_i_resultat (nombre1, nombre2);
 
numero1 = 10;
numero2 = 7;
 
suma_i_resultat (nombre1, nombre2);
 
numero1 = 5;
numero2 = 8;
 
suma_i_resultat (nombre1, nombre2);
...

A l’hora d’utilitzar les funcions, s’ha de tenir en compte:

Encara que gairebé sempre s’utilitzen variables per passar les dades a una funció, hi ha la possibilitat d’utilitzar directament valors literals: suma_i_resultat (3, 5);
El nombre d’arguments que passa a una funció ha de ser el mateix que el nombre d’arguments que ha indicat la funció. No obstant això, JavaScript no mostra cap error si es passen més o menys arguments dels necessaris.
L’ordre dels arguments és fonamental, ja que la primera dada que s’indica en la crida és el primer valor que s’espera la funció. El segon valor indicat és el segon valor que s’espera la funció, i així successivament.
Es pot utilitzar un nombre il·limitat d’arguments, encara que si el nombre és molt gran, es complica en excés la crida a la funció.
No és obligatori que coincideixi el nom dels arguments que utilitza la funció i el nom dels arguments que se li passen.

Les funcions no només poden rebre variables i dades, sinó que també poden retornar els valors que han calculat. Per retornar els valors de la funció, s’utilitza la paraula reservada return. Tot i que les funcions poden retornar valors de qualsevol tipus, només poden retornar un valor cada vegada que s’executen. Quan la funció arriba al return, es torna el valor indicat i finalitza l’execució de la funció. Per tant, totes les instruccions que s’incloguin després d’un return s’ignoren. La instrucció return sol ser l’última de la majoria de funcions.

function calcularPreuTotal (preu) {
  var impostos = 1.16;
  var despesesEnviament = 10;
  var preuTotal = (preu * impostos) + despesesEnviament;
  return preuTotal;
}
 
var preuTotal = calcularPreuTotal (23.34);

Com que la funció retorna un valor, en el punt en el qual es realitza la crida s’ha d’indicar el nom de la variable on es guardarà el valor retornat: var preuTotal = calcularPreuTotal (23.34);.

Si no s’indica el nom de cap variable, JavaScript no mostra cap error i el valor retornat per la funció simplement es perd i, per tant, no s’utilitza en la resta del programa.

En aquest cas, tampoc és obligatori que el nom de la variable retornada per la funció coincideixi amb el nom de la variable en la qual s’emmagatzema aquest valor.

Esdeveniments

Els esdeveniments fan possible que els usuaris transmetin informació a les aplicacions web. JavaScript defineix nombrosos esdeveniments que permeten una interacció completa entre l’usuari i aquestes aplicacions. La pulsació d’una tecla constitueix un esdeveniment, així com punxar o moure el ratolí, seleccionar un element d’un formulari, redimensionar la finestra del navegador, etc.

JavaScript permet assignar una funció a cada un dels esdeveniments. D’aquesta manera, quan es produeix qualsevol esdeveniment, JavaScript executa la seva funció associada. Aquest tipus de funcions s’anomenen event handlers en anglès i solen traduir-se per controladors d’esdeveniments.

A la taula taula es descriuen els tipus d’esdeveniments dels quals es disposa en JavaScript:

Taula Taula d’atributs d’esdeveniments

Atribut	Descripció	Elements que poden utilitzar-lo
`onblur`	Deseleccionar l’element.	`<button>`, `<input>`, `<label>`, `<select>`, `<textarea>`, `<body>`
`onchange`	Deseleccionar un element modificat.	`<input>`, `<select>`, `<textarea>`
`onclick`	Fer clic amb el ratolí.	Tots els elements
`ondblclick`	Fer dos clics amb el ratolí.	Tots els elements
`onfocus`	Seleccionar un element.	<button>, <input>, <label>, <select>, <textarea>, <body>
`onkeydown`	Prémer una tecla (sense deixar-la anar).	Elements de formulari i `<body>`
`onkeypress`	Prémer una tecla.	Elements de formulari i `<body>`
`onkeyup`	Deixar anar una tecla premuda.	Elements de formulari i `<body>`
`onload`	La pàgina s’ha carregat completament.	<body>
`onmousedown`	Prémer (sense deixar anar) un botó del ratolí.	Tots els elements
`onmousemove`	Moure el ratolí.	Tots els elements
`onmouseout`	El ratolí “surt” de l’element (passa per sobre d’un altre element).	Tots els elements
`onmouseover`	El ratolí “entra” en l’element (passa per sobre d’un altre element).	Tots els elements
`onmouseup`	Deixar anar el botó premut en el ratolí.	Tots els elements
`onreset`	Inicialitzar el formulari (esborrar totes les dades).	`<form`>
`onresize`	Modificar la mida de la finestra del navegador.	`<body>`
`onselect`	Seleccionar un text.	`<input>`, `<textarea>`
`onsubmit`	Enviar el formulari.	`<form>`
`onunload`	Abandonar la pàgina (per exemple, en tancar el navegador).	`<body>`

Un esdeveniment de JavaScript per si mateix no té utilitat, ja que s’ha d’associar a funcions o codi JavaScript. D’aquesta manera, quan es produeix un esdeveniment s’executa el codi indicat, perquè l’aplicació pugui respondre davant l’esdeveniment que es produeix durant la seva execució.

Les funcions o codi JavaScript que es defineixen per a cada esdeveniment es denominen gestors d’esdeveniments. Hi ha diverses formes d’indicar els controladors:

Gestor com a atribut dels elements HTML
Gestor com a funcions JavaScript externes
Gestor d’esdeveniments com a funcions externes
Gestor “semàntic”

El gestor com a atribut dels elements HTML es tracta del mètode més senzill i alhora menys professional d’indicar el codi JavaScript que s’ha d’executar quan es produeix un esdeveniment. En aquest cas, el codi s’inclou en un atribut del propi element HTML. En el següent exemple, es vol mostrar un missatge quan l’usuari faci clic amb el ratolí sobre un botó:

<input type="button" value="Fes clic i veuràs" onclick="alert('Gràcies per punxar');" />

En aquest mètode, es defineix l’atribut HTML amb el mateix nom que l’esdeveniment que es vol utilitzar. L’exemple anterior només vol controlar l’esdeveniment de fer clic amb el ratolí, el nom és onclick. Així, l’element HTML per al qual es vol definir aquest esdeveniment ha d’incloure un atribut anomenat onclick.

El contingut de l’atribut és una cadena de text que conté totes les instruccions JavaScript que s’executen quan es produeix l’esdeveniment. En aquest exemple, el codi JavaScript és molt senzill (alert(‘Gràcies per punxar’);), ja que només es tracta de mostrar un missatge.

En el gestor com a funcions JavaScript externes JavaScript defineix una variable especial anomenada this, la qual es crea automàticament i que s’empra en algunes tècniques avançades de programació. En els esdeveniments es pot utilitzar la variable this per referir-se al element HTML que ha provocat l’esdeveniment.

En aquest exemple, on l’usuari passa el ratolí per sobre del <div>, el color de la vora es mostra de color negre. Quan el ratolí surt del <div>, es torna a mostrar la vora amb el color gris clar original.

L’element <div> original:

<div id="continguts" style="width: 150px; height: 60px; border: thin solid silver">
  <!-- secció de continguts -->
</div>

Si no s’utilitzés la variable this, el codi necessari per modificar el color de les vores seria el següent:

<div id="continguts" style="width: 150px; height: 60px; border: thin solid silver" onMouseOver="document.getElementById('continguts').style.borderColor='black';" onmouseout="document.getElementById('continguts').style.borderColor='silver';">
  <!-- secció de continguts -->
</div>

El codi anterior és massa llarg i massa propens a cometre errors. Però si en lloc d’utilizar l’anterior codi, s’utilitza la variable this, l’exemple anterior es pot reescriure de la següent manera:

<div id="continguts" style="width: 150px; height: 60px; border: thin solid silver" onMouseOver="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';">
  <!-- secció de continguts -->
</ Div>

El codi anterior és molt més compacte, fàcil de llegir i d’escriure i segueix funcionant correctament encara que es modifiqui el valor de l’atribut id de l’element <div>.

En el gestor d’esdeveniments com a funcions externes si es realitzen aplicacions complexes, com ara la validació d’un formulari, és aconsellable agrupar tot el codi JavaScript en una funció externa i cridar aquesta funció des de l’element HTML.

Seguim amb l’exemple anterior, que mostra un missatge en clicar sobre un botó:

<input type="button" value="Fes clic i veuràs" onclick="alert('Gràcies per punxar');" />

Utilitzant funcions externes es pot transformar en:

function mostrarMissatge() {
  alert ('Gràcies per punxar');
}

I ara, en el codi HTML:

<input type="button" value="Fes clic i veuràs" onclick="mostrarMissatge()" />

Aquesta tècnica consisteix a extreure totes les instruccions de JavaScript i agrupar-les en una funció externa. Un cop definida la funció, en l’atribut de l’element HTML s’inclou el nom de la funció, per indicar que és la funció que s’executa quan es produeix l’esdeveniment.

La crida a la funció es realitza de la forma habitual, indicant el seu nom seguit dels parèntesis i, de forma opcional, incloent tots els arguments i paràmetres que es necessitin.

El principal inconvenient d’aquest mètode és que en les funcions externes no es pot seguir utilitzant la variable this i, per tant, cal passar aquesta variable com a paràmetre a la funció:

function ressalta (element) {
  switch (element.style.borderColor) {
    case 'silver':
    case 'silver silver silver silver':
    case '#c0c0c0':
      element.style.borderColor = 'black';
      break;
    case 'black':
    case 'black black black black':
    case '#000000':
      element.style.borderColor = 'silver';
      break;
  }
}

I ara, en el codi HTML:

<div style="width: 150px; height: 60px; border: thin solid silver" onMouseOver="ressalta(this)" onmouseout="ressalta(this)">
  <!-- secció de continguts -->
</div>

En l’exemple anterior, la funció externa és cridada amb el paràmetre this, que dins de la funció s’anomena element. El gestor “semàntic” és una evolució del mètode de les funcions externes, ja que es basa a utilitzar les propietats DOM dels elements HTML per assignar totes les funcions externes que actuen de controladors d’esdeveniments.

El següent exemple:

<input id="clicable" type="button" value="Fes clic i veuràs" onclick="alert('Gràcies per punxar');" />

Es pot transformar en:

// Funció externa
function mostraMissatge () {
  alert ( 'Gràcies per punxar.');
}
 
// Assigna la funció externa a l'element
document.getElementById ( "pinchable"). onclick = mostrarMissatge;

En el codi HTML:

// Element XHTML
<input id="clicable" type="button" value="Fes clic i veuràs" />

La tècnica dels manejadors semàntics consisteix a:

Assignar un identificador únic a l’element HTML mitjançant l’atribut id.
Crear una funció de JavaScript encarregada de gestionar l’esdeveniment.
Assignar la funció externa a l’esdeveniment corresponent a l’element desitjat.

L’últim pas és la clau d’aquesta tècnica. En primer lloc, s’obté l’element al qual es vol associar la funció externa:

document.getElementById("clicable");

A continuació s’utilitza una propietat de l’element amb el mateix nom que l’esdeveniment que es vol utilitzar. En aquest cas, la propietat és onclick:

document.getElementById("clicable").onclick = ...

Finalment, s’assigna la funció externa mitjançant el seu nom sense parèntesis. El més important, i la causa més comuna d’errors, és indicar només el nom de la funció, és a dir, prescindir dels parèntesis en assignar la funció:

document.getElementById("clicable"). onclick = mostrarMissatge;

Si s’afegeixen els parèntesis després del nom de la funció, en realitat s’està executant la funció i guardant el valor retornat per la funció en la propietat onclick de l’element.

// Assigna una funció externa a un esdeveniment d'un element.
document.getElementById("clicable").onclick = mostrarMissatge;
 
// Executa una funció i guarda el seu resultat en una propietat d'un element.
document.getElementById("clicable").onclick = mostrarMissatge();

L’únic inconvenient d’aquest mètode és que la pàgina s’ha de carregar completament abans que es puguin utilitzar les funcions DOM que assignen els controladors als elements HTML. Una de les maneres més senzilles d’assegurar que el codi s’executarà després que la pàgina es carregui completament és utilitzar l’esdeveniment onload:

function ressalta () {
  // JavaScript
}
 
window.onload = function () {
  var formulari = document.getElementById("formulari");
  var campsInput = formulari.getElementsByTagName ("input");
 
  for (var i = 0; i < campsInput.length; i ++) {
    if (campsInput[i].type == "text") {
      campsInput[i].onclick = ressalta;
    }
  }
}

En l’anterior exemple, s’afegeixen esdeveniments als elements de tipus input=“text” d’un formulari complex.