Javascript – Eventi 2. In questa lezione utilizzeremo alcune classi CSS del framework web Bootstrap per approfondire la gestione degli eventi di una pagina HTML con Javascript. Se desideri rivedere le possibili implementazioni di Bootstrap ti consiglio questo articolo : Implementare Bootstrap
Pagina HTML che implementa Bootstrap da CDN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
Evento Load
Aggiungi un campo input di tipo testo
<div class="mb-3">
<laber for="username" class="form-label">USERNAME:</laber>
<input type="text" id="username" class="form-control">
</div>
Ora vogliamo che venga messo il focus alla nostra casella di input al caricamento della pagina e quindi creo il seguente file Javascript: more-events.js ricordati di inserire il collegamento nella pagina HTML dopo il link a bootstrap.bundle.min.js . La pagina HTML deve essere così
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="mb-3">
<laber for="username" class="form-label">USERNAME:</laber>
<input type="text" id="username" class="form-control">
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="js/more-events.js"></script>
</body>
</html>
Ora aggiungeremo un ascoltatore degli eventi all’oggetto window
che rappresenta la nostra pagina web, quando l’evento load
sarà triggerato richiameremo la funzione addFocus()
per sfruttare il metodo focus()
sul nostro oggetto input
function addFocus(){
var txtUsername = document.getElementById('username');
txtUsername.focus();
}
window.addEventListener('load',addFocus,false);
Ricaricando la nostra pagina web noteremo che il focus è posizionato da subito sulla nostra casella di testo

sotto al nostro tag input aggiungo il seguente blocco
<div id="feedback"></div>
in cui invieremo il messaggio di errore nel caso usi meno di 6 caratteri, poi aggiungo anche una text area
<div class="mb-3">
<label for="comment" class="form-label">Lascia un commento:</label>
<textarea class="form-control" id="comment" rows="3"></textarea>
</div>
Evento Blur
Dopo che l’utente ha inserito lo username e si posizionerà nella text area, in questo caso l’evento scatenato sarà il blur, lo sfrutto per controllare che lo username inserito contenga almeno 6 caratteri
function addFocus(){
var txtUsername = document.getElementById('username');
txtUsername.focus();
}
function checkUsername(){
var username=elUsername.value;
if(username.length<6){
elFeedback.classList.add('text-bg-danger');
elFeedback.textContent='Devi inserire almeno 6 caratteri';
}else{
elFeedback.textContent='';
}
}
var elUsername = document.getElementById('username');
var elFeedback = document.getElementById('feedback');
window.addEventListener('load',addFocus,false);
elUsername.addEventListener('blur',checkUsername,false);
Nota che ho aggiunto dinamicamente una classe CSS di Bootstrap alla riga 8 con il metodo add
dell’attributo classList
dell’oggetto <div id="feedback">
l’effetto è il seguente

Evento mouseover
Possiamo decidere di richiamare del codice quando passiamo il mouse su un componente della pagina, per esempio voglio che quando l’utente triggeri il mouseover sul pulsante Reset appaia un messaggio nel componente Toast di Boostrap

Questo componente deve essere definito nel body della pagina HTML anche se non sarà visibile fino quando lo richiameremo dopo un evento di seguito la pagina HTML modificata
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="mb-3">
<laber for="username" class="form-label">USERNAME:</laber>
<input type="text" id="username" class="form-control">
<div id="feedback"></div>
</div>
<div class="mb-3">
<label for="comment" class="form-label">Lascia un commento:</label>
<textarea class="form-control" id="comment" rows="3"></textarea>
</div>
<button type="button" id="btn-reset" class="btn btn-secondary">
Reset
</button>
<!-- Toast Message -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Messaggio</strong>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Attenzione, premendo il tasto reset cancellerai il commento
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<script src="js/more-events.js"></script>
</body>
</html>
ed il codice Javascript
function addFocus(){
var txtUsername = document.getElementById('username');
txtUsername.focus();
}
function checkUsername(){
var username=elUsername.value;
if(username.length<6){
elFeedback.classList.add('text-bg-danger');
elFeedback.textContent='Devi inserire almeno 6 caratteri';
}else{
elFeedback.textContent='';
}
}
function ToastTip(){
const toastLiveExample = document.getElementById('liveToast');
const toast = new bootstrap.Toast(toastLiveExample);
toast.show();
}
var elUsername = document.getElementById('username');
var elFeedback = document.getElementById('feedback');
var elBtnReset = document.getElementById('btn-reset');
window.addEventListener('load',addFocus,false);
elUsername.addEventListener('blur',checkUsername,false);
elBtnReset.addEventListener('mouseover',ToastTip,false);
nella funzione ToastTip()
utilizziamo i componenti Javascript di Bootstrap quindi l’oggetto Toast
ed il suo evento show()
che permette appunto di mostrare il componente
Evento Click
Adesso per cancellare il contenuto della text area quando l’utente farà click sul bottone Reset dovrai aggiungere pochissimo codice
function resetTextArea(){
elComment.value='';
}
elBtnReset.addEventListener('click',resetTextArea,false);