JavaScript ci permette di gestire degli eventi legati ai tasti del mouse, in particolare l’evento – onClick – si attiverà al click del tasto sinistro del mouse.
Vediamo come incorporare il codice nella pagina web:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html><html> <head><title>Titolo del documento</title> <script>function miaFunzione(){alert("Hai cliccato sul pulsante!");}</script></head><body> <p>Clicca il bottone per vedere l'effetto.</p><button onclick="miaFunzione()">Cliccami</button></body> </html> |
Come si può notare nel codice sopra la sintassi corretta è la seguente:
In HTML:
1 | <button onclick="miaFunzione()">Cliccami</button> |
– al tag bottone – button – assegno l’evento JS – onclick – che al click con il tasto Sx del mouse richiamerà la funzione – miaFunzione -.
In JS:
1 2 3 4 5 6 | <script>function miaFunzione(){alert("Hai cliccato sul pulsante!");}</script> |
– creo la funzione che verrà richiamata da – onclick – del tag – button –
– all’interno delle parentesi graffe inserisco i comandi che la funzione andrà ad eseguire.
– il comando – alert(“Hai cliccato sul pulsante!”); – aprirà una finestra di sistema di tipo – alert – con un messaggio di avviso.
onclik può essere applicato a tutti elementi HTML ad eccezione di:
1 2 3 4 5 6 7 8 9 10 11 | <base><bdo><br><head><html><iframe><meta><param><script><style><title> |
L’effetto finale si può vedere qui sotto:
Clicca il bottone per vedere l’effetto.
