manipolazione del DOM

17 risultati

GUIDA GRATUITA

Fase 1: creiamo l’HTML di base

Sei pronto a mettere le mani sul codice e creare qualcosa di davvero coinvolgente? In questo tutorial, realizzeremo insieme un quiz interattivo con il linguaggio JavaScript, perfetto per rendere il tuo sito web più stimolante e divertente. Quante volte ti sei fermato a rispondere a delle domande per capire se "sei un vero esperto di…

GUIDA GRATUITA

Fase 3: aggiungiamo interattività con JavaScript

Siamo giunti allo step finale: dobbiamo far muovere i nostri cursori e attivare l'effetto di click. Come? Semplicissimo, con il linguaggio Javascript! Creiamo il file script.js: const cursor = document.querySelector('.cursor'); const cursorDot = document.querySelector('.cursor-dot'); document.addEventListener('mousemove', e => { const mouseX = e.clientX; const mouseY = e.clientY; cursorDot.style.left = `${mouseX}px`; cursorDot.style.top = `${mouseY}px`; cursor.style.left =…

GUIDA GRATUITA

Fase 2: stilizziamo il cursore con il CSS.

Una volta settata la struttura grazie al linguaggio html, passiamo a dare un po’ di stile al nostro cursore avvalendoci del linguaggio CSS. Creiamo, quindi, il file style.css per stilizzare i nostri cursori: body { cursor: none; /* Nasconde il cursore predefinito */ background-color: #1D1E22; } h1 { color: #fff; text-align: center; margin-top: 50px;…

Vuoi avviare una nuova carriera o fare un upgrade?

Trova il corso Digital & Tech più adatto a te nel nostro catalogo!

Scopri i corsi 👨‍🏫

GUIDA GRATUITA

Fase 1: creiamo la struttura HTML di base

Quante volte, visitando un sito web, hai notato che il puntatore del mouse appariva diverso dal solito? Ti è mai capitato di vedere che il cursore, seguendo il movimento del mouse, cambiasse, per esempio, la sua forma o, addirittura, si animasse al click? Se ti è mai venuto in mente di provare a fare qualcosa…

GUIDA GRATUITA

Struttura della guida e come seguirla.

Questa guida è strutturata per accompagnarti in un viaggio nell’esplorazione della manipolazione del DOM da livello principiante fino a livello esperto. Si compone di tre sezioni principali, ciascuna focalizzata su un progetto pratico, che potrai replicare, con difficoltà crescente: Tutorial principiante - crea un cursorse personalizzato: inizieremo con la creazione di un cursore personalizzato.…

GUIDA GRATUITA

Requisiti e conoscenze preliminari.

Prima di addentrarci nella manipolazione del DOM, è importante avere una comprensione di base dei seguenti concetti: Linguaggio HTML: la struttura della pagina web, compresi i tag e gli attributi. Puoi rispolverare questi concetti consultando la nostra guida all’html in italiano! Linguaggio CSS: la stilizzazione e il layout degli elementi HTML. Puoi approfondire queste…

GUIDA GRATUITA

Perché manipolare il DOM con JavaScript?

Il DOM è fondamentale perché è ciò che permette di rendere le pagine web interattive e dinamiche. Con il linguaggio JavaScript, possiamo interagire con il DOM in modo fluido e immediato, offrendo agli utenti esperienze web coinvolgenti. JavaScript è il linguaggio di scripting nativo dei browser web, il che significa che può interagire con il…

GUIDA GRATUITA

Cos’è il DOM?

Il DOM (Document Object Model) è un concetto fondamentale nel web development che consente di creare pagine web interattive e dinamiche. Si tratta di una rappresentazione della struttura di un documento HTML o XML. Quando un browser carica una pagina web, esso crea automaticamente un modello del documento, noto come DOM, che rappresenta ogni parte…