Interfaccia controllo sistemi con eventi JavaScript

Spiegazione del Codice "Spia di Sistema"

Questo codice crea una semplice interfaccia web che simula il controllo di due sistemi: Motori e Ossigeno. Vediamo come funziona nel dettaglio.

Struttura HTML (index.html)

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Spia di Sistema</title>
</head>
<body>
    <div class="sistema">
        <button id="btn-motori" class="spento">Motori</button>
        <span id="stato-motori">In attesa</span>
    </div>
    <div class="sistema">
        <button id="btn-ossigeno" class="spento">Ossigeno</button>
        <span id="stato-ossigeno">In attesa</span>
    </div>
    <script src="script.js"></script>
</body>
</html>

La pagina HTML contiene:

• Due div con classe "sistema"
• Ogni div contiene:
  • Un pulsante per controllare il sistema
  • Uno span che mostra lo stato del sistema
• Il collegamento al file JavaScript

Logica JavaScript (script.js)

Selezione degli Elementi

const pnlStMotori = document.getElementById("stato-motori");
const btnMotori = document.getElementById("btn-motori");
let isMotoreOn = false;

const btnOssigeno = document.getElementById("btn-ossigeno");
const pnlStOxi = document.getElementById("stato-ossigeno");
let isOxyOn = false;

Il codice inizia selezionando gli elementi HTML e creando delle variabili per tenere traccia dello stato:

• isMotoreOn e isOxyOn sono variabili booleane che indicano se i sistemi sono accesi o spenti

Eventi di Click

btnMotori.addEventListener('click', e => {
    isMotoreOn = !isMotoreOn;
    if(isMotoreOn){
        pnlStMotori.innerHTML = "Sistema AVVIATO";
    }
});

Quando si clicca sul pulsante:

• !isMotoreOn inverte lo stato (da spento ad acceso o viceversa)
• Se il sistema è acceso, cambia il testo in "Sistema AVVIATO"
• Problema: Non c'è il codice per quando il sistema viene spento!

Eventi Mouse (Hover)

btnMotori.addEventListener('mouseover', e => {
    if(isMotoreOn) return;
    pnlStMotori.innerHTML = "Pronti al bulbul";
});

btnMotori.addEventListener('mouseleave', e => {
    if(isMotoreOn) return;
    pnlStMotori.innerHTML = "In attesa";
});

Questi eventi gestiscono cosa succede quando il mouse:

• Entra sopra il pulsante (mouseover): mostra "Pronti al bulbul"
• Esce dal pulsante (mouseleave): torna a "In attesa"
• Importante: Questi effetti funzionano solo se il sistema è spento (if(isMotoreOn) return)

Come Funziona il Sistema

1. Stato iniziale: Entrambi i sistemi sono spenti e mostrano "In attesa"

2. Passaggio del mouse: Se un sistema è spento, passando il mouse sopra il pulsante appare il messaggio "Pronti al bulbul"

3. Click: Cliccando si accende il sistema e appare "Sistema AVVIATO"

4. Problema: Una volta acceso, il sistema non può più essere spento perché manca il codice per gestire lo spegnimento!

Possibili Miglioramenti

Per completare il codice, bisognerebbe aggiungere:

• La gestione dello spegnimento nei click handler
• Il cambio di classe CSS per i pulsanti (da "spento" ad "acceso")
• Uno stile CSS per rendere l'interfaccia più gradevole :)

index.html

<!DOCTYPE html>
<html lang="it">

<head>
    <meta charset="UTF-8">
    <title>Spia di Sistema</title>
</head>

<body>
    <div class="sistema">
        <button id="btn-motori" class="spento">Motori</button>
        <span id="stato-motori">In attesa</span>
    </div>
    <div class="sistema">
        <button id="btn-ossigeno" class="spento">Ossigeno</button>
        <span id="stato-ossigeno">In attesa</span>
    </div>

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

</html>

script.js

const pnlStMotori = document.getElementById("stato-motori");
const btnMotori = document.getElementById("btn-motori");
let isMotoreOn = false;

const btnOssigeno = document.getElementById("btn-ossigeno");
const pnlStOxi = document.getElementById("stato-ossigeno");
let isOxyOn = false;

// onclick motore
btnMotori.addEventListener('click', e => {
    isMotoreOn = !isMotoreOn;
    if(isMotoreOn){
        pnlStMotori.innerHTML = "Sistema AVVIATO";
    }
});

// onclick ossigeno
btnOssigeno.addEventListener('click', e => {
    isOxyOn = !isOxyOn;
    if(isOxyOn){
        pnlStOxi.innerHTML = "Sistema AVVIATO";
    }
});

// mouseover motor
btnMotori.addEventListener('mouseover', e => {
    if(isMotoreOn) return;
    pnlStMotori.innerHTML = "Pronti al bulbul";
});

btnMotori.addEventListener('mouseleave', e => {
    if(isMotoreOn) return;
    pnlStMotori.innerHTML = "In attesa";
});

btnOssigeno.addEventListener('mouseover', e => {
    if(isOxyOn) return;
    pnlStOxi.innerHTML = "Pronti al bulbul OXI";
});

btnOssigeno.addEventListener('mouseleave', e => {
    if(isOxyOn) return;
    pnlStOxi.innerHTML = "In attesa";
});