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 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 <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> <!-- e un commento --> </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 <!-- e un commento --> 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
Scarica
