Appunti esame Informatica multimediale

XOn mouse out -> momento in cui il puntatore del mouse esce dall’area di disegnoXOn loadOn unload06/12/18JAVASCRIPT e HTML Canvas

- L’elemento HTML5 Canvas permette di definire delle aree su un documento HTML in cui disegnare elementi grafici/testuali ed animarli mediante JavaScript.

- Gli HTML Canvas si definiscono in un documento HTML mediante la sintassi:

<canvas id=”nome canvas” width=”larghezza” height=”altezza”></canvas> dove height e width sono attributi i cui valori rappresentano altezza e larghezza in pixel del canvas

- I canvas possono essere modificati con CSS

Accedere a un Canvas

- JS è dotato di metodi per poter selezionare un canvas e accedere al suo contenuto grafico (2D context)

- Accedendo al contenuto grafico del canvas è possibile introdurre e modificare elementi grafici

- Si accede al contenuto grafico mediante il codice:

var canvas = document.getElementById(“idcanvas”);

var ctx =

<canvas> è un elemento HTML che viene utilizzato per disegnare grafica, come immagini o animazioni, utilizzando JavaScript. Per poter disegnare sul canvas, è necessario ottenere il contesto di rendering utilizzando il metodo getContext("2d"). Questo metodo restituisce un oggetto che rappresenta il contesto di rendering 2D del canvas. Il contenuto grafico di un canvas è rappresentato su un piano cartesiano chiamato "Canvas grid". L'origine di questo piano cartesiano (0,0) è posizionata nell'angolo superiore sinistro del canvas. Questo significa che le coordinate (0,0) corrispondono all'angolo superiore sinistro del canvas, mentre le coordinate positive si estendono verso il basso e verso destra. Per visualizzare delle immagini su un canvas, è necessario seguire alcuni passaggi. Prima di tutto, è necessario caricare le immagini utilizzando l'elemento HTML <img>. Successivamente, è possibile utilizzare il metodo drawImage per disegnare l'immagine sul canvas. Tuttavia, è importante assicurarsi che l'immagine sia stata caricata completamente prima di utilizzare il metodo drawImage. Nel caso in cui si debbano caricare e visualizzare più di una immagine, è consigliabile caricare le immagini come elementi HTML <img> nascosti utilizzando la proprietà CSS display con valore "none". In questo modo, le immagini verranno caricate in background senza essere visibili all'utente. Successivamente, è possibile selezionare le immagini da caricare utilizzando il metodo document.getElementById(id), dove id rappresenta l'identificatore dell'immagine da selezionare.

-disegnare l'immagine selezionata mediante il metodo drawImageOnload = esegui il contenuto del body solo quando tutte le immagini sono state caricate

ANIMAZIONI

Useremo i seguenti metodi per creare delle animazioni

• window.setInterval(disegnaFrame,x) -> esegue la funzione disegnaFrame ogni x millisecondi
• window.setTimeout(disegnaFrame,x) -> esegue la funzione disegnaFrame dopo x millisecondi
• window.requestAnimationFrame(disegnaFrame) -> richiede al browser di disegnare il prossimo frame dell'animazione eseguendo la funzione disegnaFrame

CHE COS'È UNO SCRIPT? E COME SI SCRIVE?

Uno script è costituito da una serie di istruzioni che il computer può seguire per conseguire un determinato obiettivo. In pratica gli script possono essere paragonabili a ricette, guide, manuali. Un browser può utilizzare parti differenti dello script a seconda del modo in cui l'utente interagisce con la pagina web. Gli script possono eseguire sezioni

Differenti del codice in risposta alla situazione in cui si trovano ad operare. Per realizzare uno script, occorre stabilire i propri obiettivi e poi elencare i compiti da completare, in modo da trovare una soluzione.

1. DEFINIRE L'OBIETTIVO
2. PROGETTARE LO SCRIPT = suddividere l'obiettivo in una serie di compiti da completare per risolvere il problema. A questo punto è possibile scrivere i singoli passi che il computer deve svolgere per completare ogni singolo compito.
3. PROGRAMMARE CIASCUN PASSO

I computer risolvono i problemi in modo programmatico, ovvero seguendo una serie di istruzioni, una dopo l'altra. Per imparare a programmare bisogna occuparsi di due elementi:

• il vocabolario: le parole che il computer è in grado di comprendere
• la sintassi: come unire queste parole per creare istruzioni che il computer sia in grado di seguire

I computer e il mondo che li circonda. In programmazione, ogni elemento fisico presente nel mondo può essere

Il testo fornito rappresenta un oggetto che può essere dotato di diverse caratteristiche:

• Proprietà: ogni proprietà ha un nome e un valore che descrivono una specifica istanza dell'oggetto.
• Eventi: interazioni con il computer, come ad esempio il click del mouse, che possono attivare una determinata sezione del codice.
• Metodi: rappresentano le attività che le persone devono svolgere utilizzando gli oggetti. I metodi possono leggere o modificare i valori delle proprietà e possono contenere molte istruzioni che descrivono il compito da svolgere.

I computer utilizzano questi dati per creare modelli di oggetti che sono presenti.

nel mondo reale. Gli eventi, i metodi e le proprietà di un oggetto sono tutti elementi correlati; gli eventi possono scatenare dei metodi e i metodi possono leggere o modificare le proprietà di un oggetto. I browser web sono programmi che si basano su oggetti; l'oggetto window rappresenta ciascuna finestra o scheda utilizzando l'oggetto window. La proprietà location dell'oggetto window indica l'indirizzo URL della pagina corrente. L'oggetto document rappresenta la pagina web corrente caricata in ciascuna finestra ed è modellata tramite l'oggetto document. La proprietà title dell'oggetto document ci dice ciò che si trova tra il tag di apertura della pagina web, mentre la proprietà lastModified dell'oggetto document ci dice la data in cui questa pagina è stata aggiornata per l'ultima volta. Utilizzando l'oggetto document

Potete accedere e anche modificare i contenuti che gli utenti vedono nella pagina e rispondere al modo in cui gli utenti interagiscono con essa.

Come si scrive uno script per una pagina web?

Il codice JavaScript è puro testo, proprio come quello HTML e CSS. Quando volete utilizzare del codice JS in una pagina web, potete utilizzare l'elemento HTML <script> per chiedere al browser di caricare lo script. L'attributo src dirà dove si trova il file. Es: <script src="js/add-content.js"></script>

Questa riga di codice JavaScript mostra come utilizzare gli oggetti e i metodi. In gergo si dice richiamare un metodo di un oggetto.

document.write('Good afternoon!');

L'oggetto document offre il metodo write(). Ogni informazione dell'oggetto document rappresenta quali sono definiti membri. Si può accedere

aiuti a capire il codice, si utilizza il tag HTML <!-- ... -->. I commenti non vengono eseguiti dal computer, ma sono utili per i programmatori che leggono il codice. Ecco il testo formattato con i tag HTML:

Ai membri consente di metodo, specificato web si può di un oggetto specificando scrivere nuovi tra parentesi (). Inutilizzare un punto fra il nome contenuti nella questo caso, il semplicemente dell'oggetto e quello del pagina in cui è metodo write() deve specificandone il membro. Il punto è detto situato sapere che cosa nome. operatore membro. l'elemento scrivere nella pagina.

ISTRUZIONI JAVASCRIPT DI BASE

Un'istruzione è come un comando che il computer deve eseguire. Ogni istruzione inizia su una nuova riga e termina con un punto e virgola. Il punto e virgola dice anche all'interprete JS quando si conclude un determinato passo, ovvero quando si procede con il passo successivo. Alcune istruzioni sono racchiuse tra parentesi graffe, che servono a formare dei blocchi di codice. La parentesi graffa di chiusura non deve essere seguita da punto e virgola.

I commenti aiutano a descrivere il significato del codice. Per scrivere un commento che aiuti a capire il codice, si utilizza il tag HTML <!-- ... -->. I commenti non vengono eseguiti dal computer, ma sono utili per i programmatori che leggono il codice.

occupa più di unariga si utilizzano commenti multiriga, che iniziano con i caratteri /* e terminano con i caratteri */. Tutto ciò che si trova tra questi caratteri viene ignorato dall’interprete JavaScript (come HTML).

In un commento monoriga, tutto ciò che segue la sequenza di caratteri // su tale riga non verrà elaborato dall’interprete JS.

Uno script deve poter conservare temporaneamente quelle informazioni che gli servono per svolgere il proprio lavoro: questo è il compito delle variabili. L’uso delle variabili per rappresentare i numeri o altri tipi di dati è molto simile al loro impiego nell’algebra, in cui le lettere vengono impiegate per rappresentare dei numeri.

Prima di poter usare una variabile, occorre dichiararne la presenza, in particolare occorre creare la variabile e attribuirle un nome; in gergo questa operazione si chiama dichiarazione della variabile.

var quantity;

var è un esempio di ciò che i

Per utilizzare la variabile, i programmatori chiamano la parola chiave "var". Occorre assegnarle un nome. L'interprete JS sa che questa parola chiave viene usata per creare una variabile. Ad esempio, possiamo assegnare il valore 3 alla variabile "quantity" nel seguente modo: ```javascript var quantity = 3; ``` A questo punto, il segno di uguale (=) è un operatore di assegnamento. Finché alla variabile non viene assegnato alcun valore, si dice che il valore della variabile è "undefined". In questo caso, il valore della variabile "quantity" è 3. TIPI DI DATI: - NUMERICO -> numeri con cifre da 0 a 9, numeri negativi, numeri decimali; - STRINGA -> serve per le lettere e le sequenze di caratteri. Il tipo di dati stringa richiede l'impiego di una coppia di apici, possono essere apici singoli o doppi, l'importante è che quello di apertura coincida con quello di chiusura. Ad esempio, possiamo definire una stringa come "Ciao".Tina!');- BOOLEANO -> possono avere solo due valori, true o false. REGOLE DA SEGUIRE PER LA DENOMINAZIONE DI UNA VARIABILE:

1. Il nome deve iniziare con una lettera, un segno di dollaro ($) o un segno di sottolineatura (_).
2. Il nome può contenere lettere, numeri, $, _ . NO (-) E (.)
3. Non si possono usare parole chiave del linguaggio
4. Nelle variabili, JS distingue fra lettere maiuscole e minuscole
5. Scegliere un nome che descriva il tipo di informazioni contenuto nella variabile
6. Se il nome della variabile è costituito da più di una parola, utilizzate la lettera maiuscola per la prima lettera di ogni parola dopo la prima (es nomeArticolo).

ARRAY

Un array è un tipo di variabile particolare, in quanto non memorizza un solo valore, ma un intero elenco di valori. Il tipo array è concepito per le situazioni in cui ci si trova a lavorare con una serie di valori correlati. Si può creare un array e assegnargli un nome così come

viene f