Vedremo in questo articolo come creare elementi nel DOM con JavaScript.
Nell’articolo precedente abbiamo visto che cosa è un DOM in JavaScript e abbiamo studiato i metodi per selezionare elementi in un pagina. Potete consultare l’articolo al seguente link:https://www.codingcreativo.it/dom-in-javascript/.
Come creare elementi nel DOM con JavaScript
L’elemento da creare può essere ad esempio un nuovo livello, un nuovo paragrafo, un nuovo titolo, ecc.
Per creare elementi nel DOM con JavaScript utilizzeremo il metodo createElement(), specificando all’interno delle parentesi il tipo di elemento che si vuole creare.
La sintassi è dunque questa:
elemento=document.createElement(tag);
dove tag può essere un tag qualsiasi.
Per aggiungere il nuovo elemento, in coda alla lista degli elementi contenuti nel nodo corrente, utilizziamo il metodo appendChild().
Esempio
Vediamo quindi un esempio pratico di come creare elementi nel DOM con JavaScript.
Se fate la prova a cliccare il pulsante sotto, comparirà un nuovo elemento.
Qui inserirò il pulsante:
Procedimento
Innanzitutto creiamo un nuovo livello (div) con id uguale a pulsante, che corrisponde al punto in cui comparirà il nuovo pulsante.
<div id="pulsante">Qui inserirò il pulsante: </div>
Sotto inseriamo il pulsante a cui è associato l’evento onclick che richiama la funzione inserimento().
Creiamo poi la funzione inserimento() in JavaScript.
Questa funzione creerà un nuovo pulsante, che conterrà la scritta Scratch e poi inserirà l’elemento, con il metodo appendChild(), nel livello con id uguale a pulsante.
Ecco dunque il codice in javascript:
<script type="text/javascript">
function inserimento() {
var btn = document.createElement("button");
btn.innerHTML = "scratch";
document.getElementById("pulsante").appendChild(btn);
}
</script>
Contenuto all’interno dell’elemento creato
Continuiamo il nostro tutorial su come creare elementi nel DOM con JavaScript presentando altri metodi.
Dopo aver creato il nuovo elemento si può avere la necessità di inserire del testo al suo interno. Per fare ciò posso utilizzare ad esempio il metodo createTextNode(), dove all’interno delle parentesi specifico il testo da inserire.
La sintassi è questa:
element.createTextNode()
Esempio
Facciamo un esempio creando un nuovo paragrafo dove andremo ad inserire del testo a piacere.
Procedimento
Inseriamo al solito il nostro pulsante e sotto aggiungiamo un livello (div), dove apparirà il nuovo paragrafo.
La nostra funzione aggiungi() semplicemente creerà l’elemento nuovo, scriverà il testo all’interno del paragrafo e poi con appendChild() aggiungerà questi contenuti appena creati.
Ecco quindi il codice per creare l’esempio:
<button onclick="aggiungi()">Aggiungi paragrafo</button>
<div id="testo"></div>
<script>
function aggiungi() {
var paragrafo= document.createElement("p");
var testo = document.createTextNode("Coding Creativo");
paragrafo.appendChild(testo);
document.getElementById("testo").appendChild(paragrafo);
}
</script>
Quindi, riassumendo in questa lezione abbiamo imparato a creare elementi nel DOM con JavaScript e ad utilizzare i metodi createElement(), createTextNode() e appendChild().
Nella prossima lezione continueremo ancora a parlare del DOM con JavaScript.
Il DOM inJavaScript è uno strumento che consente di accedere agli elementi di una pagina HTML.
Il browser web, infatti, quando carica la pagina web crea il DOM (Document Object Model).
Il DOM può essere visto come una struttura ad albero, come ad esempio questa:
La struttura del DOM di questa pagina web è dunque:
document
head
title
titolo del documento (text node)
body
p
testo del paragrafo (text node)
h1
titolo (text node)
Usare il dom in JavaScript
Usando il DOM in JavaScript si possono aggiungere o rimuovere elementi ed attributi esistenti e si possono anche creare nuovi eventi in una pagina.
La radice del documento, cioè la pagina web, è rappresentata da document. L’oggetto document è dunque il padre di tutti gli altri elementi.
Consideriamo che si può accedere agli elementi in maniera diretta, cioè senza percorrere tutto l’albero.
Element è un nodo che rappresenta un elemento html (un tag), mentre text è l’ultimo nodo figlio di un genitore e rappresenta un nodo di testo.
Metodi di document per selezionare elementi di una pagina
Proseguiamo il tutorial sul DOM in JavaScript presentando in particolare dei metodi dell’oggetto document per selezionare elementi.
getElementById()
Il metodo getElementById() identifica un elemento nella pagina tramite l’id associato ad un tag html.
Facciamo dunque un esempio.
Provate a cliccare il pulsante sotto, noterete che la scritta cambierà.
Clicca sul pulsante per provare getElementById.
Procedimento
Inserisco innanzitutto un livello con il tag div a cui associo l’id cambio. Dopo inserisco un pulsante dove aggiungo l’evento onclick, a cui associo la funzione cambia() che ha lo scopo di cambiare il testo contenuto all’interno del tag div.
Per cambiare il testo utilizzo inoltre la proprietà innerHTML.
<div id="cambio">Clicca sul pulsante per provare getElementById.</div>
<button onclick="cambia()">Cambio</button>
<script type="text/javascript">
function cambia() {
document.getElementById("cambio").innerHTML="Benvenuto su Coding Creativo";
}
</script>
getElementsByClassName()
Il dom in JavaScript fornisce un altro metodo che permette di identificare gli elementi di una pagina web in base alla classe associata, ovvero il metodo getElementsByClassName().
Facciamo un esempio in modo da capirne il funzionamento.
Se clicchiamo sul pulsante sotto si modificherà l’ultima voce dell’elenco e inoltre a tutti gli elementi a cui è associata la classe code verrà dato uno sfondo azzurro e una scritta bianca.
Scratch
Algobuild
Linguaggio C
Linguaggio C++
Procedimento
Ho creato una serie di livelli tutti con la stessa classe in cui ho scritto i nomi dei programmi. Voglio che quando si fa clic sul pulsante, l'ultima voce cambi e inoltre tutti i livelli diventino di colore azzurro e il colore della scrittura diventi bianco.
Dopo inserisco il pulsante con l'evento onclick che richiama la funzione coding().
In JavaScript quindi costruisco questa funzione in modo tale da prendere l'elemento con indice 3 a cui è assegnata la classe code e al posto del precedente contenuto sostituisce il testo Java.
Inoltre a tutti gli elementi di classe code, come detto prima, cambio formattazione.
Allego il codice JavaScript e html:
<div class="code">Scratch</div>
<div class="code">Algobuild</div>
<div class="code">Linguaggio C</div>
<div class="code">Linguaggio C++</div>
<button onclick="coding()">Cambio</button>
<script>
function coding() {
document.getElementsByClassName("code")[3].innerHTML = "Java";
var list = document.getElementsByClassName("code");
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "#f67f92";
list[i].style.color = "#fffff";
}
}
</script>
getElementsByTagName()
Continuiamo il tutorial sul dom in JavaScript presentando un altro metodo per selezionare gli elementi, il metodo getElementsByTagName().
Questo metodo permette di identificare gli elementi di una pagina web in base al nome del tag.
Facciamo adesso un esempio.
Se clicchiamo il pulsante cambio si imposterà uno sfondo azzurro per tutta la scritta, tranne per il testo fuori dal div.
Scratch
Testo fuori dal div....
Algobuild
Linguaggio C
Linguaggio C++
Clicca sul pulsante per provare getElementsByClassName().
Procedimento
Per realizzare questo esempio innanzitutto inseriamo un livello principale a cui assegniamo un id codingC e all'interno inseriremo altri livelli e un paragrafo.
Come detto prima, vogliamo assegnare a tutti i div la stessa formattazione, mentre il paragrafo deve mantenere la formattazione di partenza.
In JavaScript creo dunque una funzione coding() che prende la lista degli elementi di div che sono all'interno del tag con id uguale a codingC e gli assegna uno sfondo personalizzato.
<div id="codingC">
<div class="code">Scratch</div>
<p> Testo fuori dal div....</p>
<div class="code">Algobuild</div>
<div class="code">Linguaggio C</div>
<div class="code">Linguaggio C++</div>
</div>
<div id="cambio">Clicca sul pulsante per provare getElementsByClassName().<div>
<button onclick="coding()">Cambio</button>
<script type="text/javascript">
function coding() {
var el= document.getElementById("codingC");
var list = el.getElementsByTagName("div");
for (var i = 0; i < list.length; i++) {
list[i].style.backgroundColor = "#a5cff3";
}
}
</script>
Se volessimo includere anche il paragrafo, dovremmo modificare solo questa riga di codice:
var list = el.getElementsByTagName("div");
e indicare quindi
var list = el.getElementsByTagName("*");
dove l'asterisco indica tutti gli elementi.
Questo articolo è solo una piccola introduzione al DOM in JavaScript , continueremo nel prossimo tutorial ad esplorare altri metodi ed eventi.
Creiamo in quest’articolo una semplice galleria di immagini con JavaScript e HTML, utilizzando gli array spiegati nella precedente lezione.
Per il momento non utilizzeremo jQuery, più avanti vedremo un esempio di una galleria di immagini con l’uso di questa libreria.
Esempio di galleria di immagini con JavaScript e HTML
L’esempio realizzato prende delle immagini da una cartella e le visualizza una alla volta, specificando anche il nome delle immagini. Con i pulsanti indietro ed avanti si scorrono tutte le immagini che si vuole utilizzare per la realizzazione di questa gallery.
Di seguito una demo della galleria di immagini con JavaScript ed HTML necessario che ho realizzato:
angoli.jpg
Procedimento
Per realizzare la galleria di immagini con JavaScript ed HTML, devo inserire innanzitutto il tag img, dove, nella proprietà src, specifico il percorso delle immagini. Inoltre dò anche un id al tag, in modo tale da richiamarlo successivamente in JavaScript.
Per avere tutto ordinato creo una cartella di nome img dove vado ad inserire tutte le immagini.
Inserisco poi, subito sotto, il div che conterrà il nome dell'immagine e poi i pulsanti avanti e indietro per scorrere queste immagini.
Adesso inserisco il codice per la creazione della galleria di immagini con JavaScript. Creo innanzitutto un array foto e inserisco ad esempio 6 foto, per il momento una alla volta.
Dopo creo le funzioni per i pulsanti avanti e indietro.
Il pulsante avanti andrà avanti finché il valore della variabile i non raggiungerà la lunghezza dell'array, dopo inizierà nuovamente dalla prima foto.
Quindi, con questa istruzione: document.getElementById("image").src=foto[i]; inseriremo l'immagine giusta nel percorso src del tag img.
Liberiamo il nome dal percorso img/ utilizzando il metodo split(), in modo tale da dividere la stringa in base al separatore /. Stamperemo così solo il nome dell'immagine.
Lo stesso discorso per il pulsante indietro.
Allego lo script completo che solo per comodità inseriamo nella stessa pagina, ricordiamo infatti che sarebbe opportuno creare uno script a parte.
let foto = new Array();
let str;
const foto[0]="img/angoli.jpg";
const foto[1]="img/equazioni.jpg";
const foto[2]="img/frazioni.jpg";
const foto[3]="img/calcolatrice.jpg";
const foto[4]="img/annobisestile.jpg";
const foto[5]="img/palindroma.jpg";
let i = 0;
function avanti(){
if (i < foto.length-1)
i++;
else
i=0;
document.getElementById("image").src = foto[i];
str = foto[i].split('/');
document.getElementById("titolo").innerHTML = str[6];
}
function indietro(){
if (i == 0)
i = foto.length-1
else
i--;
str = foto[i].split('/');
document.getElementById("titolo").innerHTML = str[6];
document.getElementById("image").src = foto[i];
}
Chiaramente questo è solo un esempio di possibile creazione di una galleria di immagini con JavaScript ed HTML.
Un array in JavaScript è uno strumento utile a memorizzare più dati anche di tipo diverso.
JavaScript, infatti, come altri linguaggi di programmazione, permette la creazione e la gestione degli array.
Ci sono vari modi per definire un array in JavaScript, in questo tutorial li analizzeremo tutti e vedremo quale risulta più congeniale.
Definizione di array in JavaScript
Come prima cosa studiamo i metodi per definire un array vuoto.
Primo metodo
Il primo metodo che analizziamo per definire un array vuoto è l’utilizzo dell’oggetto Array().
Questo metodo segue la seguente sintassi:
var foto = new Array();
Dunque la variabile foto è un array definito utilizzando il costruttore new.
Si sfrutta così l’oggetto Array().
Secondo metodo
Si può anche non utilizzare il costruttore new per creare un array vuoto, quindi si può anche semplicemente scrivere:
var foto = [];
Inserimento dei dati in un array in JavaScript
Possiamo inserire i dati in un array con più metodi.
Primo metodo
Seguendo il primo metodo possiamo assegnare gli elementi direttamente all’interno delle parentesi tonde dell’oggetto Array().
var foto = new Array(“img1.jpg”,”img2.jpg”,…);
Secondo metodo
Il secondo metodo è quello più utilizzato quando dobbiamo inizializzare un array con degli elementi predefiniti e permette di inserire ciascun elemento separato da virgola:
var foto = [“img1.jpg”, “img2.jpg”, …];
In alternativa si può creare un array vuoto e dopo assegnare gli elementi:
var foto = [];
foto[0]=”img1.jpg”;
foto[1]=”img2.jpg”;
Lettura di dati di un array in JavaScript
Adesso vediamo come leggere i dati da un array.
Popolare un array con i giorni della settimana e stampare tutti gli elementi.
In questa lezione vedremo come stampare gli elementi senza l’utilizzo del ciclo for e della proprietà length, oggetto delle prossime lezioni.
Dunque inseriamo i giorni della settimana in un array di nome giorni.
var giorni = [“lunedì”, “martedì”, “mercoledì”, “giovedì”, “venerdì”, “sabato”, “domenica”];
Dopo considerando che il primo elemento ha indice 0 e gli altri a seguire hanno un indice crescente stampiamo ciascun elemento semplicemente in questo modo:
console.log(giorni[0]); ....
Ecco dunque lo script completo:
var giorni = ["lunedì", "martedì","mercoledì", "giovedì", "venerdì", "sabato", "domenica"];
console.log(giorni[0]);
console.log(giorni[1]);
console.log(giorni[2]);
console.log(giorni[3]);
console.log(giorni[4]);
console.log(giorni[5]);
console.log(giorni[6]);
Chiaramente si può utilizzare un ciclo per leggere tutto l’array, ma lo analizzeremo nelle prossime lezioni.
In questa lezione abbiamo studiato dei semplicissimi esempi di array in JavaScript, nelle prossime lezione studieremo i vari metodi necessari per compiere alcune operazioni.
Quindi ecco l’algoritmo completo per il calcolo del quoziente di potenze con la stessa base con Scratch.
Chiaramente si potrebbero aggiungere tanti controlli sull’input. Questo esercizio, infatti, vuole essere solo un punto di partenza, per la realizzazione dell’algoritmo.
Commenti recenti