PW - 06 - JS 01

Lecture Info

  • Date: [2018-03-27 mar]

  • Lecturer: Pierpaolo Loreti

  • Slides: ()

  • Argomenti:

    • Storia di Javascript.

    • Cosa fa Javascript.

    • Framework per javascript.

    • Caratteristiche di javascript.

    • Javascript garbage collector.

    • Aggiungere Javascript a una pagina HTML.

    • Document Object Model - DOM.

    • Selettori.

    • Tipi di eventi da gestire.

    • Come associare la gestione di un evento ad un elemento.

    • Errore comune: caricamento della pagina

    • Esempio DOM: manipolazione di un nodo

    • Esempio DOM: creazione di un nodo

1 Basics of Javascripts

1.1 History

Linguaggio di programmazione creato nel 1995 da Brendan Eich (Netscape). Il linguaggio da cui deriva Javascript era originariamente chiamato "Livescript" / Mocha ed era nato come un linguaggio semplice, più per i designers che per i programmatori. Il nome Javascript fu una scelta di marketing in quanto all'epoca Java era molto famoso.

Javascript permette di interagire in modo dinamico con la pagina web. Ad esempio per implementare funzioni di instant search oppure per fare le chat.

AJAX: Asynchronous Javascript and XML. Permette di creare delle pagine web che comunicano in maniera asincrona con il server, il che vuol dire che possiamo cambiare elementi di una pagina web senza ricaricare l'intera pagina.

1.2 What it Does

Javascript ci permette di:

  1. Cambiare elementi e stili in una pagina, ad esempio aggiungendo classi css in risposta a eventi generati dall'utente (click, scroll, etc).

  2. Comunicazione asincrona con il server per permette l'invio di dati senza dover ricaricare la pagina e senza interazione con l'utente. Questo paradigma è spesso chiamato AJAX.

  3. Può anche essere usato per testare le capacità del browser e per altre ragioni.

Il ruolo di javascript è quindi quello di offrire un comportamento dinamico alle pagine HTML scaricate dal client. Anche se inizialmente è nato come Web client-side scripting, si è poi evoluto e può anche essere utilizzato come Web server-side scripting (Nodejs).

1.3 Frameworks

I framework servono per offrire delle funzioni basilari che semplificano l'utilizzo di javascript.

Noi studieremo solamente il javascript base, chiamato vanilla js.

1.4 Characteristics

Alcune caratteristiche di JS sono:

  • Dynamic: gira all'interno di una macchina virtuale. Non deve essere compilato.

  • Loosely typed: non bisogna dire che tipo ha una variabile.

  • Case sensitive: aTtenZione allE MaiUscole!

  • Garbage collector: Non bisogna gestire la memoria.

Un garbage collector rimuove le variabili che non ci servono dalla memoria automaticamente. Le variabili vengono rimosse quando non abbiamo più "riferimenti" ad un oggetto. Possiamo quindi dichiarare nuove variabili dinamicamente senza dover effettuare operazioni di distruzione. Chiaramente bisogna stare attenti a non causare dei memory leak dichiarando troppe variabili.

1.5 Add JS to HTML Page

Come abbiamo visto per CSS, anche per js abbiamo vari modi per linkare una pagina HTML ad uno script js, tra questi troviamo:

  • embedded: va inserito direttamente nella pagina HTML. 

    <script type="text/javascript">
   // Scrivi qui il tuo codice javascript
</script>

  • external: viene linkato dando una src 

    <script type="text/javascript" src="my_script.js"> </script>

Solitamente gli script js vengono inclusi o nella <head> oppure alla fine del <body> .

2 Document Object Model (DOM)

Il DOM è una interfaccia di programmazione per HTML (e XML) ed è standardizzata dal W3C. Il DOM fornisce una mappa strutturata del nostro documento ed i metodi per interfacciarsi con gli elementi.

Possiamo pensare al DOM come ad un albero in cui ogni elemento della pagina è un nodo. L'elemento radice viene chiamato "document". "document" ha poi una serie di proprietà standard. Utilizzando il DOM siamo quindi in grado di interagire con l'HTML, modificandolo o semplicemente leggendolo.

A seguire qualche esempio 

// prendi il contenuto HTML del div con id "miodiv"
var foo = document.getElementById("miodiv").innerHTML;

// inserisci nell'elemento con ID prova i caratteri "ciao"
document.getElementByID("prova").innerHTML = "ciao"

2.1 Selectors

Abbiamo vari metodi per selezionare elementi HTML. Alcuni di questi metodi ritornano singoli elementi, mentre altri ritornano liste di elementi, che prendono il nome di NodeList. Possiamo trattare una NodeList come un semplice array. 

// ritorna elemento con un particolare id
document.getElementById("miodiv");
    
// ritorna una NodeList di tutti gli elementi di tipo paragrafo 
document.getElementByTagName("p");
    
// ritorna una NodeList di tutti gli elementi di una classe
document.getElementByClassName("myclass");
    
// seleziona i selettori css
document.querySelectorAll("p . warning")

2.2 Events

Abbiamo vari eventi, ciascuno dei quali rappresenta una particolare azione che il client può effettuare all'interno del browser. Per ogni evento possiamo scrivere del codice javascript che modifica il comportamento del browser in modo dinamico quando quell'evento viene azionato.

Tra gli eventi troviamo anche i seguenti:

  • onfocus: Un elemento prende il focus.

  • onblur: Un elemento perde il focus.

  • onclick: Mouse click.

  • onerror: Errore nel caricamento di immagini o del documento.

  • onload: La pagina ha finito di caricarsi.

  • onkeydown: Un tasto viene premuto.

  • onkeypress: Un tasto viene tenuto.

  • onkeyup: Un tasto viene rilasciato.

  • onmousedown: Un bottone del mouse è premuto.

  • onmouseup: Un bottone del mouse è rilasciato.

  • onmousemove: Il mouse si è spostato.

  • onmouseout: Il mouse si è spostato fuori da un elemento.

  • onmouseover: Il mouse si è spostato sopra un elemento.

  • onsubmit: È stato premuto il pulsante submit di un form.

Ci sono tre modi per associare un evento ad un elemento. Il terzo metodo, quello che utilizza addEventListener, è il più utilizzato in quanto mantiene la separazione tra l'elemento e la particolare gestione dell'evento.

  1. con un attributo HTML 

    <body onClick = "myFunction();">

  2. con un metodo 

    windows.onclick = myFunction;
document.getElementById("miodiv").onclick = function(){...};

  3. con addEventListener 

    windows.addEventListener("click", myFunction);

2.3 Common Error on Page Load

Quando il browser carica la pagina, mentre la carica, comincia ad eseguire subito il codice javascript che trova.

Bisogna quindi porre attenzione a non inserire codice js che fa riferimento a particolari id (o elementi in generale), prima che questi id siano stati definiti nella pagina html.

2.4 Manipulation of Node

Il seguente snippet di codice fa vedere come è possibile modificare un nodo del DOM. 

var myImage = document.getElementById("someimage");
    
// leggi un attributo di un nodo
var oldSrc = myImage.getAttribute('src');

// scrivi l'attributo di un nodo
myImage.setAttribute('src', 'otherimage.jpg');

// -------------------

var myP = document.getElementById("someparagraph");
    
// leggi e modifica l'HTML contenuto dal nodo
myP.innerHTML = "<p>New text </p>"; 

// leggi e modifica il CSS del nodo. In Javascript le proprietà CSS si
// scrivono aGobbaDiCammello.
myP.style.color = '#fff';
myP.style.backgroundColor= '#fff';

2.5 Creation of Node

Il seguente snippet di codice fa vedere come è possibile creare un nodo del DOM. 

// crea un nodo 
var newDiv = document.createElement("div");
    
// crea un nodo contenente del testo
var outText = document.createTextNode("Ciao!");

// mettiamo i nodi creati dentro un elemento della pagina
var ourDiv = document.getElementById("mydiv");
newDiv.appendChild(ourText);
ourDiv.appendChild(newDiv);