HTML: The Living Standard - Edition for Web Developers | NEXT chapters | ||||
Ecco un documento HTML base:
I documenti HTML sono composti da vari elementi ( o oggetti ), disposti ad albero, e da parti testuali. Ciascun elemento è caratterizzato, nel file sorgente, da una TAG ( etichetta ) di apertura, quale:
e da una TAG di chiusura, quale:
Alcune TAG di apertura e di chiusura possono, in determinati casi, venire omesse, perchè sottointese da altre TAG. Le TAG devono essere annidate, in modo tale da impedire che un elemento si sovrapponga ad un altro:
Questa specifica definisce un gruppo di elementi che possono essere usati in HTML e le regole di annidamento di un elemento in un altro. Ogni elemento può possedere degli attributi, che controllano il suo funzionamento. Nell'esempio seguente, abbiamo un hyperlink, creato con l'elemento a ed il suo attributo href:
Gli attributi vengono messi all'interno della TAG di apertura di un elemento e sono composti da una coppia nome valore, divisa da un carattere di uguale ( = ). Il valore dell'attributo può restare unquoted ( non compreso tra virgolette ), se non contiene caratteri spazio o caratteri:
Altrimenti, il valore dell'attributo deve essere compreso tra virgolette, singole o doppie. Se il valore dell'attributo è una stringa testuale vuota, la coppia nome/valore può essere omessa:
Gli User Agent ( browser ) HTML analizzano la sequenza di marcatori ( i simboli che identificano gli elementi HTML ) e la trasformano in una struttura ad albero DOM ( Document Object Model ). Una struttura ad albero DOM è una rappresentazione del documento salvata nella sola memoria di sistema. Una struttura ad albero DOM contiene diversi tipi di nodi, in particolare i nodi:
e, in alcuni casi, anche i nodi:
Ecco come può essere reinterpretato il codice HTML pubblicato come esempio, in termini di struttura ad albero DOM:
L'elemento root ( radice ) di questo albero è l'elemento html. E questo vale per tutti i documenti HTML. L'elemento html contiene due elementi, head e body, e un nodo Text tra i due elementi. Ci sono molti più nodi Text di quanto ci si potrebbe aspettare, nell'albero DOM, perchè il file sorgente contiene molti spazi ( qui rappresentati con ␣ ) ed interruzioni di linea ( ⏎ ), che, nel documento DOM appaiono come nodi Text. Tuttavia, per ragioni storiche, non tutti gli spazi e tutte le interruzioni di linea presenti nel documento originale appaiono nel documento DOM. In particolare, gli spazi posti prima della TAG di apertura dell'oggetto head vengono silenziosamente lasciati cadere, mentre tutti gli spazi presenti dopo la TAG di chiusura dell'oggetto body vengono spostati alla fine del body. L'elemento head contiene un elemento title, il quale contiene un nodo Text, contenente il testo "Sample page". In modo simile, l'elemento body contiene un elemento h1, un elemento p ed un commento. Questa struttura DOM ad albero può essere manipolata da script contenuti nella pagina. Gli script ( normalmente, in Javascript ) sono piccoli programmi che possono essere incorporati ( embedded ), nella pagina, usando l'elemento script, oppure gli event handler content attribute. Per esempio, ecco un modulo web ( form ) con uno script che imposta il valore dell'elemento output del modulo web alla stringa testuale "Hello World":
"Javascript è un linguaggio di programmazione che di per sè non ha nulla a che vedere con i documenti xml o html. Esso però "entra in contatto" con il documento per mezzo del DOM, che è quindi una interfaccia per programmare l'applicazione javascript che vuole agire sul documento. Tutto ciò che è contenuto nel documento ha il suo corrispettivo nel DOM, e una modifica programmata tramite DOM si riflette in una modifica al documento. Javascript può quindi modificare il documento attraverso i metodi del DOM" ( Introduzione al DOM ( Document Object Model ), by Mozilla Developer Network ). Nella struttura DOM ad albero, ciascun elemento è rappresentato da un oggetto. Una serie di API ( Application-Programming Interface ) permette al programmatore di accedere a questi oggetti e di manipolarli. Per esempio, un link ( l'elemento a, già visto nell'esempio precedente ) può vedere modificato il proprio attributo href in più modi:
Nella prima riga, selezioniamo il primo link presente nel documento. È un link che non contiene un attributo name. Quindi, il solo modo che abbiamo di riconoscerlo è individuarne la posizione, all'interno del documento, rispetto agli altri elementi link. Nella seconda riga, assegnamo un nuovo valore ( sample.html ) all'attributo href ( URL di destinazione del link ) dell'elemento link appena selezionato. Nella terza riga, invece, ne modifichiamo solo lo schema, assegnando un nuovo valore all'attributo protocol. Nella quarta riga, infine, eseguiamo il metodo ( funzione ) setAttribute per impostare direttamente il nuovo valore dell'attributo href. Visto che le strutture DOM ad albero sono usate per rappresentare i documenti HTML, in fase di analisi e presentazione da parte delle varie implementazioni ( in particolare, le implementazioni interattive, quali i browser web ), la presente documentazione è principalmente espressa in termini DOM, piuttosto che in termini di marcatori ( markup ) HTML, visti sopra. Un documento HTML rappresenta una descrizione, indipendente dal media utilizzato, di un contenuto interattivo. I documenti HTML possono essere rappresentati su uno schermo, oppure attraverso un sintetizzatore vocale, oppure su un display braille. Per specificare come questa rappresentazione debba essere eseguita, gli autori possono utilizzare un linguaggio di programmazione riservato allo stile dei documenti ( font, colori, spaziature ), quale CSS. Nel prossimo esempio, la pagina web è stata resa in giallo su sfondo blu, proprio utilizzando i CSS:
Come eseguire codice Javascrit in Firefox Questo paragrafo non fa parte della traduzione. Gli esempi riportati in questo articolo sono scritti in codice Javascript. Il codice andrebbe scritto all'interno di una pagina web. Per poterne verificare il buon funzionamento, la pagina andrebbe salvata e rilanciata con il browser. Quando inserita in una pagina web ( HTML ), il codice deve essere racchiuso tra le due TAG script di apertura e di chiusura, per distinguerlo dal normale codice HTML e per invocare l'interprete Javascript:
Se inserite queste righe all'interno di una pagina HTML, salvate la pagina e la rilanciate con il browser, vi apparirà, durante il caricamento della pagina, una finestrella pop up, con scritto "Hello World" ( sempre che l'interprete Javascript non sia disattivato ). Per velocizzare la fase di test sul codice Javascript, Firefox mette a disposizione degli sviluppatori due strumenti utilissimi, che, oltre ad eseguire il codice Javascript, sempre all'interno del contesto di una pagina web e senza alcuna necessità di comprenderlo tra le due TAG script, hanno una serie di funzionalità che permettono di identificare, gestire e correggere eventuali errori. Questi due strumenti sono: L'elemento script permette agli autori di includere script dinamici e blocchi di dati all'interno dei loro docunenti. L'elemento script non rappresenta alcun contenuto per l'utente. Quando usato per includere script dinamici, gli script possono essere incorporati inline oppure importati da un file esterno, utilizzando l'attributo src dell'elemento script. Se il linguaggio di programmazione utilizzato non è descritto dalla stringa:
diventa necessario specificare l'attributo type.
L'attributo type specifica il linguaggio di programmazione in cui è stato scritto lo script o il formato dei dati. Se l'attributo è presente, il suo valore deve essere un tipo di dati MIME valido ( The script element ). Il termine MIME type è usato per riferirsi a qualcosa che, a volte, è chiamato Internet media type, nella letteratura dei protocolli. Il termine media type, in questa specifica, viene usato per riferirsi al tipo di media utilizzato, così come utilizzato nelle specifiche CSS. Una stringa è un MIME type valido se è conforme alla regola definita nella sezione 3.7 "Media Types" della RFC 2616 ... La lista seguente elenca i MIME type che gli User Agent ( browser ) devono riconoscere ed i linguaggi a cui si riferiscono:
Il parametro charset non deve essere specificato. Il valore di default dell'attributo type, utilizzato quando l'attributo è assente, è:
Qualsiasi linguaggio venga specificato nell'attributo type, il contenuto dell'elemento script deve essere conforme alle specifiche del linguaggio stesso ( Valid MIME type ). L'attributo src, quando specificato, contiene l'indirizzo di uno script esterno da usare. Il valore dell'attributo deve essere una URL valida e non vuota, potenzialmente circondata da spazi, che identifichi una risorsa ( file ) del tipo previsto dall'attributo type, se presente, oppure del tipo:
se assente. Per risorsa si intende uno script, scritto in un dato linguaggio, alle specifiche del quale la risorsa si adegua. Un esempio dell'utilizzo dell'attributo src:
L'attributo charset contiene la codifica dei caratteri ( encoding ) utilizzata nello script esterno. Questo attributo non deve essere specificato nel caso non fosse presente l'attributo src. Nel caso fosse presente, all'attributo charset verrà assegnato un valore ASCII case-insensitive ( un valore ASCII, scritto in caratteri maiuscoli o minuscoli ) che identifichi un set di caratteri:
che coincida con il set di caratteri contenuto nel parametro charset dell'header Content-Type del file esterno, se presente. Gli attributi async e defer sono attributi booleani ( true / false ) che indicano la modalità di esecuzione dello script. Gli attributi async e defer non devono essere specificati senza l'attributo src. Se l'attributo async è presente, lo script verrà eseguito in modo asincrono, non appena sarà disponibile, anche contemporaneamente all'analisi ( parsing ) della pagina. Se l'attributo async non è presente ed è presente l'attributo defer, lo script verrà eseguito non appena terminata l'analisi ( parsing ) della pagina. Se nessuno dei due attributi è presente, lo script verrà scaricato ed eseguito immediatamente, prima ancora che lo User Agent ( browser ) continui l'analisi ( parsing ) della pagina:
L'attributo defer può essere specificato anche in presenza dell'attributo async, per permettere ai vecchi browser, che supportano defer, ma non async, di assumere la procedura defer, invece della procedura di default, che consiste nel blocco sincrono dello script. Quando usato per contenere blocchi di dati ( invece di uno script ), l'elemento script deve trovarsi inline ( non può esserci alcun attributo src ), mentre il formato dei dati deve essere specificato nell'attributo type ed il contenuto dell'elemento script dve essere conforme al formato specificato. In questo esempio, vengono usati due elementi script. Uno contiene uno script esterno, mentre l'altro include qualche dato:
L'esempio successivo, invece, mostra come l'elemento script possa essere utilizzato per definire una funzione che verrà poi utilizzata da altre parti del documento:
Questo esempio, inoltre, mostra anche come l'elemento script possa essere utilizzato per invocare la funzione mentre è in corso l'analisi del documento, in questo caso per inizializzare l'output del modulo ( form ):
Ed ecco il risultato: ( The script element ). Questo esempio, oltre ad illustrare molto bene la possibilità di interagire con un documento HTML, utilizzando un linguaggio script ( in questo caso, Javascript ), rappresenta l'enorme limitazione dei linguaggi scripting in generale: se l'esecuzione degli script è bloccata, nel browser dell'utente, cosa accade? Nulla. Semplicemente, lo script non viene eseguito! Perchè gli script vengono eseguiti dal browser dell'utente ( client side script ). Difficile, quindi, immaginare cosa possa apparire, in realtà, nel browser di ciascuno dei nostri utenti internet. Questa consapevolezza dovrebbe convincere un programmatore di pagine web ad utilizzare i linguaggi scripting solo per funzioni non essenziali. Nel nostro esempio, anche se Javascript non funzionasse correttamente, sarebbe sufficiente trasmettere ad uno script lato server i dati selezionati dall'utente, così da poter fare eseguire la stessa operazione di somma dallo script eseguito sul server. Gli event handler content attribute Esistono vari meccanismi che permettono di eseguire un programma, all'interno del contesto di una pagina web o di un documento. Uno di questi meccanismi è l'elemento script. Un altro è il meccanismo dei cosiddetti gestori di evento ( Event handler ). Un documento web, quando non è un oggetto statico ed immutabile, è un'entità con la quale interagisce l'utente. Questo significa che un documento web deve poter reagire a determinati input inviati dall'utente. Una pagina web, in questo caso, è paragonabile ad un programma, la cui esecuzione viene determinata da eventi esterni. Se l'utente, per esempio, preme un bottone di un modulo web ( form ), il modulo genera un evento Click ed invoca l'esecuzione di una funzione ( o procedura ) che sia in grado di gestirlo. Abbiamo già visto, nel nostro esempio precedente, due differenti gestori di evento:
In questa sola riga di codice HTML, sono presenti due gestori di evento, ciascuno accoppiato alla relativa funzione da eseguire:
Nel primo caso, quando l'utente dovesse premere l'eventuale bottone " Invia " del modulo ( che nel nostro esempio è stato omesso ), Javascript non eseguirebbe nulla, poichè la funzione richiamata dal gestore di evento chiamato onSubmit altro non è che la chiusura ( return ) della funzione stessa. Una funzione, infatti, esegue una serie di operazioni, alla fine delle quali invia, all'entità dalla quale è stata invocata ( il gestore di evento onSubmit, nel nostro caso ), un messaggio booleano ( true / false ) che indica se l'esecuzione della funzione è andata a buon fine o meno. Nel secondo caso, invece, la funzione calculate, dichiarata precedentemente all'interno dell'elemento script, viene invocata dal gestore di evento chiamato onChange, che viene, a sua volta, invocato da una qualsiasi modifica apportata dall'utente ad uno qualsiasi degli elementi del modulo ( form ). Un gestore di evento, quindi, resta in ascolto, al fine di intercettare ( senza catturarlo ) uno specifico evento, accaduto all'oggetto al quale il gestore di evento è associato. Molti oggetti HTML sono dotati di specifici gestori di evento. Un gestore di evento ( Event handler ) ha un nome, che inizia sempre con on, seguito dal nome dell'evento che deve gestire:
|
|||||
HTML: The Living Standard - Edition for Web Developers | Disclaimer: this link points to content provided by other sites. |