Ultime dal Blog

Sintasi JavaScript, Cicli e Condizioni

Sintassi JavaScript: Condizioni e Cicli

Bentornato nel corso che mira ad insegnarti le basi del linguaggio JavaScript, nella scorsa lezione abbiamo introdotto l'argomento con un po' di storia, oggi è giunto il momento di scoprire come ci potrà essere di aiuto un linguaggio di programmazione!

In questa lezione verrai introdotto a due nuovi concetti che ti permetteranno di prendere delle decisioni attraverso il tuo codice.

Hai capito bene, decisioni. A differenza dei linguaggi di markup (come ad esempio HTML) i linguaggi di programmazione (come il nostro JavaScript) permettono di valutare determinate condizioni e studiarne i valori ottenuti, in questo modo potremmo scegliere di far comportare la nostra applicazione (o il nostro sito) in maniera differente.

Non entreremo ancora nel dettaglio della sintassi e dello sviluppo in JavaScript ma sarà sicuramente una lezione che ti permetterà di piantare le basi nella sintassi di questo linguaggio!

Leggi Tutto

Nascita ed Evoluzione di JavaScript

Nascita ed Evoluzione di JavaScript

Benvenuto in questo nuovo corso in cui scopriremo JavaScript, come funziona e perchè conviene conoscerlo prima di passare a dei framework come jQuery o AngularJS.

Se incominci a spaventarti per i termini strani, non farlo. Prendi fiato e continua a leggere perchè ti spiegheremo tutto :D

La Storia

Tutto ha inizio nell’anno 1995, il web era popolato da pagine povere, senza interazioni da parte dell’utente. Un mondo indipendente e primitivo in lenta evoluzione dei suoi standard diviso tra soli due browser: Netscape ed Internet Explorer.

Non è un film ma potrebbe anche esserlo :P

Questa è una piccola introduzione che descrive la nascita di Internet, molto diverso da quello che conosciamo oggi. Dato che ho già scritto una cosa simile all’interno della guida HTML5 da Zero, oggi vedremo nello specifico la nascita di JavaScript e anche perchè è fondamentale per lo sviluppo web.

Le pagine erano tipo questa (il primo sito nella storia), successivamente inventarono i CSS, un linguaggio necessario per formattare e colorare le pagine per arrivare a realizzare un sito come questo. Ma è un linguaggio povero e non aiuta a rendere un sito dinamico invogliando a cliccare o navigare il sito!

Quindi Netscape decise di creare un nuovo linguaggio di scripting per interagire con le pagine web, una cosa mai vista in questo settore!

Con scripting ci si riferisce a dei linguaggi di programmazione che vengono elaborati ed eseguiti sul momento. Questi linguaggi di solito sono più facili rispetto ai compilati (esempio il C++) ma hanno caratteristiche tecniche che comportano un’esecuzione più lenta. Il vantaggio è che sono multipiattaforma rispetto ai compilati che, invece, richiedono di realizzare una versione per ogni sistema in cui vuole essere eseguito il programma.

La creazione di un nuovo linguaggio non è una semplice avventura, quindi Netscape ha contatto la società più famosa in questo settore: la Sun Microsystems che aveva appena reso pubblico il linguaggio di programmazione Java.

Il nuovo linguaggio prese il nome di JavaScript ma l’unica somiglianza con il linguaggio precedente è la sintassi, questo perchè sono due sistemi completamente diversi.

Microsoft poco dopo propose Visual Basic Script che funzionava solo dentro il loro browser e quindi aveva un mercato limitato ma ancora oggi è usato all’interno di Excel (e di Windows stesso).

JavaScript non è l’unica implementazione di ECMAScript, infatti esistono anche ActionScript (Flash) e JScript, che è un’implementazione Microsoft per fare scripting. Queste alternative però non possono competere con JavaScript anche perchè è l’unico linguaggio supportato a livello multipiattaforma.

Alla fine di questa lotta rimase un solo vincitore, JavaScript che nel tempo si è evoluto e diventando uno standard grazie ad ECMAScript del W3C. Oggi infatti siamo alla sesta versione di ECMAScript la cui unica implementazione è JavaScript rendendolo de facto ECMAScript.

Cos’è JavaScript/ECMAScript

Dopo la nascita di JavaScript e la lotta con Visual Basic Script i due browser implementarono il linguaggio in modo diverso. In quel momento il W3C decise di creare uno standard su cui i produttori di browser potessero basarsi per la propria implementazione. Quindi in questo corso ci riferiremo a JavaScript come alla sua implementazione (più o meno fedele a seconda del browser) di uno standard che permette di rendere il nostro codice funzionante nel corso del tempo.

Dopo tutta questa lezione di storia, necessaria per capire di cosa parleremo, vediamo di spiegare la peculiarità di JavaScript rispetto ad altri linguaggi di programmazione come PHP o Visual Basic (HTML è un linguaggio di markup ovvero di formattazione non di programmazione!).

JavaScript viene eseguito al caricamento della pagina ma non è un file che viene lanciato sul computer, invece vive dentro la pagina memorizzata ed elaborata dal browser, ed alla sua chiusura scompare. Questa soluzione lo rende un linguaggio eseguito lato client mentre PHP è lato server (perchè vive finchè la pagina HTML non viene generata e mandata al browser dal web server).

All’epoca non c’era niente di simile quindi fù una vera innovazione nei linguaggi di programmazione. Inoltre, sempre all’epoca, non potevano sapere che in questi anni soluzioni come NodeJS ha portato JavaScript lato server o Asm.JS che ha portato un subset di JavaScript molto potente!

Caratteristiche del linguaggio

JavaScript è stato realizzato per elaborare il DOM (Document Object Model) ovvero un modello ad oggetti, ma di cosa si tratta in parole povere? Un modello ad oggetti è una struttura ad albero degli elementi della pagina HTML con le sue informazioni accessibili e modificabili facilmente.

Oltre alla struttura di un linguaggio di programmazione ed una gestione del contenuto della pagina include una interazione con l’utente (come ad esempio il click) e l’interazione con altre pagine.

Queste funzionalità possono sembrare banali  ad oggi ma come ho già detto precedentemente, erano soluzioni rivoluzionare e si sono ampliate con il passare del tempo grazie anche all’avanzamento delle tecnologie. Infatti, fino a 5 anni fa non era possibile interagire con altre pagine da una pagina di partenza.

La gestione degli eventi, ovvero delle interazioni che gli utenti hanno con la pagina, è stata la prima motivazione per questo linguaggio e con il Web 2.0 JavaScript è esploso rendendo necessario un aggiornamento molto grande che noi conosciamo come HTML5.

Come abbiamo visto nella mia precedente guida, questo linguaggio include molte novità per il markup ma, allo stesso tempo, aggiunge moltissime funzioni per JavaScript. Alcune di queste nuove funzioni sono l’accesso a informazioni di sistema (ad esempio lo stato della batteria), impostare a fullscreen il browser, supporto ai canvas (vettoriale), supporto al 3D nativo (WebGL) e molto altro.

Se fino ad adesso non hai capito niente bèh non ti preoccupare che nelle prossime puntante vedremo di chiarire tutto :)

finestre-modali

Finestre Modali senza Plugin o jQuery!

Negli ultimi anni le finestre modali sono diventate sempre più importanti. Abbiamo assistito alla loro evoluzione partendo da semplici alert() o prompt() fino a vederle completamente integrate nelle nostre pagine e arricchite da grafiche e colori che rispecchiano il brand del nostro sito. Purtroppo per creare questi elementi si ricorre fin troppo spesso a plugin o librerie esterne come jQuery.

Dal mio punto di vista non ci vedo niente di male ma a seconda delle necessità si rischia soltanto di appesantire il proprio progetto!

Diciamoci la verità, le finestre modali sono utili per mostrare informazioni o chiedere azioni da parte dell’utente come ad esempio l’inserimento della propria email per iscriversi ad una newsletter, proprio come succede anche in questo sito. Questi elementi aiutano a raggiungere una miglior interazione con i visitatori del nostro sito e sono incredibilmente utili.

Ma tornando sull’argomento della pesantezza delle proprie pagine questo è un fattore che sta diventando sempre più importante perché, come ormai dovresti sapere, i vari motori di ricerca hanno iniziato ad analizzare questo fattore e ne tengono di conto per il posizionamento delle nostre pagine nelle SERP; in fin dei conti un sito veloce è un sito che si consulta volentieri!

In questo articolo non ti spiegherò come creare delle bellissime finestre modali ma piuttosto, grazie al codice di Daniele, ti mostrerò come sia possibile creare delle leggerissime finestre modali create in puro codice JavaScript. La personalizzazione e la generazione di questa finestra è delegata al linguaggio JavaScript, in questo modo se il browser non è in grado di leggere questo linguaggio (cosa veramente rara ma possibile anche al giorno d’oggi) non dovrà caricare inutili kb di codice.

Leggi Tutto

Data Maps in SASS

Non Conosci ancora le Data Maps in SASS? Ecco il Rimedio!

Non è un segreto, negli ultimi tempi mi sto avvicinando molto nello sviluppo dei CSS tramite SASS e posso soltanto dire che questo ha velocizzato incredibilmente il mio sviluppo Front End. Oggi affronteremo un argomento molto interessante e un po' avanzato, se non ti senti pronto ricordati che c'è un corso interamente dedicato a questo linguaggio che ti aiuterà a muovere i primi passi!

All’interno del corso che ti ho appena collegato troverai molte informazioni utili su come iniziare a sviluppare con questo linguaggio e tra queste troverai anche la descrizione delle variabili che, come in altri linguaggi, altro non sono che delle strutture che permettono di salvare un valore assegnandogli un nome più umano e facilmente riconoscibile.

Nonostante questo, sin dalla versione 3.1.0, SASS ha iniziato ad implementare anche le liste. La soluzione di questo linguaggio per avere un array monodimensionale che da anni è presente in moltissimi altri linguaggi. Anche se non andremo ad approfondire questo concetto, perché ti presenterò qualcosa di ancora più interessante, mi sembra doveroso condividere con te la sua sintassi:

Come si può notare, le liste sembrano veramente interessanti, sopratutto con cicli come @each che ci permettono di ciclare questi valori senza conoscere la quantità di elementi in esso contenuti; ma il limite più grande è che sono soltanto valori. Questo vuol dire che usando le liste non sarai in grado di utilizzare l’assegnazione chiave : valore tanto utile negli array multidimensionali.

Non mi fraintendere, le liste sono comunque delle strutture potentissime che ci aiutano molto nello sviluppo dei nostri progetti e in un prossimo articolo ti presenterò le funzioni dedicate che sono state sviluppate; ma oggi ho voglia di presentarti qualcosa di ancora più avanzato e facile da utilizzare. Cosa fai? Non contininui a leggere?

Leggi Tutto

Come si Muove un Freelancer Sviluppatore

Come si Dovrebbe Muovere uno Sviluppatore Freelance

Eccoci di fronte ad un nuovo argomento per la serie Guadagnarsi il Pane con HTML5, in questa lezione andremo ad imparare cosa sia un freelance e scopriremo quali siano i canali migliori per promuovere se stessi e il proprio lavoro.

Essere un freelancer o, per dirlo all’italiana, un libero professionista ci mette di fronte ad una serie di possibilità che potremmo sfruttare per creare reddito; saremo in grado di scegliere noi quale sia la cosa che preferiamo fare ma, visto che gli argomenti marketplace sono già stati ampliamente discussi, in questo appuntamento ho intenzione di guardare da vicino la vita di un freelancer.

Trovare nuovi clienti, progetti e opportunità di guadagno dovrà essere una delle nostre priorità; ma trovare il modo giusto per catturare l’attenzione di un possibile cliente non è una cosa molto semplice da fare… Bisogna ammetterlo, al giorno d’oggi il mercato dello sviluppo web è in grande fermento; molte sono le possibilità di guadagno che la rete ha portato a nuova vita, questa guida ne raccoglie soltanto alcune e lascia a voi il compito di comunicare le altre.

C’è una cosa che voglio chiarire e che ormai dovrebbe essere chiara: diventare ricchi in poco tempo non è possibile!

Leggi Tutto

Usare Grunt per Compilare SASS

Usare Grunt per Compilare SASS e Compass

Abbiamo da poco concluso l'anteprima del corso su SASS che a breve verrà lanciato sotto forma di epub e dovresti aver già scoperto quante cose carine puoi realizzare. Per tutto il corso ti ho consigliato di utilizzare un'applicazione grafica per compilare il codice SASS in CSS, ma se ti piace la riga di comando, questo appuntamento fa per te!

Prima di tutto voglio chiarire che questo non è un articolo di tipo introduttivo: ho deciso di partire da un livello più alto, perché troverai una più che completa descrizione di Grunt all’interno di un articolo apparso recentemente su WebHouse. Ti consiglio caldamente la sua lettura perché scorre molto bene ed è incredibilmente intuitivo.

Siccome ho già fatto alcuni esperimenti con questa applicazione, ho deciso presentarti qualcosa che non è presente nell’articolo sopraccitato: in quello, l’autore descrive come installare Grunt ed i plugin necessari per compilare LESS.js, linguaggio che abbiamo già trattato diverse volte su questo sito. Questo linguaggio è stata la mia prima esperienza nel campo dei linguaggi precompilati per i CSS (e devo ammettere che è stata un’ottima esperienza!), ma recentemente mi sono trovato a lavorare a stretto contatto con SASS e devo ammettere che, avendoli provati entrambi, ritengo il secondo di gran lunga il migliore.

Ma in questo articolo non voglio andare a paragonare questi due linguaggi per decretare il vincitore: piuttosto voglio coprire un aspetto che nell’altro articolo non è stato trattato, ovvero come compilare SASS e la sua estensione Compass grazie a Grunt.

Leggi Tutto