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

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

Esercizi

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

 

2) Realizzare il gioco del tris

JavaScript - Lezione 2

By Filippo Matteo Riggio

Made with Slides.com

JavaScript - Lezione 2

  • 405

More from Filippo Matteo Riggio