Che materia stai cercando?

Appunti su JavaScript e jQuery

Appunti schematizzati sul corso;
Suddivisione per argomenti, basati sulle dispense della professoressa;
Si parte da un'introduzione generale fino al dettaglio dei vari oggetti e caratteristiche del Javascript;
al fondo sono presenti due tabelle che riassumono i principali tag dell'HTML e Del CSS

Esame di Applicazioni Informatiche per il Multimediale docente Prof. C. Gena

Anteprima

ESTRATTO DOCUMENTO

PROGRAMMAZIONE ORIENTATA AGLI OGGETTI

È possibile con linguaggi orientati agli oggetti

È basato sul fatto che esistono una serie di oggetti che interagiscono vicendevolmente,

scambiandosi messaggi ma mantenendo ognuno il proprio stato ed i propri dati.

Le caratteristiche di un oggetto vengono denominate proprietà e le azioni sono dette metodi.

I metodi sono le funzioni, mentre le proprietà sono i dati.

Paradigma di programmazione che prevede la definizione di oggetti software che

interagiscono vicendevolmente tra di loro scambiandosi messaggi ma mantenendo ognuno il

proprio stato e i propri dati. Dati

Dati Dati

Non interessa l’implementazione interna del codice, ma le caratteristiche e azioni che

l’oggetto è in grado di svolgere e espone all’esterno.

ES: LAVATRICE

Caratteristiche:

• Marca – Velocità – interfaccia ecc…

o

Azioni:

• Lavaggio – Prelavaggio – Centrifuga

o

Nella programmazione orientata agli oggetti:

CARATTERISTICHE: Proprietà

• AZIONI: metodi

Classe: Raggruppamento di tutti gli oggetti che hanno le stesse proprietà è utilizzano gli stessi

metodi: la classe finestra del Browser (Window).

à

un oggetto è un’istanza delle sua classe di appartenenza la finestra del MIO browser.

à

INGREDIENTI PER LA REALIZZAZIONE DI UN PROGRAMMA

CONCETTI FONDAMENTALI DI PROGRAMMAZIONE:

Astrazioni sui dati:

dati di base di un calcolatore:

Bit – Byte – Cella Di Memoria

-

Necessità di astrarre dal concetto elementare di bit/byte e definire dei tipi di informazione più

vicini a quelli che servono nella definiizione di problemi reali.

Due passi:

definizione di tipi elementari di base;

definizione di costruttori per aggregare in tipi di dati più complessi;

TIPI ELEMENTARI DI DATI

ci possono essere differenze da linguaggio a linguaggio, ma principalmente sono:

Tipi di elementi Base Operatori

Numerici: numerici

Int – Short – Long – Real – Double + - * / sqrt

Stringhe: caratteri

Char (ASCII su 8bit, e UNICODE su 16bit) – String (qualche linguaggio lo Succ, Prec

ha come tipo base

Boolean: stringhe

TRUE e FALSE Concact, Add, Substring

Per le enumerazioni: boolean

elenchi di costanti specificate (ES:colori: red,blue,white,black ecc…) And, Not, Or, If

VARIABILI, ESPRESSIONI, ASSEGNAMENTO

Assegnamento: modo per inserire un valore dentro una variabile int y = x + 7

int x dichiaro la variabile

à

• x= “c”

x = 3 assegno un valore

à

• x = 3 + 5 scrivo un’espressione per AGGIORNARE il

à

• ERRORE DI TIPO DI DATI

valore VARIABILE = ESPRESSIONE

lato sinistro (left hand side) lato destro (right hand side)

deve essere una variabile Espressione che viene valutata

LA MEMORIA PRINCIPALE

È formata da un insieme di celle; ogni cella ha un indirizzo e un contenuto. Variabile

Nome

Indirizzo Contenuto simbolico

a a

3278 x

3279 b y b

ESPRESSIONI, ASSEGNAMENTO

Espressione: Può essere costruita usando costanti e variabili e usando gli operatori specificati per

il tipo di dati costanti e variabili.

int x x=2+4 x=y+z

COSTRUTTORI PER CREARE TIPI COMPLESSI

Approccio composizionale per aggregare tipi di dati in nuovi tipi di dati più complessi.

il numero e le caratteristiche dei costruttori di tipi complessi può variare da linguaggio a

linguaggio, ma i meccanismi fondamentali sono:

tipi complessi:

Array:

Struttura dati (vettore) composta da dati omogenei aventi lo stesso tipo

Record:

Prodotto cartesiano di tipi differenti. Le sue istanze sono gli elementi del prodotto

cartesiano

Set:

File:

Puntatori:

Meccanismo per utilizzare gli indirizzi dei dati.Astrazione del concetto di indirizzo di

memoria: si può definire l’indirizzo per un qualunque tipo di dati.

ARRAY

Array di interi: Vettore composto da numeri interi:

23 listaDiNumeri [0] 23 Il selettore [] permette di accedere alle

componenti del vettore attraverso la loro

9 listaDiNumeri [1] 9 posizione.

5 listaDiNumeri [2] 5 listaDiNumeri [0]=23

45 listaDiNumeri [3] 45 listaDiNumeri [1]=4+5

78 listaDiNumeri [4] 78

Array di interi x=0;

0 listaDiNumeri [5] 0 listaDiNumeri[x]=23

99 listaDiNumeri [6] 99 x=x+1

3 listaDiNumeri [7] 3 listaDiNumeri[x]=4+5

52 listaDiNumeri [8] 52

9 listaDiNumeri [9] 9

Si possono definire vettori di qualunque tipo di dati. Le dimensioni del vettore possono essere

soggette a restrizioni in alcuni linguaggi.(devono essere prefissate in alcuni, non in altri).

Gli indici del vettore possono essere fissi (solo numeri interi)in alcuni linguaggi, o possono essere

un qualunque tipo elementare.

RECORD

Prodotto cartesiano di tipi differenti. Le sue istanze sono gli elementi del prodotto cartesiano.

ES: Record conto Le istanze di questo record sono delle triple, come per esempio

{contatore numero, (1, 2500, “rossi”)

int denaro,

char[]nome}

Posso definire delle variabili per ottenere delle istanze.

ES: Conto c.

c.numero=1

c.denaro=2500

c.nome=”rossi”

PUNTATORE

Meccanismo per utilizzare gli indirizzi dei dati. Astrazione del concetto di indirizzo di memoria: si

può definire l’indirizzo per qualunque tipo di dati.

1.2. INTRODUZIONE A JAVASCRIPT

FUNZIONALITÀ DI JAVASCRIPT:

Un linguaggio di programmazione serve per eseguire autonomamente determinate operazioni:

elaborazioni di dati

• gestione dell’input e dell’output di un sistema

• gestione del file system

• ecc..

Javascript supporta solo alcune di queste funzionalità.

STANDARDIZZAZIONE DI JAVASCRITP

Core Javascript prima versione: LiveScript (Netscape),poi rinominato JavaScript per la sua

à

somiglianza a Java.

Versione proprietaria Jscript (Microsoft)

Standardizzazione attuata dall’ECMA (ECMA-262, o ECMAScript) nel 1999

l’ultimo standard, di giugno 2015, è ECMA-262 edition 6. È anche uno standard ISO.

CARATTERISTICHE DI JAVASCRIPT

È un linguaggio di Scripting, debolmente orientato agli oggetti.

Debolmente tipato ed interpretato.

Il nucleo del linguaggio (core JavaScript) ha due estensioni: lato Client – lato Server SCRIPTING

I linguaggi di Scripting non sono necessariamente semplici; hanno caratteristiche diverse

(normalmente semplificate) rispetto ai normali linguaggi di programmazione.

Si prestano allo sviluppo di applicazioni semplici, al contrario di progetti complessi.

LINGUAGGIO ORIENTATO AGLI OGGETTI

Prevede la definizione di oggetti software che interagiscono vicendevolmente tra di loro

scambiandosi messaggi ma mantenendo ognuno il proprio stato e i propri dati.

Nella programmazione ad oggetti:

Caratteristiche: proprietà

Azioni: metodi

Classe: raggruppamento di tutti gli oggetti che hanno le stesse proprietà e utilizzano gli stessi

metodi le finestre del browser

à

Un oggetto è un’istanza della sua classe di appartenenza la mia finestra

à

Core JavaScript: sottoinsieme comune a Javascript lato client e lato server

JavaScript lato Client:

Interprete JavaScript incorporato nel browser

- JavaScript interagisce con il documento HTML attraverso il document Object Model (DOM).

- INTERPRETAZIONE

Le istruzioni del linguaggio vengono eseguite direttamente dall’interprete; esso legge

un’istruzione e effettua l’operazione corrispondente. non ci sono passaggi intermedi (come nella

compilazione). Eventuali errori vengono rilevati solo al momento dell’esecuzione (run-time)

DEBUGGING DI JAVASCRIPT

Debugging: processo di correzione degli errori in un programma; una volta scritto un programma

in JavaScript, si apre con il browser il documento che lo contiene. L’interprete di JavaScript nel

browser legge lo script. Gli errori di sintassi sono rilevati quando l’interprete legge lo script.

Gli errori “logici” sono rilevati solo quando lo script viene eseguito.

JAVASCRIPT E L’INTERATTIVITÀ

Gli eventi corrispondono ad azioni dell’utente. I gestori di eventi permettono di associare effetti

alle azioni dell’utente:

ES: Cliccare un bottone (onClick)

- Passare il puntatore del mouse su un oggetto della pagina (onMouseOver)

- Caricare una pagina (onLoad)

-

Nel modello ad oggetti JavaScript lato client gli elementi html sono associati ai gestori di eventi.

Ad elementi come un link (il tag <a>) può essere associato il gestore evento onClick

- All’oggetto Window sono associati i gestori di eventi onLoad e onResize ecc.

-

Tramite i gestori di eventi lo sviluppatore può associare un evento all’esecuzione di uno script.

Script Interni Script Esterni

Si trovano “all’interno” del documento e È possibile, come per i CSS, inserire il codice

vengono identificati mediante il tag <SCRIPT> del programma in un file esterno e richiamarlo

<script>…</script> poi nel html.

In questo caso il tag SCRIPT è associato

<script> all’attributo SRC

funzione inviare ()

{ <script src=”URL”> </script>

… <script src=”nomefile.js”> </script>

}

</script>

il formato del file contenente uno script è un file di testo:

non deve contenere formattazione

- il file esterno che contiene il solo script JavaScript (senza HTML) deve avere estensione .js

- nel file esterno si omette il tag <SCRIPT>

-

Lo script JavaScript può essere inserito sia nell’intestazione che nel corpo di un documento; è

possibile importare più script in un documento. È possibile nello stesso documento importare

script e definire script. STRUTTURA LESSICALE

JavaScript è case-sensitive: le maiuscole e minuscole sono differenti.

commenti:

commenti a blocco:

o /* questo è un commento

su più righe */

commenti monoriga

o // questo è un commento su una riga

JavaScript ignora gli a capo e gli spazi bianchi (a meno che non si trovino in una stringa “spazio

vuoto”) nel dare un nome alle funzioni e alle variabili, è necessario evitare le parole riservate,

cioè i termini che fanno parte del lessico di JavaScript (es: VAR – FUNCTION – RETURN ecc..)

tutte le istruzioni devono terminare con un punto e virgola.

1.3. VARIABILI IN JAVASCRIPT

Javascript è un linguaggio debolmente tipato: il tipo delle variabili (e dei parametri/argomenti

delle funzioni) non viene dichiarato esplicitamente, ma definito implicitamente al primo

assegnamento. totale=0; totale è di tipo int

à

Javascript converte automaticamente i tipi durante l’esecuzione (quando possibile).

le variabili utilizzate in un programma devono essere dichiarate in anticipo.

per dichiarare una variabile si usa la parola chiave VAR.

La dichiarazione crea la variabile, a cui è possibile assegnare un valore. l’operatore di

assegnamento è il segno = . var prova = “ciao”;

Non è possibile inserire spazi bianchi nel nome di una variabile:

var musicista preferito; [sono due variabili]

var musicista_preferito: [è una sola variabile]

Evitare anche l’uso del carattere $

In JavaScript è possibile compattare in una sola istruzione dichiarazione e assegnamento:

var numero; numero = 1 ;

numero = 1; è una dichiarazione

§

È uguale a: implicita;

var numero = 1; sconsigliato l’utilizzo

§

è possibile dichiarare più variabili sulla stessa riga e insieme:

var nome=”Giorgia”, cognome=”Rossi”, età=”30”;

una variabile può essere riassegnata:

[dichiarazione] var musicista=”Bach”;

[nuova dichiarazione] var musicista=”Strauss”;

[riassegnamento] var musicista=”Beethoven”;

dopo la nuova dichiarazione e il nuovo assegnamento, il valore della variabile è “Strauss”, dopo

il riassegnamento sarà “Beethoven”.

TIPI DI DATI DEFINIZIONE OPERAZIONI

Numeri Interi e numeri con la virgola sono lo stesso Operazioni aritmetiche classiche:

tipo di dato: +, -, *, /, %

Numeri interi: da -2 a 2 ecc..

53 53

§ Numeri con la virgola (in virgola

§ mobile)

Stringhe Caratteri racchiusi tra virgolette doppia (o Concatenare due stringhe:

virgolette semplici) x=”stringa_1” + “stringa_2”;

Javascript considera parte della stringa tutto concatenare stringhe e variabili:

ciò che segue l’apertura delle virgolette e x=”stringa_1”+ “variabile”+”stringa_2”

precede la loro chiusura.

scrivendo : “ciao” cara” – la stringa è caratteri speciali nelle stringhe:

§ CIAO – il resto (cara “) genera un alcune sequenze di caratteri

errore. permettono di inserire virgolette (\”),

uso delle virgolette annidiate:

§ a capo (\n), ecc.. in una stringa.

“buonanotte ‘signorina’” la stringa è

à

BUONANOTTE ‘SIGNORINA’

Html Per “inserire” codice HTML in uno script è Stringhe: sequenze di Escape:

necessario che esso sia inserito tra una \’ apice

§ à

coppia di virgolette (come per le stringhe”. \” virgolette

§ à

\n nuova riga

§ à

X=”ciao”; \r carriage return

§ à

y=”cara”; \t tabulazione

§ à

z= x + “<br>”+y; \\ backslash

§ à

x = “buonasera \”signorina\” ”;

Risultato stampato: buonasera “signorina”

ciao x = “buonasera \n signorina ”;

cara //signorina andrà̀ a capo

N.B. in alcuni casi le sequenze di

Escape potrebbero non funzionare,

per ovviare a questo è possibile

usare direttamente il codice HTML

Booleani I valori booleani (valori di verità) sono due:

TRUE

§ FALSE

§

Es. risultato di operazioni di tipo logico

(confronti):

1==1 è true

1==2 è false

1!=1 è false

1!=2 è true

Altri Undefined:

Variabili che non sono state definite, o che

§ non sono state inizializzate (non hanno mai

ricevuto un valore)

Proprietà che non esistono

§ Il tentativo di richiamare il valore di una

§ variabile non richiamata determina un

errore runtime.

Null:

Nessun valore: è vuoto, non contiene

§ niente, ma definito.

1.4. OGGETTI IN JAVASCRIPT

PROPRIETÀ:

Le proprietà di un oggetto sono le caratteristiche Ripasso:

dell’oggetto: cosa significa un linguaggio

Hanno un nome e un valore. ”orientato agli oggetti”?

Si può vedere una proprietà come una variabile associata Si tratta di un’astrazione:

all’oggetto. permette allo sviluppatore di

ES: un gatto può essere visto come un oggetto, dotato di manipolare i dati come oggettivi.

proprietà: Gli oggetti hanno determinate

razza – soriano, certosino, siamese, ecc..

§ prerogative:

colore – grigio, bianco, nero, ecc..

§ Proprietà – Metodi associati

pelo – corto, lungo, semilungo, ecc..

§ Gli oggetti con caratteristiche e

Le proprietà e i metodi sono comuni, ogni istanza avrà metodi comuni fanno parte di

valori specifici. una classe.

È possibile leggere le proprietà degli oggetti (o delle Un oggetto specifico di una

singole istanze) e assegnare il loro valore ad una variabile classe è un’istanza.

con questa sintassi:

var nomevariabile = oggetto.proprietà

Nell’esempio: var razza_gatto = gatto.razza;

E la variabile razza_gatto avrà come valore ad esempio soriano.

allo stesso modo è possibile assegnare un valore ad una singola istanza:

gatto.nome = “Silvestro”

Alla proprietà nome dell’istanza gatto è stato assegnato il valore “micio”

METODI

Ai metodi si possono “passare” direttamente i valori dei paramentri oppure delle variabili che

contengono i valori:

gatto.graffia(“Gina”)

var persona =”Gina”;

gatto.graffia(persona)

i metodi di un oggetto sono comportamenti associati all’oggetto; il programmatore può utilizzarli

associati agli oggetti per compiere operazioni su di essi. la sintassi per indicare un metodo è:

oggetto.metodo(parametro)

nell’esempio precedente, il gatto potrebbe avere “metodi”:

il gatto graffia gina

gatto.graffia(“Gina”);

Definiamo una volta sola le

caratteristiche dell’oggetto e i suoi

metodi; utilizziamo questa definizione ogni

volta che serve.

in Javascript lato client, gli elementi html

e il browser sono oggetti predefiniti, mette

a disposizione del programmatore un

insieme di oggertti predefiniti che

rappresentano BROWSER e DOCUMENTO

HTML; questi vengono creati

automaticamente quando si apre un

documento nel browser.

L’OGGETTO WINDOW

Rappresenta la finestra corrente che costituisce il contesto di esecuzione di javascript lato client

L’oggetto windows è l’oggetto globale, che racchiude anche il DOM.

PROPRIETÀ DEGLI OGGETTI:

per accedere alle proprietà di un oggetto:

oggetto.proprietà

in scrittura:

location.href=http://www.unito.it

in lettura:

x= location.href;

document.write(x)

per chiamare un metodo associato ad un oggetto si utilizza la notazione:

oggetto.metodo()

es: document.write(“ciao”) ISTRUZIONI

Un’istruzione produce un effetto:

una dichiarazione

- un assegnamento

- la chiamata di una funzione (la funzione al suo interno raggruppa più istruzioni)

- la chiamata di un metodo

- un comando

- un insieme di istruzioni

-

ogni istruzione deve essere seguita dal punto e virgola.

USO DEL METODO DOCUMENT.WRITE

per ora utilizzeremo il metodo document.write() per gli esercizi.

all’interno delle parentesi si può scrivere:

un letterale (stringa o numero)

il nome di una variabile

Il risultato della chiamata di questo metodo è ciò che sta all’interno della parentesi e viene

scritto nel corpo del documento.

document.write(“ciao a tutti”); nel corpo del documento apparirà la parola “ciao a tutti”

document.write(“<h1>ciao</h1>”);nel corpo del documento apparirà la parola “ciao” in stile h1

x=”ciao”;

document.write(x); nel corpo del documento apparirà la parola “ciao”.

STRINGHE E COMANDI HTML

Utilizzando il metodo document.write() è possibile formattare il testo generato. per ottenere testo

formattato si inseriscono i tag html nella stringa:

“<h1>testo</h1>”

document.write(“<h1>ciao</h1>”);

concatenare la stringa contenente il tag a un’altra stringa o variabile:

var nome_variabile=”ciao”;

document.write(“<h1>” + nome_variabile +”</h1>”);

1.5. OPERATORI E METODI

OPERATORE DI ASSEGNAMENTO

l’operatore di assegnamento assegna un valore ad una certa variabile. Assegnare

un’operazione ad una variabile serve per memorizzarne il risultato.

OPERATORI SU STRINGHE

concatenazione: +

la concatenazione di stringhe e variabili permette di generare testo scritto; il testo scritto può

contenere tag html e sequenze di escape.

perché il testo sia visualizzato nel documento corrente, occorre utilizzare il metodo

document.write(). ERRORI COMUNI:

document.write(nome_variabile) – scrive il valore corrente della variabile.

Se i nomi di variabile sono tra virgolette, vengono letti dall’interprete Javascript come

stringhe qualunque.

document.write(“nome_variabile”) – scrive il nome della variabile.

GENERARE UN TAG COMPLESSO

se voglio scrivere in Javascript il codice html (corretto)che mi permetta di visualizzare

un’immagine non posso scrivere:

document.write(“<img src=”pippo.jpg”>”); [non funziona]

document.write(“<img src=’pippo.jpg’>”; [funziona ma è sintatticamente scorretto]

devo utilizzare i caratteri di escape:

document.write(“<img src=\”pippo.jpg\” “);

oppure si può utilizzare una concatenazione di stringhe e variabili:

var immagine =”pippo.jpg”

document.write(“<img src=\” “+ immagine + “\”>”); [questa tecnica è più compatta]

es: var link = http://www.unito.it/;

document.write(“<a href=\”” + link + “\”> clicca qui</a>”)

OPERATORI ARITMETICI addizione +

Gli operatori di incremento (decremento), incrementano sottrazione –

(decrementano)di una unità il valore di una variabile numerica. divisione /

L’operatore prefisso restituisce il valore dopo l’operazione; moltiplicazione *

L’operatore suffisso restituisce il valore prima dell’operazione; modulo (resto)%

Incremento:

- prefisso: ++n

o suffisso: n++

o

Decremento:

- prefisso: --n

o suffisso: n—

o

o

OPERATORI DI CONFRONTO (O RELAZIONALI)

Sono operatori binari;

Confrontano tra loro due valori e restituiscono un operatori di confronto:

valore di verità (true o false). (2>1 True 2>3 uguale ==

à à -

false) maggiore >

-

ES: minore <

-

var a=2; maggiore o uguale >=

-

var b=3; minore o uguale <=

-

var confronto=false; non uguale !=

-

confronto=a<b;

OPERATORI LOGICI A B A&&B AIIB !A

Usati per operazioni booleane complesse e TRUE FALSE FALSE TRUE FALSE

frequentemente utilizzati per collegare tra lor TRUE TRUE TRUE TRUE FALSE

operazioni di confronto. Restituiscono valori di verità FALSE FALSE FALSE FALSE TRUE

(true/false). FALSE TRUE FALSE TRUE TRUE

Il loro comportamento corrisponde alle tavole di Esercizio

verità dell’OR, AND E NOT logici. 2 ==2 && 4>3 true and true true

&& (AND) vero solo se entrambi sono veri

- 2<5 && 5>6 True and false False

II (OR) vero se almeno uno dei due è vero

- 2>4 II 5<6 False or true True

! (NOT) veroàfalso falsoàvero (se è vero

- diventa falso e se è falso diventa vero) 3>4 II 5>7 False or false False

!false && true True and true true

ORDINE DEGLI OPERATORI

Gli operatori vengono valutati secondo un ordine di precedenza predefinito:

1. negazione e incremento 5. uguaglianza

2. moltiplicazione, divisione e modulo 6. and

3. addizione e sottrazione 7. or

4. confronto 8. assegnamento

ALTERARE L’ORDINE DI VALUTAZIONE

Per modificare l’ordine di valutazione in un’espressione si utilizzano le parentesi. secondo lo stesso

schema che si applica alle operazioni aritmetiche.

es: 8+5*3 [5*3 verrà valutata per prima a meno che non si scriva)

(8+5)*3

METODI DI WINDOW

I metodi maggiormente usati sono : alert e prompt

Generano finestre di tipo modale, ovvero che bloccano l’esecuzione dello script finché l’utente

non effettua un’azione (es: clicca il pulsante ok). ALERT

vengono utilizzati per “avvertire” l’utente di un particolare fatto (es. tempo di caricamento

lungo, verificarsi di un errore o evento inatteso). L’utente può solo cliccare sul pulsante Ok.

Parametro richiesto: una stringa che viene visualizzata nella finestra di alert.

Chiamata di alert:

window.alert(“stringa da visualizzare”);

esempio: window.alert(“ciao”)

fa apparire una finestra di tipo alert che visualizza la

stringa ciao. è un metodo di output come

document.write

document.write() scrive una stringa in un documento html,

mentre window.alert() scrive una stringa in una finestra

modale. PROMPT

Il metodo prompt fa apparire una finestra contenente un campo di testo in cui l’utente inserisce

una stringa. La finestra di prompt ha due pulsanti: conferma e annulla. Il campo di testo può

contenere un testo predefinito. Il metodo prompt restituisce un valore, ossia restituisce la stringa

che l’utente ha inserito: è un metodo di input.

Chiamata di prompt:

window.prompt(“testo che compare nella finestra”,”testo che compare nel campo testo”)

esempio: window.prompt(“scrivi il tuo nome”, “il tuo nome”)

ESEMPIO:

var nome_visitatore=window.prompt(“scrivi il tuo nome”, “”);

window.alert(nome_visitatore); [restituisce la stringa immessa dall’utente nel campo testo]

var nome_visitatore=prompt(“scrivi il tuo nome”,””);

alert(“buongiorno \n” + nome_visitatore);

Le stringhe di output possono essere concatenate anche nel metodo alert.

NB: i metodi di window possono anche essere chiamati senza riferimento all’oggetto window, in quanto

window è l’oggetto di default.

1.6. STRUTTURE DI CONTROLLO

I COSTRUTTI CONDIZIONALI importante:

SELEZIONE istruzione (o statement): elemento sintattico

questo costrutto consente di scegliere se del linguaggio che descrive un’azione.

eseguire o meno alcune istruzioni (blocco) in blocco di istruzioni: insieme di più istruzioni

base al valore booleano assunto da una certa racchiuse tra parentesi graffe.

espressione condizionale. sequenza: numero finito di istruzioni poste una

di seguito all’altra.

if (sesso==“femmina

{

alert(“Buongiorno signora!”); }

)

if (eta

{

alert(“Mi dispiace, sei troppo giovane per

partecipare al sondaggio.”);

} SELEZIONE BINARIA

Questo costrutto consente di scegliere quali istruzioni o blocchi di istruzioni eseguire in base al

valore Esempi:

booleano if (prezzo<10) if (sesso==”maschio”)

assunto da { {

sconto=0; alert(“buongiorno signore”);

una certa } }

espressione else else

condizionale. { {

sconto=5; alert(“buongiorno signora”);

Le espressioni } }

booleane

contemplan

o anche gli

operatori

logici and (&&) e or (II).

Esempio con AND: verificare se l’età è compresa tra 18 e 40:

if (eta=>18&&<=40); […]

esempio con OR: verificare se l’etò è maggiore di 18 o la professione è diversa da studente:

if (eta<18 II professione !=”studente”); […] SELEZIONE BINARIA NIDIFICATA

Questo costrutto consente di scegliere tra più di due istruzioni o blocchi di istruzioni da eseguire in

base al valore booleano assunto da una certa espressione. SELEZIONE MULTIPLA

è un’altrenativa alla selezione nidificata e si usa quando è necessario eseguire operazioni legate

a valori precisi. Mediamente la selezione multipla si possono porre una serie di condizioni da

valutare in modo sequenziale.

I COSTRUTTI ITERATIVI ITERAZIONE

L’iterazione, detta anche ciclo, è un blocco di istruzioni che vengono ripetutamente eseguite

fino a che una certa condizione cambia stato. esistono tre tipi di iterazione:

Iterazione precondizionata: con clausola sulla condizione iniziale.

- Iterazione postcondizionata: con una clausola sulla condizione in coda.

- Iterazione enurmerativa: con scorrimento di una sequenza iterativa.

- ITERAZIONE PRECONDIZIONATA

Questo costrutto viene utilizzato quando un

blocco di istruzioni deve essere eseguito più

volte, ma non è possibile sapere a priori

quante.

Le istruzioni vengono eseguite solo se la

condizione posta tra parentesi subito dopo

while è true.

È possibile, se la condizione risulti subito falsa,

che le istruzioni del ciclo non vengano mai

eseguite. al contrario è possibile creare un

ciclo infinito [la condizione sia sempre vera].

ESEMPIO Regole generali:

var numero=40; inizializzazione

à

while (numero>1) { condizione Inizializzare le variabili il cui valore determinerò

à -

document.write(numero + “/2=”); la condizione di uscita dal ciclo (variabili di

numero=numero/2; modifica variabile di controllo

à controllo) prima del ciclo.

document.write(numero + “<br/>”); Il blocco delle istruzioni all’interno del ciclo

-

} deve comprendere la modifica delle variabili

ESEMPIO Sbagliato! di controllo dello stesso.

var nome=””;

while (nome!=”pippo”) { Inserire sempre la condizione di uscita.

-

nome=prompt(“indovina il mio nome”,””);

}

alert(“hai indovinato il mio nome”);

ATTENZIONE! Se non s’inserisce mai la parola pippo il ciclo

non finisce mai! ITERAZIONE POSTCONDIZIONATA

Questo costrutto viene utilizzato quando un blocco di istruzioni deve essere eseguito più volte,

ma non è possibile sapere a priori quante. a

differenza dell’iterazione precondizionata, esegue

sempre almeno una volta il ciclo, anche se la

condizione è falsa nella prima iterazione.

ESEMPIO

var numero=40; var numero=1;

do { do {

document.write(numero +" / 2= "); document.write(numero +" / 2= ");

numero= numero/2; numero= numero/2;

document.write(numero + "<br>"); document.write(numero + "<br>");

} }

while(numero>2); while(numero>2);

nel secondo esempio, anche se la condizione è falsa, il ciclo verrà

comunque eseguito una volta. ITERAZIONE ENUMERATIVA

Ripete un numero di volte prefissato un certo numero d’istruzioni; il

comando iterativo determinato esegue un blocco di istruzioni per un

numero determinato di volte, finché la condizione non diventa falsa. La

condizione viene valutata ogni iterazione, prima di eseguire le istruzioni. Se

è vera, il blocco di istruzioni viene eseguito e l’indice viene aggiornato.

Quando la condizione diventa falsa il blocco non viene eseguito e il ciclo

termina.

ESEMPIO

var parziale=0;

for (i=1;i<=10; i++){

document.write(parziale + " + ");

parziale= parziale+i;

document.write(i + " = " + parziale + "<br>");

}

I cicli for e while si equivalgono, hanno semplicemente una sintassi diversa.

in genere il ciclo for viene utilizzato per le liste, mentre while è più versatile.

var i=1

var parz=0;

while (i<=10){

document.write(parz + " + ");

parz= parz+i;

document.write(i + " = " + parz + "<br>");

i++;} Contatore: variabile che viene

usata per memorizzare quante volte è stata compiuta

un’azione.

Si utilizza una sintassi particolare: inizializzazione e

incremento del contatore vengono inserite nella stessa

parentesi della condizione anche se l’inizializzazione

viene poi effettuata solo all’inizio e l’incremento dopo

l’esecuzione del blocco.

inizializzazione: viene effettuata PRIMA che il ciclo inizi,

e una volta sola.

Condizione: rappresenta la condizione senza la quale il ciclo non viene eseguito (o più

eseguito).

Incremento: viene effettuato DOPO il blocco di codice ad ogni ripetizione di ciclo.

BREAK E CONTINUE

Break e continue sono due istruzioni che offrono maggior controllo sui cicli al programmatore.

Break interrompe l’esecuzione di un ciclo facendo continuare il programma dalla prima

istruzione al di fuori del blocco in cui è stato immesso.

Continue interrompe il ciclo in corso ma non esce dal blocco in cui è inserito, passando al valore

seguente.

1.7. ARRAY

Abbiamo già detto che Javascript è un linguaggio orientato agli oggetti; quando un linguaggio

è orientato agli oggetti, l’utente si definisce i propri oggetti oppure usa gli oggetti predefiniti che

il linguaggio mette a disposizione (Built-in object), che sono quello che andremo ad esaminare.

Un ARRAY o vettore, è un oggetto “complesso” che permette di memorizzare, all’interno di una

singola variabile, un insieme ordinato di valori, non necessariamente omogenei tra di loro.

ES: Array studenti iscritti all’esame: vantaggio immediato: se

voglio scrivere un elenco di

Marco Giovanni Chiara Antonio Lucia Contenuto

à persone non devo creare

0 1 2 3 4 Posizione

à una variabile per ognuno

ma posso creare un unico

array

CREARE UN ARRAY

per creare un array si usa la parola chiave NEW seguita dalla

parola chiave ARRAY

var nuovo_array=new Array(numero);

Il numero contenuto nella parentesi tonda determina il numero degli elementi che compongono

l’array (non è obbligatorio)

es: se l’array contiene 4 elementi sarà:

var mio_array=new array(4); [Attenzione: un Array lungo 4 avrà indici da 0 a 3,

ossia da 0 a n-1 (n=lunghezza dell’array)]

Un array è quindi composto da una sequenza numerata di valori, ognuno di essi è chiamato

elemento dell’array e il numero ad esso associato è detto indice. Il primo elemento di array ha

indice 0.

attraverso l’indice è possibile accedere al singolo elemento dell’array:

[0] [1] ….[n-1]

la nozione di array è molto presente in javascript: i form, le immagini, possono essere considerati

come array. INSERIMENTO DEGLI ELEMENTI IN UN ARRAY

una volta creato l’array, lo si inizializza inserendo al suo interno gli elementi desiderati:

mio_array[n] = “valore_elemento”;

es: prima di inserire i valori, il tentativo

var mio_array=new array(10) di accedere a un elemento

mio_array[0]=”Marco”; dell’array produce un valore

mio_array[1]=”Gianni”; undefined.

ecc… ACCEDERE AGLI ELEMENTI DI UN ARRAY

per leggere il valore di un elemento indicizzato, si usa la notazione:

nome_array[indice];

es:

mio_array[0]; restituisce il valore “Marco”

à

mio_array[1]; restituisce il valore “Gianni”

à

Restituisce il valore, significa che in qualche modo lo si deve catturare, usandolo dentro un’altra

variabile, o passandolo ad una funzione, ad esempio:

var x= mio_array[0]

document.write(“array contiene in prima posizione:” +mio_array[0]);

DICHIARAZIONE COMPATTA

da javascript 1.2 in poi, è possibile definire un array e inizializzarlo allo stesso tempo:

var mio_array=[“Marco”,”Gianni”];

È anche possibile, se si è già dichiarato un array, inizializzarlo in un’unica espressione:

var mio_array=new Array(3);

mio_array=[“Marco”,”Gianni”,”Franco”];

per stampare l’elenco completo dell’array (come unica stringa con gli elementi separati da una

virgola) è sufficiente inserire il nome dell’array come parametro del metodo usato per la stampa

(document.write): documet.write(mio_array);

PROPRIETÀ E METODI DEGLI ARRAY

Essendo un oggetto, un array ha delle proprietà e dei metodi. Proprietà:

mio_array.lenght: per impostare o leggere la lunghezza dell’array.

per scorrere velocemente una lista ed effettuare operazioni su di essa (trovare un valor,

stampare tutta la lista…) è possibile utilizzare il ciclo for.

di solito, la condizione espressa chiede che il ciclo non venga concluso fino a che l’array non è

finito. la sintassi è questa:

for( var i=0; i=<mio_array.lenght; i++) {

….

}

ciclo for applicato agli array: (esempio)

var urls = new Array(3);

urls[0] = "www.unito.it";

urls[1] = "www.di.unito.it";

urls[2] = "www.dams.unito.it ";

var unLink = "";

for(i=0;i<urls.length;i++)

{

unLink=urls[i];

document.write("<a href=\”http://" + unLink + “\”>" + unLink + "</ a><br>");

} CICLO FOR…IN

il ciclo for..in permette di fare un ciclo per una array, determinando automaticamente il numero

di ripetizioni in base agli elementi degli array. La sintassi è:

for(indice in nomeArray);

var nomi=new Array(“Gino”, ”Lino”, ”Pino”, ”Rino”)

var i=0;

for (i in nomi){

document.write(nomi[i]);

} PROPRIETÀ E METODI DEGLI ARRAY

Metodi:

mio_array.sort():per ordinare gli elementi di un array.

mio_array.concat(altro array): per concatenare due array (il parametro concat deve essere il

nome dell’array da concatenare a quello su cui viene richiamato il metodo).è possibile

concatenare direttamente gli elementi.

1.8. OGGETTI BUILT IN

L’OGGETTO DATE

L’oggetto date permette di gestire informazioni relative a data e ora. come tutti gli oggetti built

in di javascript, la sintassi per creare un nuovo oggetti di tipo Date è:

var nome_variabile = new Date();

Viene creato un oggetto che rappresenta il momento corrente in cui lo script viene eseguito,

secondo la data di sistema, espresso come anno, giorno, mese , ora, minuti, secondi e

millisecondi. METODI DELL’OGGETTO DATE

getDate(): restituisce il giorno numerico

§ getMonth(): restituisce il mese in forma numerica [ATT: 0=gennaio 1=febbraio…]

§ getFullYear(): restituisce l’anno (4 cirfre)

§ getDay(): restituisce il giorno della settimana in forma numerica [ATT: 0=Domenica 1=Lunedì…]

§ getHours(): restituisce l’ora

§ getMinutes(): restituisce i minuti

§ getSeconds(): restituisce i secondi

§ toLocateTimeString(): restituisce ora, minuti e secondi (ora Locale)

§ E’ possibile anche settare i

contenuti di un oggetto date:

esempio: <script> setYear();

<script> §

var d = new Date(); setMonth();

var d=new Date(); §

d.setFullYear(2020); setDate();

var n = d.getFullYear(); §

document.write(d); setHours();

document.write(n) §

</script> setMinutes();

</script> § .....

L’OGGETTO MATH

L’oggetto math è un oggetto che si occupa di svolgere, mediante una serie di metodi e

proprietà, una svariata quantità di funzioni matematiche. METODI DELL’OGGETTO MATH

Math.min(); prende come parametri 2 o più valori e restituisce il minore dei due

§ Math.max(); prende come parametri 2 o più valori e restituisce il maggiore dei due

§ Math.random(); genera un valore casuale tra 0 e 1(non arriva mai ad uno)

§ Math.floor(); il valore fornito come parametro viene arrotondato per difetto all’intero inferiore

§ Math.round(); il valore del parametro viene arrotondato al suo intero più vicino (per eccesso

§ se ‘ la metà ’)

L’OGGETTO STRING

L’oggetto string ha una serie di proprietà utili:

length; restituisce la lunghezza della stringa;

§ METODI DELL’OGGETTO STRING

i metodi più usati sono:

charAt(n); restituisce il carattere in una posizione specifica.

§ indexOf(substr); Restituisce la posizione della prima occorrenza di un carattere (o un insieme

§ di caratteri) in una stringa (-1 se non lo trova)

lastIndexOf(substr); Restituisce la posizione dell’ultima occorrenza di un carattere (insieme di

§ caratteri) in una stringa (-1 se non lo trova) partendo dal fondo

replace(stringa1,stringa2); Sostituisce alcuni caratteri con altri

§ 1.9. LE FUNZIONI

In un programma è possibile che alcune sequenze di istruzioni debbano essere utilizzate più

volte. per non riscriverle ogni volta è possibile raggrupparle sotto un’unica “etichetta” e

richiamarle ogni volta che servono. Una funzione quindi è:

un blocco di istruzioni al quale viene associato un identificatore(etichetta)

la definizione di una funzione, di per se, non implica che le istruzioni che la costituiscono siano

eseguite. una volta definita una funzione, la si può chiamare (invocare) per eseguire il compito

per cui è stata definita.

DEFINIRE LE FUNZIONI

Per definire una funzione si usa la parola chiave function;

Una funzione si compone di:

Un nome (come per le variabili: lettere, numeri,_$)

§ Uno o più parametri opzionali

§ Un corpo (le istruzioni che la compongono e che sono comprese tra le parentesi graffe)

§ NB: le funzioni si dichiarano dentro la head del documento e si chiamano dentro il body.

esempio: CHIAMATA DI UNA FUNZIONE

Si definisce chiamata o invocazione di una funzione un punto

qualsiasi dello script nel quale compare l’indicatore della

funzione: Dichiarazione funzione (nella

function saluta() {

document.write(“ciao head del documento html)

”); } Chiamata funzione (nel body del

............................... documento html)

saluta(); PARAMETRI DI UNA FUNZIONE

I parametri costituiscono le variabili su cui opera una funzione. Se i parametri sono più di uno, si

separano con una virgola:

function nome_funzione (parametro1, parametro2, parametro3);

All’interno della funzione è possibile dichiarare altre variabili che vengono chiamate variabili

locali. Quando si definisce una funzione i nomi che si assegnano ai parametri sono come dei

“segnaposto” (chiamati parametri formali) che saranno poi sostituiti dai nomi effettivi delle

variabili (parametri attuali).

function saluta(nome) { parametro formale

alert ("ciao" + nome);

} parametro attuale

var nomedaSalutare = “Pippo”;

saluta(nomedaSalutare);

RESTITUZIONE DEI VALORI

Le funzioni possono

Svolgere delle azioni, come la funzione saluta(), concatena(), document.write()

§ Restituire dei valori ad esempio,

§ la funzione window.prompt restituisce un valore, che corrisponde all'input che

o l'utente ha inserito

Per fare sì che una funzione restituisca un valore, si utilizza

l’istruzione Return.

Quando si richiama la funzione, per “catturare” il valore

restituito e’ necessario assegnarlo ad una variabile.

var nome_variabile= nome_funzione(...);


PAGINE

42

PESO

5.89 MB

PUBBLICATO

+1 anno fa


DETTAGLI
Corso di laurea: Corso di laurea in Discipline delle arti, della musica e dello spettacolo (DAMS)
SSD:
Università: Torino - Unito
A.A.: 2016-2017

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher fabiey_87 di informazioni apprese con la frequenza delle lezioni di Applicazioni Informatiche per il Multimediale e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Torino - Unito o del prof Gena Cristina.

Acquista con carta o conto PayPal

Scarica il file tutte le volte che vuoi

Paga con un conto PayPal per usufruire della garanzia Soddisfatto o rimborsato

Recensioni
Ti è piaciuto questo appunto? Valutalo!

Altri appunti di Corso di laurea in discipline delle arti, della musica e dello spettacolo (dams)

Riassunto esame Tecnologie Digitali del Suono e dell’Immagine, prof. Lombardo, libro consigliato Audio e multimedia, Lombardo e Valle
Appunto
Appunti Informatica e programmazione
Appunto
XML - informatica - schemi, documento, DTD e formati XML
Appunto
Riassunti esame di programmazione di C. Gena
Appunto