BASI DI JAVASCRIPT: overview

Ha mai sentito parlare di Front end developer come figura professionale? Di HTML5, CSS3 e JS6? Il primo crea l’edilizia strutturale della pagina, CSS3 arriva per vestire e arredare la casa e JS interviene per offrire interattività alle pagine. Recentemente si sente parlare di NODE JS in quanto il limite che aveva JS era quello di intervenire solo sulla parte FRONT END senza operare in ambito SERVER. Attenzione a non confondere JS con JAVA però sono due cose completamente diverse! Quindi non ci resta che partire con questo viaggio per vedere le basi della programmazione JS, la sintassi per la corretta scrittura ed esecuzione del codice. Vedremo quali sono i contenitori e come possono essere riempiti, vedremo come stampare a video stringhe o tipi di dati numerici. Vedremo diciamo il potenziale base che offre il linguaggio. Il modo migliorare pe imparare a programmare è solo quello di programmare! Ci sono molti editor di testo utili per sperimentare il codice JS lato FRONT END, tipo Sublime Text o Visual Studio Code o molti altri. Procediamo pertanto con il più classico dei programmi che in questi tempi difficili chiameremo, devi stare a casa anzichè hello world! Quindi creo una pagina HTML semplicemente con tasto destro nuovo dando estensione HTML. Qui scriverò quanto segue:

che cosa dovrebbe fare questa istruzione? Quando con doppio click aprirò la pagina casa.html comparirà quanto segue:

il motivo è evidente non compare nulla perchè tra le virgolette non abbiamo la nostra stringa da stampare quindi facciamo diventare lo script così:

da notare che sto usando blocco note come editor di testo al posto di quelli citati sopra. Ora se lancio la pagina modificata vedrò:

Quindi abbiamo capito che l’istruzione ALERT ci manda iun esecuzione una finestra di dialogo che interagisce con noi a video. Ok a questo punto se io volessi per comodità di gestione questo JS in una cartella esterna per poterlo riutilizzare quando necessità con un semplice collegamento come posso fare? Creo una cartella js e dentro creo un file con le stesse modalità descritte sopra che chiamerò casa.js. A questo punto per agganciare questo file esterno (se il JS non è interno non è necessario includere l’istruzione dentro i tag SCRIPT) possiamo semplicemente scrivere nel nostro HTM questa semplice istruzione:

da sottolineare l’uso dell’ attributo sorgente SRC (source), mentre dentro la famosa cartella js avrò:

risultato finale di tutto questo lavoro di agganci:

ossia lo stesso dell’ inclusione del js nella stessa pagina in quanto l’istruzione è la stessa e il browser interpreta il tutto lato client perchè qui non abbiamo a che fare con Node JS che invece è molto difuso lato server come php per esempio. Adesso proviamo a scivere nel JS esterno altre istruzioni per capire l’importanza della progrmmazione procedurale e del punto e virgola che delimita la fine di una istruzione. Scriviamo altre direttive e facciamo diventare il sorgente js in questo modo:

per vedere l’effetto che fa la nuova istruzione digitata nella seconda riga che entrerà in azione solo dopo aver dato OK all’ ALERT, quindi dopo l’immagine di cui sopr comparirà:

A questo punto sorge spontanea una domanda, se uso i file js esterni dove devo agganciarli all’ interno della mia pagina html? La didattica classica vuole gli script posizionati per bellezza di scrittura e stile nell’ head ma siccome il browser carica prima il body, ha senso inserire tutto prima della chiusura del body finale, in questo modo avremo una pagina caricata più velocemente per l’utente. E’ bene precisare che il sale della programmazione è l’errore. A volte si dimenticano le virgolette per stampare una stringa oppure non si ricorda il nome esatto di una istruzione e manca una lettera, vediamo come intercettare questo errore usando gli strumenti per sviluppatori di CHROME e l’oggetto console diponibile per facili aiuti. Ipotizziamo di aver scritto documen.write inb tal caso inevitabilmente si genererà un errore. Che fare quando ci sono centinaia di righe di codice e non si ha la percezione di dove andare a cercare? Usiamo quindi l’oggetto console! E’ da sottolineare come gli editor moderni di fatto indichino la scorrettezza di una parola digitata con il colore, per questo motivo non conviene digitare blocco note, in quanto srtumento primitivo privo di funzionalità. Se scrivo DOCUMEN al posto di DOCUMENT per dsitrazione io non posso dire al compilatore lato client di eseguire correttamente la seconda istruzione che mi mostrerà il video bianco dopo la corretta visualizzazione dell’ ALERT e la sua conferma. Perchè? Dove devo andare a intervenire? Facendo tasto destro e cliccando ISPEZIONA apro la mia analisi della pagina e recandomi sulla seconda slide CONSOLE ecco l’indicazione che mi serve per risolvere il problema:

alla riga due documen non è definito, quindi facile tornare ora alla riga due e risolvere! Gli errori sono una parte importante della programmazione, chi non fa non li ottiene e non li risolve! C’è anche una istruzione simile alla stampa sul documento per scrivere sulla console con gli stessi criteri e ciè alla funzione console.log(“messaggio”); A questo punto passiamo ad analizzare le variabili. Sono contenitori che contengono tipi di dati e valori. Dentro una cassetta posso avere mele pere e patate ma anche acqua se il contenitore è a chiusura ermetica. Un programma è pieno di variabili che non possono usare le parole chiave del linguaggio nella loro dichiarazione. Adesso proviamo a realizzare un task: nell’ alert anzichè stai a casa , stampiamo solo una variabile, come fare? Di fatto il risultato genera cose già viste sopra ma ilc odice adesso ha questa forma:

Sulle variabili posso cambiare il valore quando voglio quindi proviamo a modificare il codice in questo modo e ad eseguire il tutto in maniera procedurale:

per ottenere questo risultato:

per stampare una variabile all’ interno delle parentesi non devo ovviamente usare le virgolette altrimenti si genererebbe un errore. Poi abbiamo variabili locali e variabili globali, ossia variabili accessibili solo all’ interno di una funzione o ovunque, qui sotto abbiamo un esempio di variabile globale per esempio:

var miaVariabile = “stiamo tutti a casa”;

function mia_funzione() {
alert(miaVariabile);
}

Per commentare ed escludere righe che un domani nell’ ambito di un programma potrebbero riservirmi uso //, ad esempio sopra trasformo tutto in variabile locale usando il simbolo di commento:

//var miaVariabile = “stiamo tutti a casa”;

function mia_funzione() {
var miaVariabile = stiamo tutti a casa;
alert(miaVariabile);
}

La spaziatura in JS è automatica solo alla dichiarazione var il compilatore deve riconoscere uno spazio che precede il nome della variabile. A questo punto vediamo come possoin JS ricevere ingformazioni dall’ utente, il comando specifico è prompt quindi la riga diventa prompt(“hai capito che devi stare a casa?”);

però così non riusciamo a catturare il valore digitato dall’ utente quindi ecco come fare, inserendo var risposta = prompt(“hai capito che devi stare a casa?”); e se volessimo successivamente verificare se abbiamo fatto tutto giusto possiamo stampare risposta con il metodo document.write già visto:

che produrrà dopo una serie di passaggi:

da questo esempio si capisce quindi l’utilità di immagazzinare le variabili in contenitori specifici. Adesso prenderemo in esame un portentoso esercizio dove andremo a concatenare le stringhe. Catturiamo il nostro nome, poi concateniamo il valore catturato con un seguito per dare maggiore senso compiuto (ad esempio un saluto) e infine stampiamo tutto a video:

var nomeutente=prompt(“hai capito che devi stare a casa?”);
var messaggio = (“ciao ” + nomeutente);
document.write(nome);

in rete possiamo trovare moltissimo materiale che ci illustra la concatenazione, le stringhe sono anche oggetti e hanno dei metodi, qui vediamo la concat per vedere un altro modo di fare le cose, il nostro obiettivo quando si inizia a programmare non è imparare a memoria tutto, ma andare a cercare quello che ci serve, i metodi si possono trovare facilmente nella documentazione ufficiale JS, sotto vediamo appunto un metodo dopo il punto caratterizzato da un argomento all’ interno della parentesi:

// Join two strings
var str1 = “Hello “;
var str2 = “world!”;
var res = str1.concat(str2);

// OUTPUT: Hello world!

 

per le stringhe ci sono molti metodi (ossia delle azioni da compiere) e molte proprietà, possiamo recuperari dati legati alla lunghezza della stringa o magari modificare in corsa maiuscole o minuscole

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...

%d blogger hanno fatto clic su Mi Piace per questo: