OfflineIntroduzione
Javascript è sicuramente la parte più interessante del WebDevelopment. Javascript è un linguaggio di programmazioni santo. Non è molto pignolo, è facile, ha molte funzioni implementate, non da problemi di compatibilità tra i browser (o quasi). Javascript è la parte mancante del Web Design, abbiamo HTML:Struttura, CSS: Aspetto, JS: Dinamicità.
Cosa significa dinamicità? Significa che se cliccate il +1 di ForumFree, non dovete ricaricare la pagina. Vi esce un cerchio che indica il caricamento e avrete già votato. Simile al "mi piace" di Facebook. Significa che gli elementi come "div" possono cambiare ad un certo momento (eventi) e non solo al hover (come nel CSS).
Il termine elementi dovrebbe esservi nuovo. Gli elementi sono i vostri tag una volta che il browser gli interpreta. Per esempio: Un bottone è un elemento, che viene generato tramite il tag button.
Perché vi dico questo? E perché serve differenziare le due cose? Perché Javascript è un linguaggio orientato ad oggetti (OOP) e gli elementi non sono altro che oggetti. Come ogni cosa senz'anima in questo mondo. La macchina che avete/avrete è un oggetto. E come ogni oggetti ha delle caratteristiche e delle capacità. Per esempio la vostra macchina è rossa (è una caratteristica) e può accelerare (capacità). Lo stesso vale per gli elementi che possono avere certi stili (caratteristiche) e capacità (come poter' essere cliccati). Sapendo questo, possiamo continuare con il DOM.
DOM
Il DOM è il Document Object Model. Analizando le tre parole che compongono questo acronimo, evinciamo che è un Modello che descrive gli Oggetti del nostro Documento HTML. Quindi non sarebbe nient'altro che la logica che compone la nostra struttura creata in HTML. Un esempio:
Questo significa che per selezionare un elemento con il JS e modificarlo, dobbiamo basarci su questo modello. Però prima di insegnarvi a manipolare gli elementi, vi spiego come si programma.
Il nostro primo script.
Gli script si creano con il tag script e vengono eseguiti durante il caricamento della pagina. Forumfree vi aggiunge automaticamente l'attributo type="text/javascript", anche se con lo standard attuale è opzionale. Dentro questo tag parleremo letteralmente un'altra lingua.
CODICE
<script></script>
Iniziamo con la cosa più bella di ogni linguaggio, i commenti.
In Javascript ci sono due tipi di commenti: commenti a blocco e commenti a riga.
La differenza è che nei commenti a blocco si può andare a capo, mentre in quelli a riga no.
Commenti a blocco: Vengono fatti come in CSS /*COMMENTO*/
Commenti a riga: Si fanno con due slash //COMMENTO. Da notare che il resto della riga verrà ignorato al momento dell'esecuzione.
Quindi possiamo fare una cosa così:
CODICE
<script>
//Il nostro primo script
</script>
//Il nostro primo script
</script>
E adesso iniziamo con i prompt!
Ci sono tre tipi di Prompt:
- alert
SPOILER (clicca per visualizzare)
- confirm
SPOILER (clicca per visualizzare)
- prompt
SPOILER (clicca per visualizzare)
Possiamo crearli semplicemente scrivendo "prompt", "confirm" o "alert" seguiti da due parentesi e con il testo da noi desiderato tra virgolette.
CODICE
alert("ciao")
Quindi il nostro primo script sarà così:
CODICE
<script>
//Il mio primo script
alert("MLMLMLMLMLMLML by MLLA");
</script>
//Il mio primo script
alert("MLMLMLMLMLMLML by MLLA");
</script>
Il ";" indica la fine del commando / della riga (di solito), ma non è obbligatoria.
Inserendo questo script su JSBIN (nel body) e cliccando su: esegui con JS, si aprirà il prompt.
Debbugging
Essendo un linguaggio di programmazione, bisogna programmare gli script, ed ogni programma programmato ha degli errori, errori che mettiamo noi, ma che non sempre riusciamo trovare. Uno script se contiene un errore fatale durante il runtime, interrompe la sua esecuzione. Ciò significa che viene eseguito finché non sorge l'errore. Il metodo più usuale è mettere un alert dopo ogni riga e vedere fino a quale riga appare l'alert. L'alert che non si apre, indica il punto del errore.
Alert debugging
CODICE
<script>
Codice funzionante
alert("funziona 1");
Codice funzionante
alert("funziona 2");
Codice non funzionante
alert("funziona 3");
Codice funzionante
alert("funziona 4");
</script>
Codice funzionante
alert("funziona 1");
Codice funzionante
alert("funziona 2");
Codice non funzionante
alert("funziona 3");
Codice funzionante
alert("funziona 4");
</script>
Visto che non si aprirà l'alert "funziona 3", sappiamo che quello è il codice che non funziona
Console debugging
Poco professionale, vero?
Ogni browser ci mette a disposizione (per fortuna) i mezzi per sviluppare. In questa guida spiegherò quelli di chrome.
Per aprire la console, potete premere: F12 e poi su console (Windows), oppure alt+cmd+j (MAC), oppure ctrl + j (LINUX + WINDOWS (?) ).
Situazione: Invece di alert("mlmlml") ho scritto alrt("MLMLML").
Metodo 1 - Guardare semplicemente la console, di solito i browser avvisano già degli errori riconosciuti.
SPOILER (clicca per visualizzare)
Metodo 2: Prova - Inserendo un try/catch possiamo provare ad eseguire il codice, e farci restituire l'errore se viene interrotto.
SPOILER (clicca per visualizzare)
CODICE
<script>
try
{
//CODICE DA PROVARE
}
catch(e)
{
console.error(e.message);
}
</script>
try
{
//CODICE DA PROVARE
}
catch(e)
{
console.error(e.message);
}
</script>
Il messaggio visualizzato, sarà identico a quello di sopra.
Esercizio
Per questa volta è tutto, il vostro esercizio sarà "semplicemente" di andare su http://jsbin.com e inserire nel campo JAVASCRIPT il codice (tralasciando i tag) e poi di premere il tasto "Run with JS". Se non vi appaiono i prompt, sapete dove e come scovare l'errore
Nella prossima guida, vi spiegherà meglio come creare e usare funzioni e variabili
Sono ansioso di vedere i primi risultati
Web
