Skip to content

Latest commit

 

History

History
151 lines (119 loc) · 3.37 KB

14. Client-side Technologies.md

File metadata and controls

151 lines (119 loc) · 3.37 KB
Raw

Introduzione

Esigenza: computazione client-side, senza dover ricaricare la pagina ogni volta.

Javascript

Linguaggio client-side in grado di interagire con il DOM.

Caratteristiche riassuntive: camel case, dynamically typed, weak typing, event-driven.

Grammar

const CONST=10;
CONST = 5;  // TypeError

var a = 1;

function f() {
	let b = 2;  // For short-lead vars
}
  • let dichiara variabili locali ad un blocco
  • var dichiara variabili visibili nello scope in cui è dichiarata (intera funzione, scope globale, ecc.)
  • Dichiarare variabili senza le keywords let e var è da evitare in quanto vengono definite nello scope globale, solo al raggiungimento dello statement

List comprehension è sperimentale.

DS

  • Number
  • Boolean
  • Null
  • String
  • Date
  • Array: new Array(7, "peak", "a", "boo"); oppure [7, "peak", "a", "boo"]

Set:

new Set(['a', 'b', 'b', 'a']);  // Set(2) {'a', 'b'}

Dict:

var likeDict = ["IT": "Italia", "ES": "Spagna", "PIGS": ["Portogallo", "Italia", "Grecia", "Spagna"]];

#Nota in realtà non esistono dizionari in Javascript

Anche in JS gli attributi e i metodi sono implementati come "dizionari", che possiamo creare a mano. I metodi sono semplicemente valori del dizionario di tipo callable.

Objects

class Rectangle {
	constructor (w, h) {
		this.h = h;
		this.w = w;
	}

	area() {
		reutrn this.h * this.w;
	}

	toString() {
		return "Rettangolo";
	}
}

var r = new Rettangolo(10, 20);

È equivalente a:

var r = {
	w: 1,
	...
	area: function() { return this.w * this.h; },
	...
}

O ancora:

function Rectangle(h, w) {
	this.h = h;
	...
	this.area = function() { return this.w * this.h; };
	...
}

Filosofia di JS:

È semplice ciò che è difficile sbagliare, no matter what arrivo all'obiettivo.

Per l'accesso sono equivalenti r['h'] e r.h.

undefined & null

In JS esiste il tipo undefined, differente dall'oggetto null. Questo accade tipicamente quando non viene passato un argomento ad una funzione.

Operatori ternari

condizione ? expA : expB;

Cicli

for (let i = 0; i < 10; i++) ...

DOM

JS riesce ad interagire con la pagina HTML attraverso un modello detto Device Object Model, per cui sono fornite primitive per l'interazione.

#Hint: https://jsfiddle.net

<script src="src/script.js"></script>

Per modificare un header:

document.getElementByID('header').innerHTML = "Titolo";

Callbacks

Ogni componente è caratterizzato dai propri eventi. Es: onkeyup per la validazione di un campo di testo #Consiglio passa this ai callback

Timers

Esistono eventi temporizzati: vedi [set|clear]Timeout, setInterval, ...

Eventi asincroni

#Vedi AJAX

Struttura ad albero

Il DOM è una rappresentazione ad albero del documento HTML, la cui radice è il tag <html>, mentre gli altri tag sono nodi interni o foglie dell'albero.

AJAX

Asynchronous Javascript And XML

Idea: fare richieste e aspettare asincronamente la risposta. Arrivata la risposta, arriva un "interrupt" al client.

var xhttp = new XHttpRequest();
xhttp.onload = function() { ... }
xhttp.open("POST|GET", "endpoint", true);
xhttp.send();

Autocompletamento

var field = document.getElementByID("id_search_field");
field.onkeyup = autoComplete;
field.autocomplete = false;  // Disable browser's autocompletion

// Manage query with AJAX in autoComplete