PROGRAMMARE IL WEB NEL 2018

La serie aggiornata per programmare il web in HTML5, CSS3, JAVASCRIPT

Esercitazione INTERAZIONE CON LA PAGINA WEB IN JAVASCRIPT (SELEZIONARE, AGGIUNGERE, MODIFICARE, RIMUOVERE ELEMENTI)


1) Considerando la seguente pagina web


Come recuperare il div?

Come recuperare l’ul?
Come recuperare l’elemento li che contiene il nodo di testo “Uova”
Usare document.body.* e querySelector
2) Data una tabella 5x5 definita in html, scrivi il codice che permette di colorare le celle in diagonale (da in alto a sinistra fino in basso a destra e la diagonale da in alto a destra fino a in basso a sinistra) di rosso
td.style.backgroundColor = 'red';
table.rows si ciclano tutte le righe
Data una particolare row si possono ottenere le celle della riga in questo modo
table.rows[id].cells;
3) Che cosa mostra questo pezzo di codice
let body = document.body;
body.innerHTML = "";
alert( body.firstChild.data ); // what's here?
4) Scrivi il codice che seleziona l’elemento con l’attributo data-widget-name e leggi il valore associato.

5) createTextNode vs innerHTML vs textContent
Abbiamo un elemento Dom vuoto e una stringa di testo
Quale dei 3 comandi seguenti permettono di ottenere lo stesso risultato e perché?
elem.append(document.createTextNode(text))
elem.innerHTML = text
elem.textContent = text
6) Crea una funzione clear(elem) che rimuove tutto il contenuto dell’elemento ol indicato sopra. Ci sono almeno due modi per farlo.

7) Scrivi del codice javascript per creare una lista dinamicamente secondo l’input dell’utente.
Per ogni elemento della lista
Chiedi all’utente il contenuto usando prompt
Creare l’elemento li con il testo e aggiungerlo a ul
Continuare fino a che l’utente non annulla l’input (con ESC o Cancel)
N.B. Se l’utente digita eventuali tag HTML, questi devono essere trattati come testo.