Javascript – Eventi 2

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

output del metodo focus()
output del metodo focus()

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

classe text-bg-danger di Bootstrap
classe text-bg-danger di Bootstrap

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

uso del componente Toast di Bootstrap
uso del componente Toast di Bootstrap

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);

Pubblicato da Carlo Contardi

Carlo Contardi, docente di informatica e sviluppatore Full Stack, condivide la sua passione per la programmazione e l’informatica attraverso il suo blog Space Coding. Offre preziosi consigli e soluzioni pratiche a chi vuole imparare a programmare o migliorare le proprie abilità. 🚀👨‍💻

Translate »