Aggiungere JavaScript alle pagine HTML

Corso JavaScript: Aggiungere Script alle pagine HTML
Corso JavaScript: Aggiungere Script alle pagine HTML

Inserire JavaScript all’interno di un attributo in un tag

Possiamo inserire codice JavaScript direttamente all’interno di specifici attributi, generalmente si tratta di attributi che rappresentano uno specifico evento.

<!doctype html>
<html>
<head>
    <title>Corso di JavaScript</title>
<meta charset="UTF-8">
<body onload="alert('È stato caricato il body');">
<h1 onclick="alert('Hai fatto click sul titolo');">Corso di JavaScript per aspiranti web developer</h1>
<p id="primoParagrafo" onmouseover="this.innerHTML='mouse over';" onmouseout="this.innerHTML='mouse out';">
    Questa è una semplice pagina di esempio
    che utilizzeremo come base per imparare
    a utilizzare JavaScript.
</p>
</body>
</html>

Il codice qui sopra contiene un po’ di interattività: oltre a far comparire una finestra di avviso al caricamento della pagina reagisce al click sul titolo e al movimento del mouse sul primo paragrafo.

I nomi degli eventi onload, onclick, onmouseover e onmouseout sono abbastanza intuitivi e rappresentano rispettivamente:

  • onload: è stato completato il caricamento.
  • onclick: qualcuno ha fatto click su un elemento.
  • onmouseover: il puntatore del mouse è entrato nell’area di un elemento.
  • onmouseout: il puntatore del mouse è uscito dall’area di un elemento.

Al verificarsi di uno specifico evento viene eseguita la porzione di codice ad esso collegata.

Questo articolo è parte della collana JavaScript: Guida di riferimento per aspiranti web developer.

Continua a leggere questa collana:

Potrebbero interessarti anche...

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.