Esercizio 11: JS #2

Rivediamo insieme:

• ID
• DOM
• Percorsi, immagini, link
• Libreria Math

DOM

Il DOM (Document Object Model) è una rappresentazione della struttura di un documento HTML che può essere manipolata, ad esempio tramite JS.

Caricando una pagina sul browser, quest'ultimo crea un albero DOM che ne rappresenta la struttura. represents the page's structure. L'albero è costituito da nodi, ogni nodo rappresenta un elemento della pagina come un paragrafo, un'immagine, o un bottone etc. I nodi, come e.g. un div, possono avere dei nodi figli, ovvero gli elementi contenuti all'interno di quell'elemento. Per capirci, qualunque elemento dentro body è un "figlio" di body. Tramite JS possiamo cambiare il contenuto, l'aspetto, il comportamento di un elemento in maniera dinamica. For example, you can change the text of a paragraph, hide an image, or add a new element to the page.

Alcune delle funzioni DOM più utilizzate sono:

• getElementById(): questa funzione viene utilizzata per recuperare un elemento dalla pagina tramite il suo attributo ID univoco.
• addEventListener("azione", miaFunzione);: questa funzione viene utilizzata per aggiungere un "ascoltatore" ad un elemento (o all'intero documento) e attivare una funzione dopo che l'azione specificata si verifica.
• document.querySelector("elemento/elemento per classe/elemento per ID");: restituisce il primo elemento che corrisponde alla descrizione.
• document.querySelectorAll("elemento/elemento per classe/elemento per ID");: restituisce tutti gli elementi (come una lista di nodi) che corrispondono alla descrizione.
• setAttribute(nome, valore): imposta l'attributo (nome) di un elemento al valore specificato.
• innerHTML: metodo per modificare il testo all'interno di un elemento già selezionato.

La libreria Math

Math è un oggetto integrato che ha proprietà e metodi per costanti e funzioni matematiche. Non è un oggetto funzione.

Math funziona con il tipo Number.

Math.random() è una funzione integrata di JavaScript che restituisce un numero in virgola mobile casuale compreso tra 0 e 1 (escluso 1).

La funzione genera un numero pseudo-casuale utilizzando un algoritmo.

Ecco un esempio di utilizzo di Math.random():

let randomNumber = Math.random();
console.log(randomNumber);
///e.g. 0.252

Per generare interi casuali all'interno di un intervallo specifico, è possibile combinare Math.random() con altre funzioni matematiche come Math.floor() o Math.ceil(). Ad esempio, il codice seguente genererà un numero intero casuale compreso tra 1 e 10 (inclusi):

let randomInteger = Math.floor(Math.random() * 10) + 1;
console.log(randomInteger);
//e.g. 2

La funzione Math.floor() arrotonda verso il basso il risultato di Math.random() * 10 al numero intero più vicino, quindi aggiungiamo 1 per spostare l'intervallo da 0-9 a 1-10. La funzione console.log() stamperà quindi questo numero intero casuale sulla console.