Una mini rassegna di esercizi in JavaScript introduttivi e molto semplici per comprendere i promi rudimendi nell’uso del DOM e degli stili. Sono consigliati a chi si sta approcciando al mondo della programmazione JavaScript, soprattutto gli studenti dei corsi di informatica del quarto anno degli istituti tecnici.
Indice dei contenuti
1. Cambia colore di sfondo
Esercizio introduttivo con un semplice bottone che cliccato fa cambiare lo sfondo della pagina alternando il colore rosso e verde. Gestiamo l’evento click e modifichiamo col css lo sfondo. Il bottone, come lo sfondo centrato, è realizzato per comodità con Bootstrap.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cambia Sfondo JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
body{text-align: center; }
.container{padding: 20vh;}
</style>
</head>
<body>
<h1>Cambio Sfondo JS</h1>
<div class="container">
<button id="bottone" class="btn btn-primary">CAMBIA SFONDO</button>
</div>
<script>
const bottone = document.querySelector("#bottone");
bottone.addEventListener("click", cliccaBottone, true);
let toggle = false;
function cliccaBottone()
{
const corpo = document.querySelector("body");
if (toggle == true)
{
console.log("vero");
corpo.style.backgroundColor = "#bb0000";
toggle = false;
}
else
{
corpo.style.backgroundColor = "#00aa00";
toggle = true;
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</body>
</html>
2. Contatore età
3. Conta click
Questa volta interagiamo con un oggetto del DOM inaspettato, una semplice porzione quadrata della pagina che apparentemente non sembra un bottone ma ce lo facciamo diventare ugualmente. Cliccando sul quadrato, si aggiorna e visualizza un semplice contatore. Esercizio più raffinato è contare fino a 10 click per poi cambiare il colore di sfondo del quadrato da verde a rosso.
<!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.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
#quadrato
{
width: 5em;
height: 5em;
background-color: greenyellow;
margin-top: 10vh;
border: 1px dashed black;
position: relative;
}
#contatore
{
margin-top: 11vh;
}
</style>
<title>Contatore click</title>
</head>
<body>
<div class="container text-center">
<h1>Conta click</h1>
<h3>Istruzioni</h3>
<p>Disegnare un quadrato verde al centro del foglio. L'area è cliccabile. Ogni click viene registrato.<br>
Al decimo click l'area cambia colore e diventa rossa.
</p>
<div class="row">
<div class="col-4"></div>
<div class="col"><div id="quadrato"></div></div>
<div class="col"><div id="contatore">Contatore: 0</div></div>
<div class="col-4"></div>
</div>
</div>
</div>
<script>
const objContatore = document.querySelector("#contatore");
const objQuadrato = document.querySelector("#quadrato");
objQuadrato.addEventListener("click",conta, true);
var contatore = 0;
function conta()
{
contatore = contatore + 1;
objContatore.innerHTML = "Contatore: " + contatore;
if (contatore > 10)
{
objQuadrato.style.backgroundColor = "red";
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
4.
5.
Ultima modifica 28 Ottobre 2024