Jump to content
  • JavaScript Lezione #1 - Programmazione lato client Guida


     Share

    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

     

    Uv4yUVg.png

     

     

    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>

     

     Share


    User Feedback

    Recommended Comments

    There are no comments to display.


×
×
  • Create New...

Important Information

Terms of Use Privacy Policy Guidelines We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.