Jump to content
  • JavaScript Lezione #2 - Programmazione lato client Guida


     Share

    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>

     

     

     Share


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...

Important Information

Terms of Use Privacy Policy Guidelines We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.