Da WIKI CoderDojo Firenze.

<parsererror>Errore interpretazione XML: tag corrispettivo mancante. Atteso: </table>. Indirizzo: http://kata.coderdojo.it/wiki/index.php?title=Utente:Robi&action=edit Riga numero 26, colonna 501:<sourcetext></pre><pre> </body></pre><pre></html></pre><p></p><p>Esaminiamo il codice soprastante. Chi è già venuto al Coder Dojo avrà già riconosciuto tutti i passaggi, ma mi sembra giusto spenderci una parola lo stesso.</p><p>Una parte delle righe riguarda codice ‘obbligatorio’, ossia raccomandato del W3C, che però non riveste alcun interesse per noi in questo momento; leviamocelo di torno in due parole.</p><center><table class=" cke_show_border" width="643" cellpadding="4" cellspacing="0"></colgroup><tbody><tr><th><p>Codice</p></th><th><p>Spiegazioni</p></th></tr><tr><td><p><!DOCTYPE html></p></td><td><p>dichiaro che userò la versione HTML nota come HTML5.</p></td></tr><tr><td><p><html lang="it-IT"></p></td><td><p>inizio del codice HTML e dichiarazione che userò la lingua italiana.</p></td></tr><tr><td><p><head></p></td><td><p>inizio delle istruzioni per il browser, ossia quelle che <strong>non</strong> riguardano ciò che il browser deve mostrare a chi legge la pagina web, ma quelle che deve sapere per poterla mostrare nella maniera corretta.</p></td></tr><tr><td><p><meta charset="utf-8"></p></td><td><p>dichiaro che userò la codifica caratteri UTF-8. L’argomento non è difficile, ma lunghissimo e qui non c’è spazio per affrontarlo. Basti sapere che è <em>caldissimamente</em> raccomandato di scrivere questo rigo, e di scriverlo in <strong>questo</strong> punto!, se si dichiara che si userà HTML5. Nei file HTML che non sono scritti in HTML5 di solito si legge la stessa cosa in un’altra forma: <meta content="text/html; charset=utf-8" http-equiv="Content-Type"></p></td></tr><tr><td><p><title>JavaScript e HTML5 - un pulsante che non fa quasi niente</title></p></td><td><p>la scritta che comparirà sulla finestra del browser.</p></td></tr><tr><td><p><!-- … --></p></td><td><p>questi sono commenti che servono a rendere più chiaro il codice a chi lo legge e non hanno alcun riflesso sulla pagina web.</p></td></tr><tr><td><p><script type="text/javascript"></p></td><td><p>inizio del codice Javascipt. Questo lo guardiamo tutto insieme dopo.</p></td></tr><tr><td><p></script></p></td><td><p>fine del codice Javascript (vedi rigo precedente).</p></td></tr><tr><td><p></head></p></td><td><p>fine delle istruzioni per il browser (vedi qualche rigo sopra).</p></td></tr><tr><td><p><body></p></td><td><p>inizio della parte che viene mostrata a chi visita la pagina web.</p></td></tr><tr><td><p><div></p></td><td><p>serve a creare un blocco ordinato di righe e a distinguerle da quelle contenute in una altro blocco <div> … </div></p></td></tr><tr><td><p><label for="cambiaTesto">Pulsante che modificher&agrave; il testo sottostante --></label></p></td><td><p>Questa fa comparire la scritta “Pulsante che modificherà; il testo sottostante”.</p></td></tr><tr><td><p><input type="button" id="cambiaTesto" value="Premimi per cambiare il testo" onclick="cambioTesto();" /></p></td><td><p>questa fa comparire il pulsante e definisce anche delle istruzioni su quello che il pulsante deve fare. Esamineremo questa istruzione insieme al blocco Javascript poco sotto.</p></td></tr><tr><td><p></div></p></td><td><p>fine del blocco ordinato di istruzioni.</p></td></tr><tr><td><p><p id="testoDaCambiare">Il testo contenuto in questo paragrafo cambier&agrave; quando sar&agrave; premuto il pulsante soprastante.</p></p></td><td><p>Questa fa comparire la scritta “Il testo contenuto in questo paragrafo cambierà quando sarà premuto il pulsante soprastante.”</p></td></tr><tr><td><p></body></p></td><td><p>fine della parte che viene mostrata a chi visita la pagina web.</p></td></tr><tr><td><p></html></p></td><td><p>fine del codice HTML.</p></td></tr></tbody></table></center><p>In pratica a noi interessano le seguenti righe:</p><p><u>Quella che inizia con <em><p></em> e finisce con <em></p></em>.</u></p><p>Questo è un paragrafo (<p>), ossia un blocco di testo. Per lo HTML si tratta solo di testo da rappresentare a schermo. La parte interessante è la scritta <em>id="testoDaCambiare"</em>. Questa scritta dà l’equivalente di un codice fiscale al nostro paragrafo, ossia un codice che deve essere univoco in tutto il file. Ciò vuol dire che, se scrivessimo del codice che cerca la scritta <em>id="testoDaCambiare"</em>, ne troverebbe soltanto una.</p><p><u>Quella che inizia con <em><input</em> e finisce con <em>/></em></u></p><p>Questa è la riga che fa comparire il pulsante e merita uno sguardo più approfondito. <input> è un’istruzione che può far comparire oggetti diversi sullo schermo, ma la scritta <em>type="button"</em> specifica che vogliamo un oggetto a forma di pulsante su cui fare click.</p><p>Tanto per intenderci, scrivere</p><p><input type="button" /></p><p>è sufficiente per far comparire un pulsante sullo schermo e anche per farlo ‘funzionare’ come un pulsante, cioè per dargli l’effetto ‘premuto’ quando ci si fa click sopra. Provare per credere.</p><p><em>id</em> l’abbiamo già visto per <em><p></em>, mentre la scritta <em>value="Premimi per cambiare il testo"</em> è quella che fa comparire la relativa scritta sul pulsante, che altrimenti risulterebbe vuoto.</p><p>La parte più interessante è l’istruzione <em>onclick="cambioTesto();"</em>. Questa istruzione crea una connessione, un collegamento fra il codice JavaScript e il codice HTML. In pratica grazie a questa scritta noi possiamo fare click su un pulsante HTML e ‘chiamare’ con questo semplice gesto un codice JavaScript. Il codice chiamato sarà quello che segue la scritta <em>function cambioTesto()</em>. Carina l’idea, non è vero?</p><p>Quindi, se vogliamo del codice JavaScript da eseguire a comando, ci basta fare così:</p><ol><li><p>creiamo un pulsante HTML (<input type="button"… />);</p></li><li><p>creiamo un codice JavaScript che inizi con la parola <em>function</em>, es: function codiceDaChiamare();</p></li><li><p>nell’istruzione <input> aggiungiamo una parte “onclick”, es: onclick="codiceDaChiamare()".</p></li></ol><p>Fatto.</p><p>La scritta <em>onlick</em> dice al browser: “quando qualcuno fa click su di me, allora esegui il codice JavaScript che ha il nome che è scritto dopo il segno di uguale”. Questa operazione ha un nome: si chiama <em>evento</em>. Un evento è, per dirla semplice, una cosa che ci si aspetta che accada. Se mi aspetto che accada che qualcuno faccia click sul pulsante che ho fatto comparire sullo schermo, allora scrivo del codice che dovrà funzionare quando il pulsante sarà clickato.</p><p>Adesso diamo un’occhiata al codice JavaScript, anche se a dire il vero la parte che m’interessava sottolineare, ossia cos’è un evento, l’abbiamo già trattata.</p><p><u>Il codice JavaScript</u></p><pre>function cambioTesto(){</pre><pre> --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------^</sourcetext></parsererror>