Javascript
   

Hello, World                  

Se volete provare qualche cosa vi serve avere un punto d'inizio. Il primo passo da compiere riguarda la possibilità di inserire codice Javascript nelle vostre pagine HTML. A questo proposito vale la regola in base alla quale tale codice deve essere contenuto all'interno di una coppia di tag:

<script></script>

vediamo quindi un esempio:

  Esempio 2.1
1
2
3
4
5
6
7
8
<html>
<head><title>test</title></head>
<body>
<script>
document.write("Hello, World!");
</script>
</body>
</html>

Bene questo è il primo esempio funzionante. All'interno dei tag evidenziati in rosso. Il tag script dispone di alcuni attributi che ne possono influenzare il funzionamento:

1) charset - opzionale e spesso ignorato dai browser, indica la codifica dei caratteri usati in un file connesso tramite l'attributo src. Il valore di deafult è ISO-8859-1 (standard per l'alfabeto latino) come principalale alternativa abbiamo UTF-8, supporta UNICODE ed è compatibile con ASCII. Ne esistono poi altre (UTF-16 e vari altri aventi formato ISO-XXXX-YY che supportano altri alfabeti; ad esempio ISO-2022-JP è utilizzato per il giapponese, ISO-8859-10 per i linguaggi nordici e ISO-8859-5 per il russo e similari. Un elenco completo è reperibile ad esempio qui).

2) src - opzionale, individua un file esterno origine del codice javascript usato (ad esempio nel sorgente di questa pagina lo trovate). E' un attributo molto usato in generale e ritengo che sarà quello che userete maggiormente. La sua sintassi è:

src = "nome-file-di-script"

Non va sottovalutato un aspetto: il file sorgente si può trovare in una qualunque locazione, anche su siti remoti (in formato simile a questo: src="http://www.vattelapesca.com/temp.js">). Bisogna valutare per bene se inserire nelle vostre pagine un file di scripting che non è sotto vostro completo controllo e che può essere modificato a costra insaputa. Di contro è molto comodo usare i vostri file esterni per contenere il codice Javascript da voi creato, migliorerà anche la leggibilità del vostro file HTML.

3) defer - indica che l'esecuzione del contenuto dello script può essere differito in modo sicuro sino a che la pagina non è stata completamente parsata. Esso viene utilizzato solo in presenza di script esterni, ossia quando è lavorizzato l'attributo src. In pratica:

<script src="demo_defer.js" defer></script>

Questo attributo può essere utile, ad esempio, qualora lo script richieda qualche informazione che può essere desunta dalla pagina in caricamento.
 
4) type - Indica il content type (o MIME) del blocco di codice di scripting che segue. Un valore che si trova sovente è text/javascript che si vuole obsoleto in realtà ancora usatissimo tant'è che per avere la massima compatibilità si usa proprio quello; corretto, secondo quanto più di recente specificato, sarebbe application/javascript.

5) async - specifica che lo script, anche qui riferito ad un file esterno, deve essere eseguito in maniera asincrona quando disponibile.

Il posizionamento dei tag di javascript può fondamentalmente avvenire in due zone di un pagina HTML, come da specifiche risalenti ad HTML4, ovvero all'interno della sezione <head></head> oppure di <body></body>, come nei nostri esempi. La differenza è importante in quanto nel caso di caricamento di codice in grande quantità, il primo approccio, che interpola lo script all'interno della coppia di heading, potrebbe causare un periodo significativo di tempo con la pagina completamente bianca in attesa che venga completato lo scaricamento ed effettuato il parsing. Per questo motivo è in generale preferibile utilizzare la zona di codice all'interno del tag <body> per piazzare il nostro codice javascript. Come detto lo scaricamento degli scipt blocca ogni altra azione di download della parte HTML che parallelamente potrebbe essere svolta. Un trucco, a parte, come detto, ricorrere a defer,  per facilitare lo scaricamento della pagine consiste nel porre gli script, o almeno quello più pesante, prima del tag </body>, in fondo alla pagina, in modo da permettere il parsing di quanto precede. Ovviamente quando questo è possibile :-) in base alla logica del'applicazione.
E' possibile piazzare più sezioni di script all'interno della nostra pagina, verranno eseguiti sequenzialmente uno dopo l'altro ma solo dopo il completamento del precedente.

Di seguito un altro esempio un po' diverso dal precedente.

  Esempio 2.1
1
2
3
4
5
6
7
8
<html>
<head><title>test</title></head>
<body>
<script>
alert("Hello, World!");
</script>
</body>
</html>

Avrete notato il ; che termina l'istruzione alla riga 5. Javascript, come molti altri linguaggi, usa questo segno per separare le istruzioni. In realtà ci sono situazioni in questo si può evitare. A questo stadio direi che si può tranquillamente considerare come di default l'uso del ; d'altronde molti professionisti ne fanno un uso sistematico senza porsi altri problemi. In questo senso, appunto, direi di usarlo sempre onde evitare inutili e poco interessanti complicazioni.

Prima di chiudere, ricordo che Javascript è case sensitive, al contrario di HTML, quindi bisogna fare attenzione al fatto che var01 e Var01 sono due cose completamente distinte.