Your SlideShare is downloading. ×
0
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
corso web developer - Introduzione a Javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

corso web developer - Introduzione a Javascript

996

Published on

Dispensa per il corso web developer presso la Scuola Internazionale di Comics a Jesia (AN)

Dispensa per il corso web developer presso la Scuola Internazionale di Comics a Jesia (AN)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
996
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduzione a Javascript<br />A cura di Riccardo Piccioni<br />Il Javascriptè un linguaggio di scripting che inserito all’interno del codice HTML consente di poter modificare il comportamento della pagina.<br />
  • 2. Differenze Client/Server<br />Javascript è un linguaggio client-side, viene cioè eseguito sul computer dell’utente nel momento in cui il browser apre la pagina.<br />I linguaggi Server-Side (come PHP o ASP) vengono invece eseguiti sul server PRIMA che la pagina venga inviata al browser<br />Se ad esempio avessimo una funzione che legge l’ora javascript mostrerebbe l’ora del computer dell’utente che apre la pagina mentre php mostrerebbe l’ora del server<br />
  • 3. Cross-Browsing<br />Javascript è un linguaggio che viene interpretato dal browser del client, dotato di un ENGINE (motore) che interpreta il linguaggio di script e lo esegue.<br />Ogni browser utilizza il proprio Engine e questo significa che non tutti i browser utilizzano le stesse versioni di scripting. <br />La necessità di creare script che possano girare allo stesso modo e con lo stesso risultato su tutti i browser è chiamata cross-browsing.<br />
  • 4. Uso di Javascript<br />Il tag html che consente di poter introdurre uno codice di scriptingjavascript è <script></script>.<br />Il tag script può essere contenuto in un qualunque punto del tag <html> ma va preferibilmente posto nella sezione <head></head><br />Script Interni: JS può essere inserito direttamente nella pagina con il codice<br /><script type="text/javascript"><br />…. Codice javascript …<br /></script><br />Script Esterni: Oppure può essere inserito un collegamento ad un file javascript esterno con la sintassi<br /><script src="js/filejavascript.js" type="text/javascript"></script><br />(*)I file esterni di javascript sono file di testo con estensione .js contenente esclusivamente codice javascript (senza quindi nessun tag<script></script>)<br />
  • 5. Istruzioni JS<br />Le istruzioni hanno la responsabilità di controllare il flusso di elaborazione del codice. Esse possono:<br />eseguire iterazioni, cioè ripetere una parte di codice per un certo numero di volte;<br />eseguire decisioni condizionate;<br />richiamare funzioni;<br />consentire al percorso dell'esecuzione di essere modificato dinamicamente.<br />In Javascript ogni istruzione termina con il punto e virgola, come accade col C o con il PHP.<br />Alcune istruzioni, come le funzioni sono istruzioni composte. In questo caso il codice è raggruppato all’interno di parentesi graffe {}<br />
  • 6. Commenti del codice<br />Anche in Javascript è possibile inserire dei commenti<br />Commento blocco testo: il testo contenuto all’interno di /* e */ è considerato un commento<br />/*<br />… commenti …<br />*/<br />Commento Riga: è possibile commentare una riga mettendo all’inizio i caratteri //<br />// riga commentata<br />
  • 7. Funzioni<br />Le funzioni sono dei raggruppamenti di istruzioni.<br />Possono essere parametriche (vengono lanciate passandogli una o più variabili)<br />Possono restituire o no un risultato<br />La sintassi di una funzione JS è<br />functionnomefunzione(var1, var2, …)<br />{<br /> //istruzioni<br />return valore;<br />}<br />In rosso sono le parti da modificare dove nomefunzione è il nome che diamo alla funzione, var1, var2, … sono le variabili (facoltative) con cui è possibile eseguire le funzioni, return valore (facoltativo) è il valore restituito dalla funzione<br />
  • 8. Variabili<br />Un elemento importantissimo nella programmazione è costituito dalle variabili. <br />Le variabili sono dei contenitori che permettono di poter formulare istruzioni parametriche ovvero che possano dare lo stesso esito/risultato a seguito di valori iniziali differenti.<br />Si prenda ad esempio la SOMMA: questa è una funzione che applica un operatore matematico a 2 numeri. L’operazione di addizione è la stessa a prescindere dai due numeri utilizzati. Numeri diversi daranno un risultato differente ma omogeneo nella sua applicazione.<br />La variabile consente quindi di formulare delle istruzioni che possano essere richiamate con valori differenti.<br />Nell’esempio della somma di prima (a + b = risultato) a e b sono due variabili (il loro valore differenzia il risultato ma non l’operazione).<br />
  • 9. Condizioni IF<br />L’istruzione IF permette di poter eseguire un controllo su una condizione ed eseguire una determinata serie di istruzioni a seconda del valore vero/false della condizione<br />if (condizione)<br />{<br /> .. codice eseguito se la condizione è vera<br />}<br />else<br />{<br /> ... codice eseguit se la condizione è falsa<br />}<br />
  • 10. Condizioni IF<br />condizione di uguaglianza == (ad esempio variabile == 1)<br />condizione di differenza != o <> (ad esempio variabile != 2)<br />condizioni di raffronto >=(maggiore uguale) (es. variabile > 3)<br /><= (minore uguale) (es. variabile < 4)<br />a volte le condizioni possono anche essere composte da due o più condizioni che<br />debbono essere simultaneamente vere (AND)<br />es.. (variabile1==2 && variabile2 < 5)<br />oppure una condizione composta da due o più condizioni che debbano essere<br />soddisfatte almeno in parte (OR)<br />es (variabile1== 2 || variabile2 < 5)<br />
  • 11. Condizioni IF<br />nelle operazioni di confronto possiamo confrontare 3 tipi di dati<br />numeri es. if (spesespedizione > 10) {...}<br />testo (o stringhe) es. la strigna è sempre identificata dagli apici<br />if (valuta == 'EURO') { .. }<br />valori booleani es. true/false<br /> es. if (bonifico==true) { ... }<br />if (bonifico) { ... }<br /> es. if (bonifico==false) { ... }<br />if (!bonifico) { ... }<br />
  • 12. Eventi<br />Il codice Javascript viene eseguito a seguito di precisi eventi nella pagina. <br />Gli eventi sono attributi dei tag html associabili a qualsiasi evento.<br />L’evento più comune è il click con il mouse su un oggetto.Se ad esempio volessi richiamare la funzione javascript salva() al click del mouse sopra un bottone:<br /><input type="submit" value="bottone" id=“btn“ name=“btn" onclick=“salva();" /><br />Glieventipiùcomunisonoonmouseover, onmouseout, onclick, onchange<br />
  • 13. Jquery: writeless, do more<br />Nonostante la sua incredibile potenza e versatilità, la sua complessità ha determinato nel tempo un utilizzo limitato di javascript.<br />Jquery ha riportato in voga questo linguaggio di scripting permettendo di utlizzare effetti molto complessi con un codice decisamente userfriendly.<br />Jquery è un frameworkjavascript ovvero una serie di funzi0ni JS che consentono di poter utilizzare JS con dei comandi semplificati (che vengono poi reinterpretati in istruzioni JS dalle funzioni di Jquery). Jquery è quindi una libreria di funzioni semplificate Javascript<br />
  • 14. Integrazione JQuery<br />Jqueri è una libreria scaricabile gratuitamente dal sitohttp://jquery.com/<br />Per integrare Jquery nel proprio sito è sufficiente scaricare questa libreria, copiarla nel proprio sito ed inserirla in TUTTE le pagine con l’inclusione<br /><script src="js/jquery-1.5.min.js" type="text/javascript"></script><br />Esistono 2 versioni della libreria Jquery:<br />PRODUCTION: Questa versione contiene codice «compresso» (ovvero senza spazi)<br />DEVELOPMENT: Questa versione contiene codice indentato e commentato per una lettura più fluida<br />Le due versioni sono identiche, cambia solamente la loro dimensione. E’ quindi consigliato inserire nel proprio sito la versione PRODUCTION (più leggera perché contiene codice compresso).<br />
  • 15. Selettori<br />La funzionalità più grande di Jquery è quella di aver definito un metodo di selezione degli oggetti che costituiscono la pagina incredibilmente potente. Una volta «recuperato» un oggetto è possibile modificare o recuperare il suo valore o eseguire istruzioni.<br />Per selezionare un oggetto con Jquery è possible usare la sintassi $(oggetto) dove oggetto può essere:<br />Tag html: è possible richiamare tutti i tag html (ad es. $(‘p’) seleziona automaticamente tutti i tag paragrafo della pagina)<br />Classe: richiama tutti gli oggetti aventi la classe indicata (ad es. $(‘.thumbnail’) richiama tutti gli oggetti della pagina con classe thumbnail<br />Id: richiama l’oggetto della pagina con un certo id (ad es. $(‘#menu’) richiama l’oggetto con id menu<br />Istruzione composta: è possibile concatenare i selettori in modo gerarchico (ad es. $(‘#menu ul li a’) prende tutti i link (tag a) contenuti nelle voci elenco (li) dell’elenco (ul) contenuto nell’oggetto con id menu (#menu)<br />
  • 16. Principali Proprietà JQuery<br />Una volta selezionato un oggetto in Jquery è possibile richiamare delle funzioni su di esso. Le principali funzioni sono:<br />.addClass() : $(‘a’).addClass(‘current’); aggiunge la classe ‘current’ a tutti i link (tag a)<br />.removeClass() : $(‘a’).removeClass(‘current’); rimuove la classe ‘current’ a tutti i link (tag a)<br />.val() : $(‘#camponome’).val(); prende il valore dell’0ggetto con id camponome (che deve essere un campo modulo)<br />.html() : $(‘#menu’).html("ciao"); assegna il contenuto html "ciao" all’oggetto con id menu.<br />.hide(): $(‘#pippo’).hide(); nasconde l’oggetto con id pippo<br />.show() : $(‘#pippo’).show(); mostra l’oggetto con id pippo<br />.bind() : $(‘#bottone').bind('click',function() {returncontrollo();}); assegna all’oggetto con id bottone la funzione onclick="return controllo(); "<br />

×