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

JavaScript per aspiranti programmatori – A overview

JavaScript è uno dei linguaggi di programmazione più popolari al mondo e viene utilizzato per aggiungere interattività alle pagine Web, elaborare i dati e creare varie applicazioni (app mobili, app desktop, giochi e altro ancora) Imparare i fondamenti di una lingua ti consentirà di creare il programma che desideri, sia sul lato client che sul lato server. Iniziamo con l’aggiunta di JavaScript a una pagina web. JavaScript sul Web vive all’interno del documento HTML. In HTML, il codice JavaScript deve essere inserito tra i tag script e / script che può essere incluso nel corpo del documento o nell’ head. tieni presente che lo script, che è posto nella sezione head, verrà eseguito prima che il body sia reso. Se vuoi ottenere elementi nel corpo, è una buona idea posizionare il tuo script alla fine del tag body. Per scrivere ciao mondo:

<code>
<html>
<head> </head>
<body>

document.write(“Hello World!”);

</body>
</html>
</code>

Proprio come in HTML, possiamo usare i tag HTML per formattare il testo in JavaScript. Ad esempio, possiamo produrre il testo come intestazione:

<code>
<html>
<head> </head>
<body>

document.write(“

Hello World!

“);

</body>
</html>
</code>

È possibile inserire qualsiasi numero di script in un documento HTML. In genere, il tag dello script è inserito nella testa del documento HTML:

<code>
<html>
<head>


</head>
<body>
</body>
</html>
</code>

C’è anche un tag noscript. Il suo contenuto verrà mostrato se il browser del client non supporta gli script JS. In alternativa, includi il codice JavaScript nel tag body.

<code>
<html>
<head> </head>
<body>


</body>
</html>
</code>

è una buona idea posizionare gli script nella parte inferiore dell’elemento body. Questo può migliorare il caricamento della pagina, perché la visualizzazione HTML non è bloccata dal caricamento degli script. Il tag script può assumere due attributi, lingua e tipo, che specificano il tipo di script; L’attributo language è deprecato e non dovrebbe essere utilizzato.

<code>


</code>

Nell’esempio seguente, abbiamo creato una casella di avviso all’interno del tag script, utilizzando la funzione alert ():

<code>
<html>
<head>
<title></title>

alert(“This is an alert box!”);

</head>
<body>
</body>
</html>
</code>

Anche l’attributo type: script type = “text / javascript” non è più necessario, poiché JavaScript è il linguaggio di scripting HTML predefinito. Gli script possono anche essere inseriti in file esterni. Gli script esterni sono utili e pratici quando lo stesso codice viene utilizzato in un numero di pagine Web diverse. I file JavaScript hanno l’estensione .js. Di seguito, abbiamo creato un nuovo file di testo e lo abbiamo chiamato demo.js. Avere script JS in file separati rende il tuo codice molto leggibile e più chiaro. Per utilizzare uno script esterno, inserisci il nome del file di script nell’attributo src (source) del tag script. Il tuo file demo.js include il seguente codice JavaScript, ma nota bene non il tag script che è già specificato nell’ estensione:

<code>
alert(“This is an alert box!”);
</code>

Puoi posizionare un riferimento di script esterno in head o body, quale preferisci. Lo script si comporterà come se fosse localizzato esattamente dove si trova il tag . Posizionare un codice JavaScript in un file esterno presenta i seguenti vantaggi:

– Separa HTML e codice.
– Rende HTML e JavaScript più facili da leggere e mantenere.
– I file JavaScript memorizzati nella cache possono accelerare i carichi di pagina.

Non tutte le istruzioni JavaScript sono “eseguite”. Il codice dopo una doppia barra //, o tra / * e * /, viene considerato come un commento. I commenti vengono ignorati e non vengono eseguiti. I commenti a riga singola utilizzano doppie barre.



// This is a single line comment
alert("This is an alert box!");

</code>

È una buona idea fare un commento sulla logica delle grandi funzioni per rendere il tuo codice più leggibile per gli altri. Tutto ciò che scrivi tra / * e * / sarà considerato come un commento su più righe. Ecco un esempio:

<code>

/* This code
creates an
alert box */
alert("This is an alert box!");

</code>

I commenti sono usati per descrivere e spiegare cosa sta facendo il codice.

Scacchi e programmazione JavaScript 6: usare i loop while e lo studio dei classici

castello-di-colleUn contenitore senza contenuti é come un agonista di scacchi che si limita a studiare meccanicamente teoria delle aperture o sui finali senza conoscere la storia della disciplina e la storia delle posizione storiche famose. Questo si chiama valore aggiunto e la letteratura in tal senso non manca visto che gli scacchi sono una delle discipline più complesse sfornate dall’ essere umano. Sicuramente avrete sentito parlare di un campione del mondo mancato di nome Bronstein. Nella posizione affrontata in questa sede vediamo una delle sue più discusse posizioni giocate contro un forte giocatore jugoslavo di nome Ljubojevic negli anni settanta. Sacrificare una torre che vale cinque solo per ottenere un vantaggio posizionale, nel caso specifico un attacco da matto evidenzia polo tecnologico Colle di Nocera Umbra, non é qualcosa che si vede spesso tra i professionisti. Analisi del dopo partita dimostrarono che il nero poteva gestire meglio la difesa perché la sconfitta che subì in quel lontano 1973 fu memorabile: http://www.chessgames.com/perl/chessgame?gid=1034661. E veniamo a JS. Un altro tipo di loop utilizzato in JS é il loop while afferma polo tecnologico Colle di Nocera Umbra. Questo loop é diverso dal loop for per il fatto che esso non conta per arrivare a una fine. Semplicemente continua il loop attraverso le istruzioni contenute nelle parentesi fino a quando una espressione condizionale non viene valutata come false. Questo loop include una sola espressione condizionale dopo la parola chiave while. Quando utilizzate un loop while dovete assicurarvi che l’istruzione condizionale diventi alla fine falsa, altrimenti il loop continua in modo indefinito. Dovreste anche assicurarvi che tutte le variabili nell’ istruzione condizionale siano definite. Per esempio l’istruzione while (var1 <= 100) esegue le istruzioni che seguono fino a quando la variabile vsr1 é maggiore di 100. Se le istruzioni all’ interno del loop non cambiano mai il valore di var1, allora il loop continuerà in modo indefinito. Il loop while può anche eseguire istruzioni multiple includendo istruzioni all’ interno di parentesi. Ci sono molti modi di pensare come costruire i vostri loop, ci saranno volte dove vorrete usare un loop for, i due modi diversi di eseguire un loop sono simili, ma il loop for richiede che tutte le informazioni riguardo al loop facciano parte dell’ istruzione for. Il loop while può usare variabili che sono dichiarate altrove. Se un loop while non include parentesi, solo la prima istruzione che segue l’istruzione while sarà eseguita. Se é necessario eseguire istruzioni multiple, tutte le istruzioni devono essere incluse tra parentesi. Per uscire da un loop indefinito, oltre a usare l’istruzione condizionale come parte del loop, potete utilizzare l’istruzione break che con polo tecnologico Colle di Nocera Umbra vedremo in altro contesto. Vediamo come al solito esempi concreti:

<html>
<head>
</head>
<body>

count = 1;
while (count”);
count++;
}

</body>
</html>

nell’ esempio seguente vengono visualizzati invece i valori della variabile count man mano che il loop progredisce:

<html>
<head>
</head>
<body>

count = 2;
while (count “);
count = count * count;
}

</body>
</html>