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

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

References

<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.
langSpecifica la lingua del contenuto di un elemento
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<h3>Titolo di intestazione di terzo livello
<h5>Titolo di intestazione di quinto livello

Users

Log in to search for users

Explore

Find inspiration

Array of Colors

Nuovo sito travel

Clona elementi JS

JS Istruzioni condizionali es1

Formattazione_testo.html.

console elements

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.