docA cura di Riccardo Piccioni Il Javascript è un linguaggio di scripting
download 
Reclamo Transcript
A cura di Riccardo Piccioni Il Javascript è un linguaggio di scripting
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 scripting
javascript è <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 è
function nomefunzione(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();" />
Gli eventi più comuni sono onmouseover,
onmouseout, onclick, onchange
Jquery: write less, 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 user friendly.
Jquery è un framework javascript 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 sito
http://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() {return controllo();});
assegna all’oggetto con id bottone la funzione onclick="return
controllo(); "
