corso web developer - Introduzione a Javascript

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

Differenze Client/Server Javascript è 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 browser 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

Cross-Browsing Javascript è 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 Javascript Il 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 JS Le 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 codice Anche in Javascript è possibile inserire dei commenti Commento 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

Funzioni Le funzioni sono dei raggruppamenti di istruzioni. Possono essere parametriche (vengono lanciate passandogli una o più variabili) Possono restituire o no un risultato La sintassi di una funzione JS è functionnomefunzione(var1, var2, …) { //istruzioni return 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

Variabili Un 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 IF 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 if (condizione) { .. codice eseguito se la condizione è vera } else { ... codice eseguit se la condizione è falsa }

Condizioni IF condizione 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 che debbono essere simultaneamente vere (AND) es.. (variabile1==2 && variabile2 < 5) oppure una condizione composta da due o più condizioni che debbano essere soddisfatte almeno in parte (OR) es (variabile1== 2 || variabile2 < 5)

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

Eventi Il 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 more Nonostante 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 JQuery Jqueri è 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ù fluida 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).

Selettori 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. 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 thumbnail Id: richiama l’oggetto della pagina con un certo id (ad es. $(‘#menu’) richiama l’oggetto con id menu 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)

Principali Proprietà JQuery Una 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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (13)

Similar a corso web developer - Introduzione a Javascript

Similar a corso web developer - Introduzione a Javascript (20)

corso web developer - Introduzione a Javascript