WebDesign Javascript - Dipartimento Politecnico di Ingegneria e

Transcript

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: [email protected]
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
(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
(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 <script>
• In file esterni al documento (X)HTML
(solitamente con estensione js)
Il tag <script>: 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 </script> è sempre
obbligatoria
Un esempio di script
<script type=”text/javascript>
<!-document.write(“Ciao mondo!”);
//-->
</script>
Il tag <noscript>
• Per compatibilità verso i browser che non
supportano Javascript è possibile specificare
un contenuto alternativo utilizzando il tag
<noscript>
Dove inserire il codice
Javascript
• Può essere utilizzato in qualunque punto di
un documento (X)HTML
• Nel caso si trovi nell’<head> viene
eseguito prima di visualizzare la pagina
• Nel caso sia nel <body> 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.
<ul>
<li>1</li>
<li>2</li>
<li>2</li>
</ul>
•
(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
<html>
<head>
<title>Esempio DOM</title>
</head>
<body>
<h1>Questo è un esempio di documento</h1>
<p>Con un <em>solo</em> paragrafo</p>

</body>
</html>
L’albero del documento
Document
Element
Text
Comment
document
html
head
title
Esempio
DOM
body
h1
Questo è un
esempio
di documento
p
Con un
em
solo

paragrafo
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 <a>) in
un’area prestabilita della pagina. Attenzione
agli attributi (<a>, 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

WebDesign Javascript - Dipartimento Politecnico di Ingegneria e

Transcript

Documenti analoghi

Reindirizzamento di Url

Integrazione FastBooking Hotel

Verifica HTML-Javascript

Pagina 1 di 1 JavaScript Utility Software Suite informatore: Ultima

Esercitazione Calcolo numerico - n. 1 Javascript - Octave

Il debugger: trovare gli errori

Test sulle conoscenze in JAVASCRIPT

progetto di applicazioni javascript full stack

Informatica 2 (WEB) Esercitazione n. 2: Cambio dello sfondo

Istruzioni su come abilitare i javascript È necessario che JavaScript

Diapositiva 1 - Dipartimento di Scienze Ambientali, Informatica e