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. Minicalcolatrice
Una minicalcolatrice senza troppe pretese che fa la somma di due numeri forniti in ingresso con due leemnti input/form e visualizza il risultato in un altro elemento di input
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Minicalcolatrice</title>
</head>
<body>
<h1>Minicalcolatrice</h1>
<input id="addendo1" type="number"> + <br><br>
<input id="addendo2" type="number"> <button id="uguale">=</button><br>
__________________ <br><br>
<input id="risultato" type="number" disabled>
<script>
const addendo1 = document.querySelector("#addendo1");
const addendo2 = document.querySelector("#addendo2");
const uguale = document.querySelector("#uguale");
const risultato = document.querySelector("#risultato");
uguale.addEventListener("click", somma, false);
function somma()
{
let valore1 = parseInt(addendo1.value);
let valore2 = parseInt(addendo2.value);
risultato.value = valore1 + valore2;
}
</script>
</body>
</html>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 26 Novembre 2024
