Articles
Introduzione a JavaScript
JavaScript e HTML

JavaScript e HTML

Questo articolo spiega JavaScript e HTML.

YouTube Video

L'oggetto window in JavaScript

L'oggetto window in JavaScript è l'oggetto globale in un ambiente browser, che fornisce funzioni e informazioni relative alla pagina web e alla finestra del browser. Poiché window è lo scope globale del browser, tutto il codice JavaScript eseguito nel browser diventa parte dell'oggetto window. L'oggetto window svolge un ruolo importante nell'esecuzione di JavaScript nell'ambiente del browser, fornendo molte API e proprietà.

Caratteristiche principali dell'oggetto window

Proprietà 

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);
  • window.document: Accede al documento HTML corrente.
  • window.location: Gestisce l'URL corrente e la navigazione del browser.
  • window.history: Accede alle informazioni della cronologia del browser e consente la navigazione avanti e indietro.
  • window.navigator: Fornisce informazioni sul browser e sul dispositivo.
  • window.innerWidth / window.innerHeight: Recupera la larghezza e l'altezza del viewport.

Metodi 

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);
  • window.alert(): Mostra una finestra di dialogo di avviso.
  • window.confirm(): Mostra una finestra di dialogo per richiedere la conferma dell'utente e restituisce un risultato OK o Annulla.
  • window.prompt(): Mostra una finestra di dialogo che richiede l'input dell'utente e recupera il valore inserito.
  • window.open(): Apre una nuova finestra o scheda.
  • window.setTimeout() / window.setInterval(): Imposta un timer per eseguire una funzione dopo un certo periodo di tempo o a intervalli regolari.

Gestione degli eventi 

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};
  • window.onload: Un evento che viene eseguito quando la pagina è stata completamente caricata.
  • window.onresize: Un evento che viene eseguito quando cambia la dimensione della finestra.
  • window.onscroll: Un evento che si attiva quando l'utente scorre la pagina.

Ruolo come Variabile Globale 

1var myVar = 10;
2console.log(window.myVar); // 10
  • L'oggetto window contiene variabili globali e funzioni. In altre parole, le variabili e le funzioni dichiarate diventano automaticamente proprietà di window.

Manipolazione del DOM in JavaScript

La manipolazione del DOM (Document Object Model) con JavaScript viene utilizzata per interagire dinamicamente con gli elementi sulla pagina web. Il DOM rappresenta la struttura di un documento HTML come un albero, che può essere modificato usando JavaScript per alterarne la struttura e controllarne la visualizzazione.

Fondamenti del DOM

Il DOM considera l'HTML di una pagina web come oggetti, permettendo l'accesso e la modifica di elementi e attributi. Usa l'oggetto document per accedere al documento HTML.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

Recuperare Elementi del DOM

JavaScript offre numerosi metodi per accedere agli elementi nel DOM.

  • document.getElementById(): Ottieni un elemento tramite l'attributo id
  • document.getElementsByClassName(): Ottieni elementi tramite il nome della classe (HTMLCollection)
  • document.getElementsByTagName(): Ottieni elementi tramite il nome del tag (HTMLCollection)
  • document.querySelector(): Ottieni il primo elemento corrispondente utilizzando un selettore CSS
  • document.querySelectorAll(): Ottieni tutti gli elementi corrispondenti utilizzando un selettore CSS (NodeList)

Esempio: getElementById e querySelector 

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

Manipolazione del DOM

È possibile eseguire varie operazioni sugli elementi ottenuti.

Cambiare il Testo

Per cambiare il testo di un elemento, usa textContent o innerHTML.

  • textContent: Ottieni o modifica il contenuto testuale di un elemento. I tag HTML non vengono interpretati.
  • innerHTML: Ottieni o modifica il contenuto HTML di un elemento. Anche le stringhe contenenti tag HTML vengono elaborate.
1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Modifica degli attributi

Usa setAttribute() e getAttribute() per modificare gli attributi di un elemento.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

Modifica del CSS

Usa la proprietà style per modificare gli stili CSS.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Gestione delle classi

Usa classList per aggiungere o rimuovere classi da un elemento.

  • add(): Aggiungi una classe
  • remove(): Rimuovi una classe
  • toggle(): Aggiungi o rimuovi una classe in base alla sua presenza
  • contains(): Verifica se una classe esiste
1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Creazione ed eliminazione di elementi DOM

Creazione di nuovi elementi

Usa document.createElement() per creare un nuovo elemento e aggiungerlo al DOM.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Eliminazione di elementi

Usa il metodo remove() per eliminare un elemento.

1newDiv.remove();  // Remove the created element

Aggiunta di eventi

Come parte della manipolazione del DOM, è possibile aggiungere gestori di eventi che rispondono alle interazioni degli utenti. Usa addEventListener() per gestire eventi come clic e interazioni con la tastiera.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

In questo esempio, facendo clic su un pulsante si modifica il testo dell'elemento #content.

Navigazione nel DOM

Puoi navigare nel DOM per accedere agli elementi padre e fratelli.

  • parentNode: Accede al nodo genitore
  • childNodes: Accede ai nodi figli (di tutti i tipi)
  • firstChild / lastChild: Primo/ultimo elemento figlio
  • nextSibling / previousSibling: Elemento successivo/precedente
1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Esempio: Aggiunta di un nuovo elemento a una lista

Ecco un esempio di come aggiungere un nuovo elemento a una lista.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

In questo codice, cliccando sul pulsante "Aggiungi elemento" si aggiunge un nuovo elemento <li> alla lista.

Riepilogo

  • La manipolazione del DOM con JavaScript ti consente di ottenere, modificare, creare e eliminare elementi all'interno di un documento HTML.
  • Puoi ottenere elementi utilizzando metodi come getElementById() e querySelector().
  • Usa textContent o innerHTML per modificare testo e HTML, e setAttribute() per gestire gli attributi.
  • Usa createElement() per creare nuovi elementi e remove() per eliminarli.
  • Puoi creare pagine web interattive che rispondono alle azioni degli utenti tramite la gestione degli eventi.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Funzioni Generatrici in JavaScript