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

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

References

sizeDetermina le dimensioni dell'elemento in base al valore contenuto
mutedL'attributo muted viene utilizzato impostare risorse HTML audio e video con volume muto
<nav>Definisce un menu di navigazione
<i>Formatta il testo in corsivo/italico non enfatizzato
actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
text/plainDefinisce un metodo di non codifica dei valori di un form

Users

Log in to search for users

Explore

Find inspiration

JS Strutture dati e funzioni es1

Navbar Example 2

esercitazione 2

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>Nascondi/Mostra Elemento con jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.3/jquery.scrollTo.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

  <style>
    .mioDiv2 {
      width: 300px;
      height: 300px;
      /* background-color: red; */
      border: 3px solid black;
      transition: background-color 0.5s ease;
    }
  </style>

</head>

<body>

  <!-- Elemento HTML da nascondere/mostrare -->
  <div id="elementoDaNascondereMostrare">Questo è un elemento da nascondere/mostrare.</div>

  <!-- Pulsante per nascondere/mostrare l'elemento -->
  <button id="pulsanteNascondiMostra">Nascondi/Mostra</button>

  <!-- Elemento HTML da manipolare -->
  <div id="mioDiv">Testo iniziale</div>
  <button id="pulsanteModifica">Modifica Testo</button>

  <button id="pulsanteAlert">Pulsante alert</button>

  <div id="risultato"></div>

  <div class="mioDiv">prova prova</div>

  <div id="mioDiv">Testo iniziale</div>

  <button id="avviaAnimazione">Avvia animazione</button>


  <div id="mioDiv2" class="mioDiv2"></div>


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

</html>

//3. Sfrutta jQuery per nascondere un elemento HTML quando un pulsante viene cliccato e mostrarlo quando viene cliccato di nuovo.

// //********************************
// // Svolgimento con JS puro
// //********************************
// // Selezioniamo il pulsante utilizzando document.getElementById() e aggiungiamo un gestore di eventi per il clic utilizzando addEventListener()
// document.getElementById("pulsanteNascondiMostra").addEventListener("click", function() {
//   // All'interno della funzione del gestore di eventi, selezioniamo l'elemento da nascondere/mostrare utilizzando document.getElementById().
//   let elemento = document.getElementById("elementoDaNascondereMostrare");

//   // Verifichiamo lo stato di visualizzazione dell'elemento controllando il valore della proprietà display del CSS.
//   if (elemento.style.display === "none") {
//     // Se l'elemento è nascosto (display === "none"), lo mostriamo settando display a "block". 
//     elemento.style.display = "block";
//   } else {
//     // Altrimenti, se l'elemento è visibile, lo nascondiamo settando display a "none".
//     elemento.style.display = "none";
//   }
// });
// //********************************



//*********************************
//Svolgimento con jQuery
//*********************************
// Attendi il caricamento completo del documento HTML prima di eseguire il codice jQuery
$(document).ready(function() { // Inizia la funzione di callback che verrà eseguita quando il documento HTML è completamente caricato e pronto per l'interazione.
  
  // Aggiungi un gestore di eventi per il clic sul pulsante con ID "pulsanteNascondiMostra"
  $("#pulsanteNascondiMostra").click(function() {
    // Quando il pulsante viene cliccato, questa funzione anonima viene eseguita.
    
    // Il metodo .toggle() di jQuery nasconde o mostra l'elemento con ID "elementoDaNascondereMostrare" a seconda del suo stato attuale.
    // Se l'elemento è visibile, verrà nascosto. Se è nascosto, verrà mostrato.
    $("#elementoDaNascondereMostrare").toggle();
  });// Chiude la funzione di callback per il clic sul pulsante.
}); //Chiude la funzione di callback per il caricamento completo del documento HTML.


//Questa riga $(document).ready(function() {...}); è la sintassi di jQuery per eseguire il codice JavaScript una volta che il documento HTML è completamente caricato. All'interno di questa funzione, definiamo il gestore di eventi per il clic sul pulsante.

// Ogni volta che si usa il simbolo $ in jQuery, si sta effettivamente utilizzando jQuery per selezionare elementi DOM, applicare effetti o gestire eventi.

//*******************************
// jQuery
//*******************************
//jQuery è una libreria JavaScript molto popolare e potente che semplifica notevolmente la scrittura di codice JavaScript e offre una serie di funzionalità che semplificano la manipolazione del DOM, la gestione degli eventi, le chiamate AJAX, le animazioni e molto altro ancora. Ecco alcuni dei principali vantaggi e utilizzi di jQuery:

//1. **Semplificazione della manipolazione del DOM**: 
//jQuery semplifica notevolmente la selezione, la modifica e la manipolazione degli elementi del DOM. Grazie ai selettori CSS-like e ai metodi di manipolazione, è più facile scrivere codice per interagire con gli elementi HTML.
$("#pulsanteModifica").click(function() {
  // Quando il pulsante viene cliccato, questa funzione anonima viene eseguita.

  // Il metodo .text() di jQuery cambia il contenuto nel testo.
  $("#mioDiv").text("Nuovo testo");;
});

//2. **Gestione degli eventi**: 
//jQuery semplifica la gestione degli eventi come il click, il mouseover, il keypress, ecc. Con jQuery, è possibile assegnare gestori di eventi agli elementi HTML in modo più semplice e compatto rispetto a JavaScript puro.
$("#pulsanteAlert").click(function() {
    alert("Hai cliccato il pulsante!");
});

//3. **Chiamate AJAX semplificate**: 
//jQuery fornisce un'interfaccia semplificata per eseguire chiamate AJAX, consentendo di recuperare e inviare dati dal e al server senza dover scrivere complessi codici XMLHttpRequest.
$.ajax({
    url: "dati.json",
    dataType: "json",
    success: function(data) {
        // Visualizza i dati nel div risultato
        $("#risultato").text(JSON.stringify(data));
    }
});

// 4. **Animazioni e effetti**: 
// jQuery fornisce una serie di metodi per creare animazioni e aggiungere effetti speciali agli elementi HTML, rendendo più semplice aggiungere dinamicità e interattività ai siti web.

// Aggiungi un gestore di eventi per il passaggio del mouse sull'elemento
$(".mioDiv").mouseenter(function() {
    // Modifica il colore di sfondo
    $(this).css("background-color", "blue");
    console.log("ci sono sopra con il mouse");
});

// Aggiungi un gestore di eventi per il passaggio del mouse fuori dall'elemento
$(".mioDiv").mouseleave(function() {
    // Ripristina il colore di sfondo originale 
    $(this).css("background-color", "transparent");
    console.log("mi sono tolto sopra con il mouse");
});

// 5. **Compatibilità cross-browser**: 
// jQuery si occupa delle differenze di implementazione tra i vari browser, garantendo che il codice funzioni in modo coerente su tutti i browser principali senza dover scrivere codice specifico per ciascuno di essi.

// 6. **Estensibilità**: 
// jQuery è altamente estensibile attraverso l'utilizzo di plugin. Esistono migliaia di plugin jQuery disponibili per eseguire una vasta gamma di compiti, dall'aggiunta di caroselli di immagini alla creazione di complessi grafici interattivi.
$("#avviaAnimazione").click(function() {
    // Utilizza l'animazione jQuery per modificare il colore di sfondo
    $("#mioDiv2").animate({ backgroundColor: "blue" }, 1000, function() {
        // Callback eseguita al termine dell'animazione
        $("#mioDiv2").animate({ backgroundColor: "red" }, 1000);
    });
});

// In sintesi, jQuery è una libreria potente e versatile che semplifica la scrittura di codice JavaScript, riduce la quantità di codice necessario per svolgere molte operazioni comuni e migliora la produttività degli sviluppatori web. È particolarmente utile per la creazione di siti web interattivi e dinamici.