JavaScript

Lezione 2

Window

L'oggetto Window

L’oggetto principale per l’interazione con il browser è window: esso rappresenta una finestra che contiene un documento HTML. Quindi ciascuna finestra o tab ha associato un proprio oggetto window e, allo stesso modo, a ciascun frame definito in una pagina HTML corrisponde un oggetto window.

Questo oggetto, oltre ad identificare l’elemento visivo del browser, rappresenta anche il contesto di esecuzione globale per JavaScript, cioè l’oggetto all’interno del quale vengono definite variabili e funzioni globali. Esso è inoltre l’oggetto associato alla parola chiave this quando non esiste un contesto specifico.

Dimensioni della finestra e dello schermo.

window.innerWidth; // LARGHEZZA DELLA FINESTRA CORRENTE
window.innerHeight; // ALTEZZA DELLA FINESTRA CORRENTE
window.screen.width; // LARGHEZZA DELLO SCHERMO
window.screen.height; // ALTEZZA DELLO SCHERMO

Le proprietà innerHeight e innerWidth ci consentono di ottenere le dimensioni interne dell’area occupata dalla finestra espresse in pixel.

La proprietà screen dell’oggetto window ci fornisce informazioni su alcune caratteristiche dello schermo del dispositivo corrente. Possiamo ad esempio conoscere le dimensioni in pixel utilizzando le proprietà width e height.

Creare pop-up e finestre di dialogo

alert( 'Questo è un messaggio di avviso' );

confirm( 'Questo è un messaggio di richiesta di conferma.' );

var nome = prompt("Inserisci il tuo nome");
if (nome != null) {
	// ...
}

window.open("https://www.kaleidoscope.it", "_blank");

// _blank => nuova finestra
// _self  => stessa finestra

Gestione dei timer

function avvisa() {
    alert('Timer eseguito!');
}
let myTimer = setTimeout(avvisa, 5000);

let x = 0;
let myTimer;

function eseguiIntervallo() {
    x++;
    if ( x > 10 ) {
		clearInterval(myTimer);
    }
}
myTimer = setInterval( eseguiIntervallo, 1000);

Il metodo setTimeout() crea un timer che eseguirà la funzione specificata come primo parametro dopo N millisecondi. Il valore restituito dalla funzione è l’identificatore del timer appena creato.

Per eseguire una funzione ad intervalli regolari facciamo ricorso a setInterval().

History e Location

history.back(); // TORNA ALLA PAGINA PRECEDENTE

history.go(-3); // TORNA ALLA TERZ'ULTIMA PAGINA

// ESEMPIO: https://www.kaleidoscope.it:8080/articoli/articolo.php?id=123#paragrafo

location.href; // restituisce https://www.kaleidoscope.it:8080/articoli/articolo.php?id=123#paragrafo

location.protocol; // restituisce https

location.hostname; // restituisce www.kaleidoscope.it

location.port; // restituisce 8080

location.origin; // restituisce https://www.kaleidoscope.it:808

location.pathname; // restituisce /articoli/articolo.php

location.search; // restituisce ?id=123

location.hash; //restituisce  #paragrafo

location.reload(); // ricarica la pagina

L’oggetto window del browser ci fornisce anche alcuni meccanismi per gestire e controllare la navigazione dell’utente: history, per tenere traccia della navigazione e location che ci permette di gestire l’URL corrente.

Document Object Model

Il DOM fornisce una rappresentazione del documento come una composizione gerarchica di oggetti, spesso chiamata DOM tree. Questo albero di oggetti è pensato per essere facilmente accessibile tramite JavaScript non soltanto in lettura, ma anche per poter cambiare dinamicamente la sua struttura, il contenuto e lo stile.

Struttura del DOM

<!DOCTYPE html>
<html>
	<head>
		<title>Pagina d'esempio</title>
	</head>
	<body>
		<div>
			<h1>Titolo</h1>
			<p>Questo è un paragrafo</p>
			<img src="img.jpg" alt="Immagine">
		</div>
	</body>
</html>

getElementById, querySelector

Possiamo accedere agli elementi della pagina utilizzando diversi criteri di selezione.

Se nella pagina corrente abbiamo un elemento con un certo valore per l’attributo id, possiamo utilizzare il metodo getElementById() dell’oggetto document per selezionarlo.

Tra le novità più introdotte più di recente nelle specifiche del DOM c’è la possibilità di selezionare gli elementi di una pagina utilizzando i selettori CSS. Due sono i metodi che consentono questo approccio: querySelector() e querySelectorAll(). L’uno restituisce il primo elemento trovato, l’altro l’elenco di tutti gli elementi individuati dal selettore.

// index.html
<p id="mioParagrafo">Questo è un paragrafo</p>
<p>Questo è un altro paragrafo</p>

// main.js
let p = document.getElementById("mioParagrafo");

let listaParagrafi = document.querySelectorAll("p");

Modificare elementi

Una volta individuato l’elemento o gli elementi presenti su una pagina, possiamo modificarne il contenuto o altre caratteristiche sfruttando proprietà e metodi specifiche dei nodi di tipo elemento. Ad esempio, la proprietà innerHTML rappresenta il contenuto HTML di un elemento ed è accessibile sia in lettura che in scrittura.

let p = document.getElementById("mioParagrafo");
p.innerHTML = "Testo del paragrafo";
p.style.color = "red";

Navigare gli elementi

Alcuni metodi del DOM ci consentono di analizzare e muoverci all’interno della struttura di un documento. Ad esempio, la proprietà childNodes di un elemento contiene l’elenco dei nodi figli dell’elemento sotto forma di NodeList.

// index.html
<div id="mainDiv">
	<h1>Titolo</h1>
	<p>Un paragrafo</p>
	<p>Un altro paragrafo</p>
</div>

// main.js
let div = document.getElementById("mainDiv");
for (let i = 0; i < div.childNodes.length; i++) {
	console.log(div.childNodes[i].innerHTML);
}

Aggiungere / Rimuovere elementi

Oltre a modificare il contenuto HTML e gli attributi di un elemento, il DOM ci consente di modificare la struttura di un documento. Possiamo ad esempio creare elementi ed attributi e aggiungerli al DOM avendo un effetto immediato sulla pagina HTML.

// index.html
<div id="mainDiv">
	<h1>Titolo</h1>
	<p>Un paragrafo</p>
	<p>Un altro paragrafo</p>
</div>

// main.js
let mainDiv = document.getElementById("mainDiv");
let img = document.createElement("img");
let srcAttr = document.createAttribute("src");
srcAttr.value = "default.png";
img.setAttributeNode(srcAttr);

mainDiv.appendChild(img);

Gli eventi

addEventListener

Per associare eventi ad elementi (quali sono click, doppio click, over del mouse, ecc.) ed eseguire funzioni ad esse associate, si possono usare 3 metodi:

- via js, con l'istruzione addEventListener

- via html attraverso alcuni attributi

// main.js
elemento.addEventListener(evento, callback, [useCapture]);

// index.html
<a href="#" id="test">test</a>

// main.js
function clickOnTest(event){
	alert('Click su test');
}

let test = document.getElementById('test');

test.addEventListener('click', clickOnTest);

// index.html
<a href="#" onclick="alert('ciao')">Link</a>

<a href="#" onclick="alert(this.innerHTML)">Ciao</a>

Load, scroll e resize

L’evento load si verifica quando un oggetto viene caricato dal browser.

Altri eventi che possiamo classificare come eventi legati al browser sono l’evento scroll e l’evento resize.

Il primo si verifica quando il contenuto di un elemento scorre per consentirne la visualizzazione, mentre il secondo si verifica quando cambiano le dimensioni di un elemento.

// main.js

function inizializza() {
    alert('Pagina inizializzata!');
}

window.addEventListener("load", inizializza);

function scrollInCorso() {
    console.log(window.pageXOffset + "," + window.pageYOffset);
}
window.addEventListener("scroll", scrollInCorso);

window.onresize = function() {
    console.log(window.innerWidth + "," + window.innerHeight);
};

Eventi del mouse

mouseover: quando passiamo sopra ad un elemento con il mouse
mouseout: quando usciamo con il mouse da sopra un elemento
click: ovviamente il click del mouse
dblclick: il doppio click del mouse

<script>
let myParagrafo = document.getElementById("paragrafo");

myParagrafo.ondblclick = function(e) {
	e.target.innerHTML = "Hai fatto doppio click sul paragrafo!";
};
</script>

<p id="paragrafo">Clicca su questo paragrafo</p>

Posizione del cursore

clientX e clientY : coordinate del mouse rispetto alla finestra

pageX e pageY : coordinate del mouse rispetto alla pagina

Drag e drop

// index.html
// RENDIAMO L'IMMAGINE TRASCINABILE
<img id="miaImmagine" src="images/img.jpg" draggable="true""/>
<div id="target"></div>

// main.js
let img = document.getElementById("miaImmagine");

// L'EVENTO ON DRAG START, CI PERMETTE DI INTERCETTARE 
// IL MOMENTO IN CUI L'UTENTE STA INIZIANDO A TRASCINARE L'ELEMENTO
img.ondragstart = function(e) {
	e.dataTransfer.setData("text", e.target.id);
}

let divTarget = document.getElementById("target");
divTarget.ondragover = function(e) {
	e.target.className = "overClass";
	e.preventDefault();
}

divTarget.ondrop = function(e) {
	var data = e.dataTransfer.getData("text");
	e.target.appendChild(document.getElementById(data));
}

Eventi della tastiera

keydown: quando si inizia a premere un tasto
keypress: quando il tasto viene premuto completamente
keyup: quando il tasto viene rilasciato

L'oggetto Evento

keyCode: indica il codice identificativo del tasto
charCode: indica il codice ASCII del tasto
shiftKey: booleano che indica se il tasto premuto è il tasto di SHIFT
ctrlKey: booleano che indica se il tasto premuto è il tasto di CTRL
altKey: booleano che indica se il tasto premuto è il tasto di ALT
metaKey: booleano che indica se il tasto premuto è il tasto di Windows o Mela

// main.js
txtInput.onkeypress = function(e) {
    let keyCode = e.keyCode;
    alert('Premuto il tasto numero: ' + keyCode );
}

// 8  => BACKSPACE
// 9  => TAB
// 13 => ENTER
// 32 => SPACE

JavaScript

Window

L'oggetto Window

Dimensioni della finestra e dello schermo.

Creare pop-up e finestre di dialogo

Gestione dei timer

History e Location

Document Object Model

Document Object Model

Struttura del DOM

getElementById, querySelector

Modificare elementi

Navigare gli elementi

Aggiungere / Rimuovere elementi

Gli eventi

addEventListener

Load, scroll e resize

Eventi del mouse

Posizione del cursore

Drag e drop

Eventi della tastiera

L'oggetto Evento

Esercizi

1) Realizzare una calcolatrice che effettui le 4 operazioni aritmetiche di base

2) Realizzare il gioco del tris