JavaScript e HTML
Questo articolo spiega JavaScript e HTML.
YouTube Video
javascript-html-dom.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 2em;
14 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15 background-color: #f7f9fc;
16 color: #333;
17 line-height: 1.6;
18 }
19
20 .container {
21 max-width: 800px;
22 margin: 0 auto;
23 padding: 1em;
24 background-color: #ffffff;
25 border: 1px solid #ccc;
26 border-radius: 10px;
27 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
28 }
29
30 h1, h2 {
31 font-size: 1.5rem;
32 color: #007bff;
33 margin-top: 0.5em;
34 margin-bottom: 0.5em;
35 border-left: 5px solid #007bff;
36 padding-left: 0.6em;
37 background-color: #e9f2ff;
38 }
39
40 button {
41 display: block;
42 margin: 1em auto;
43 padding: 0.75em 1.5em;
44 font-size: 1rem;
45 background-color: #007bff;
46 color: white;
47 border: none;
48 border-radius: 6px;
49 cursor: pointer;
50 transition: background-color 0.3s ease;
51 }
52
53 button:hover {
54 background-color: #0056b3;
55 }
56
57 #output {
58 margin-top: 1em;
59 background-color: #1e1e1e;
60 color: #0f0;
61 padding: 1em;
62 border-radius: 8px;
63 min-height: 200px;
64 font-family: Consolas, monospace;
65 font-size: 0.95rem;
66 overflow-y: auto;
67 white-space: pre-wrap;
68 }
69
70 .highlight {
71 outline: 3px solid #ffc107; /* yellow border */
72 background-color: #fff8e1; /* soft yellow background */
73 transition: background-color 0.3s ease, outline 0.3s ease;
74 }
75
76 .active {
77 background-color: #28a745; /* green background */
78 color: #fff;
79 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
80 transition: background-color 0.3s ease, box-shadow 0.3s ease;
81 }
82 </style>
83</head>
84<body>
85 <div class="container">
86 <h1>JavaScript Console</h1>
87 <button id="executeBtn">Execute</button>
88 <div id="output"></div>
89 </div>
90
91 <div class="container">
92 <h2>HTML Sample</h2>
93 <div id="content">Hello, World!</div>
94 <button id="changeText">Change Text</button>
95 </div>
96
97 <script>
98 // Override console.log to display messages in the #output element
99 (function () {
100 const originalLog = console.log;
101 console.log = function (...args) {
102 originalLog.apply(console, args);
103 const output = document.getElementById('output');
104 output.textContent += args.map(String).join(' ') + '\n';
105 };
106 })();
107
108 document.getElementById('executeBtn').addEventListener('click', () => {
109 // Prevent multiple loads
110 if (document.getElementById('externalScript')) return;
111
112 const script = document.createElement('script');
113 script.src = 'javascript-html-dom.js';
114 script.id = 'externalScript';
115 //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116 //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117 document.body.appendChild(script);
118 });
119 </script>
120</body>
121</html>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(`Title: ${window.document.title}`);
3
4// Get and display the current URL
5console.log(`URL: ${window.location.href}`);
6
7// Go back to the previous page
8// Note: this will navigate back in history, so be careful when running it
9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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: Questo evento viene attivato quando la pagina è stata caricata completamente.window.onresize: Questo evento viene attivato quando la finestra viene ridimensionata.window.onscroll: Questo evento viene attivato quando l'utente scorre la pagina.
Ruolo come Variabile Globale
1var myVar = 10;
2console.log(window.myVar); // 10
- L'oggetto
windowcontiene variabili globali e funzioni. In altre parole, le variabili e le funzioni dichiarate diventano automaticamente proprietà diwindow.
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.
Recuperare Elementi del DOM
JavaScript offre numerosi metodi per accedere agli elementi nel DOM.
document.getElementById(): Recupera un elemento tramite il suo attributoid.document.getElementsByClassName(): Recupera gli elementi tramite il nome della classe. Restituisce unaHTMLCollection.HTMLCollectionè una collezione dinamica che riflette in tempo reale i cambiamenti nel DOM.document.getElementsByTagName(): Recupera gli elementi tramite il nome del tag. Restituisce unaHTMLCollection.document.querySelector(): Usa un selettore CSS per recuperare il primo elemento corrispondente.document.querySelectorAll(): Usa un selettore CSS per recuperare tutti gli elementi corrispondenti. Restituisce unNodeList.NodeListè una collezione statica che mantiene lo stato al momento del recupero e non riflette i cambiamenti successivi al DOM.
Esempio: getElementById e querySelector
1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>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"
3console.log(id);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(): Aggiunge una classe.remove(): Rimuove una classe.toggle(): Aggiunge o rimuove una classe a seconda che esista o meno.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. Puoi accedere a tutti i tipi di nodi, non solo ai nodi elemento come i tag HTML, ma anche ai nodi di testo e ai nodi di commento.firstChild/lastChild: Accede al primo e all'ultimo elemento figlio.nextSibling/previousSibling: Accede all'elemento fratello successivo e 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// Get the container element where the HTML will be inserted
2const content = document.getElementById('content');
3
4// Create the <ul> element with id="list"
5const list = document.createElement('ul');
6list.id = 'list';
7
8// Add initial list items
9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28 const newItem = document.createElement('li');
29 newItem.textContent = 'New Item';
30 list.appendChild(newItem);
31});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()equerySelector(). - Usa
textContentoinnerHTMLper modificare testo e HTML, esetAttribute()per gestire gli attributi. - Usa
createElement()per creare nuovi elementi eremove()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.