createTextNode JavaScript

Coding Creativo 24/10/2022

Continuiamo il nostro tutorial utilizzando il metodo createTextNode in JavaScript, ovvero il metodo che ci consente di inserire del testo in un nodo.

Infatti, dopo aver creato un nuovo elemento oppure su un elemento già esistente, si può avere la necessità di inserire del testo al suo interno.

Per fare ciò si può utilizzare ad esempio il metodo createTextNode() di JavaScript, dove all’interno delle parentesi tonde specifico il nuovo testo da inserire.

La sintassi di questo metodo è la seguente:

element.createTextNode()

createTextNode JavaScript – first example

In questo esempio creeremo un nuovo paragrafo, dove all’interno inseriremo un testo a piacere. Il nuovo paragrafo sarà creato al click sul pulsante.

Provatelo cliccando sul pulsante sotto:

Procedimento

Spieghiamo dettagliatamente il procedimento per realizzare questo esempio.

Nel codice HTML inseriamo come prima un pulsante ‘Aggiungi nuovo paragrafo‘ e sotto di esso aggiungiamo un livello (div), dove apparirà il nuovo paragrafo generato.

La nostra funzione aggiungi() svolgerà delle semplicissime istruzioni:

dapprima creerà il nuovo elemento paragrafo,
poi scriverà del testo all’interno di questo paragrafo utilizzando il metodo createTextNode di JavaScript
e poi utilizzanado il metodo appendChild() aggiungerà questi contenuti appena creati nel punto desiderato. Il punto desiderato si ottiene grazie al metodo getElementById.

Ecco quindi il codice html per creare l’esempio:

Ed il codice JavaScript:



function aggiungi() {
  var paragrafo= document.createElement("p");
  var testo = document.createTextNode("Coding Creativo");
  paragrafo.appendChild(testo);
  document.getElementById("testo").appendChild(paragrafo);
}

Conclusione

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.

Alcuni link utili

Template responsive con html

Css Responsive

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Come realizzare un form in html

Tag strong

Collegamenti interni ad una pagina web

Continua la lettura su: https://www.codingcreativo.it/createtextnode-javascript/ Autore del post: Coding Creativo Fonte: https://www.codingcreativo.it

Categorie: Coding Creativo, Vedi tutti i blog di Didattica

Tags: javascript, Web

Coding Creativo

To do list in JavaScript

In questa lezione realizzeremo una semplice to do list in JavaScript, un classico esercizio di JavaScript che permette di sperimentare i metodi appresi finora.Per realizzare questo progetto infatti utilizzeremo alcuni metodi per manipolare il DOM in JavaScript.Intanto provate il progetto che andremo a realizzare assieme inserendo una voce e cliccando poi sul pulsante add della figura sotto:App To Do ListTo do list in JavaScript – sviluppo del codiceInnanzitutto realizziamo il codice HTML del progetto.Creiamo dunque una casella di input con un button e predisponiamo una lista dove appariranno tutti gli elementi che aggiungeremo a mano a mano. Realizziamo poi del CSS a piacere per dare un tocco grafico, io ad esempio ho realizzato questo:

.container{
background: #ff6676;
padding: 30px;
display: flex;
flex-direction: column;
}

.container h3{
color: white;
text-align: center;
margin-bottom: 15px;
height: auto;
}

form{
display: flex;
width: 100%;
}

.textInput{
width: 100%;
border: none;
padding: 14px;
}

#add{
width: 30%;
cursor: pointer;
background: #2c45a3;
border: none;
color: white;
font-size: 18px;
}

ul#lists{
display: flex;
flex-direction: column;
margin: 10px 0;
list-style: none;
}

ul#lists li{
padding: 12px;
background: white;
border: 1px solid #2c45a3;
display:flex;
justify-content: space-between;
}

.delete{
padding: 10px;
cursor: pointer;
border: none;
background: #ff6676;
color: white;
}

Infine sviluppiamo il codice JavaScript necessario a far funzionare la nostra to do list:

const buttonAdd = document.getElementById(‘add’);
const lists = document.getElementById(‘lists’);
const textInput = document.querySelector(‘.textInput’);

buttonAdd.addEventListener(‘click’, generateList);

function generateList(event) {
event.preventDefault();

if (textInput.value === ”) return;

const li = document.createElement(‘li’);
lists.appendChild(li);
li.appendChild(document.createTextNode(textInput.value));

const buttonDelete = document.createElement(‘button’);
buttonDelete.className = ‘delete’;
buttonDelete.appendChild(document.createTextNode(‘X’));
li.appendChild(buttonDelete);

textInput.value = ”;

buttonDelete.addEventListener(‘click’, (event) = >{
const parentNodeEl = event.target.parentNode;
setTimeout(() = >{
parentNodeEl.remove();
}, 500)

});

}

Prima di tutto abbiamo controllato che la casella di input contenesse del testo ed in caso contrario si esce dalla funzione con un return. In questo modo, se la casella è vuota non si crea una lista.Dopo, abbiamo utilizzato il metodo addEventListener per catturare il click dapprima sul pulsante add per aggiungere una voce nell’elenzo e poi sul pulsante delete per eliminare la voce corrispondente.All’interno della funzione generateList abbiamo utilizzato i metodi createElement e createTextNode rispettivamente per creare dei tag necessari (li e button) ed aggiungere del testo.Dopo aver aggiunto la voce svuotiamo la casella di input.ConclusioneIn questa lezione abbiamo sviluppato una semplice to do list in JavaScript, provate anche voi a svilupparne una e scrivete nei commenti sotto. Nelle prossime lezioni svilupperemo tanti altri progetti creativi.Alcuni link utiliIndice tutorial JavaScriptIntroduzione al tutorial JavaScriptIl linguaggio JavaScriptCome utilizzare JavaScript alertVariabili in JavaScriptGioco indovina numero in JavaScriptGioco della morra cinese in JavaScriptSemplice quiz utilizzando gli arrayCome realizzare il gioco dei dadi online

Coding Creativo 27/10/2022

Le potenze: applicazioni nelle espressioni

Nel vasto universo della matematica, come abbiamo avuto modo di vedere all’interno del nostro blog, tramite articoli pubblicati periodicamente, la potenza non rappresenta altro che una forma elegante e concisa al fine di denotare il numero delle volte per le quali occorre moltiplicare un numero per sé stesso.

Data la sua importanza vanta un vasto numero di definizioni e regole, poste a delineare e a spiegare ogni possibile situazione a cui potremmo imbatterci, come potenze di potenze, quoziente di potenze con la stessa base e prodotto di potenze con lo stesso esponente. Tuttavia il concetto di potenza non si sofferma soltanto su aspetti teorici, bensì anche pratici, che tornano utili soprattutto durante lo svolgimento di espressioni: l’argomento che nel corso di questo articolo tratteremo insieme e che chiuderà definitivamente la parte relativa alle potenze.

La prossima settimana, infatti, saremo felici di inaugurare una nuova sezione con argomenti matematici tutti nuovi da scoprire. Ti consiglio di non perderti l’articolo venturo al fine di alimentare le tue conoscenze in questa materia.

Regole e definizione per svolgere un espressione

Un’espressione matematica è una combinazione di simboli matematici, numeri, variabili e operatori che viene svolta seguendo le regole della matematica per ottenere un risultato numerico o algebrico. Le espressioni matematiche possono variare in complessità e possono includere operazioni come l’addizione, la sottrazione, la moltiplicazione, la divisione, nonché le potenze, le radici quadrate e le costanti.

Per svolgere correttamente le espressioni, necessitiamo di nozioni da ricordare riguardanti l’ordine delle operazioni che vanno eseguite e delle parentesi. Nello specifico l’esatto ordine degli operatori è dato svolgendo:

potenze;

moltiplicazioni e divisioni nell’ordine in cui si presentano;

addizioni e sottrazioni rispettando il loro ordine.

Le parentesi, che invece si presentano in tre tipi, non possono persistere all’interno di un’espressione svolta pian piano. Pertanto possono essere eliminate, ma occorre rispettare anche qui un ordine ben preciso e definito:

parentesi tonde;

parentesi quadre;

parentesi graffe.

Svolgimento di un’espressione

Dopo aver gettato le basi essenziali sul modo corretto con cui svolgere un’espressione, possiamo addentrarci all’interno di quest’argomento provvedendo alla risoluzione di un’espressione, spiegata nei minimi dettagli, analizzando ogni passaggio:

il primo passo da eseguire è quello di ricopiare il testo dell’espressione su un foglio di carta o quaderno. Nel nostro caso, l’espressione che bisogna risolvere è la seguente: {143 : 73 – 2 * [(32 – 3 – 22) * (5 – 22)] – 29 : 27} : 5 =

bisogna procedere con lo sviluppo delle potenze applicando le loro nozioni aggiungendo lo sviluppo dei termini presenti dentro parentesi tonde. In questa situazione sono presenti due quozienti di potenza con lo stesso esponente. Pertanto si svilupperà: {(14:7)3 – 2 * [( 9 – 3 – 4) * ( 5 -4)] – 29-7} : 5 =

si procederà con l’eliminazione definitiva delle parentesi tonde più lo sviluppo di altri calcoli possibili. Nel nostro caso, oltre ad eliminare le parentesi tonde presenti possiamo continuare a sviluppare le potenze, ottenendo: {23 – 2 * [ 2 * 1] – 4} : 5=

si continuerà eliminando le parentesi quadrate: {8 – 2 * 2 – 4} : 5 =

la nostra espressione, in questo modo, sarà in fase conclusiva e, per esser ultimata del tutto, dovremo provvedere all’eliminazione della parentesi graffa, realizzando prima la moltiplicazione e solo dopo la sottrazione, ottenendo in questo modo 0 : 5, che come risultato darà ovviamente 0, nel momento in cui ogni numero diviso o moltiplicato per zero dà sempre zero.

Blog 14/01/2024

createTextNode JavaScript – first example

Procedimento

Conclusione

Alcuni link utili

Articoli Correlati