JavaScript è il linguaggio di scripting del web, molti anni fa sono stati proposti molti linguaggi, ma quello che è emerso di più è stato JavaScript. ECMAScript è il nome ufficiale dello standard di JavaScript. Ha alcune caratteristiche simile al C e ad altri linguaggi, è nato in Europa come la maggior parte del web.
Sito ufficiale ecma:
https://www.ecma-international.org/publications/standards/Ecma-262.htm
Abbiamo il browser che fa delle richieste e che ricevono delle risposte, possono essere file statici, dinamici che interagiscono con il database. Possono contenere codice HTML, CSS e PHP adesso andiamo a vedere anche il codice JavaScript, programmazione client side perchè il browser che riceve il codice lo manda in esecuzione. Ci serve per creare delle interfacce più ricche e più sofisticate, un interazione maggiore; non caricare intere pagine con JavaScript e ad Ajax possiamo fare richieste e caricare dei dati e modificare la pagina senza fare il reload della pagina.
JavaScript ha il core language (ECMAScipt) che contiene le variabili, espressioni, istruzioni, funzioni e tutti i costrutti di base, poi ci sono gli oggetti che sono DOM (Document Object Model) e BOM (Browser Object Model) questi oggetti vengono utilizzati nel contesto del browser, client-side. Ora è possibile sviluppare delle web application completamente con JavaScript, invece di PHP, lato server-side, e si chiama Node.js.
USI di JavaScript
- Validazione input
- Apertura nuove finestre
Oggi si possono fare tranquillamente in HTML5, prima si usava solo JavaScript.
- Rollover, Ajax
Oggi usiamo i CSS, prima JavaScript era molto utile per questo.
DOVE si scrivono gli Script?
Gli script sono caricati ed eseguiti dal browser durante la lettura del codice HTML oppure in risposta al verificarsi di un evento.
Attenzione: uno script non può fare riferimento ad oggetti (link, immagini, form) che non siano ancora stati definiti
External
Si scrive un file di funzioni JavaScript che viene incluso nel documento HTML nella parte di <head> o di <body> (spesso al fondo prima di </body>)
<script src="myfile.js"><script>
- Il codice non è "annegato" all'interno della pagina HTML e la manutenziona è più semplice
- Si può sfruttare il caching del browser
Internal
Si inserisce codice JavaScript (istruzioni e funzioni) nella parte di <head> o di <body> all'interno dei tag <script> ... </script>
Inline
Si inserisce codice JavaScript direttamente nei tag HTML (nel caso di programmazione ad eventi, ma oggi questa scelta è deprecata)
QUANDO vengono eseguiti?
Dipende..
-
Quando il browser carica una pagina
- se trova sequenze di istruzioni le manda in esecuzione
- se trova definizioni di funzioni ne fa il parsing per controllarne la correttezza sintattica
-
Terminato il caricamento della pagina, quando il browser "sente" un evento
- se trova una funzione collegata a quell'evento, la esegue
JavaScript è un linguaggio interpretato ma i browser più moderni lo compilano just-in-time per migliorare le performance.
ECMAScript (core language)
Definisce la sintassi, i tipi di dato, le istruzioni, le parole riservate, gli operatori, gli oggetti predefiniti,..
JavaScript: linguaggio dinamico
Solo gli errori sintattici vengono riconosciuti staticamente prima dell'esecuzione
Gli altri errori vengono riconosciuti a runtime durante l'esecuzione, e non sempre...
i Browser mettono a disposizione strumenti per capire cosa sta succedendo...
Ctrl+Shift+I per aprire la Console in Chrome
JavaScript: struttura lessicale
Le istruzioni sono separate tra loro dal carattere;
Le parentesi graffe {...} permettono di definire i blocchi di istruzioni
Commenti
// questo è un commento
/* questo è un commento */
<!-- questo è un commento
Gli identificatori possono iniziare con _ $ o con una lettera e non possono iniziare con un numero
Non si possono usare le parole riservate
JavaScript è case-sensitive var a != var A
JavaScript è un linguaggio tipato dinamicamente, la stessa variabile può essere usata per memorizzare dati di tipo diverso
i = "Hello world";
i = 1;
i = true;
Tipi:
- undefined (valore non inizializzato)
- boolean (true, false)
- number (64bit, floating point)
- string (sequenza di caratteri) "hello world"
- symbol (chiave univoca per una proprietà) var key = Symbol ("k")
- object (oggetto oppure null)
Array
In altri linguaggi gli array sono collezioni di dati omogenei accessibili mediante indice
In JavaScript gli elementi degli array possono essere di tipo diverso
var empty = [];
var numbers = ['zero', 'uno', 'due', 'tre', 'quattro'];
var misc = ['ciao', 10, true, ['M','F'], Nan];
Oggetti
Gli oggetti hanno proprietà definite come associazioni di chiavi e valori
var person = { firstname: "Alice", lastname: "Smith", email: "[email protected]" };
var empty_object = {};
Si può accedere alle proprietà con:
- dot notation "."
a = object_name.property_name;
- mediante chiave
a = object_name['property_name'];
Se il nome della proprietà non è un identificatore valido, per es. contiene uno spazio oppure altri caratteri speciali, è indispensabile la seconda notazione:
myObject.first name //non valido myObject['first name'] = 'John'; //ok
Si possono aggiungere/rimuovere proprietà dinamicamente
Se si accede ad una proprietà non definita, il valore di ritorno è undefined
JavaScript Object Notation
Meglio nota come JSON, indica un formato testo usato per lo scambio di dati
La sintassi è molto simile a quella degli oggetti espressi nella notazione Object Literal
I nomi delle proprietà devono sempre essere scritti tra doppi apici
JavaScript: CLASSI
Le classi si definiscono con class, hanno un metodo chiamato constructor che viene eseguito quando si crea l'istanza. Dentro il costruttore solitamente si inizializzano le proprietà.
I metodi seguono le regole delle funzioni
class Person { constructor(name) { this.name = name } sayHello() { return "Ciao, " + this.name + "!" } } let p = new Person("Nicolò"); p.sayHello(); // restituisce "Ciao, Nicolò!"
DATE
Offre proprietà e metodi per lavorare con tempo e date
var oggi = new Date();
var e = oggi.getTime();
restituisce i millisecondi trascorsi dalla mezzanotte del 1/1/1970
Esempio:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Date</title> </head> <body> <script> var now = new Date(); var t = now.getTime(); window.alert("Sono passati " + t + " millisecondi a partire dal 1/01/1970"); var h = Math.floor((t/1000)/60/60); window.alert("Corrispondono a circa " + h + " ore"); </script> </body> </html>
MATH
Offre proprietà e metodi per le operazioni matematiche
var π = Math.PI;
var e = Math.E;
STRING
Offre proprietà e metodi per manipolare testo
var a = "Hello world";
var a = 'Hello world';
// restituisce una sottostringa
var e = a.slice(start, end);
// converte una stringa in un array
var g = a.split("separator");
VARIABILI
In passato non era obbligatorio dichiarare le variabili, ma questa pratica oggi è deprecata: se il codice è in strict mode ("use strict") genera un errore
A partire da ECMAScript 2015 questa direttiva è sottintesa in molti nuovi costrutti
Per dichiarare una variabile si usano, var, let, o const
- var, variabili globali o locali
- let, variabili locali dentro un blocco
- const, variabili in sola lettura
FUNZIONI
function fName(param1, param2) { // some JavaScript code to be executed return result; } function square(x) { return x ** 2; } var a = square(4);
Le variabili dichiarate all'interno della funzione sono locali
Le variabili che vengono usate (ma non dichiarate) all'interno di una funzione sono globali
EVENTI
Esempi di Eventi:
- Quando si clicca il mouse
- Quando uan pagina si carica
- Quando un immagine si carica
- Quando il puntatore va sopra un elemento
- Quanto un campo in input è cambiato
-
Quando un form HTML è stato inviato
load, unload (per le pagine) change, reset, submit (dedicato ai form) blur, focus (testo) click (per tutto) mousedown, mouseup, mouseover,mouseout (del mouse) keydown, keypress, keyup (tastiera)
https://developer.mozilla.org/en-US/docs/Web/Events
Ad ogni evento è associato un elemento HTML corrispondente (inizia con on e poi segue il nome dell'evento)
Se le file HTML esiste del codice JavaScript associato a questo elemento HTML, il codice viene eseguito quando si verifica l'evento
Esempio (oggi deprecato) <img src="images/dummy.jpg" onmouseover = "JavaScript code;" onmouseout = "JavaScript code;" onclick = "JavaScript code;" >
INPUT/OUTPUT
Come nel C, JavaScript non ha propri costrutti di input/output; mentre il C si affida alle librerie I/O standard, un interprete JavaScript si basa su un programma ospite in cui è integrato
Se integrato in un browser Web, JavaScript si collega alle applicazioni tramite interfacce chiamate BOM (Browser Object Model) e DOM (Document Object Model)
Anticipiamo l'oggetto window (BOM) che permette di vedere alcuni aspetti dell'input/outpot
OGGETTO WINDOW
Rappresenta il browser
Permette di realizzare;
- operazioni di input/output
- aprire nuove finestre (popup)
- chiudere finestre
- ...
window.prompt("Dammi il tuo nome","")
window.confirm("Vuoi davvero uscire?")
ESEMPIO 2:
openwin.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>window.open</title> <link rel="stylesheet" type="text/css" href="css/mystyle.css" /> <script> function openwin() { let windowFeatures = "width=550,height=300,menubar=no,location=no,resizable=no,scrollbars=no,status=no"; window.open("popup.html","newwin",windowFeatures) } </script> </head> <body> <br/> <div class="box centro"> <h2>come with me ... </h2> <img src="images/hamwalk.gif" alt="hamwalk"/> <form> <input class="pulsante" type="button" value="Click here" onclick="openwin();"/> </form> </div> </body> </html>
popup.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>popup window</title> <link rel="stylesheet" type="text/css" href="css/mystyle.css" /> </head> <body> <br> <div class="box centro"> <h2 class="centro">and dance ...</h2> <img class="centro" src="images/gerbil.gif" alt="gerbil"/> <img class="centro" src="images/gerbil.gif" alt="gerbil"/> <img class="centro" src="images/gerbil.gif" alt="gerbil"/> <img class="centro" src="images/gerbil.gif" alt="gerbil"/> <br/> <form name="closewin"> <input class="pulsante" type="button" value="Close this window" onclick="window.close();"/> <input class="pulsante" type="button" value="Close the browser" onclick="window.opener.close();"/> <!-- check JavaScrit console when trying to close the browser --> <input class="pulsante" type="button" value="Print" onclick="window.print();"/> </form> </div> </body> </html>
Recommended Comments
There are no comments to display.