Introduzione alla programmazione lato client con Javascript - Luca Di Gaspero Dipartimento di Ingegneria Elettrica, Gestionale e Meccanica

Introduzione alla
    programmazione lato
     client con Javascript
                    Luca Di Gaspero
Dipartimento di Ingegneria Elettrica, Gestionale e Meccanica
              Università degli Studi di Udine

Docente
•   Dipartimento di Ingegneria Elettrica, Gestionale e
    Meccanica
    Università di Udine, sede dei Rizzi

    •   E-mail: l.digaspero@uniud.it

    •   URL: http://www.diegm.uniud.it/digaspero/

    •   Tel: 0432-558242

•   Ricevimento studenti

    •   Pordenone/Udine, su appuntamento

Contenuti delle lezioni

• Introduzione al linguaggio Javascript
• Il modello ad oggetti dei documenti XML/
  (X)HTML
• Manipolazione dei documenti attraverso il
  linguaggio Javascript

Javascript
• Non è Java!
• Sviluppato da Netscape, è un linguaggio di
  scripting per client (browser) web
• E’ un linguaggio interpretato da un
  apposito modulo del browser (non tutti i
  browser lo supportano completamente, ad
  es. IE per windows mobile)

Javascript (cont.)

• Nel corso del tempo è diventato uno
  standard pubblicato dalla European
  Computer Manifacturers Association
  (ECMA)
• ECMAScript ECMA-262 / ISO-16262
 • Tre livelli: ECMA v1 v2 v3

Versioni di Javascript

• Netscape/Mozilla/Safari implementano
  Javascript 1.5 (compliant allo standard
  ECMA v3)
• Microsoft implementa JScript 1.5 (anch’esso
  dichiarato compliant al medesimo standard)

A cosa serve Javascript
• I linguaggi di markup (X(HT)ML) sono di
  natura “dichiarativa”
  • definiscono quale dev’essere la struttura
    del documento o la sua formattazione
• Non hanno la possibilità di gestire delle
  scelte/prendere decisioni/iterare delle
  operazioni

A cosa serve Javascript
        (cont.)
• Per aggiungere una componente
  procedurale alle pagine e consentirne la
  manipolazione è necessario un linguaggio di
  programmazione
• In particolare i linguaggi di script sono
  linguaggi di programmazione con sintassi
  semplificata e dedicati ad uno specifico
  ambiente di esecuzione

A cosa serve Javascript
        (cont.)
• I linguaggi di script per il web combinano lo
  scripting con il linguaggio (X)HTML per
  ottenere delle pagine interattive
• In particolare Javascript consente di
  manipolare le pagine sul lato client
  • Non è l’unica possibilità
    (Programmazione Web Lato Server)

Gli script lato client
• Gli script consistono in una sequenza di
  istruzioni che il browser deve eseguire (sono
  dunque interpretati)
• Le istruzioni non costituiscono un
  programma vero e proprio
  • piuttosto sono dei frammenti di
    programma messi nei posti giusti
    • ad esempio in risposta ad eventi

Possibili utilizzi degli
    script lato client
• Validazione dei dati dei moduli HTML
  durante la compilazione
• Visualizzazione di messaggi e input di dati
  da finestre (alert box)
• Animazione del contenuto della pagina e
  interazione con l’utente
• Adattamento della pagina al browser
• Interazione asincrona con il server (AJAX)

Dove vanno gli script

• Nel codice (X)HTML, racchiusi da un
  apposito tag 
• In file esterni al documento (X)HTML
  (solitamente con estensione js)

Il tag : attributi
• type: specifica il tipo di contenuto (mime
  type) del tag text/javascript
• src: specifica l’URL di un file contenente il
  codice javascript
• defer: specifica al browser di interpretarne il
  contenuto solo una volta che l’intero
  documento è stato caricato
• Importante: la chiusura  è sempre
  obbligatoria

Un esempio di script

Il tag 

• Per compatibilità verso i browser che non
  supportano Javascript è possibile specificare
  un contenuto alternativo utilizzando il tag

Dove inserire il codice
      Javascript
• Può essere utilizzato in qualunque punto di
  un documento (X)HTML
  • Nel caso si trovi nell’ viene
    eseguito prima di visualizzare la pagina
  • Nel caso sia nel  viene eseguito
    nel momento in cui viene incontrato nel
    flusso di rendering della pagina

Alcuni esempi

• Vedi codice

Interazione di base con
        l’utente
•   window.alert(msg)
    •   visualizza un messaggio con un pulsante di ok
        per chiuderlo dopo la lettura
•   window.confirm(msg)
    •   visualizza un messaggio con una coppia di
        pulsanti ok/annulla
•   window.prompt(msg)
    •   visualizza un messaggio con un campo di testo

Elementi del linguaggio

• variabili (non tipate) e valori (stringhe con
  apici e doppi apici)
• espressioni e operatori
• strutture di controllo
• funzioni (non tipate)
• oggetti e array

Variabili e strutture di
      controllo
•   Per dichiararle si usa var, altrimenti sono
    variabili globali (con visibilità l’intero
    documento)
•   Possono assumere valori di tipi diversi
    •   es: var i = 2 + 3; i = ‘pippo’;
•   Le strutture di controllo sono le classiche della
    programmazione strutturata if-else, switch,
    while, do-while, for (più break e continue)

Esercizi
• Creare una pagina che chieda all’utente
  l’autorizzazione a proseguire e scriva due
  messaggi diversi nel caso l’autorizzazione
  sia concessa o meno.
• Creare una pagina che chieda un numero e
  visualizzi nel proprio contenuto tutti i valori
  compresi fra 1 e il numero immesso.

Funzioni
•       Sintassi, definizione:
    function nome_funzione(parametro1, parametro2)
    {
        istruzioni;
        // opzionalmente return valore;
    }
•       Sintassi, invocazione:
    nome_funzione(valore_par1, valore_par2);

Oggetti
• In Javascript non esistono le classi, ma gli
     oggetti vengono definiti attraverso un
     costruttore e definendo le proprietà
 function Persona(nome, genere) {
     this.nome = nome;
     this.genere = genere;
 }

Oggetti: creazione

• La creazione di un oggetto avviene con new
 var d = new Date(); // d è la data di oggi
 document.write(d.toString());

Array

• Sono degli oggetti, creati con Array()
 • var a = new Array(); a = new Array(el0,
    el1, ...); a = new Array(lunghezza);
• Lunghezza: a.length;
• Accesso: a[0] = 3; a[5] = 10;

Esercizi
• Riempire un array con i nomi di una serie
  di utenti e stamparli nel corpo del
  documento (X)HTML
• Creare una pagina che, dato l’array
  precedente, chiede all’utente il proprio
  nome e verifica se il suo nome è presente
  nell’array. In caso affermativo si scriverà un
  messaggio di benvenuto, altrimenti un
  messaggio di accesso negato.

Esercizi

• Modificare l’esercizio precedente definendo
  una funzione che controlla la presenza o
  l’assenza dell’utente nell’array.

Eventi
•   Ai tag (X)HTML è possibile associare degli eventi
    legati alla gestione della pagina da parte del
    browser

    •   onLoad (termine del caricamento della pagina
        o di un’immagine)

    •   onMouseOver, onMouseOut, onClick,
        onDblClick

    •   onSubmit (per i form)

Eventi: esempi

• Vedi codice

Esercizi
•   Data la seguente lista, modificarla facendo sì che al
    passaggio su uno di questi numeri si aggiunta al
    documento un messaggio ripetuto tante volte
    quante il valore del numero corrispondente.
    
    1
    2
    2
    
•   (Suggerimento, scrivere una funzione per la scrittura del
    messaggio che prende come parametro il numero di volte in cui
    va ripetuto).

Il Document Object
      Model (W3C)
• Rappresentazione ad oggetti dei documenti
  X(HT)ML
 • fornisce un chiaro modello concettuale
    del documento
 • agevola la manipolazione di documenti
    attraverso un linguaggio di
    programmazione ad oggetti

Rappresentazione ad
      albero

  Esempio DOM
 
  Questo è un esempio di documento
  Con un solo paragrafo

L’albero del documento
                                                 Document
                     document                    Element
                         html                    Text
                                                 Comment
head                               body

title        h1                     p                
Esempio
 DOM
           Questo è un
             esempio
                          Con un   em      paragrafo

          di documento
                                    solo

L’albero del documento
         (cont.)
• Ogni elemento dell’albero è chiamato
  genericamente un oggetto Node
• L’interfaccia di Node mette a disposizione
  degli strumenti per navigare l’albero (ad es.
  parentNode, childNodes[], firstChild, lastChild,
  firstSibling, nextSibling) e per modificare il
  valore dei nodi
• Ogni nodo ha una sua sotto-interfaccia propria
  del suo tipo (proprietà Type)

Tipi di nodi
       Interfaccia            Costante
Element              Node.ELEMENT_NODE
Text                 Node.TEXT_NODE
Document             Node.DOCUMENT_NODE
Comment              Node.COMMENT_NODE
Attr                 Node.ATTRIBUTE_NODE
DocumentType         Node.DOCUMENT_TYPE_NODE

Accedere ai nodi
• In principio si può navigare il documento
  direttamente dall’oggetto document (di tipo
  Document, che rappresenta l’intero
  documento)
• Il modo più semplice è utilizzare gli id per
  denominare gli elementi che ci interessano e
  usare document.getElementById(id)

Accedere ai nodi (cont.)
•   Altri metodi di accesso a collezioni di nodi sono
    i seguenti:
    •   getElementsByName(name) che restituisce
        gli elementi il cui attributo name corrisponde
    •   getElementsByTagName(tag) che restituisce
        tutti gli elementi il cui tag è quello
        specificato
        •   Può essere utilizzato su qualunque nodo,
            non necessariamente su document

Creazione di nodi
• Sono metodi dell’oggetto document
 • nodo = document.createElement(‘p’); p
 • testo = document.createTextNode(‘testo’);testo
 • nodo.appendChild(testo);
• Attenzione: non aggiungono
  automaticamente l’elemento alla pagina,
  ma lo creano come sottoalbero isolato

Aggiunta/rimozione di
        nodi
•   nodo.appendChild(nuovoNodo) aggiunge
    nuovoNodo alla fine della lista dei figli di nodo
•   nodo.insertBefore(nuovoNodo, vecchioNodo)
    inserisce nuovoNodo prima di vecchioNodo
    nella lista dei figli di nodo
•   nodo.removeChild(vecchioNodo) rimuove
    vecchioNodo dalla lista dei figli di nodo
•   nodo.replaceChild(nuovoNodo, vecchioNodo)
    rimpiazza vecchioNodo con nuovoNodo

Aggiunta/modifica di
  attributi di un nodo

• element.setAttribute(nome_attributo, valore) e
  element.removeAttribute(nome_attributo)
  • tabella.setAttribute(‘border’, ‘1’);

Esempi

• Vedi codice

Esercizi

• Creare una pagina che chiede all’utente una
  URL (attraverso un form contenente un
  campo di testo e un pulsante di conferma) e
  lo aggiunge sottoforma di link (tag ) in
  un’area prestabilita della pagina. Attenzione
  agli attributi (, contiene l’URL di
  destinazione nell’attributo href)

Esercizi

• Dato l’esempio che cambia l’immagine:
  modificarlo, facendo in modo che una volta
  che il mouse è stato spostato si visualizzi
  nuovamente l’immagine precedente.

Javascript e CSS
• Attraverso l’attributo style dei nodi elemento
  è possibile modificare le informazioni di
  stile
 var tab = document.getElementById(‘tabella’);
 tab.style.color = ‘green’;
• L’eventuale classe CSS è accessibile
  attraverso className
 tab.className = ‘tabella-rossa’;

Javascript e CSS (cont.)
• I nomi CSS vengono tradotti nella forma “a
  gobba di cammello” tipica di Java(script)
 • font-size → fontSize (tab.style.fontSize =
    ‘12pt’)
 • border-top-color → borderTopColor
    (tab.style.borderTopColor = ‘red’)
 • i nomi singoli (ad es., overflow) non
    cambiano eccetto float → cssFloat

Esercizi

• Scrivere una pagina contenente una tabella,
  che evidenzi la riga sulla quale si trova
  correntemente il mouse utilizzando
  Javascript
  • Suggerimento: si utilizzi una classe CSS
    apposita per le righe evidenziate