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

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

Referenze

relServe a definire la relazione tra il documento e una risorsa.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
animation-delayDetermina il tempo prima dell'avvio di una animazione in secondi (es. 1s) o millisecondi (ms)
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
<b>Formatta il testo in grassetto

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Prova qualsiasi

Esercitazione 1

esercitazione 1

Le meraviglie d\\\\

ESAME (TORTA DELLA NONNA)

registration form

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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`.