• Non ci sono risultati.

Funzionalit` a e caratteristiche di HTML e Javascript

Javascript

In generale, gli elementi HTML hanno una insieme di attributi, alcuni sono ge- nerici per tutti gli elementi HTML, altri invece sono specifici per alcuni elementi, ma tutti gli elementi permettono di definire attributi “custom”, ovvero attribu- ti che non esistono nelle specifiche di definizione dell’HTML ma possono essere definite dal programmatore semplicemente inserendole nel codice HTML come il seguente esempio

Gli attributi custom degli elementi HTML permettono di memorizzare alcune in- formazioni utili ed importanti. Questi attributi, generalmente, vengono ignorati dai browser in quanto non essendo standard non `e possibile prevedere il loro si- gnificato o il loro comportamento. Tuttavia, questi attributi sono spesso utili quando `e necessario memorizzare informazioni che possono essere successivamen- te, ad esempio, utilizzare dal linguaggio Javascript. Javascript ha la capacit`a di interagire con gli elementi dell’HTML attraverso l’uso del DOM e pu`o facilmente ottenere l’accesso ad un elemento HTML e manipolarlo modificando i valori dei suoi attributi. Inoltre, Javascript pu`o aggiungere un attributo ad un qualsiasi oggetto HTML in due modi: utilizzando la funzione setAttribute che inserisce un attributo ed il suo valore all’interno del documento HTML, oppure scrivendo oggetto.attributo custom, in questo caso l’attributo `e aggiunto all’oggetto (nel mo- dello DOM) ma non `e visibile nel documento HTML, ovvero significa che il browser “ricorda” che `e stato aggiunto questo attributo all’elemento ma non deve essere inserito nel documento HTML. Ad esempio, usando la seguente riga di codice in Javascript possiamo accedere ad un elemento HTML di nome “nome elemento” usando la variabile “elemento”:

var elemento = document.getElementById(‘nome elemento’);

Oppure, la riga successiva inserisce e valorizza nel documento HTML l’attribu- to “nuovo attributo1 ”, dell’elemento, con “valore”, se l’attributo non esiste allora “nuovo Attributo1 ” verr`a creato e valorizzato:

elemento.setAttribute(‘nuovo attributo1’,‘valore’);

Diversamente, la riga successiva inserisce e valorizza nel documento DOM, ma non nell’HTML, l’attributo “nuovo attributo2 ”, dell’elemento, con “valore”, se l’attri- buto non esiste allora “nuovo Attributo2 ” verr`a creato e valorizzato:

elemento.nuovo attributo2 = ‘valore’);

Per completezza, in Javascript si ottiene il valore dell’attributo “nuovo attributo1 ” di un elemento HTML scrivendo:

Javascript permette anche di aggiungere una nuovo attributo ad un elemen- to, o modificare un attributo di un elemento esistente, utilizzando la funzione “defineProperty” dell’oggetto “Object ”. La caratteristica di questa funzione `

e che permette di definire gli attributi in una modalit`a pi`u avanzata e comple- ta valorizzando alcune caratteristiche all’attributo: “configurable”, “enumerable”, “writable”, “value”. La caratteristica configurable controlla se l’attributo che si sta definendo pu`o essere cancellato dall’oggetto e se le altre propriet`a di definizione (writable e value) possono essere cambiate. Se configurable `e impostato a True allora `e possibile modificare i valori o eliminare l’attributo, altrimenti no.

La caratteristica enumerable verifica se l’attributo pu`o essere visibile quando si usa il ciclo “For..in”, di Javascript, oppure se l’attributo pu`o essere visibile dalla funzione “keys” dell’oggetto Object. Se enumerable `e impostato a True allora l’attributo `e possibile essere visto, ed utilizzato, nei casi precedentemente detti. La caratteristica writable permette, o non permette, di modificare il valore di un attributo. Se questa caratteristica `e impostata a True `e possibile modificare il valore di un attributo, diversamente se impostato a False allora l’attributo si com- porter`a come una costante per quell’elemento.

Oltre alla definizione di un attributo per mezzo delle sue propriet`a, `e possibile usare la funzione defineProperty utilizzando le sue due funzioni “get” e “set”. Queste funzioni permettono di avere una gestione pi`u flessibile quando si cerca di ottenere, o di cambiare, il valore di un attributo. Quando si cerca di ottenere il valore di un attributo, Javascript chiama automaticamente la funzione get che `

e stata definita, e quando si deve modificare il valore di un attributo, Javascript chiama automaticamente la funzione set per settarne il valore. Di seguito due esempi d’uso: Object.defineProperty(obj, ‘key’, { enumerable: False, configurable: False, writable: False, value: ‘static’ });

In questo caso, per l’oggetto “obj ” `e stato definito l’attributo “key” : il valore `

e “static”, non `e enumerabile, non `e configurabile e neanche cancellabile, e non `e possibile modificare il suo valore.

Object.defineProperty(obj, ‘key’, { get() { return chiave; }, set(value) { chiave = value; } });

In questo caso, per l’oggetto obj `e stato definito l’attributo key in una modalit`a pi`u flessibile: quando si cerca di ottenere il valore di key, viene chiamata la fun- zione get definita per l’attributo key e restituisce il valore di chiave (per brevit`a l’attributo chiave lo consideriamo gi`a esistente nell’elemento), mentre se si vuole impostare il valore di key, allora verr`a chiamata la funzione set definita per key nella quale il valore “value” viene memorizzato in chiave. In realt`a, nella funzione get `e possibile anche restituire un valore calcolato da un’espressione e non neces- sariamente un valore di qualche attributo gi`a definito. Con le funzioni get e set `e possibile definire attributi che in realt`a non esistono, ma che sono il risultato di due chiamate di funzioni dentro le quali `e possibile calcolare e restituire il valore di espressioni. Inoltre, non `e necessario definire obbligatoriamente entrambe le funzioni, ma se ne pu`o definire anche una soltanto, ad esempio: se si usa solo la funzione get nella definizione dell’attributo, allora si otterr`a un attributo virtuale che fornisce soltanto sempre lo stesso valore (se i dati che usa get non variano), se invece si usa soltanto la funzione set allora si definisce un attributo che `e solo possibile modificare (generalmente questa metodologia viene usata, nei linguaggi di programmazione in generale, per inserire valori che devono essere validati). SIRENE fa largo uso della funzione defineProperty dell’oggetto Object in quan- to ogni oggetto in SIRENE possiede un attributo, sia nel documento HTML sia nel DOM, chiamato “Tipo HTML”, non modificabile e neanche cancellabile, che definisce univocamente il tipo di oggetto e tutte le sue funzionalit`a, e come questo oggetto deve essere manipolato e gestito. Inoltre, questo attributo, essendo non modificabile e non cancellabile, realizza un alto grado di sicurezza e protezione da manipolazioni non consentite nel documento HTML modificando i dati dalle funzionalit`a implementate nei web browser.