corso web developer - Introduzione a Javascript

Introduzione a JavascriptA cura di Riccardo PiccioniIl Javascriptè un linguaggio di scripting che inserito all’interno del codice HTML consente di poter modificare il comportamento della pagina.

Differenze Client/ServerJavascript è un linguaggio client-side, viene cioè eseguito sul computer dell’utente nel momento in cui il browser apre la pagina.I linguaggi Server-Side (come PHP o ASP) vengono invece eseguiti sul server PRIMA che la pagina venga inviata al browserSe 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

Cross-BrowsingJavascript è un linguaggio che viene interpretato dal browser del client, dotato di un ENGINE (motore) che interpreta il linguaggio di script e lo esegue.Ogni browser utilizza il proprio Engine e questo significa che non tutti i browser utilizzano le stesse versioni di scripting. La necessità di creare script che possano girare allo stesso modo e con lo stesso risultato su tutti i browser è chiamata cross-browsing.

Uso di JavascriptIl tag html che consente di poter introdurre uno codice di scriptingjavascript è <script></script>.Il tag script può essere contenuto in un qualunque punto del tag <html> ma va preferibilmente posto nella sezione <head></head>Script Interni: JS può essere inserito direttamente nella pagina con il codice<script type="text/javascript">…. Codice javascript …</script>Script Esterni: Oppure può essere inserito un collegamento ad un file javascript esterno con la sintassi<script src="js/filejavascript.js" type="text/javascript"></script>(*)I file esterni di javascript sono file di testo con estensione .js contenente esclusivamente codice javascript (senza quindi nessun tag<script></script>)

Istruzioni JSLe istruzioni hanno la responsabilità di controllare il flusso di elaborazione del codice. Esse possono:eseguire iterazioni, cioè ripetere una parte di codice per un certo numero di volte;eseguire decisioni condizionate;richiamare funzioni;consentire al percorso dell'esecuzione di essere modificato dinamicamente.In Javascript ogni istruzione termina con il punto e virgola, come accade col C o con il PHP.Alcune istruzioni, come le funzioni sono istruzioni composte. In questo caso il codice è raggruppato all’interno di parentesi graffe {}

Commenti del codiceAnche in Javascript è possibile inserire dei commentiCommento blocco testo: il testo contenuto all’interno di /* e */ è considerato un commento/*… commenti …*/Commento Riga: è possibile commentare una riga mettendo all’inizio i caratteri //// riga commentata

FunzioniLe funzioni sono dei raggruppamenti di istruzioni.Possono essere parametriche (vengono lanciate passandogli una o più variabili)Possono restituire o no un risultatoLa sintassi di una funzione JS èfunctionnomefunzione(var1, var2, …){ //istruzionireturn valore;}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

VariabiliUn elemento importantissimo nella programmazione è costituito dalle variabili. 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.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.La variabile consente quindi di formulare delle istruzioni che possano essere richiamate con valori differenti.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).

Condizioni IFL’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 condizioneif (condizione){ .. codice eseguito se la condizione è vera}else{ ... codice eseguit se la condizione è falsa}

Condizioni IFcondizione di uguaglianza == (ad esempio variabile == 1)condizione di differenza != o <> (ad esempio variabile != 2)condizioni di raffronto >=(maggiore uguale) (es. variabile > 3)<= (minore uguale) (es. variabile < 4)a volte le condizioni possono anche essere composte da due o più condizioni chedebbono essere simultaneamente vere (AND)es.. (variabile1==2 && variabile2 < 5)oppure una condizione composta da due o più condizioni che debbano esseresoddisfatte almeno in parte (OR)es (variabile1== 2 || variabile2 < 5)

Condizioni IFnelle operazioni di confronto possiamo confrontare 3 tipi di datinumeri es. if (spesespedizione > 10) {...}testo (o stringhe) es. la strigna è sempre identificata dagli apiciif (valuta == 'EURO') { .. }valori booleani es. true/false es. if (bonifico==true) { ... }if (bonifico) { ... } es. if (bonifico==false) { ... }if (!bonifico) { ... }

EventiIl codice Javascript viene eseguito a seguito di precisi eventi nella pagina. Gli eventi sono attributi dei tag html associabili a qualsiasi evento.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:<input type="submit" value="bottone" id=“btn“ name=“btn" onclick=“salva();" />Glieventipiùcomunisonoonmouseover, onmouseout, onclick, onchange

Jquery: writeless, do moreNonostante la sua incredibile potenza e versatilità, la sua complessità ha determinato nel tempo un utilizzo limitato di javascript.Jquery ha riportato in voga questo linguaggio di scripting permettendo di utlizzare effetti molto complessi con un codice decisamente userfriendly.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

Integrazione JQueryJqueri è una libreria scaricabile gratuitamente dal sitohttp://jquery.com/Per integrare Jquery nel proprio sito è sufficiente scaricare questa libreria, copiarla nel proprio sito ed inserirla in TUTTE le pagine con l’inclusione<script src="js/jquery-1.5.min.js" type="text/javascript"></script>Esistono 2 versioni della libreria Jquery:PRODUCTION: Questa versione contiene codice «compresso» (ovvero senza spazi)DEVELOPMENT: Questa versione contiene codice indentato e commentato per una lettura più fluidaLe 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).

SelettoriLa 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.Per selezionare un oggetto con Jquery è possible usare la sintassi $(oggetto) dove oggetto può essere:Tag html: è possible richiamare tutti i tag html (ad es. $(‘p’) seleziona automaticamente tutti i tag paragrafo della pagina)Classe: richiama tutti gli oggetti aventi la classe indicata (ad es. $(‘.thumbnail’) richiama tutti gli oggetti della pagina con classe thumbnailId: richiama l’oggetto della pagina con un certo id (ad es. $(‘#menu’) richiama l’oggetto con id menuIstruzione 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)

Principali Proprietà JQueryUna volta selezionato un oggetto in Jquery è possibile richiamare delle funzioni su di esso. Le principali funzioni sono:.addClass() : $(‘a’).addClass(‘current’); aggiunge la classe ‘current’ a tutti i link (tag a).removeClass() : $(‘a’).removeClass(‘current’); rimuove la classe ‘current’ a tutti i link (tag a).val() : $(‘#camponome’).val(); prende il valore dell’0ggetto con id camponome (che deve essere un campo modulo).html() : $(‘#menu’).html("ciao"); assegna il contenuto html "ciao" all’oggetto con id menu..hide(): $(‘#pippo’).hide(); nasconde l’oggetto con id pippo.show() : $(‘#pippo’).show(); mostra l’oggetto con id pippo.bind() : $(‘#bottone').bind('click',function() {returncontrollo();}); assegna all’oggetto con id bottone la funzione onclick="return controllo(); "

corso web developer - Introduzione a Javascript

More Related Content

What's hot

Similar to corso web developer - Introduzione a Javascript

corso web developer - Introduzione a Javascript