Abbiamo completato la nostra pagina strutturalmente e anche a livello a livello estetico.

Quindi abbiamo il nostro mark up, abbiamo il nostro CSS con cui applichiamo gli stili, cosa ci manca adesso possiamo decidere di inserire un minimo di logica nella nostra pagina e per applicare della logica sfrutteremo un linguaggio utilizzato su browser.

È davvero già scritto per interagire con il nostro mark, quindi con HTML.

Vedremo adesso come sarà possibile utilizzare delle delle regole e delle funzioni per poter trovare degli elementi, applicare degli stili e fare delle modifiche e o addirittura arrivare anche ad applicare degli eventi a intercettare degli eventi.

Quindi partiamo da un concetto base che è quello del Dom Document Object Model.

Il documento object model, appunto Abbreviato Odom è la rappresentazione della pagina html sotto forma di albero, sotto forma quindi di una sorta di alberature.

Da dove si diramano i vari elementi.

Abbiamo visto che effettivamente la struttura di pagina è caratterizzata da tanti elementi innestati fra di loro che si diramano e questi elementi vengono comunemente chiamati anche nodi.

Il nodo ll element è la rappresentazione dell'unità che forma il donne, per cui abbiamo questa rappresentazione ad albero detta anche ad oggetto con cui possiamo interagire utilizzando javascript.

In particolare, il Dom ci mette a disposizione diverse funzioni per poter accedere agli elementi.

Una di queste è quella che vedremo adesso la GATT elements Boyd, che ci consente di recuperare quindi all'interno di questa alberature.

All'interno quindi del Duomo un elemento tramite il suo Pd che andremo a definire ovviamente nel mar vediamo come.

In questo esempio abbiamo un tag un active con il di saluto e come riusciamo quindi a recuperarlo a tramite il metodo getelementbyid id.

Una volta recuperato l'elemento a sua volta sono molte le operazioni che possiamo compiere su un elemento possiamo decidere di cambiare lo stile modificandola attributo style è oppure appendere degli eventi, intercettare degli eventi appendendo un listener, una funzione che fa da listener.

Vedremo meglio dopo tramite il metodo ad event listener oppure semplicemente accedere al value di una input, quindi attingere al dato che L'utente ha inserito nella nostra casella di testo.

Io direi di passare un po' di là Vicodin per fare alcuni esempi qui ho la mia una mia pagina html con un po' di vuoto ho aggiunto il tag script che sarà quello a cui andrò a a inserire sarà quella cosa andrò a inserire la mia logica javascript ora giusto per semplificare un po' la visione con visco d' ancora un po' le due finestre è una luna sotto l'altro così riusciamo a vedere contestualmente quello che facciamo sul teacup quello che facciamo nelle javascript cominciamo un po' a giocare definisco non lo so un'acca uno per esempio un h uno con all'interno un testo tipo ciao julian lato del mio browser con la console aperta ricarico e vediamo comparire ciao bulent e in javascript adesso andro' a recuperare questo elemento nel dome tramite e lo assegnero' ad una variabile.

In questo caso sfruttare una costante quindi consta troviamo un nome a caso l element uno è che sarà uguale quindi a document punto getelementbyid id vediamo come ce l'ho ce lo suggerisce già vives code e nei parametri di questa funzione indicherò appunto tra pc la stringa che identifica leeds quindi in questo caso gli dica ho applicato prima che è ciao quindi ciao e giusto per fare una prova stampiamo il tutto su un console log, quindi vedremo in console il risultato di questo di questa operazione di selezione, quindi di accesso al don per recuperare un nodo torno sul browser, ricarico la pagina e vediamo che il console oggi stampa proprio il nodo stesso che tra l'altro se andiamo in over ci viene evidenziato anche nel browser.

Bene, quindi adesso io assegnato una variabile, un riferimento al nodo che mi interessava.

Quindi adesso abbiamo il nostro elemento e possiamo applicare tantissime operazioni, per cui posso adesso, per esempio, accedere al testo interno all'elemento che appena catturato nella mia variabile, quindi sempre con console log, prova a fare un elemento accedere al suo attributo per esempio in testa, salvo ricarico e vediamo che appunto l' attributo inerte.

Inner texts in lettura mi restituisce quello che il testo contenuto all'interno del mio nodo, ma posso fare tantissime altre operazioni.

Per esempio proviamo in questo caso a non so assegnare un valore a un input no, io adesso creero' un input di tipo text abbiamo visto che tra i vari attributi accetta anche l' attributo value che posso già pre valorizzare al livello di mark.

In questo caso metto filippo, quindi ho appena creato la mia casella di input valorizzando la con filippo e come abbiamo detto è importante assegnare umidi per poterla recuperare dal donne, quindi potrei chiamarla anp diciamo l'iniziale di input, quindi farà anche in questo caso un'assegnazione a una variabile.

Mi torna comodo per poter sfruttare più volte questo riferimento a questo nodo.

Potrei chiamarla anche questa anp e fare anche qui un document getelementbyid id recuperando per i d quell'elemento in particolare stampiamo lo stampiamo la variabile con cui l'ho catturato e ricarichiamo la pagina, vediamo che anche qui in console appare il nostro nodo.

Quindi cosa posso fare adesso? Posso per esempio anche di sfrutto console log, decidere di stampare il suo value, quindi anp value ricarico e vediamo comparire Filippo.

Posso anche modificarlo se voglio o addirittura possiamo giocare anche il console.

Quindi la situazione è tipo che si verrà a creare, no? Un utente che compila la nostra forma e scriverà il suo nome magari scrive Sofia quindi io potrò poi in un secondo momento dinamicamente accedere al tale valore con il mio già scritto faccio direttamente in console in questo caso perché ho modificato il mio valore adesso nel browser, quindi il mio scritto è già stato eseguito, quindi lavoro direttamente in console log.

Anche in questo caso proverò a stampare mi il contenuto di di quella variabile e vediamo che mi stampo appunto il nome Sofia Un'ultima, cosa che potrei mostrarvi.

Per esempio è come cambiare anche colore.

Per esempio ha un testo utilizzerei per brevità già il l'elemento uno che abbiamo lasciato nella variabile.

Potrei ad esempio accedere alla sua proprietà alla sua proprietà style.

Ok, stai oggetto che rappresenta tutti gli attributi, tutti attributi che abbiamo assegnato o che sono comunque presenti come stile m' della dell'elemento e posso in questo caso decidere di sovrascrivere in particolare l' attributo coloro con cui potrei ridefinire il colore del testo e assegnare un red.

Quindi elements that il color red salvo ricarico e vediamo come adesso l'elemento è diventato rosso.

Posso decidere di accedere alle proprietà display dell'elemento e modificare anche questa, per esempio decidendo di nasconderlo.

Quindi assegnero' un display non salvo il mio elemento sparisce, riassegnano display block.

Il movimento riappare.

Questo per dirvi come una semplice funzione, una semplice in termine tecnico del don.

Quindi posso manipolare quelli che sono i miei elementi.

Posso rintracciarli, posso modificarli, posso rimuoverli, posso aggiungerne di nuovi e vedremo come tutti questi tutti questi concetti ci saranno utili per applicare delle logiche al nostro, alla nostra pagina