Politecnico di Milano Facoltà del Design Bovisa. Ing. Marco Funaro Dipartimento di Elettronica e Informazione.

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Politecnico di Milano Facoltà del Design Bovisa. Ing. Marco Funaro Dipartimento di Elettronica e Informazione."

Tommasa Massa
5 anni fa
Visualizzazioni

1 Introduzione a JavaScript Facoltà del Design Bovisa Ing. Marco Funaro Dipartimento di Elettronica e Informazione funaro@elet.polimi.it

2 Un po di storia Introdotto per la prima volta nel 1995 per Netscape Navigator sotto il nome di LiveScript Il nome fu cambiato nel Dicembre 1995, probabilmente una mossa di marketing condiviso da NetScape e Sun Microsoft svilluppò una sua versione chiamata Jscript, rilasciata nell Agosto 1996 Netscape chiese a ECMA International di standardizzare i vari dialetti sorti nel frattempo La versione standardizzata si chiama ECMAScript ma JavaScript è rimasto il nome più utilizzato Elementi di Informatica e Reti di Calcolatori 2

3 Cosa NON è JavaScript? JavaScript NON è Java Lo scopo è diverso (client-side scripting Vs general purpose) La tecnologia usata è diversa (browser Vs Virtual Machine) Enormi differenze a livello di linguaggio Elementi di Informatica e Reti di Calcolatori 3

4 Cos è JavaScript? Un linguaggio formale (lo è anche HTML) Un linguaggio di programmazione(html è un linguaggio di markup) Un linguaggio di scripting lato client: Permette l interazione con l utente senza ricaricare la pagina e quindi chiedere l aiuto del server Permette di manipolare sia gli elementi/attributi di HTML che le direttive CSS associate ad una pagina Elementi di Informatica e Reti di Calcolatori 4

5 Esecuzione di JavaScript Il browser di incarica di interpretare i programmi JS JS è un linguaggio interpretato quindi per funzionare ha bisogno di un interprete implementato all interno del browser che: Legga le istruzioni una per volta Ne comprenda il significato Compia le azioni di basso livello (linguaggio macchina) per eseguire quanto stabilito dalle operazioni Da distinguere dai linguaggi compilati (v. slide su linguaggi di programmazione) Elementi di Informatica e Reti di Calcolatori 5

6 JS nel corso Creeremo pagine dinamiche ma soprattutto impareremo i principi base della programmazione Elementi di Informatica e Reti di Calcolatori 6

7 DOM Il DOM (Document Object Model) è il meccanismo con consente a JavaScript di identificare a manipolare gli elementi delle pagine HTML Ogni pagina HTML può essere rappresentata come un albero Ogni componente dell albero può essere letto e modificato per ottenere cambiamenti nel codice HTML della pagina Elementi di Informatica e Reti di Calcolatori 7

8 DOM Esempio <html> <head> <title> Title</title> </head> <body> <table > <tr> <td > a </td> <td> b </td> </tr> </table> </body> </html> Elementi di Informatica e Reti di Calcolatori 8

9 DOM Struttura Ogni elemento nel DOM di una pagina è un oggetto Un oggetto è la rappresentazione digitale di concetti(anche astratti) del mondo reale Ogni oggetto è dotato di: Attributi: informazioni sull oggetto (e.g., il nome di un elemento HTML, il suo tipo oppure i suoi vicini nell albero) Metodi: le operazioni che si possono compiere su un oggetto (vedremo più avanti ) Per accedere a metodi ed attributi si usa la dot notation nomeoggetto.nomeattributo Elementi di Informatica e Reti di Calcolatori 9

10 DOM Attributi Ogni oggetto in un DOM ha i seguenti attributi: nodename Nome dell elemento nodevalue Valore contenuto nell elemento parentnode Il nodo padre childnodes I nodi figli firstchild Il figlio più a sinistra lastchild Il figlio più a destra innerhtml Il codice HTML contenuto nel nodo Elementi di Informatica e Reti di Calcolatori 10

11 DOM Oggetti predefiniti Esistono degli oggetti predefiniti che permettono di: Manipolare l intera pagina document Recuperare informazioni sul browser navigator Manipolare la finestra del browser window Elementi di Informatica e Reti di Calcolatori 11

12 DOM document Attributi: domain nome di dominio della pagina title titolo della pagina URL URL della pagina referrer indirizzo della pagina bgcolor il colore dello sfondo della pagina Metodi: write() scrive qualcosa sulla pagina writeln() scrive qualcosa e va a capo getelementid() recupera un elemento dal suo id Elementi di Informatica e Reti di Calcolatori 12

13 DOM navigator & window navigator : appname Nome del browser platform Il nome del sistema operativo useragent Le info mandate dal browser al server window: alert() Fa apparire un pop-up Elementi di Informatica e Reti di Calcolatori 13

Documenti analoghi

Prof. Pagani Corrado JAVASCRIPT DOCUMENT OBJECT MODEL

Prof. Pagani Corrado JAVASCRIPT DOCUMENT OBJECT MODEL DOCUMENT OBJECT MODEL (DOM) DOM fornisce una rappresentazione del documento HTML in composizione gerarchica di oggetti (DOM TREE). Questo albero di