From 01776f90bda73f0db25147ea1d1bb157800cedba Mon Sep 17 00:00:00 2001 From: SheTechHub <167848080+SheTechHub@users.noreply.github.com> Date: Thu, 25 Apr 2024 10:45:14 +0200 Subject: [PATCH] Update elementi-di-base.mdx easy-to-read text --- docs/javascript-i/elementi-di-base.mdx | 50 ++++++++++++++++++++++---- 1 file changed, 43 insertions(+), 7 deletions(-) diff --git a/docs/javascript-i/elementi-di-base.mdx b/docs/javascript-i/elementi-di-base.mdx index 9803bd9..62cad33 100644 --- a/docs/javascript-i/elementi-di-base.mdx +++ b/docs/javascript-i/elementi-di-base.mdx @@ -7,11 +7,18 @@ sidebar_position: 2 Argomenti: DOM, Variabili e Operatori ## Intro -JavaScript è un linguaggio a tipizzazione dinamica, il che significa che non è necessario specificare il tipo di dato quando si dichiara una variabile. Ciò lo rende molto flessibile e facile da usare per i programmatori. +JavaScript è un linguaggio che ti permette di dare istruzioni al tuo browser web. Con queste istruzioni, puoi far fare al browser un sacco di cose interessanti, come: -## DOM +**Modificare il contenuto di una pagina web**: puoi cambiare il testo, le immagini e altri elementi che vedi su una pagina. -Il **Document Object Model**, o DOM, è un insieme di oggetti creati dal browser web quando viene caricata una pagina HTML. Il DOM rappresenta la struttura della pagina HTML come un albero gerarchico di oggetti, che possono essere manipolati tramite l'utilizzo del codice JavaScript. +**Aggiungere interattività**: puoi creare pulsanti, menu e altri elementi che rispondono al clic del mouse o al tocco dello schermo. + +**Creare animazioni**: puoi far muovere gli elementi sulla pagina e creare effetti visivi accattivanti. +Per fare tutto questo, JavaScript utilizza dei "mattoni" fondamentali, che sono: + +## DOM (Document Object Model) + +Immagina il DOM come una rappresentazione digitale della pagina web che stai visualizzando. È come un albero con rami e foglie: ogni elemento della pagina è rappresentato da un nodo nell'albero, e le relazioni tra gli elementi sono rappresentate dai rami. Usando il DOM, puoi selezionare e modificare qualsiasi parte della pagina. ![DOM](./img/pic_htmltree.gif) @@ -25,6 +32,19 @@ Utilizzando il DOM, gli sviluppatori possono manipolare il contenuto della pagin Il metodo prende un parametro, ovvero l'ID dell'elemento da cercare, e restituisce l'elemento corrispondente. Ad esempio, supponiamo che tu abbia un elemento div con l'ID "mioDiv" nella tua pagina HTML. Puoi utilizzare il metodo document.getElementById() per recuperare l'elemento e poi utilizzarlo per modificarne il contenuto o le proprietà, come ad esempio lo stile CSS. +*Prova a comprenderlo più a fondo visualizzando il DOM (Document Object Model) come la struttura di una pagina web. Ogni elemento della pagina, come un paragrafo, un'immagine o un pulsante, è come un mattone di questa struttura. A ciascun mattone viene assegnato un ID univoco, come un numero di serie, per identificarlo.* + +Il metodo document.getElementById() è come un detective che può trovare un elemento specifico nella pagina web conoscendo il suo ID. Funziona così: + +1)Gli dai l'ID da cercare: Pensi all'ID come al nome del mattone che stai cercando. + +2)Lui cerca il mattone: Il detective document.getElementById() sfoglia la struttura del DOM, controllando ogni elemento e il suo ID, finché non trova quello che corrisponde all'ID che gli hai dato. + +3)Ti restituisce il mattone: Una volta trovato l'elemento, il detective te lo consegna. Ora puoi fare quello che vuoi con quel mattone, ad esempio: +* Cambiare il suo contenuto: Se il mattone è un paragrafo, puoi modificarne il testo. +* Cambiare il suo aspetto: Puoi modificare il colore, la dimensione o lo stile del mattone. +* Nascondere o mostrare il mattone: Puoi decidere se il mattone deve essere visibile o meno sulla pagina. + Ecco un esempio: ```html @@ -56,6 +76,13 @@ document.getElementById() restituisce solo il primo elemento con l'ID specificat **btn.addEventListener()** è un metodo che viene utilizzato per ascoltare gli eventi che avvengono su un elemento del DOM, ad esempio un pulsante. Il metodo prende due argomenti: il primo è il tipo di evento che si desidera ascoltare (ad esempio "click", "mouseover", "keydown", ecc.), e il secondo è la funzione che deve essere eseguita quando l'evento si verifica. La funzione viene eseguita solo quando l'evento si verifica. +Immagina di avere un pulsante sulla tua pagina web. Quando clicchi su quel pulsante, vuoi che accada qualcosa, ad esempio cambiare il colore di un paragrafo o mostrare una finestra pop-up. Ecco dove entra in gioco btn.addEventListener(). + +Pensa a btn.addEventListener() come a un vero e proprio sistema di allarme per il tuo pulsante. Funziona così: +1) *Scegli l'evento da ascoltare*: Decidi quale azione vuoi che attivi l'allarme, ad esempio un clic, un passaggio del mouse o la pressione di un tasto. +2) *Imposta l'azione da eseguire*: Decidi cosa vuoi che accada quando l'allarme suona. Potrebbe essere cambiare il colore di un paragrafo, mostrare una finestra pop-up o eseguire un'altra azione. +3) *Attiva il sistema di allarme*: Usa btn.addEventListener() per collegare l'evento scelto all'azione che vuoi eseguire. In questo modo, quando si verifica l'evento, l'azione verrà eseguita automaticamente. + > [Scopri di più](https://www.w3schools.com/js/js_htmldom_eventlistener.asp) Ad esempio, se si vuole ascoltare il click su un pulsante con id "myButton", si potrebbe utilizzare il seguente codice: @@ -90,16 +117,23 @@ L'utilizzo di innerHTML può essere pericoloso se il contenuto è fornito dall'u ::: ## Variabili -In JavaScript, le variabili vengono dichiarate utilizzando la parola chiave **"var"**, **"let"** o **"const"**. +Le variabili sono come dei contenitori per memorizzare informazioni. Puoi darle un nome e usarle per conservare dati come numeri, testo o persino altri oggetti. + +*Immagina le variabili come dei scatoloni che puoi usare per conservare le cose. Ogni scatolone ha un'etichetta che gli dai un nome, così puoi facilmente trovare quello che ti serve. Dentro gli scatoloni puoi mettere diversi tipi di cose, come numeri, parole o anche altri scatoloni.* -**Una variabile è un'area di memoria in cui è possibile archiviare un valore.** Il valore di una variabile può essere modificato durante l'esecuzione del programma. +Le variabili sono fondamentali per tenere in ordine il tuo codice e renderlo più efficiente. Invece di dover scrivere sempre lo stesso valore più e più volte, puoi metterlo in una variabile e usarla quando ne hai bisogno. + +**Come creare una variabile in JavaScript**: + +Per creare una variabile in JavaScript, devi usare una delle parole chiave speciali: **var**, **let** o **const**. +Dopo la parola chiave, devi scrivere il nome della tua variabile e poi un segno di uguale (=) e il valore che vuoi memorizzare. La parola chiave "var" è stata usata in precedenza per dichiarare variabili in JavaScript, ma è stata sostituita da "let" e "const". La parola chiave "let" viene utilizzata per dichiarare una variabile il cui valore può essere modificato durante l'esecuzione del programma. La parola chiave "const" viene utilizzata per dichiarare una costante, il cui valore non può essere modificato. Ad esempio: ```jsx -let nome = "Mario"; +let nome = "Mario"; //prima avremmo potuto scrivere var nome = "Mario"; let eta = 30; const PI_GRECO = 3.14; ``` @@ -116,6 +150,8 @@ JavaScript è case-sensitive, quindi i nomi banana, Banana, BaNaNa sono tre vari ## Operatori +Gli operatori sono una sorta di aiutanti del tuo codice. Ti permettono di fare calcoli, confrontare valori e combinare dati in modi diversi. Esistono molti tipi di operatori, come quelli matematici (+, -, *, /), logici (&&, ||, !) e di confronto (==, !=, <, >). + JavaScript supporta anche molti operatori, come ad esempio l'operatore di assegnazione "=", l'operatore di addizione "+", l'operatore di sottrazione "-", l'operatore di moltiplicazione "*", l'operatore di divisione "/", l'operatore di resto "%" e l'operatore di concatenazione "+". Ecco alcuni esempi: ```jsx @@ -184,4 +220,4 @@ In RunJS dichiara due variabili. Utilizzando gli operatori aritmetici, scrivi un **Congratulazioni! 🎉** -Ora hai appreso i concetti di base di JavaScript e sei pronto per imparare di più su come utilizzarli per creare script funzionanti. \ No newline at end of file +Ora hai appreso i concetti di base di JavaScript e sei pronto per imparare di più su come utilizzarli per creare script funzionanti.