JS Oggetti ed eventi es2 by @AurelianoDC - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

animationDefinisce i parametri dell'animazione di un elemento o selettore
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<q>Indica una parte di testo come citazione breve
<h1>Titolo di intestazione di primo livello
<th>Definisce una cella di intestazione di una tabella HTML.

Users

Log in to search for users

Explore

Find inspiration

le miniere di nuxis

Esercitazione esame

Home principale

pianoforte.html

Grafico a torta

sinodo diocesano

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifica Colore con il Mouse</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<!-- Elemento HTML da modificare -->
<div id="elementoDaModificare">Passa sopra di me con il mouse</div>

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

</body>
</html>

// Seleziona l'elemento HTML da modificare utilizzando il DOM
var elemento = document.getElementById("elementoDaModificare");

// Aggiungi un gestore di eventi per l'evento mouseover
elemento.addEventListener("mouseover", function() {
  // Cambia il colore dell'elemento HTML quando il mouse passa sopra di esso
  elemento.style.color = "red";
});

// Aggiungi un gestore di eventi per l'evento mouseout
elemento.addEventListener("mouseout", function() {
  // Ripristina il colore originale dell'elemento HTML quando il mouse esce dall'area
  elemento.style.color = ""; // Ripristina al colore predefinito
});


//******************************
// Il callback
//******************************
//In JavaScript, un callback è una funzione che viene passata come argomento a un'altra funzione e viene chiamata o eseguita all'interno di quella funzione principale. Il callback viene chiamato quando si verifica una determinata condizione o evento, come il completamento di un'operazione asincrona o l'attivazione di un gestore di eventi.

//Consideriamo un esempio di callback in JavaScript:
// Funzione principale che accetta un callback come argomento
function eseguiOperazione(callback) {
  console.log("Parte il 'cronometro'");
  // Simula un'operazione che richiede tempo
  setTimeout(function() {
    // Dopo un certo tempo, chiamiamo il callback
    callback();
  }, 5000); // Esegui il callback dopo 2 secondi
}

// Definiamo una funzione di callback
function mioCallback() {
  console.log("Partita la funzione 'mioCallback'!(dopo 5 secondi)");
}

// Chiamiamo la funzione principale e passiamo il callback come argomento
eseguiOperazione(mioCallback);

//In questo esempio:

// La funzione eseguiOperazione è la funzione principale che accetta un callback come argomento.
// Dentro la funzione eseguiOperazione, usiamo setTimeout per simulare un'operazione che richiede tempo (in questo caso, aspettiamo 5 secondi(tempo ideale non garantito che si potrebbe prolungare su magari il browser é occupato anche in altro)).
// Quando il timer di setTimeout scade, viene chiamata la funzione di callback mioCallback.
// mioCallback è una funzione definita separatamente che verrà eseguita quando l'operazione principale sarà completata.
// I callback sono utilizzati ampiamente in JavaScript per gestire operazioni asincrone come richieste AJAX, letture di file, eventi DOM, e molto altro ancora. Consentono di eseguire codice in modo non bloccante e di rispondere dinamicamente a eventi o condizioni specifiche quando si verificano.
//******************************


//******************************
// setTimeout
//******************************
//Certamente! Il `setTimeout` è una funzione in JavaScript che viene utilizzata per eseguire un'azione (una funzione o una parte di codice) dopo un certo periodo di tempo specificato in millisecondi.

// Ecco come si usa `setTimeout`:

// Esegui una funzione dopo 3 secondi
// setTimeout(function() {
//   console.log("Questa funzione viene eseguita dopo 3 secondi.");
// }, 3000); // 3000 millisecondi corrispondono a 3 secondi

//In questo esempio, la funzione anonima passata come primo argomento a `setTimeout` verrà eseguita dopo 3 secondi (3000 millisecondi). La funzione `console.log` stampa un messaggio nella console del browser dopo il ritardo specificato.

//È importante notare che il tempo specificato è solo un suggerimento. Non c'è garanzia che la funzione verrà eseguita esattamente dopo il periodo di tempo specificato, poiché il browser può essere occupato con altre operazioni. Tuttavia, il browser farà del suo meglio per eseguire la funzione appena possibile dopo il periodo di tempo specificato.

//La sintassi di `setTimeout` è la seguente:

// setTimeout(callback, delay, parametriOpzionali);

//- `callback`: la funzione da eseguire dopo il ritardo.
//- `delay`: il ritardo in millisecondi prima dell'esecuzione della funzione.
//- `parametriOpzionali`: eventuali parametri aggiuntivi da passare alla funzione.

//Puoi anche usare `setTimeout` per eseguire codice senza la necessità di una funzione anonima, utilizzando una funzione dichiarata separatamente:

// function saluta() {
//   console.log("Ciao, mondo!(dopo 2 secondi)");
// }

// setTimeout(saluta, 2000); // Esegue la funzione saluta dopo 2 secondi
//In questo esempio, la funzione `saluta` viene eseguita dopo 2 secondi utilizzando `setTimeout`.