HTML - Javascript

Uno script è un piccolo programma che permette di aggiungere funzioni interattive ad un sito web. Per esempio può generare un messaggio pop-up o fornire un menu dropdown. Uno script può essere scritto in Javascript o VBScript.

E' possibile scrivere diverse piccole funzioni, gestire degli eventi (Event Handler) tramite un linguaggio di scripting e quindi attivare le funzioni utilizzando gli attributi HTML.

Ad oggi la maggior parte degli sviluppatori utilizza solo Javascript ed i frameword associati, VBScript non è più supportato dalla maggiorparte dei browser più importanti.

Si può inserire il codice Javascript in un file separato ed includerlo quando sarà necessario, o si può inserire il codice dello script direttamente all' interno del documento HTML. Analizzeremo adesso entrambi i casi con dei semplici esempi.

Javascript Esterno

Se si vuole definire delle funzionalità nello script che saranno utilizzate in diversi documenti HTML allora è consigliabile inserire le funzioni in un file Javascript separato ed includere questo file all' interno dei documenti HTML. Un file Javascript ha estensione .js e può essere incluso all' interno di un file HTML tramite il tag <script>.

Esempio

Consideriamo di voler definire una piccola funzione Javascript all' interno di un file script.js:

function Hello()
{
    alert("Hello, World");
}

Adesso utilizziamo il file Javascript appena creato all' interno del seguente documento HTML:

<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src="/html/script.js" type="text/javascript"/></script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Click Me"  />
</body>
</html>

Prova a premere il bottone per vederne il risultato:

Javascript Interno

Il codice di uno script può essere inserito anche direttamente all' interno di un documento HTML. In genere viene inserito all' interno dell' header utilizzando il tag <script>, ma non ci sono restrizioni al riguardo, perciò è possibile inserire un elemento <script> in qualsiasi parte del documento HTML.

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Javascript Internal Script</title>
<base href="https://www.tutorialspoint.com/" />
<script type="text/javascript">
function Hello(){
   alert("Hello, World");
}
</script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Click Me"  />
</body>
</html>

Prova a premere il bottone per vederne il risultato:

Gestore di Eventi (Event Handlers)

I gestori di eventi permettono di richiamare semplici funzioni al verificarsi di un particolare evento del mouse o della tastiera. La gestione della logica di un event handler può variare da una singola linea di codice fino a migliaia.

L' esempio seguente spiegherà come scrivere un event handler. Scriviamo una semplice funzione chiamata EventHandler() all' interno dell' header del documento. Attiveremo questa funzione al passaggio del mouse sopra il paragrafo.

<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href="https://www.tutorialspoint.com/" />
<script type="text/javascript">
function EventHandler(){
   alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover="EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>

Produrrà il seguente risultato. Passa il mouse sopra questa riga di testo per vedere il risultato:

Bring your mouse here to see an alert

Nascondere gli Script nei Browser datati

Oggi giorno molti (se non tutti) fra i browser odierni supportano il Javascript, ma vi sono ancora vecchi browser che non lo supportano. Se un browser non supporta il Javascript, piuttosto di avviare lo script, essi ne mostreranno il codice all' utente. Per prevenire il verificarsi di questa situazione, è possibile inserire dei commenti HTML intorno lo script, come mostrato di seguito.

JavaScript Example:
<script type="text/javascript">
<!--
document.write("Hello Javascript!");
//-->
</script>

VBScript Example:
<script type="text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>

L' elemento <noscript>

Grazie al tag <noscript> è possibile fornire informazioni alternative per i browser che non supportano gli script o per i browser in cui l' utente ne ha disattivato l' esecuzione.

JavaScript Example:
<script type="text/javascript">
<!--
document.write("Hello Javascript!");
//-->
</script>
<noscript>Your browser does not support Javascript!</noscript>
VBScript Example:
<script type="text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>

Linguaggio di Scripting di Default

Ci possono essere situazioni in cui si devono includere più file di script e si utilizzano quindi più tag <script>. In questi casi è utile impostare un linguaggio di scripting di default per tutti i tag script. Questo ti eviterà di dover specificare il linguaggio di script ogni volta che viene utilizzato il tag script all' interno di una pagina. A seguire vi è l' esempio per impostare un linguaggio di scripting di default:

<meta http-equiv="Content-Script-Type" content="text/JavaScript" />

Si noti che si può effettuare un override dell'impostazione predefinita specificandone il linguaggio all'interno del tag script.

Advertisements