Nel secondo capitolo del nostro corso JavaScript dedicato all’insegnamento di questo linguaggio di programmazione per principianti, entreremo in dettaglio nella spiegazione dei primi codici di base per iniziare a capire come si possa interagire internamente alle pagine HTML tramite l’uso degli script.
Come abbiamo già descritto in precedenza, le guide di questo corso sono per chi ha già maturato un po’ di esperienza nella creazione di pagine web HTML e CSS, questo perché JavaScript è legato a questi due linguaggi e senza avere una solida base di HTML risulterebbe difficile apprendere numerosi concetti.
Se sei interessato ad approfondire l’HTML e CSS, segui il nostro corso qui.
Nel precedente articolo del corso JavaScript, abbiamo spiegato in linea generale “che cosa è“, “a cosa serve” questo linguaggio di programmazione e come integrarlo nelle pagine web esistenti. Se non ti sono chiari questi concetti, ti invito a leggere il testo o a scriverci un commento per approfondire l’argomento.
Qui di seguito ora, vedremo i primi codici utili da conoscere per iniziare a prendere confidenza con JS e imparare le funzionalità di base su cui è possibile programmare il primo script.
I primi codici di base JavaScript
Nel precedente articolo abbiamo visto la sintassi da utilizzare in JavaScript, la comprensione di quel capitolo è fondamentale per poter procedere.
Come detto sempre nello stesso post, Javascript per funzionare in una pagina HTML deve essere incluso nei marcatori <script> e </script>. Per rendere più leggibile i codici del corso, inseriremo del codice HTML solo se necessario.
Output – document.write()
Il primo codice che si impara durante un corso di programmazione si basa quasi sempre sulla scrittura di una semplice frase a schermo. Proprio come in ogni altro linguaggio, JavaScript possiede uno specifico codice per l’output di testo o di determinati valori.
Nel nostro caso, dovremo fare uso della stringa “document.write()” e includere nelle parentesi tonde il valore desiderato.
Nel caso specifico di una stringa di testo, dovremo scrivere nel seguente modo:
document.write('Ciao mondo');
L’output, o risultato, di questo codice JS è semplicemente questo:
Ciao mondo
Il testo generato dalla stringa verrà stampata a schermo nell’esatta posizione in cui è stato inserito il tag HTML <script>. In seguito vedremo differenti usi di questo codice, ma per ora concentriamoci solo sulla funzione di base.
Ora che abbiamo visto il primo codice reale JavaScript, possiamo iniziare ad esaminarlo più da vicino e capire bene il funzionamento:
- Il primo valore “document” sta ad indicare l’oggetto di interesse, su cui avrà effetto lo script. In questo caso document è riferito all’intero documento HTML.
- Il secondo, “write” sta ad indicare il metodo. In parole semplici, il metodo è l’azione che viene compiuta sull’oggetto (document), seguito da altri valori personalizzati.
- I due valori sono separati dal punto (.).
- Tra le parentesi tonde sono definiti i valori personalizzati. Essi possono essere:
- Stringhe di testo (racchiuse all’interno di apici ‘singoli’ o “doppi”).
- Numeri (interi, decimali, etc…)
- Operatori logici booleani (true e false);
- La stringa termina con il punto e virgola (;).
Qui altri esempi utili:
document.write(15 + 5);
//output = 20
document.write(15 - 20);
//output = -5
document.write('ciao ' + 'a tutti');
//output = ciao a tutti
Formattazione del testo di output
Come JavaScript può essere inserito in HTML, anche HTML può essere inserito in JavaScript.
Questo sta a significare che ogni stringa di testo “stampata” o generata da JS, può possedere delle proprie caratteristiche definite dal linguaggio HTML.
Facciamo chiarezza: utilizzando un codice come quello scritto in precedenza “document.write(‘Ciao mondo’);” farà sì che il browser visualizzi una scritta nera su sfondo bianco senza caratteristiche o stile.
Per la formattazione del testo o per definire elementi HTML più complessi, possiamo aggiungere tag e attributi HTML nell’area di output, nelle parentesi tonde in questo modo:
document.write('<strong>Ciao mondo</strong>');
Ciao mondo
Come puoi vedere, abbiamo aggiunto semplicemente dei generici marcatori HTML per formattare in grassetto il testo.
Oltre <strong> puoi usare ogni tipo di tag HTML che desideri come <h1>, <b>, <em> <div>, <table> , <ol> e altri, purché non vadano in conflitto con JavaScript o che non utilizzi simboli e valori vietati.
Per eseguire il codice precedente ti basterà integrarlo nel documento HTML come descritto nell’articolo precedente.
Esercitati a scrivere i primi codici in JavaScript per prendere confidenza con la sintassi e l’esecuzione dei primi script di base. Prosegui con il prossimo articolo per approfondire.
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti:
- Recensione In Fuga. Ciclo Le Cronache dell’Ultimo Druido di Kevin Hearne
- Recensione Fool Moon di Jim Butcher
- Recensione Storm Front di Jim Butcher
- Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
- Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web