Estratto del documento

Document Object Model

Document <html><head> root <title> Title </title> <html></head><body> <a href="”_"”> ElementElementLINK <body><head></a> <h1>Header ElementElementElement</h1> <h1><a><title></body></html> Text TextText “LINK” “Header” “Title” ATTR href

Navigazione nel DOM per struttura

  • Child Nodes -> non ha tutti i metodi degli array.
  • body.childNodes
  • body.firstChild
  • body.h10
  • p1
  • p23
  • body.lastChild
  • pGli ELEM hanno le proprietà previousSibling/nextSibling = fratello precedente/fratello successivo
  • body.last.Child.previousSibling = Es: body.childNodes [2]

Navigazione nel DOM per contenuto (metodi diretti)

document.getElementsByTagName(string) -> costruisce una struttura simile agli array con tutti gli elementi all'interno del documento che hanno un tag il cui nome è quello specificato nella stringa (se specifico "p" ottengo un array con tutti i paragrafi "p")

Tutti gli elementi con attributo tag document.getElementById(string) -> si prende il primo elemento con attributo id

element.innerHTML = string Per cambiare il contenuto di un elemento: Gli attributi di HTML sono presenti con anche JS come proprietà element.attributo = string un attributo: Per cambiare element.style.prop = string Per cambiare lo stile: element.style["font-family"] Per cambiare il font:

Creazione di un elemento

  • Document.createTextNode (text) string
  • Document.createElement (tag) "empty" element

Trasformazione del DOM

  • Element.removeChild()
  • Element.appendChild (child) -> aggancia child in fondo alla lista dei figli di questo elemento se è già presente prima viene tolto da lì
  • Element.insertBefore (newChild, prevChild) -> inserisce newChild come fratello precedente prevChild Es: root.insertBefore (0, 2) 0 11 02 23 3
  • Element.replaceChild (newChild, oldChild)

Invocazione di JS in base ad eventi

Attributo che aggancia ad una pagina JS. Elenco di eventi:

  • On click -> doppio click
  • On mouse up -> usato per trascinare qualcosa
  • On mouse down -> usato per trascinare qualcosa
  • On mouse over -> momento in cui il puntatore del mouse entra nell'area di disegno
  • On mouse out -> momento in cui il puntatore del mouse esce dall'area di disegno
  • On load
  • On unload

06/12/18

JavaScript 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 mediate il codice: var canvas = document.getElementById("idcanvas"); var ctx = canvas.getContext("2d"); -> carica il piano cartesiano associato a quel canvas.

Canvas grid

Il contenuto grafico di un canvas è rappresentato su un piano cartesiano (Canvas grid) la cui origine (0;0) è posizionata sull'angolo superiore sinistro del canvas.

Disegnare immagini

Per visualizzare delle immagini in un canvas è necessario:

  • Caricare le immagini
  • Visualizzare mediante il metodo drawImage (drawImage ha effetto solo se l'immagine è stata prima caricata completamente. È dunque necessario essere certi di eseguire drawImage solo a caricamento effettuato).

Immagini multiple

Nel caso di dover caricare e visualizzare più di una immagine, conviene:

  • Caricare le immagini come elementi html <img> nascosti usando la proprietà css display con valore none.
  • Selezionare le immagini da caricare usando il metodo document.getElementById(id), dove id rappresenta l'identificatore dell'immagine da selezionare
  • Disegnare l'immagine selezionata mediante il metodo drawImage

Onload = esegui il contenuto del body solo quando tutte le immagini sono state caricate

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 obbiettivo. 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'obbiettivo
  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 rappresentato con un oggetto. Ogni oggetto può essere dotato di:

  • Proprietà -> caratteristiche; ogni proprietà ha un nome e un valore e ognuna di queste coppie nome/valore dice qualcosa su quella specifica istanza dell'oggetto;
  • Eventi -> interazioni con il computer (es. click del mouse; è il modo usato dal computer per dire "Ehi, è appena accaduto qualcosa"). Quando si verifica un determinato evento, questo può essere utilizzato per attivare una determinata sezione del codice. Gli script, spesso, usano eventi differenti per attivare funzionalità differenti.
  • Metodi -> rappresentano le attività che le persone devono svolgere utilizzando gli oggetti. I metodi possono leggere o modificare i valori delle proprietà. Il codice di un metodo può contenere molte istruzioni che, tutte insieme, descrivono il compito da svolgere.

I computer utilizzano dei dati per cerare 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 = il browser rappresenta ciascuna finestra o scheda utilizzando l'oggetto window. La proprietà location dell'oggetto window indicherà l'indirizzo URL della pagina corrente.

L'oggetto document = la pagina web corrente caricata in ciascuna finestra è modellata tramite l'oggetto document. La proprietà title dell'oggetto document ci dice ciò che si trova tra il tag di apertura <title> e il tag di chiusura </title> 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 d

Anteprima
Vedrai una selezione di 5 pagine su 20
Appunti esame Informatica multimediale Pag. 1 Appunti esame Informatica multimediale Pag. 2
Anteprima di 5 pagg. su 20.
Scarica il documento per vederlo tutto.
Scarica
Appunti esame Informatica multimediale Pag. 6
Anteprima di 5 pagg. su 20.
Scarica il documento per vederlo tutto.
Scarica
Appunti esame Informatica multimediale Pag. 11
Anteprima di 5 pagg. su 20.
Scarica il documento per vederlo tutto.
Scarica
Appunti esame Informatica multimediale Pag. 16
1 su 20
D/illustrazione/soddisfatti o rimborsati
Acquista con carta o PayPal
Scarica i documenti tutte le volte che vuoi
Dettagli
SSD
Scienze matematiche e informatiche INF/01 Informatica
I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher Giulia_Cancian di informazioni apprese con la frequenza delle lezioni di Informatica 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à Università degli Studi di Udine o del prof Ballis Demis.
Appunti correlati Invia appunti e guadagna

Domande e risposte

Hai bisogno di aiuto?
Chiedi alla community
Vai al forum