Già… Come ci si approccia all’apprendimento di un linguaggio di programmazione?
Questo dipende molto dal linguaggio di programmazione stesso e andando a sviluppare con JavaScript ti confesso che hai fatto un’ottima scelta perché, proprio come scopriremo in questa prima lezione, hai già tutto quello che ti serve.
Ma prima di darsi una pacca sulle spalle è necessario dover apprendere qualcosa prima che ci permetta di partire con il piede giusto e di basare delle fondamenta che daranno una base solida ai nuovi concetti.
Precedentemente non ho usato la parola fondamenta soltanto per fare riferimento al suo senso di stabilità ma l’ho anche fatto perché ti consiglio di consultare il nostro corso sulle Fondamenta del Web Design dato che grazie a quello conoscerai da vicino i linguaggi HTML5 e CSS3 che sono moolto sfruttati da JavaScript, anzi potrei dire che senza di questi il linguaggio che stai iniziando a conoscere avrebbe vita breve.
Grazie al linguaggio HTML sei in grado di dare una struttura alla tua pagina web, elementi semantici che identificano concetti e argomenti; mentre con i CSS hai scoperto che puoi dare stile a queste pagine e trasformarle dalle classiche pagine in bianco e nero.
Ma grazie ai CSS hai imparato anche una sintassi che ti permette di identificare uno specifico elemento e di consegnare al cecchino (ti consiglio di leggere il corso precedente per capire questo riferimento) le regole da applicare all’elemento assegnato.
La cosa curiosa è che questa stessa sintassi, gli stessi seletori CSS, vengono sfruttati in JavaScript per selezionare gli elementi del DOM.
Ecco un nuovo acronimo che ti accompagnerà durante le tue giornate da sviluppatore 😀
La stessa Mozilla all’interno del suo potente MDN descrive il DOM come un’interfaccia di programmazione per HTML (e XML) che offre accesso alla sua struttura. Questo è vero ma se ti devo dare il mio personale punto di vista è anche molto altro e sopratutto è molto più semplice di quello che sembra.
Introduzione al DOM
Qualche giorno fa stavo riflettendo su quali sono i primi problemi che uno sviluppatore incontra quando si avvicina a un linguaggio come JavaScript perché questo è uno dei pochissimi linguaggi di programmazione che usa dei selettori per selezionare gli elementi.
Sono sicuro che anche a te questa affermazione non suona molto allarmante e finché non mi è stato spiegato il motivo non sarei stato in grado di immaginarmelo.
Il fatto è che una persona che si approccia alla programmazione da un percorso web ha un concetto completamente diverso del significato di questa parola; non tanto perché è uno sviluppatore di serie B ma piuttosto perché quello che abbiamo appreso dall’HTML e dal CSS ci a portato ad immaginare che all’interno di una pagina possiamo cercare e selezionare sia specifici elementi che intere famiglie.
Sviluppando ad esempio con le Qt (libreria grafica per KDE), questo concetto non esiste assolutamente. Desideri modificare le proprietà di un bottone?
Ebbene, questo avrà un oggetto (elemento che andremo a scoprire e a usare in questo corso) che conterrà le varie caratteristiche e ne descriverà come dovrà comportarsi, magari quando qualcuno ci clicca sopra 😉
In questo contesto, il concetto di selezione elemento è molto diverso e questo è uno dei primi motivi che mi hanno spinto a iniziare questo corso in questo modo.
Il DOM è un animale unico con delle caratteristiche incredibili. Purtroppo proprio come una chimera ognuno di noi se la immagina a suo modo, chi proviene dal web pensa che il DOM sia semplice codice HTML mentre chi ha un curriculum più accademico ancora non riesce ad immaginarlo.
Ma come dicevo prima, grazie al Document Object Model abbiamo un’interfaccia che ci permette di collegarci e modificare l’albero di elementi presenti nella nostra pagina.
Anche se assomiglia molto all’HTML che scrivi all’interno delle tue pagine il DOM esiste ad un livello differente. Facciamo un esempio pratico che magari ci aiuta a capirne le differenze.
Hai presente Facebook? Come ben sai, non esiste un sito web che non sia composto da HTML e CSS quindi anche le pagine di Facebook sono costruite grazie a questi linguaggi; e qua ci sta un bel “non ci piove”.
Al tempo stesso all’interno della pagina avvengono delle azioni dal vivo.
Se ti scrive il tuo amico per chiederti a che ora avete prenotato il campo, si aprirà la chat (un <div> HTML) popolata da una lista non ordinata che rappresenta la vostra conversazione. La cosa che ignoriamo il più delle volte è che all’interno del nostro browser vengono modificati degli elementi.
Stiamo modificando gli elementi HTML?
Assolutamente no, basterebbe utilizzare l’opzione Mostra Sorgente Pagina (e non gli strumenti di sviluppo) per vedere che il codice HTML non è cambiato dalla prima volta che abbiamo caricato la pagina; ma allora cosa viene modificato?
Stiamo modificando il DOM!
In poche parole, se mi passi questa semplificazione, all’interno delle pagina Facebook viene eseguito del codice JavaScript che apre un canale diretto con la struttura della pagina HTML visualizzata nel tuo browser, praticamente accede al DOM.
Così facendo è in grado di accedere ad una serie di API che gli permettono la modifica di questa interfaccia andando ad aggiungere dinamicamente nuovi elementi.
Ma prima di andare oltre c’è un concetto che voglio chiarire bene in mente. E’ vero, in questo corso stiamo conoscendo il DOM e lo andremo ad utilizzare con il linguaggio JavaScript; ma dato che si tratta di un’interfaccia che permette di accedere e modificare gli elementi di una pagina HTML, si può usare anche con altri linguaggi.
E’ tutto sul DOM?
Come pian piano dovresti aver scoperto, quando si tratta di informatica e di programmazione; la parola tutto non è tra quelle che usiamo più spesso…
Personalmente neanche io sono un esperto del DOM ma le conoscenze che ho mi hanno permesso di creare veramente un sacco di cose e per fortuna nostra non è necessario conoscerlo nel dettaglio per scrivere le prime funzioni in JavaScript.
All’interno del corso troverai comunque spunti e pagine per approfondire i vari concetti.
Quello che devi sapere è che grazie a JavaScript sarai in grado di arricchire le pagine di effetti e di logica; che altro non sono che i primi passi necessari allo sviluppo di applicazioni web 😉
Ti va di sviluppare in JavaScript?
Quando ci si approccia all’apprendimento di un nuovo linguaggio di programmazione ci sono sempre un sacco di domande. Il mio sistema operativo è quello giusto? Ho un editor di testo adeguato? Avrò installato tutto quello che mi serve?
Non so se anche per te è così, ma a me capita sempre 😀
Il primo complimento che voglio (e che dovresti) farti per aver scelto di apprendere il JavaScript riguarda il fatto che hai già tutto quello che ti serve!
Ti ho già consigliato di avere sotto mano un editor di testo dedicato al codice, come Atom, e anche di installare un browser professionale come Firefox Developer Edition.
Se hai questi programmi o delle alternative altrettanto valide, siamo a cavallo!
Praticamente non ti resta che creare la tua cartella corso-javascript/ e il gioco è fatto.
Non sto scherzando.
Altri linguaggi di programmazione (come il PHP) hanno bisogno di un ambiente di sviluppo all’interno del quale possono essere eseguiti, con JavaScript tutto questo non serve. Sopratutto perché il browser è il tuo ambiente di sviluppo.
Dato che il JavaScript è un linguaggio di programmazione in grado di interfacciarsi con il DOM useremo proprio i browser per andare a testare il codice che lezione dopo lezione andremo ad aggiungere.
Come sempre puoi prendere tutto il codice del corso all’interno del repository che ho creato appositamente su GitHub, oppure puoi provare tu stesso a seguire i vari esercizi e funzionalità prima ancora di scoprire il codice corretto.
Oltre al repository su GitHub in questo corso ho deciso di fare qualcosa di diverso, ho deciso di lavorare a stretto contatto con un strumento online davvero utile per testare delle idee all’interno del proprio sviluppo frontend e grazie alla community che si trova al suo interno sarà semplice anche trovare nuova ispirazione!
Lo strumento prende il nome di CodePen e ci permetterà di testare dal vivo, inserendo codice HTML, CSS e JavaScript direttamente all’interno del browser; una cosa incredibilmente comoda…
Oltre a questo sarà possibile inserire il risultato di questo codice direttamente all’interno della lezione, in questo modo avrai un feedback instantaneo e la possibilità di provare dal vivo senza il rischio di rompere niente 🙂
Perché imparare JavaScript?
Onestamente non avevo pensato di rispondere a questa domanda ma man mano che scrivevo questa prima lezione mi sono chiesto se ad oggi questo linguaggio è compreso per le sue reali potenzialità.
Un po’ come succede ancora per la piattaforma WordPress, dove tutti pensano che sia un CMS dedicato ai blog, cosa non più vera da almeno 3 anni; anche il Javascript ha una cattiva reputazione.
La cosa divertente in tutto questo è che la “colpa” non è neanche da reputarsi al linguaggio stesso, piuttosto al codice poco performante che gli sviluppatori rilasciavano e dopo un picco di utilizzo iniziale, JavaScript è stato accantonato perché ritenuto poco performante e adatto semplicemente a fare delle animazioni.
Con questo corso non ho intenzione di descriverti la storia di questo linguaggio, l’accenno al suo utilizzo è uno dei pochi riferimenti storici che troverai al suo interno, ma ad oggi JavaScript sta vivendo una seconda rinascita e moltissimi sviluppatori hanno iniziato ad utilizzarlo per creare delle vere e proprie applicazioni.
Si parte da server web scritti interamente in JavaScript (NodeJS) per arrivare alla compilazione di applicazioni mobile native (Ionic); senza andare a toccare le svariate soluzioni che queste hanno portato e che permettono di migliorare il nostro lavoro!
Insomma, adesso dovrebbe essere ancora più allettante questo linguaggio. All’interno di questo corso andremo insieme alla scoperta delle funzionalità di questo linguaggio e impareremo a muovere i primi passi, non vedo l’ora di iniziare!
Ma prima di fare questo devo scrivere altre due righe…
Qualche consiglio prima di iniziare
Sei ad un passo dall’inizio del tuo percorso all’interno del linguaggio JavaScript e già dalla prossima lezione inizierai a scrivere del codice con la sua sintassi, ma prima di poterti fare questo mi vorrei assicurare di un paio di cose.
L’approccio che ho deciso di prendere per questo corso è un approccio molto più pratico e dal punto di vista di uno sviluppatore web.
Se hai già seguito il corso sulle Fondamenta del Web Design e quello su Sass non dovresti avere troppi problemi a comprendere le prime lezioni, ma spero di essere cristallino nelle mie spiegazioni anche se non hai mai sviluppato neanche una pagina web.
Il concetto di DOM è chiaro?
Già dalla prossima lezione andremo a lavorare con questa interfaccia, prenderemo gli elementi (i nodi dell’albero) che si trovano al suo interno e li inizieremo a modificare in base ad alcune funzionalità.
Prima di fare questo è necessario comprendere se il concetto di Document Object Model ti è chiaro.
Anche se assomiglia a del codice HTML questo vive ad un livello diverso e può essere manipolato da linguaggi di programmazione come il JavaScript.
Se hai ancora qualche dubbio su questo concetto ricorda che siamo qua per imparare e farlo tutti insieme non può che velocizzare questo processo.
Gli strumenti che usi sono corretti?
Ti ho già parlato di un buon editor di codice e di un browser in grado di fornirci buone informazioni per facilitare il nostro lavoro e ormai dovrebbe essere chiaro che io preferisco Atom e FireFox Developer, ma perché?
Ebbene come vedremo fin dalla prossima lezione, ci sono certe informazioni che un browser sprovvisto di strumenti di sviluppo, o che semplicemente vengono ignorati, rallenta moltissimo sia l’apprendimento che il proprio svilluppo e in molte occasioni (come quando il DOM viene modificato) non è neanche possibile eseguire del debug.
Questo è il principale motivo per il quale ti consiglio di avere degli strumenti in grado di essere veramente d’aiuto.
Io non ti impongo di usare quelli che sto usando io, anche se sono open source e gratuiti, ma quello che cerco di fare è farti riflettere sulla necessità di questi strumenti e di scegliere con cura quelli da utilizzare…
Adesso sei pronto a proseguire con la prossima lezione 😉