JavaScript Lezione #2 - Programmazione lato client Guida - Guide e Tutorial

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>

Sign In

JavaScript Lezione #2 - Programmazione lato client Guida

ALBERO del DOM

OGGETTO DOCUMENT: proprietà

OGGETTO DOCUMENT: Metodi

JavaScript: EVENTI

JavaScript: BUBBLING

JavaScript: Oggetto FORM

Oggetto FORM: Value

Oggetto FORM: Checked

Oggetto FORM: Checked

Oggetto FORM: INVIO

ESPRESSIONI REGOLARI

CAMBIARE LO STILE IN JavaScript

User Feedback

Recommended Comments

Recently Browsing

Guide più Viste

Home

Computer

Telefonia

Videogiochi

Guadagnare Online

Important Information