Esempio chiave del nostro linguaggio JavaScript. Come interagisco con gli elementi della pagina web? Come posso modificare stili e valori?
Partiamo dalla pagina HTML. Qui per comodità didattica, si parte direttamente dal template di Bootstrap con i suoi elementi, ma non è ovviamente necessario se non ai fini estetici. Creiamo una piccola form con tre campi, uno di testo ed uno numerico, una combo radio per il sesso.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="css/stile.css" rel="stylesheet">
<script src="js/script.js"></script>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h1>Esempio 03</h1>
<form id="prendi">
<div class="mb-3">
<label for="questo" class="form-label">Nome</label>
<input type="email" class="form-control" id="questo" placeholder="Pippo">
</div>
<div class="mb-3">
<label for="questaltro" class="form-label">Anni</label>
<input type="number" class="form-control" id="questaltro" placeholder="17">
</div>
<div class="mb-3">
<label for="sessom" class="form-label">Maschio</label>
<input type="radio" class="form-check-input" id="sessom" name="sesso">
<label for="sessof" class="form-label">Femmina</label>
<input type="radio" class="form-check-input" id="sessof" name="sesso">
</div>
</form>
<button class="btn btn-primary" onclick="leggiForm()">Saluta</button>
<br><br>
<span id="visualizza"></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
Come prelevo i dati inseriti dall’utente nella form? Ho due modi e ne vedremo un terzo più avanti. Il primo semplice ed intuitivo: usare il percorso del DOM e di tutti gli attributi name dei vari elementi della lista. Qualche volta potrebbe risultare scomodo nella misura in cui gli elementi siano molto annidati tra di loro. L’accesso diretto ad ogni elemento del DOM lo possiamo ottenere con le funzioni document getElementById, getElementByName per poter accedere ad un oggetto utilizzando il suo id o il suo name o, più recente, querySelector e querySelectoAll che accedono agli oggetti DOM utilizzando il loro identificativo CSS, # o .(punto) . Il sistema funziona a patto che ogni elemento della pagina, almeno che sia interessato dalla dinamicità del js, abbia l’attributo id e name valorizzati. Qualcuno usa name ed id uguali per semplicità.
/**
* Prelevo i dati dalla form
*/
function leggiForm()
{
//modo 1: tutto il percorso del campo
let nome= document.forms.prendi.questo.value;
//modo 2: getElementById
let objEta = document.getElementById("questaltro");
let eta = parseInt(objEta.value);
//alert(nome);
//alert(eta);
var visualizza = document.getElementById("visualizza");
if (eta >= 18)
{
visualizza.classList.add("maggiorenne");
visualizza.innerHTML ="Benvenuto "+nome+"!";
}
else
{
visualizza.classList.add("minorenne");
visualizza.innerHTML ="Va via "+nome+"!";
}
//modo 3:
let objSesso = document.getElementsByName("sesso");
if (objSesso[0].checked)
visualizza.innerHTML ="Benvenuto "+nome+"!";
if (objSesso[1].checked)
visualizza.innerHTML ="Benvenuta "+nome+"!";
}Mentre con l’id ci assicuriamo sulla unicità del tag html che vogliamo selezionare, con name questa cosa non è scontata. Il campo radio o checkbox ne è un esempio in cui multipli sottoelementi sono accomunati dallo stesso name. Se getElementById torna o meno il riferimento all’oggetto richiesto, il getElementByName torna un vettore di elementi. Sta al programma gestire i vari elementi di tale vettore. Nel nostro caso il radio ha due elementi corrispondenti alle due risposte. Se flaggato o meno, lo possiamo individuare con l’attributo checked.
Il foglio CSS è piuttosto semplice e scarno, ma per completezza:
.maggiorenne, .minorenne
{
font-size: large;
font-weight: bold;
}
.maggiorenne
{
color: green;
}
.minorenne
{
color: red;
}Il codice completo:
Ultima modifica 3 Giugno 2023