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

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>)

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>

Sign In

JavaScript Lezione #1 - Programmazione lato client Guida

USI di JavaScript

DOVE si scrivono gli Script?

ECMAScript (core language)

JavaScript: linguaggio dinamico

JavaScript: struttura lessicale

JavaScript: CLASSI

User Feedback

Recommended Comments

Recently Browsing

Guide più Viste

Home

Computer

Telefonia

Videogiochi

Guadagnare Online

Important Information