Javascript – Strumenti di lavoro

Anzitutto una piccola parentesi per quei pochissimi che non hanno mai provato ad eseguire javascript. Gli strumenti minimi necessari sono un browser ed un editor di testi. Personalemente uso un paio di browser come eredità dei tempi andati quando i due browser maggiori (Internet Explorer e Firefox) si guardavano in cagnesco e quando meno te lo aspettavi un codice perfetto su uno dei due, inaspettatemente, sull’altro aveva effetti fantasiosi. Ora i due non possono più chiamarsi “maggiori” perché superati dall’ultimo arrivato Chrome di Google e, per fortuna, sembra che hanno messo fine alle ostilità allineandosi quasi perfettamente allo standard della W3C, rendendo inutili i vecchi script per il riconoscimento del browser.

Qual è il migliore editor di testi? Ovvio, quello che conoscete meglio. Io uso Textpad da troppi anni e la voglia di imparare nuove cose si è molto affievolita. Un editor molto diffuso ed apprezzato e gratuito, cosa che non guasta mai, è Notepad++.

Un accenno a Brackets, un editor open source per diversi linguaggi (HTML, CSS e JavaScript) su cui l’Adobe sta lavorando e dalle caratteristiche interessanti (completamento automatico del codice HTML e CSS, suggerimenti e chi più ne ha più ne metta). Io l’ho provato prima con un js estremamente grosso (più di 50000 righe di codice) e Brackets non riesce a portare a termine il caricamento. Poi ho provato js più accettabili e al termine del caricamento vengono segnalati errori incomprensibili; segno di un’immaturità del programma. Vedremo in futuro se manterrà le promesse.

Accanto agli editor tradizionali vi sono anche ambienti di sviluppo integrati, come Eclipse e Visual Studio che, con un apposito plugin, permettono di gestire javascript. Entrambi sono gratuiti.

Con il normale editor di testi bisogna, anzitutto, scrivere uno scheletro di pagina HTML:

<!DOCTYPE html>
<html>
<head>
<head>
<body>
< script>

// qui va messo il codice javascript

</script>
</body>
</html>

(Nota: è stato aggiunto uno spazio dopo il segno di minore e prima di script solo per motivi “tipografici”, altrimenti WordPress avrebbe cancellato tutto il tag)
Il codice precedente è perfetto per l’HTML5. Con l’HTML4 la prima riga era un mezzo papier e anche nel tag script bisognava specificare il tipo di script (type=”text/javascript”), che ora non è obbligatorio, o anche, nelle versioni più vecchie, il linguaggio (language=”JavaScript”, attualmente obsoleto). Il linguaggio poteva essere diverso, forse nelle speranze di coloro che hanno ideato l’html. In questo momento probabilmente il javascript è diventato il linguaggio “per eccellenza”, indispensabile se si vuole fare pagine web non troppo banali.

Per la mia pigrizia, poiché non voglio passare la vita a scrivere cose inutili, utilizzo anche Dreamweaver, che è un editor HTML per Windows e per Apple. Infatti tutta quella roba là sopra viene scritta automaticamente appena si crea la pagina web. Poi, per eseguire il codice, si preme il tasto F12 con cui viene richiamato il browser di default.

In mancanaza di Dreamweaver (che costa un pacco di soldi) o di altro strumento ci arrangiamo come possiamo. Scriviamo quindi il primo facilissimo script (Kernighan & Ritchie insegnano):

alert(“Hello world!”);

 

e lo mettiamo là, al posto dei puntini, all’interno del tag script:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
< script>
alert(“Hello world”);
</script>
</body>
</html>

Poi salviamo il tutto con il nome, ad esempio, Hello.htm (o quello che vi pare, basta che il nome del file abbia estensione HTM o HTML). Magari cerchiamo di salvare il file in una certella facilmente raggiungibile, così non ci dobbiamo rovinare la giornata per ritrovare dove abbiamo salvato il nostro lavoro. Anche il desktop va bene (provvisoriamente, perché è proprio brutto vedere il desktop pieno di tutte quelle icone, di solito inutili, che non sappiamo nemmeno da dove scappano fuori). Infine clicchiamo due volte sull’icona di Hello.htm e… voilà… ecco apparire una finestrella (popup modale) con scritto l’ormai usuale saluto.

Non succede niente? Evidentemente si è verificato un qualche errore di battitura.
Già, ma quale? Dobbiamo fare una ricerca da certosini, misurare la lunghezza della virgola per essere sicuri di non averla confusa col punto? Per fortuna i browser hanno i loro bravi strumenti di debugger. In particolare la Console. Con Firefox si apre il menù Strumenti -> Sviluppo web -> Console web e troveremo l’indicazione della prima istruzione che il browser non riesce ad interpretare. Con Internet Explorer si accede alla Console con premendo il tasto F12. Anche con Chrome si può accedere alla Console tramite menù (More Tools -> Javascript Console). A questo punto dobbiamo solo correggere il sorgente e riprovare.

Maurizio.

Posta un commento o usa questo indirizzo per il trackback.

Commenti

  • izzy  Il 12 giugno 2016 alle 10:44

    Probabilmente tra i più utilizzati c’è Sublime Text e quello che sta diventando il suo successore morale, Atom.io. Quest’ultimo oltre ad essere open source ha anche la caratteristica di essere sviluppato su nodejs. Oltretutto è sviluppato da github…
    Anche la microsoft sta spingendo un editor incentrato sul web e multipiattaforma, visual studio code.
    Usare una roba come eclipse per lo sviluppo js è NO. Stesso discorso per dream coso. Se devi scrivere codice, robe così pesanti o nate per il drag and drop, semplicemente NO.
    L’editor migliore non è quello che si conosce meglio ma quello che ti rende più efficiente e ti rende lo sviluppo più facile e divertente. E al giorno d’oggi imparare a essere flessibili in quanto a editor e preferirne uno multipiattaforma è necessario e richiesto nel mondo del lavoro. Se sviluppi per web, come minimo ti toccherà lavorare sia su windows che su osx, e forse anche su ubuntu. Quindi io non inciterei alla pigrizia, ma anzi alla sperimentazione continua. Anche perché gli editor per lo sviluppo web tendono al minimalismo (espandibile attraverso plugin), quindi ci metti niente a imparare a lavorarci.
    I browser da tenere buoni sono di solito 3: uno webkit (di solito chrome), firefox ed explorer. In realtà quest’ultimo è diventato il fanalino di coda, sopratutto perché nel mobile ha una quota quasi insignificante (e ormai quando si sviluppa web si deve pensare anche al mobile).
    Se si sviluppa su web, meglio impararsi nodejs. Anche se il server non sarà su nodejs.

    • jsxmau  Il 15 giugno 2016 alle 10:06

      Tre browser per provare javascript? Le incompatiilità fra i browser, al momento attuale, si riferiscono principalmente ai css, che impongono gli usuali prefissi (-webkit- -moz-…). Le altre, poche, si riferiscono all’html, spesso risolvibili con i css (box-sizing, ad esempio). Ma se non è così sono sempre felice di imparare.

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...

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati derivati dai commenti.

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