Categorie
Javascript Programmazione

{JS} Come inserire Javascript all’interno di html

Breve Introduzione

JavaScript è stato ideato nel 1995 da Netscape e rilasciato con la versione 2.0 del suo browser, Netscape Navigator, dapprima con il nome LiveScript.
Da subito JavaScript aggiunse alle pagine HTML la possibilità di essere modificate in modo dinamico, in base all’interazione dell’utente con il browser (lato client).
L’accoppiata HTML-JavaScript prese il nome di : Dynamic HTML (DHTML)

Inserire Javascript all’interno di pagine html

 E’ possibile inserire codice JavaScript in una pagina HTML in tre modi:

  1. Codice in linea
  2. Codice in blocchi interni alla pagina stessa
  3. Importando un file esterno
Note: in buona sostanza è possibile inserire codice Javascript cosi come è possibile inserire CSS all'intenro delle pagine HTML

Codice in linea

L’inserimento di codice inline, consiste nell’inserire direttamente le istruzioni JavaScript nel codice di un elemento HTML

<button type="button" onclick="alert('Ciao!')">Cliccami</button>

L’attributo onclick rappresenta l’evento del clic sul pulsante del mouse, quindi in corrispondenza di questo evento verrà eseguito il codice JavaScript.

<a href="javascript:alert('Ciao!')">Cliccami</a>

In questo caso indichiamo al browser di interpretare il link come la richiesta di esecuzione del codice JavaScript.

Codici in blocchi interni mediante i tag <script>

<script>
alert('Ciao!') </script>

Possiamo inserire blocchi di codice con i relativi tag <script> nella sezione <head> o nella sezione <body> della pagina HTML.

Note: se il codice JavaScript interagisce con un elemento HTML, occorre assicurarsi che tale elemento sia già stato analizzato dal parser HTML
Cosa significa in concreto? Il codice vene letto dall'alto verso il basso, di conseguenza se il nostro script interagisce con un elemento che verrà letto solo successivamente, ci sarà restituito un errore;
E' buona norma, onde evitare anomalie, inserire codice Javascript prima della chiusura del tag </body> in questa maniera saremo sicuri che qualunque elemento presente ed eventualmente necessario sarà letto prima dell'esecuzione del codice Javascript.

Importare un file esterno

<script src="codice.js"></script>

Il terzo metodo, il più consigliato, consiste nel collegare alla pagina HTML, codice JavaScript presente in un file esterno.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *