Nella prima lezione abbiamo visto l'introduzione lato client e abbiamo introdotto il DOM (Document Object Model) possiamo interagire con gli elementi visualizzati all'interno del browser, si può modificare quanto visualizzato in una pagina nel browser anche usando JavaScript.
Il DOM è lo standard ufficiale del W3C.
Permette di rappresentare documenti strutturati (per esempio HTML e XML)
Interfaccia di programmazione che permette di accedere agli elementi del documento.
Un documento HTML visualizzato in una finestra del browser diventa un oggetto Document, accessibile attraverso la variabile globale document
Un oggetto Document ha proprietà, metodi, eventi
Ogni elemento HTML all'interno della pagina è accessibile in modi diversi.
Attraverso una proprietà dell'oggetto Document
Esempio: document.referrer, document.cookie
//mostra la stringa dei cookie
alert(document.cookie);
Attraverso un metodo dell'oggetto Document che permette di selezionare ID, Name, Type, Class, CSS selectors
Esempio: var el = document.getElementById(id)
Come nodo dell'albero derivabile dal documento
ALBERO del DOM
Al DOM può essere associata una rappresentazione ad albero i cui nodi possono essere:
- il documento stesso, come radice
- un elemento
- un attributo
- un testo
- un commento
La struttura dell'albero riflette l'organizzazione degli elementi HTML nella pagina
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Albero DOM</title> </head> <body> <p>The DOM tree of this<i>page</i></p> <ul id=”mylist”> <li>item 1</li> <li>item 2</li> <li><a id=”mylink” href=”http://www.mysite.com”>Item 3</a></li> </ul> <img src=”myimage.png” alt=”myimage”> </body> </html>
ACCESSO al DOM
JavaScript può cambiare:
- tutti gli elementi HTML in una pagina
- tutti gli attributi HTML in una pagina
- tutti i stili CSS in una pagina
- tutti gli eventi in una pagina
Nota: il contenuto HTML di una pagina è statico, il contenuto del DOM è dinamico
OGGETTO DOCUMENT: proprietà
Permettono di accedere alle caratteristiche del documento, per esempio colore dello sfondo, colore del testo, ... e di modificarle via JavaScript
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Document Object</title> <link rel="stylesheet" type="text/css" href="css/mystyle.css" /> <script> function docProperties() { var msg = ""; for (prop in window.document) if (typeof window.document[prop] !== 'function') msg += prop + " ---> " + window.document[prop] + "\n"; window.alert(msg); console.log(msg); } </script> </head> <body bgcolor="#eeeeee" text="#000099"> <!-- gli attributi del body sono deprecati --> <h1 class="centro">Document Object</h1> <p class="centro">Apri anche la console del browser per vedere le proprietà</p> <script> docProperties(); </script> </body> </html>
Per richiamare lo script usiamo il metodo:
<script> docProperties(); </script>
Ogni elemento HTML ha le sue proprietà
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Image Object</title> <link rel="stylesheet" type="text/css" href="css/mystyle.css" /> <script> function imgProperties(img) { var msg = ""; for (var im_prop in img) if (typeof img[im_prop] !== 'function') msg += im_prop + ": " + img[im_prop] + "\n"; console.log(msg); } </script> </head> <body> <div class="centro"> <h1>Images</h1> <a href="http://www.chimico.org"><img id="im1" src="images/chimico.gif" alt="chimico" onmouseenter="imgProperties(this)"></a> <a href="http://www.babbonatale.org"><img id="im2" src="images/babbonatale.gif" alt="babbonatale" onmouseover="imgProperties(this)" /></a> <a href="http://www.gallo.org"><img id="im3" src="images/gallo.gif" alt="gallo" onmouseover="imgProperties(this)" /></a> <a href="http://www.pupazzoneve.org"><img id="im4" src="images/pupazzoneve.gif" alt="pupazzoneve" onmouseover="imgProperties(this)" /></a> <a href="http://www.fiore.org"><img id="im5" src="images/fiore.gif" alt="fiore" onmouseover="imgProperties(this)" /></a> </div> <br><br> <p class="centro">Porta il mouse sulle immagini e apri la console del browser per vedere le proprietà</p> </body> </html>
OGGETTO DOCUMENT: Metodi
Si possono usare gli identificatori per recuperare elementi con il metodo document.getElementById(id)
Questo metodo restituisce un riferimento all'elemento che possiede l'identificatore specificato come parametro
<img src=“images/img1.gif” id=“img1” alt=“img1” /> var elem = document.getElementById(“img1”);
document.getElementsByName(name)
Restituisce tutti gli elementi con attributo name specificato come parametro
document.getElementsByTagName(tagname)
document.getElementsByClassName(classname)
document.querySelectorAll(CSSselector)
Es. var elems = document.querySelectorAll(“ul.menu”)
Prima della specifica HTML 4.0 che ha introdotto l'attributo id, gli script potevano accedere agli elementi solo attraverso l'attributo name.
Oggi è facile vedere usati entrambi gli attributi, id e name, inizializzati allo stesso valore, usati per la programmazione sul client (id) e per l’invio dei dati al server (name)
JavaScript: EVENTI
Gli elementi di una pagina possono “sentire” diversi eventi
Ad esempio, si può cambiare l’elemento visualizzato nella pagina con un effetto di rollover, usando i tag HTML onmouseover e onmouseout
Lo stesso effetto si ottiene anche con i CSS (hover).
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rollover</title> <link rel="stylesheet" type="text/css" href="css/mystyle.css" /> <script> var imm = [ "images/chimico.gif", "images/babbonatale.gif", "images/gallo.gif", ]; function swap(i,id) { var elem = document.getElementById(id); elem.src = imm[i]; } </script> <body class="centro"> <br> <br> <h2>Rollover example</h2> <p>Posiziona il mouse sulle immagini</p> <br> <br> <img id="im0" src="images/chimico.gif" alt="chimico" onmouseover="swap(2,'im0');" onmouseout="swap(0,'im0');" /> <img id="im1" src="images/babbonatale.gif" alt="babbonatale" onmouseover="swap(2,'im1');" onmouseout="swap(1,'im1');" /> <img id="im2" src="images/gallo.gif" alt="gallo" onmouseover="swap(2,'im2');" onmouseout="swap(2,'im2');" /> </body> </html>
Si possono associare dei gestori di eventi (funzioni) agli elementi di una pagina usando il metodo addEventListener()
Ogni volta che si verifica l’evento sull’oggetto cui è stato associato un “listener”, viene invocata la funzione corrispondente
JavaScript: BUBBLING
Se si verifica un evento su un elemento, viene eseguito il getstore associato all'elemento stesso (se esiste) e poi l'evento viene propagato verso l'alto (blubbling) fino a raggiungere la radice dell'albero
Molto comodo per gestire eventi su elementi uguali tra di loro scrivendo il codice una sola volta
Si possono includere questi elementi in uno stesso elemento padre, per esempio un <div>
Si associa il gestore dell'evento al <div> e nel codice si può usare event.target che identifica sempre l'elemento cha ha causato l'evento
Attenzione:
event.target è l'elemento "target" che ha causato l'evento e non cambia durante il processo di bubbling
this è l'elemento "current", cioè quello che sta eseguendo il gestore di evento
Se ci sono più gestori per lo stesso evento, questi vengono eseguiti tutti mano a mano che si sale nella gerarchia del documento
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Rollover</title> <link rel="stylesheet" type="text/css" href="css/mystyle.css" /> <style> .swap { } </style> </head> <body class="centro"> <h2>Rollover example (versione con addEventListener)</h2> <p>Posiziona il mouse sulle immagini</p> <div id="swap"> <img id="im0" src="images/chimico.gif" alt="chimico" /> <img id="im1" src="images/babbonatale.gif" alt="babbonatale" /> <img id="im2" src="images/gallo.gif" alt="gallo" /> <img id="im3" src="images/pupazzoneve.gif" alt="pupozzoneve" /> <img id="im4" src="images/fiore.gif" alt="fiore" /> </div> <script> var imm = { im0: "images/chimico.gif", im1: "images/babbonatale.gif", im2: "images/gallo.gif", im3: "images/pupazzoneve.gif", im4: "images/fiore.gif", im5: "images/poff.gif", }; function swap(key,id) { var elem = document.getElementById(id); elem.src = imm[key]; } var el=document.getElementById("swap"); el.addEventListener("mouseover", function(event) { var img = event.target; if (img.tagName=="IMG") { swap("im5",img.id); } }); el.addEventListener("mouseout", function(event) { var img = event.target; if (img.tagName=="IMG") { swap(img.id,img.id); } }); </script> </body> </html>
JavaScript: Oggetto FORM
E' uno degli oggetti più importanti del DOM
Durante la lettura di un file HTML, viene creato un array con tante celle quanti sono i form all'interno del file.
Vedi: http://www.w3schools.com/jsref/dom_obj_form.asp
var myfarm = document.getElementById("frm1");
Proprietà: myform.length myform.action myform.method myform.encoding myform.name myform.target myform.elements[ ]
myform.element[] è a sua volta un array con tanti elementi quanti sono gli elementi del modulo
var usr = myform.elements[0]; var usr = document.getElementById(“username”);
Campi text, password, file -> change, input, focus, blur
Campi checkbox, radio, button -> click, focus, blur
Campi textarea, select -> input, change, focus, blur
Campi hidden (campo nascosto, non sente nessun evento)
Campi reset/submit -> click, focus, blur, submit, reset
Oggetto FORM: Value
Tutti gli elementi di un modulo hanno un valore (value)
- il valore fornito in input da un utente per un campo di testo
- Il valore associato ai pulsanti di tipo radio, checkbox, o alle opzioni di un menu (option)
- l'etichetta di un pulsante
campo di testo con id txt1
<input type="text" id="txt1" name="txt1" onchange="alert(this.value);" /> <script> document.getElementById("txt1") .addEventListener("change", function() { alert(document.getElementById("txt1").value); }); </script>
Oggetto FORM: Checked
I pulsanti radio e checkbox hanno anche la proprietà checked
var el = document.getElementById(“rd1”); el.checked el.value
Oggetto FORM: Checked
Il tag <select> possiede le proprietà selectedIndex e options[]
var el = document.getElementById(“sel1”); var i = el.selectedIndex; alert(el.options[i].value);
Oggetto FORM: INVIO
Al momento dell'invio di un modulo si possono fare i controlli mediante codice JavaScript associato agli eventi submit e reset
<form name="frm1" id="frm1" method="post" action="..." onsubmit="return checkdata();" onreset="return checkreset();"> ... ... </form>
Nota: molti controlli oggi si demandano a HTML5!
Se per gestire il submit si associa una funzione usando il metodo addEventListener() si può disabilitare l'invio del form usando il metodo preventDefault()
L'evento viene cancellato e questo corrisponde a disabilitare il comportamento di default del browser relativamente all'evento stesso
ESPRESSIONI REGOLARI
Li abbiamo già visto in PHP, permettono di descrivere pattern testuali
In JavaScript esiste l'oggetto RegExp ma le espressioni regolari possono anche essere create mediante assegnazione
var patt=new RegExp(pattern,modifiers); var patt=/pattern/modifiers;
/[abc]/ “a”,“b”,“c”
/^a/ tutte le stringhe che iniziano con “a”
/a$/ tutte le stringhe che finiscono con “a”
/[a-z]/
/[A-Z]/
/[0-9]/
/[a-zA-Z0-9]/
/[a-z]{n}/
/[0-9]{n,m}/
/[a,b,c]{n,}/
Espressioni regolari: metodi
- RegExpObject.exec(string)
- RegExpObject.test(string)
- String.search(/pattern/)
- String.match(/pattern/)
Esempio da stackoverflow function validateEmail(email) { var emailpattern = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9 {1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; return emailpattern.test(email); }
CAMBIARE LO STILE IN JavaScript
E' possibile cambiare lo stile degli elementi su una pagina HTML usando la proprietà style
Esempio:
let el=document.getElementById("Id") el.style.background="yellow";
Vediamo un esempio, tramite questo script è possibile ingrandire e rimpicciolire il quadrato in centro:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Change style</title> <style> #mydiv { width: 300px; height: 300px; margin-top: 200px; margin-left: auto; margin-right: auto; border: 5px solid gray; background-color: greenyellow; } .centro { text-align: center; } </style> </head> <body id="mybody"> <p class="centro">Premi + per ingrandire, - per rimpicciolire</p> <div id="mydiv"> </div> <script> let mb = document.getElementById("mybody"); let el = document.getElementById("mydiv"); mb.addEventListener("keydown", function() { if ((event.keyCode != 187) & (event.keyCode != 189)) return; let size = el.offsetHeight; if (event.keyCode == 187) { size = size + 20; el.style.background = "red"; } else { size = size - 20; el.style.background = "yellow"; } el.style.width = el.style.height = `${size}px`; }); </script> </body> </html>
Recommended Comments
There are no comments to display.