Your SlideShare is downloading. ×
0
Javascript


Autore: Giuseppe Dell’Abate
Principi di base
Diffusione di Internet
Negli anni ‘90 la crescente diffusione di internet viene progressivamente
supportata da vari fattor...
Lato Client e lato Server
Tecnologie lato client:
    Nelle tecnologie lato client la dinamicità e l’interazione con l’ute...
Lato Client e lato Server
Tecnologie miste:
    Le tecnologie miste fanno uso di plugin sia lato client che lato server
  ...
Nascita di Javascript
Data la forte diffusione di linguaggi di scripting che, inseriti nel
codice HTML, permettono all’ute...
Vantaggi e Svantaggi
Il linguaggio di scripting, rispetto al linguaggio di programmazione,
presenta:
Vantaggi:
      Sicur...
Caratteristiche
Javascript presenta diverse caratteristiche:
    E’ un linguaggio di scripting
         Consente di effett...
Versioni e limiti
Nel 1996 Netscape sottopose JavaScript al processo di
standardizzazione da parte dell’ECMA
Nel giugno 19...
Motori Javascript
Javascript è un linguaggio interpretato che necessita di un “motore”
di esecuzione che esegua il codice ...
Primi script
Il browser riconosce i codice Javascript in quanto viene utilizzato il
tag HTML
      <script> …codice javasc...
Primi script
    Per essere sicuri che lo script venga eseguito utilizzando il motore
    javascript presente nel browser,...
Primi script
File MiaProva.html
<html>
<head>
<title>MiaProva</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
                ...
Livelli
La specifica ECMAScript ha standardizzato le istruzioni che
rappresentano il CORE di Javascript, ossia le istruzio...
La sintassi
In ogni linguaggio occorre definire :
     Il soggetto: colui che esegui l’azione
     Il verbo: l’azione che ...
La sintassi
Dati: rappresentano i valori che sono oggetto della nostra
elaborazione.
     Ogni dato viene identificato da ...
La sintassi
Nome:
     Non possono utilizzare dei nomi riservati dal linguaggio
     Non è possibile utilizzare spazi all’...
La sintassi
La visibilità delle variabili varia a seconda del blocco di codice in cui
viene dichiarata:
           { //non...
La sintassi
Le istruzioni elementari si classificano in:
     Unari : richiedono un dato in ingresso (++, --, -)
         ...
Strutture di controllo
   Le funzioni: consentono di modulare un blocco di codice e poterlo
   riutilizzare più volte.
   ...
Strutture di controllo
Javascript non è un linguaggio tipizzato e così come non è
necessario dichiarare il tipo di dato ( ...
Strutture di controllo
    Istruzioni condizionali: consentono di prendere delle decisioni in
    base ai dati inseriti
  ...
Strutture di controllo
Istruzioni di selezione: permette di verificare i possibili valori
dell'espressione presa in consid...
Strutture di controllo
    Istruzioni di loop : consentono di reiterare un blocco di istruzioni
    fino a quando una cond...
Strutture di controllo
   Istruzioni for: consentono di reiterare un blocco di istruzioni un
   numero finito di volte
   ...
Gli oggetti
Javascript è un linguaggio basato ad oggetti, questo significa che è
possibile creare o utilizzare degli ogget...
Gli oggetti
Javascript è un linguaggio non tipizzato che non consente di create dei tipi
ma è possibile creare degli ogget...
Gli Array
L’oggetto Array consente di creare un array e di gestirlo tramite i propri
metodi
Un array è una lista di valori...
Array mono-dimensionali
Per definire un array e' possibile usare una di queste sintassi:

Creare un oggetto Array vuoto
  ...
Array mono-dimensionali
Per popolare o riassegnare dei valori alll'array creato precedentemente
occorre usare questa sinta...
Array bi-dimensionali
E' possibile creare un array bi-dimensionale assegnando ad un elemento
dell'array un nuovo array, us...
Array bi-dimensionali
Per popolare o riassegnare dei valori all'array bi-dimensionale creato
precedentemente occorre indic...
Array bi-dimensionali -
          rettangolari
Sono quegli array che hanno uguale dimensione orizzontate, esempio:

myArra...
Array bi-dimensionali –
        non rettangolari
Sono quegli array che NON hanno uguale dimensione orizzontate,
esempio:

...
Iterare su Array
     E' possibile iterare su un array mono-dimensionale usando il ciclo "for",
              myArray = ne...
Iterare su Array
     E' possibile iterare su un array bi-dimensionale usando il ciclo "for",
          myArray = new Arra...
Array dinamici
   E' possibile:
    1. creare array di dimensione variabile in base alla dimensione di
        precedenti ...
Gli Array
I metodi dell’oggetto Array sono
    concat unisce 2 array e ritorna un nuovo array
    join collega tutti gli e...
Boolean e Date
Boolean
    Definisce un tipo boleano che può catturare valori true/false
    booleanObjectName = new Boole...
Math
Math
   Questo oggetto consente di poter invocare tutti quei metodi che
   possono essere utilizzati per effettuare c...
Number e String
Number
    Viene utilizzato per rappresentare dei numeri e poter li manipolare facilmente:
    MAX_VALUE r...
String
String
    anchor crea una ancora HTML
    big, blink, bold, fixed, italics, crea corrispondenti tag HTML
    small...
Gli oggetti
E’ consentito, per lo sviluppatore, creare dei proprio oggetti da poter
riutilizzare come un libreria oppure d...
1) new Object()
var Anagrafica = new Object();
Anagrafica.Anagrafica = function(Nome, Giorno, Mese, Anno) {
this.Nome = No...
2) Oggetti letterali
var Anagrafica = {
Anagrafica: function(Nome, Giorno, Mese, Anno) {
this.Nome = Nome;
this.Giorno = G...
3) Funzioni di oggetti
function StampaOggetto () {
      document.write ("Dati in archivio:");
      document.write ("<BR>...
Il BOM
Javascript prevede 3 tipologie di oggetti:
    Ereditati dalle librerie CORE
    Creati dallo sviluppatore
    Crea...
Gli oggetti BOM
Quando programmate con JavaScript dovete immaginare che la
pagina del browser sia formata da vari oggetti ...
L’oggetto navigator
L’oggetto navigator serve per ottenere delle informazioni sul browser e
sulla configurazione del siste...
L’oggetto navigator
    platform Sistema operativo
    systemLanguage Lingua del sistema operativo
    userAgent user-agen...
L’oggetto window
L’oggetto window è
l'oggetto di massimo livello
nella gerarchia dei clienti di
Javascript.
Un oggetto win...
L’oggetto window
Frames e finestre
   frames Un raggruppamento (array) che riflette tutti i frame della
   finestra.
   le...
L’oggetto window
Messaggi utente
   alert Mostra una casella-dialogo di Allarme (Alert Box), con un
   messaggio e un bott...
L’oggetto window
Barre
    statusbar Rappresenta la barra di status della finestra del browser.
    personalbar Rappresent...
L’oggetto window
Timeout ed intervalli
   clearTimeout Cancella una scadenza di tempo che era stata
   inserita con il met...
L’oggetto window
Gestione finestre
    open Apre una nuova finestra del web browser.
    close Chiude la finestra indicata...
L’oggetto window
Eventi sulle finestre
   onDragDrop L'utente rilascia un oggetto, per esempio un file, sulla
   finestra ...
L’oggetto window
Gestori eventi
   captureEvents Permette alla finestra o al documento di catturare
   tutti gli eventi de...
L’oggetto document
L’oggetto document permette di ottenere un riferimento al documento
HTML ed agli elementi definiti in e...
L’oggetto document
Tutti gli elementi presentano
     proprietà:
           name: ricava il nome del campo
           valu...
L’oggetto document
Esempio di oggetto document

<SCRIPT LANGUAGE="JavaScript">
function visualizza() {
alert(document.stat...
L’oggetto location
   Tale oggetto consente di ottenere informazioni sull’URL della pagina
   corrente tramite le propriet...
L’oggetto location
L’oggetto location contiene 2 metodi:
    replace(): ordina al browser di sostituire la pagina attuale ...
L’oggetto history
L’oggetto history da accesso limitato ai siti visitati dal browser.
Per motivi di sicurezza è possibile ...
L’oggetto screen
L’oggetto screen consente di avere informazioni sulla dimensione dello
schermo dell’utente in base alla c...
L’oggetto screen
Proprietà
    scroll Fa scorrere una finestra secondo una coordinata specificata.
    innerHeight Specifi...
L’oggetto screen
Metodi di windows da utilizzare
   moveBy() Muove la finestra secondo quantità specificate.
   moveTo () ...
I Cookies
I Cookies consentono di conservare nel browser dell’utente delle
informazioni che possono essere utilizzate nel ...
I Cookies
function setCookie(NameOfCookie, value, expiredays) {
var ExpireDate = new Date ();
ExpireDate.setTime(ExpireDat...
I Cookies
function getCookie(NameOfCookie){
if (document.cookie.length > 0) {
begin = document.cookie.indexOf(NameOfCookie...
Gli eventi
     In seguito alle azioni che decide di effettuare l’utente, vengono a
     crearsi degli eventi che devono e...
Gli eventi
Nel corso del tempo il numero degli eventi è progressivamente
aumentato
Possiamo distinguerli in 5 categorie:
 ...
Gli eventi
Eventi di sistema :
   onLoad: si attiva quando la pagina html viene caricata
   onUnload: si attiva quando la ...
Gli eventi
Eventi attivabili alle modifiche dell’utente:
   onChange: si attiva quando l’utente effettua delle modifiche a...
Il DOM
Il DOM (Document Object Model) è il frutto di una specifica del W3C
per consentire di navigare il documento HTML co...
Il DOM
Il DOM
Per ogni elemento di un albero DOM è possibile accedere,
modificarlo, cancellarlo e ricrearlo
Il primo elemento si ...
Il DOM
Proprietà DOM
   x.innerHTML - il codice html dell'elemento x
   x.nodeName - il nome di x
   x.nodeValue - il valo...
Il DOM
<html>
<body><p align="center" id="ciccio"><b>prova</b></p></body>

    <script language="javascript">
    alert(do...
Corso Javascript
Corso Javascript
Corso Javascript
Corso Javascript
Corso Javascript
Corso Javascript
Corso Javascript
Corso Javascript
Corso Javascript
Corso Javascript
Corso Javascript
Upcoming SlideShare
Loading in...5
×

Corso Javascript

4,410

Published on

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,410
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
122
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Corso Javascript"

  1. 1. Javascript Autore: Giuseppe Dell’Abate
  2. 2. Principi di base
  3. 3. Diffusione di Internet Negli anni ‘90 la crescente diffusione di internet viene progressivamente supportata da vari fattori: L’affermazione del linguaggio HTML per la realizzazione dei siti web in modalità statica La diffusione di estensioni dinamiche D-HTML per rendere “meno” statiche le pagine HTML lato client L’evoluzione di linguaggi di scripting per il supporto di pagine dinamiche lato client Lo sviluppo di nuove tecnologie web (Servlet, Applet, ASP) per realizzare il dinamismo delle pagine lato client e lato server
  4. 4. Lato Client e lato Server Tecnologie lato client: Nelle tecnologie lato client la dinamicità e l’interazione con l’utente sono gestite direttamente da codice eseguito dal client o da un suo plugin. Attraverso l’utilizzo di: Linguaggi di scripting: Javascript , VBscript, Jscript Plugins dei Browser: JVM per esecuzione di Applet Tecnologie lato server: Nelle tecnologie lato server, il client ha un ruolo essenzialmente passivo ed è il server a gestire la parte dinamica. Attraverso l’utilizzo di: Common Gateway Interface, le Active Server Pages (ASP) di Microsoft, le Servlet e le Java Server Pages
  5. 5. Lato Client e lato Server Tecnologie miste: Le tecnologie miste fanno uso di plugin sia lato client che lato server che interagiscono direttamente tra loro scavalcando il normale canale di comunicazione client–server Attraverso: L’uso congiunto di Applet e Servlet Java. Real Player, Macromedia Flash, ecc., i quali consentono al server di inviare e al client di ricevere, suoni e animazioni
  6. 6. Nascita di Javascript Data la forte diffusione di linguaggi di scripting che, inseriti nel codice HTML, permettono all’utente di interagire con la rete, occorre istruire i browser alla comprensione di questi nuovi linguaggi Nel 1995 Brenda Eich della Netscape Communication Corporation sviluppò Javascript e lo introdusse nel browser, inizialmente con il nome di Mocha, successivamente di LiveScript e solo in seguito rinominato Javascript Nel 1995 Sun Microsystem introdusse le Applet Java che permettevano all’utente di interagire, sempre lato client. Microsoft che disponeva di un browser molto limitato, produsse JScript che ebbe però poco successo
  7. 7. Vantaggi e Svantaggi Il linguaggio di scripting, rispetto al linguaggio di programmazione, presenta: Vantaggi: Sicurezza: non può accedere a informazioni riservate Visibilità: codice in chiaro ed in continua evoluzione Lato Client: non carica il server Svantaggi: Limitate capacità: deve delegare i linguaggi di programmazione per effettuare altre operazioni Download totale: deve essere scaricato tutto il codice per interpretarlo Lato Client: può caricare eccessivamente il client
  8. 8. Caratteristiche Javascript presenta diverse caratteristiche: E’ un linguaggio di scripting Consente di effettuare alcune operazioni ma non di gestire completamente tutte le funzionalità messe a disposizione dal Sistema Operativo E’ basato sugli oggetti Gli oggetti vengono utilizzati per la programmazione ma non è possibile sfruttare polimorfismo, ereditarietà, tipizzazione E’ guidato dagli eventi Gli eventi consentono di eseguire delle azioni E’ indipendente dalla piattaforma Tutti i browser che supportano la specifica sanno eseguire lo script, indipendentemente dal Sistema Operativo residente E’ standardizzato La ECMA ha standardizzato Javascript nel 1997 con il nome ECMAScript ed inoltre è uno standard ISO
  9. 9. Versioni e limiti Nel 1996 Netscape sottopose JavaScript al processo di standardizzazione da parte dell’ECMA Nel giugno 1997 fu adottata la versione 1.1 e fu definita ECMAScript o ECMA-262 Le versioni devono essere recepite nei browser per essere adottate. Solo la versione javascript 1.1 è stata recepita da tutti i browser. Solo la parte CORE fa parte dello standard, quindi solo le istruzioni di base del linguaggio (non l’oggetto windows ! )
  10. 10. Motori Javascript Javascript è un linguaggio interpretato che necessita di un “motore” di esecuzione che esegua il codice sorgente. I browser incorporano un motore javascript che ha recepito la specifica dell’ECMA L’engine solitamente è sviluppato in C e prevede la compilazione JIT: Opera 10: utilizza Carakan, prima (v.9) Linear B, ancor prima (v.8 e v.7) Futhark Internet Explorer 9 : utilizza Chakra, prima (v.8) JScript Mozilla Firefox 3.5 utilizza TraceMonkey, prima (v.3) SpiderMonkey Google Chrome utilizza V8
  11. 11. Primi script Il browser riconosce i codice Javascript in quanto viene utilizzato il tag HTML <script> …codice javascript … </script> Se il browser non supporta lo script allora visualizzerà il codice senza interpretarlo Per evitare questo problema il codice deve essere commentato <script> <!--…codice javascript… --> </script> Se il browser non supporta lo script allora eseguirà il tag <noscript> che informerà l’utente dei limiti del suo browser. <noscript> Il browser non supporta Javascript </noscript>
  12. 12. Primi script Per essere sicuri che lo script venga eseguito utilizzando il motore javascript presente nel browser, verrà specificato il linguaggio utilizzato: <script language=“Javascript1.1”><!-- ... --> </script> Javascript può essere impiegato in una pagina HTML in 4 modi: 1. Utilizzando il tag <script> ed inserendo nell’elemento il codice 2. Utilizzando il tag <script> ed importando una pagina javascript esterna 3. Utilizzando la parola chiave “javascript:” prima della sua invocazione. 4. Utilizzando l’attivazione di un evento: onmouseover ecc
  13. 13. Primi script File MiaProva.html <html> <head> <title>MiaProva</title> <SCRIPT LANGUAGE="JavaScript"> <!-- 1) codice function prova() { alert("Ciao Mondo!"); } //--> </SCRIPT> 2) import <SCRIPT LANGUAGE="JavaScript" src="mio.js"></SCRIPT> </head> <BODY> 3) key <A HREF="javascript:alert('Hello')">Hello World!</A> javascript <A HREF=“#” onclick=“prova()">Ciao Mondo!</A> </BODY> </html> 4) evento File mio.js alert( “Hello World!");
  14. 14. Livelli La specifica ECMAScript ha standardizzato le istruzioni che rappresentano il CORE di Javascript, ossia le istruzioni tipiche di un linguaggio di programmazione (tipi, array, iterazioni, condizioni) ma NON la gestione della pagina ad opera del Browser poiché non è disciplinata ed è stata gestita dai vendor che hanno creato degli oggetti ad-hoc determinando l’insorgere del BOM. Il BOM (Browser Object Model) è quella parte di Javascript che consente l’interazione con il browser tramite l’oggetto “window”. Non è previsto nessuno standard pertanto segue solo le scelte che sono state effettuate dai vendor (Microsoft, Netscape). Tali aspetti sono stati presi in carico dal W3C per determinare uno standard ed è stato creato il DOM. Il DOM (Document Object Model) è quella parte di Javascript standardizzata dal W3C che prevede di gestire il documento HTML come XML e di navigarlo e modificarlo in modo più efficiente rispetto al BOM.
  15. 15. La sintassi In ogni linguaggio occorre definire : Il soggetto: colui che esegui l’azione Il verbo: l’azione che sarà effettuata Nei linguaggi di programmazione questo viene tradotto in Dati: rappresentano i valori che sono oggetto della nostra elaborazione. Istruzioni: rappresentano l’elaborazione, l’algoritmo che dovrà essere applicato ai dati .
  16. 16. La sintassi Dati: rappresentano i valori che sono oggetto della nostra elaborazione. Ogni dato viene identificato da un tipo che identifica la tipologia di valori Un nome che serve per identificare univocamente il nostro dato Un valore che indica il valore che abbiamo scelto di conservare A seconda che il loro valore sia modificabile o meno abbiamo variabili e costanti Istruzioni: rappresentano l’elaborazione, l’algoritmo che dovrà essere applicato ai dati . Possono distinguersi in istruzioni: elementari: che vengono messi a disposizione dal linguaggio utilizzato (operatori) complesse: sono blocchi di istruzioni che si ha necessità di utilizzare più volte
  17. 17. La sintassi Nome: Non possono utilizzare dei nomi riservati dal linguaggio Non è possibile utilizzare spazi all’interno del nome Assegnazione Utilizziamo l’operatore = per indicare che un valore deve essere conservato (assegnato ) ad un nome Tipi di valori in Javascript: Intero: rappresenta l’insieme dei numeri interi Decimali: rappresenta l’insieme di numeri reali Logico: è un insieme contenente valori vero o falso Stringa: rappresenta un insieme costituito di caratteri Undefined: rappresenta l’assenza di valore null: rappresenta un valore volutamente vuoto
  18. 18. La sintassi La visibilità delle variabili varia a seconda del blocco di codice in cui viene dichiarata: { //non vedo la variabile pippo { var pippo=1; vedo la variabile pippo {//vedo la variabile pippo } {//non vedo la variabile pippo } //non vedo la variabile pippo } La variabile pippo è visibile solo dal blocco che definisce la variabile ed in quelli contenuti in esso.
  19. 19. La sintassi Le istruzioni elementari si classificano in: Unari : richiedono un dato in ingresso (++, --, -) indice++ Binari : richiedono due dati in ingresso (=, +, -, *, /, %) var indice = 0; Ternari : richiedono tre dati in ingresso (? : ) var scelta = (indice==0) ? true : false; Booleani: restituiscono un valore booleano (==, !=, <, <=, >, >=) if ( scelta == true ) alert(‘vero!’) Logici: richiedono e restituiscono valori booleani (&&, ||, !) if ( scelta == true && indice == 0) alert(‘vero!’)
  20. 20. Strutture di controllo Le funzioni: consentono di modulare un blocco di codice e poterlo riutilizzare più volte. function nome_funzione (parametri di ingresso) { //blocco di codice return valore_restituito; } Esempio: function moltiplicazione (a, b) { c =a*b; return c; }
  21. 21. Strutture di controllo Javascript non è un linguaggio tipizzato e così come non è necessario dichiarare il tipo di dato ( intero, stringa, booleano ) non è necessario dichiarare il tipo di ritorno di una funzione. Pertanto le funzioni possono tornare diversi tipi di dato o non tornarlo affatto: function moltiplicazione (a, b, op) { If (op==‘molt’) return (a*b); else if (op==‘add’) return (“la somma è “ + a+b); } function(5,6,’molt’) function(5,6,add’) function(5,6,’err’)
  22. 22. Strutture di controllo Istruzioni condizionali: consentono di prendere delle decisioni in base ai dati inseriti if(condizione) { //blocco istruzione } else { //blocco istruzione } Per esempio: a=window.prompt(“primo valore”,0); b=window.prompt(“primo valore”,0); if (a<b) document.write(a + “ è minore di “+ b); else document.write(a + “ è maggiore di “+ b);
  23. 23. Strutture di controllo Istruzioni di selezione: permette di verificare i possibili valori dell'espressione presa in considerazione Sintassi: Esempio: switch (espressione) { var a = 1; case val1: switch (a) { case 0: istruzioni1; break alert("a = zero");break; ... case 1: case val_n: alert("a = uno");break; istruzioni_n; break case 2: default: alert("a = due");break; case 3: istruzioni alert("a = tre");break; } default: alert("a maggiore di 3"); }
  24. 24. Strutture di controllo Istruzioni di loop : consentono di reiterare un blocco di istruzioni fino a quando una condizione risulti vera: while(condizione) { //blocco di codice } Esempio: condizione = true; while(condizione) { a=window.prompt("Indovina il numero", a); if (a==5) document.write("esatto"); condizione =false; }
  25. 25. Strutture di controllo Istruzioni for: consentono di reiterare un blocco di istruzioni un numero finito di volte for(definizione di variabile, condizione, incremento) { //blocco di codice } Esempio: for(var i=0;i<10;i++) { a=window.prompt(“Inserisci il numero", 0); document.write(“numero “ + (a+1) + “=“ + i); condizione =false; }
  26. 26. Gli oggetti Javascript è un linguaggio basato ad oggetti, questo significa che è possibile creare o utilizzare degli oggetti esistenti per svolgere alcune funzionalità. Ogni oggetto è costituito da proprietà che rappresentano dei valori associati ad un oggetto Ogni oggetto è costituito da metodi che forniscono il comportamento del nostro oggetto
  27. 27. Gli oggetti Javascript è un linguaggio non tipizzato che non consente di create dei tipi ma è possibile creare degli oggetti La libreria Core mette a disposizione degli oggetti che consentono allo sviluppatore di facilitare l’attività di sviluppo. Tali oggetto sono: Array Boolean Date Math Number String
  28. 28. Gli Array L’oggetto Array consente di creare un array e di gestirlo tramite i propri metodi Un array è una lista di valori che possono essere referenziati con un nome ed un indice 1) Definizione di array nome = new Array(‘prova1’, ‘prova2’); 2) Definizione di array nome = new Array(2); nome[0]= ‘nome1’ nome[1]= ‘nome2’
  29. 29. Array mono-dimensionali Per definire un array e' possibile usare una di queste sintassi: Creare un oggetto Array vuoto nome_variabile = new Array( ); myArray = new Array(); Creare un oggetto Array vuoto di 3 elementi nome_variabile = new Array( dimensione_array ); myArray = new Array(3); Creare un oggetto Array vuoto di N elementi valorizzati nome_variabile = new Array( valore1, valore2, valore3 ); myArray = new Array('pippo', 'pluto', 'paperino');
  30. 30. Array mono-dimensionali Per popolare o riassegnare dei valori alll'array creato precedentemente occorre usare questa sintassi: nome_variabile[ indice_array] = valore; Per assegnare il valore "pippo" alla variabile myArray con indice 0 (indice di partenza dell'array) myArray[0] = "pippo";
  31. 31. Array bi-dimensionali E' possibile creare un array bi-dimensionale assegnando ad un elemento dell'array un nuovo array, usando questa sintassi: myArray = new Array(); myArray[0] = new Array() oppure in questo altro modo, che consente di creare un oggetto Array nidificato myArray = new Array( new Array() );
  32. 32. Array bi-dimensionali Per popolare o riassegnare dei valori all'array bi-dimensionale creato precedentemente occorre indicare questa sintassi: nome_variabile[ indice_array ] [ indice_array ] = valore; Questa istruzione serve per assegnare il valore "pippo" alla variabile myArray con indice [0][0] myArray[0][0] = "pippo"; Sarebbe stato possibile assegnare il valore in sede di creazione, in questo modo: myArray = new Array( new Array("pippo") );
  33. 33. Array bi-dimensionali - rettangolari Sono quegli array che hanno uguale dimensione orizzontate, esempio: myArray = new Array(); myArray[0] = new Array(2) myArray[0][0] = 'prova1' myArray[0][1] = 'prova2' myArray[1] = new Array(2) myArray[1][0] = 'prova3' myArray[1][1] = 'prova4'
  34. 34. Array bi-dimensionali – non rettangolari Sono quegli array che NON hanno uguale dimensione orizzontate, esempio: myArray = new Array(); myArray[0] = new Array(2) myArray[0][0] = 'prova1' myArray[0][1] = 'prova2' myArray[1] = new Array(3) myArray[1][0] = 'prova3' myArray[1][1] = 'prova4' myArray[1][2] = 'prova5'
  35. 35. Iterare su Array E' possibile iterare su un array mono-dimensionale usando il ciclo "for", myArray = new Array("prova1 ", "prova2"); for(i = 0; i < myArray.length; i++){ document.write( myArray [i] ); } in questo caso verrà stampata la stringa: prova1 prova2
  36. 36. Iterare su Array E' possibile iterare su un array bi-dimensionale usando il ciclo "for", myArray = new Array(new Array('prova1 ','prova2 '), new Array ('prova3 ','prova4 ') ); for(i = 0; i < myArray.length; i++){ for(y = 0; y < myArray[i].length; y++){ document.write( myArray[i][y] ); } } in questo caso verrà stampata la stringa: prova1 prova2 prova3 prova4
  37. 37. Array dinamici E' possibile: 1. creare array di dimensione variabile in base alla dimensione di precedenti array, 2. assegnare un array ad una nuova variabile 1. Creazione un Array dal nome myArray2 di dimensione corrispondente a myArray MA VUOTO myArray = new Array('prova1 ','prova2 ','prova3 '); myArray2 = new Array( myArray.length ); 2. Assegnazione alla variabile myArray3 dello stesso puntatore della variabile myArray, quindi con lo stesso contenuto ('prova1 ','prova2 ','prova3 ') myArray3 = myArray;
  38. 38. Gli Array I metodi dell’oggetto Array sono concat unisce 2 array e ritorna un nuovo array join collega tutti gli elementi di un array in una stringa pop rimuove l’ultimo elemento dall’array e lo ritorna push aggiunge un elemento all’array e lo ritorna. reverse inverte l’ordine degli elementi dall’array shift rimuove il primo elemento dall’array e lo ritorna. slice estrae una sezione dell’array e lo ritorna splice aggiunge o rimuove elementi all’array sort ordina gli elementi dell’array unshift aggiunge un elemento all’array e ritorna la lunghezza
  39. 39. Boolean e Date Boolean Definisce un tipo boleano che può catturare valori true/false booleanObjectName = new Boolean( true ); Se il valore è omesso allora avrà valore false Date Permette di creare un oggetto di tipo Data che, come Java, decorre dal 1/1/1970 ed è espresso in milli secondi. Presenta solo metodi e non proprietà var time = new Date() var hour = time.getHours() var minute = time.getMinutes() var second = time.getSeconds() var temp = "" + ((hour > 12) ? hour - 12 : hour) temp += ((minute < 10) ? ":0" : ":") + minute temp += ((second < 10) ? ":0" : ":") + second temp += (hour >= 12) ? " P.M." : " A.M." alert(temp)
  40. 40. Math Math Questo oggetto consente di poter invocare tutti quei metodi che possono essere utilizzati per effettuare calcoli matematici abs valore assoluto sin, cos, tan funzioni trigonometriche standard acos, asin, atan funzioni trigonometriche inverse exp, log esponente e logaritmo naturale ceil numero intero massimo floor numero intero minimo min, max inferiore o maggiore pow esponenziale round arrotondamento all'intero + vicino sqrt radice quadrata
  41. 41. Number e String Number Viene utilizzato per rappresentare dei numeri e poter li manipolare facilmente: MAX_VALUE rappresenta il numero + grande MIN_VALUE rappresenta il numero + piccolo NaN Special “not a number” value NEGATIVE_INFINITY valure infinito negativo POSITIVE_INFINITY valore infinito String Consente di creare degli oggetti stringa e di manipolarli tramite un insieme di metodi a = new String(“prova”); length ritorna la lunghezza della stringa toUpperCase/toLowerCase trasforma in maiuscolo/minuscolo i caratteri substring(start, end) seleziona una parte di stringa dal punto start ad end
  42. 42. String String anchor crea una ancora HTML big, blink, bold, fixed, italics, crea corrispondenti tag HTML small, strike, sub, sup String formattate in HTML charAt, charCodeAt ritorna il carattere in data posizione indexOf, lastIndexOf ritorna la posizione di un carattere link crea un HTML hyperlink concat concatena 2 stringhe split divide una stringa in un array di stringhe slice estrae una sezione di stringa match, replace, search usato con le espressioni regolari
  43. 43. Gli oggetti E’ consentito, per lo sviluppatore, creare dei proprio oggetti da poter riutilizzare come un libreria oppure da potere mettere a disposizione della comunità degli sviluppatori La definizione di un oggetto può essere effettuata in 3 modi distinti: 1. Utilizzando l’oggetto Object() ed aggiungere proprietà e metodi ad esso. 2. Definendo un oggetto letterale che contenga tutte le proprietà e metodi 3. Definendo una funzione che usi la logica degli oggetti ( tramite la parola chiave this, ecc)
  44. 44. 1) new Object() var Anagrafica = new Object(); Anagrafica.Anagrafica = function(Nome, Giorno, Mese, Anno) { this.Nome = Nome; this.Giorno = Giorno; this.Mese = Mese; this.Anno = Anno; }; Anagrafica.stampaOggetto = function() { document.write ("Dati in archivio:"); document.write ("<BR>Nome: "+this.Nome); document.write ("<BR>Giorno: "+this.Giorno); document.write ("<BR>Mese: "+this.Mese); document.write ("<BR>Anno: "+this.Anno); }; Anagrafica.Anagrafica("Antonio", 11, "Novembre", 1968); Anagrafica.stampaOggetto();
  45. 45. 2) Oggetti letterali var Anagrafica = { Anagrafica: function(Nome, Giorno, Mese, Anno) { this.Nome = Nome; this.Giorno = Giorno; this.Mese = Mese; this.Anno = Anno; }, StampaOggetto: function() { document.write ("Dati in archivio:"); document.write ("<BR>Nome: "+this.Nome); document.write ("<BR>Giorno: "+this.Giorno); document.write ("<BR>Mese: "+this.Mese); document.write ("<BR>Anno: "+this.Anno); } } Anagrafica.Anagrafica("Antonio", 11, "Novembre", 1968); Anagrafica.StampaOggetto();
  46. 46. 3) Funzioni di oggetti function StampaOggetto () { document.write ("Dati in archivio:"); document.write ("<BR>Nome: "+this.Nome); document.write ("<BR>Giorno: "+this.Giorno); document.write ("<BR>Mese: "+this.Mese); document.write ("<BR>Anno: "+this.Anno); } function Anagrafica (Nome, Giorno, Mese, Anno) { this.Nome = Nome; this.Giorno = Giorno; this.Mese = Mese; this.Anno = Anno; this.Visualizza = StampaOggetto; } var Antonio = new Anagrafica ("Antonio", 11, "Novembre", 1968); Antonio.Visualizza();
  47. 47. Il BOM Javascript prevede 3 tipologie di oggetti: Ereditati dalle librerie CORE Creati dallo sviluppatore Creati dal Browser ( BOM ) Questa terza tipologia di oggetti è costituita da tutti quegli oggetti che vengono creati dal browser per memorizzare il documenti HTML e tutte le informazioni relative al browser, allo schermo e necessarie per il corretto funzionamento Lo sviluppatore può interagire con questi oggetti ma, nel caso di oggetti BOM che non sono oggetto di specifica, occorre gestire le differenze esistenti tra i browser, il modo in cui tali oggetti vengono creati ed i metodi che mettono a disposizione.
  48. 48. Gli oggetti BOM Quando programmate con JavaScript dovete immaginare che la pagina del browser sia formata da vari oggetti in relazione fra loro: prima di tutto c'è il browser stesso (l'oggetto window.navigator) poi la finestra che contiene il tutto (l'oggetto window) eventuali frames (l'oggetto window.frames) il documento HTML vero e proprio (window.document) i moduli per raccogliere l'input dell'utente (document.forms ["nomeForm"]) le immagini (document.images["nomeImmagine"]) i cookie (document.cookie["nomeCookie"]) le applet (document.applets["nomeApplet"]) la barra degli indirizzi (window.location) I siti visitati del browser (window.history) Le informazioni del monitor dell’utente (window.screen)
  49. 49. L’oggetto navigator L’oggetto navigator serve per ottenere delle informazioni sul browser e sulla configurazione del sistema: Navigator Object Collections plugins[] informazioni dei plugins istallati Navigator Object Properties appCodeName Nome in codice del browser appMinorVersion Minor version del browser appName Nome del browser appVersion Piattaforma e versione del browser browserLanguage Lingua del browser cookieEnabled Abilitazione o meno dei cookies cpuClass Classe di CPU onLine Navigazione offline o online
  50. 50. L’oggetto navigator platform Sistema operativo systemLanguage Lingua del sistema operativo userAgent user-agent utilizzato userLanguage lingua di default Navigator Object Methods javaEnabled() Java abilitato
  51. 51. L’oggetto window L’oggetto window è l'oggetto di massimo livello nella gerarchia dei clienti di Javascript. Un oggetto window può rappresentare sia una finestra di livello top o un frame all'interno di un frameset.
  52. 52. L’oggetto window Frames e finestre frames Un raggruppamento (array) che riflette tutti i frame della finestra. length Il numero dei frames nella finestra. parent Un sinonimo per indicare una finestra o un frame il cui frameset contiene il frame corrente. self Un sinonimo per indicare la finestra corrente. window Un sinonimo per indicare la finestra corrente. top Un sinonimo per indicare la finestra più in alto nel browser. opener Specifica il nome della finestra di un certo documento quando una finestra viene aperta usando il metodo "open". name Un nome unico usato per riferirsi a questa finestra.
  53. 53. L’oggetto window Messaggi utente alert Mostra una casella-dialogo di Allarme (Alert Box), con un messaggio e un bottone "OK". confirm Mostra una casella-dialogo di Conferma (Confirm Box), con uno specifico messaggio e i bottoni "OK" e "Annulla". prompt Mostra una casella-dialogo di Informazione (Prompt Box) con un messaggio e una zona di inserimento dati. status defaultStatus messaggio di default mostrato sulla barra di status della finestra. status Specifica una priorità o un messaggio transitorio nella barra di status della finestra.
  54. 54. L’oggetto window Barre statusbar Rappresenta la barra di status della finestra del browser. personalbar Rappresenta la barra personale della finestra del browser (altrimenti chiamata barra delle directory). scrollbars Rappresenta le barre di scorrimento della finestra del browser. toolbar Rappresenta la barra degli strumenti della finestra del browser. locationbar Rappresenta la barra di locazione della finestra del browser. menubar Rappresenta la barra di menù della finestra del browser.
  55. 55. L’oggetto window Timeout ed intervalli clearTimeout Cancella una scadenza di tempo che era stata inserita con il metodo setTimeout. setTimeout Valuta un'espressione o richiama una funzione allo scadere di una definita quantità di millisecondi. clearInterval Cancella una scadenza di tempo che era stata inserita con il metodo setInterval . setInterval Valuta un'espressione o chiama una funzione ogni volta che una certa quantità di millisecondi è scaduta.
  56. 56. L’oggetto window Gestione finestre open Apre una nuova finestra del web browser. close Chiude la finestra indicata. closed Specifica se una finestra è stata chiusa. stop Interrompe lo scaricamento corrente. Varie print Stampa i contenuti della finestra o del frame. blur Elimina il fuoco dall'oggetto specificato. focus Mette a fuoco l'oggetto specificato. find Trova una specifica stringa di testo nei contenuti di una specifica finestra home Dirige il browser sull'URL indicato nelle preferenze come home page dell'utente.
  57. 57. L’oggetto window Eventi sulle finestre onDragDrop L'utente rilascia un oggetto, per esempio un file, sulla finestra del browser. onLoad Il browser finisce di caricare una finestra o tutti i frames all'interno di un tag FRAMESET. onMove L'utente (o il programma) sposta una finestra o un frame. onResize L'utente (o il programma) cambia le dimensioni di una finestra o di un frame onUnload L'utente fa il refresh di una finestra onBlur Un elemento di forma va fuori fuoco o quando una finestra o un frame vanno fuori fuoco. onError L'atto di scaricare un documento o un'immagine provoca un errore. onFocus Una finestra, frame o frameset riceve fuoco o quando un elemento di forma riceve un input "fuoco“.
  58. 58. L’oggetto window Gestori eventi captureEvents Permette alla finestra o al documento di catturare tutti gli eventi del tipo indicato. disableExternalCapture Disconnette la cattura di eventi esterni installata col metodo enableExternalCapture. enableExternalCapture Permette a una finestra con frames di catturare eventi in pagine caricate da locazioni diverse (servers). handleEvent Richiama lo strumento che manipola un evento (event handler) specificato. releaseEvents Mette al finestra in condizione di rilasciare eventi del tipo specificato, mandando l'evento agli oggetti più avanti nella gerarchia degli eventi. routeEvent Fa passare un evento catturato attraverso la normale gerarchia degli eventi.
  59. 59. L’oggetto document L’oggetto document permette di ottenere un riferimento al documento HTML ed agli elementi definiti in esso L'oggetto espone solo pochi metodi: open(): apre un flusso di informazione close() chiude un flusso di informazioni write() e writeln() scrivono nella pagina formattata in HTML una stringa passata come parametro. Le proprietà disponibili sono relative: 1. Agli attributi del tag <body> fgColor e bgColor si riferiscono agli attributi text e background per indicare il colore di primo piano e di sfondo della pagina 2. Alle proprietà del documento HTML title: titolo del documento HTML 3. Al contenuto del documento HTML ( segue … )
  60. 60. L’oggetto document Tutti gli elementi presentano proprietà: name: ricava il nome del campo value: imposta o ricava il valore del campo type: specifica il tipo di campo metodi: focus() e blur(): per ottenere o rilasciare il focus A seconda del tipo di elemento HTML cui ci si riferisce, è possibile gestire diverse proprietà in modo da ottenere informazioni sull’elemento in questione, per esempio: Caselle di testo <input type=text> (size, maxLength, select(), onchange) Aree di testo <textarea> (rows e cols ) Pulsanti di opzione <input type=checkbox> (checked ) Liste <select> <option> (options, selectedIndex, text , index )
  61. 61. L’oggetto document Esempio di oggetto document <SCRIPT LANGUAGE="JavaScript"> function visualizza() { alert(document.statform.userName.value) } </SCRIPT> <FORM NAME="statform"> <INPUT TYPE = "text" name = "userName" size = 20 onchange="visualizza()"> </FORM>
  62. 62. L’oggetto location Tale oggetto consente di ottenere informazioni sull’URL della pagina corrente tramite le proprietà: port href hash http://www.google.com:80/search?q=java#miotag protocol pathname hostname search
  63. 63. L’oggetto location L’oggetto location contiene 2 metodi: replace(): ordina al browser di sostituire la pagina attuale con la pagina dell’URL specificata reload(): ricarica la pagina dal server
  64. 64. L’oggetto history L’oggetto history da accesso limitato ai siti visitati dal browser. Per motivi di sicurezza è possibile sapere solo la lunghezza della history dell’utente. I metodi disponibili sono tre: go(): indica di quante pagine si vuole andare avanti o indietro back(): emula il pulsante indietro del browser di una posizione forward(): emula il pulsante avanti del browser di una posizione
  65. 65. L’oggetto screen L’oggetto screen consente di avere informazioni sulla dimensione dello schermo dell’utente in base alla configurazione attuale e potenziale, in modo da poter dimensionare in modo ottimale la dimensione del browser. Utilizzando le proprietà di questo oggetto è possibile ottenere delle informazioni utente ed utilizzando i metodi dell’oggetto window sarà possibile modificare il dimensionamento del browser
  66. 66. L’oggetto screen Proprietà scroll Fa scorrere una finestra secondo una coordinata specificata. innerHeight Specifica la dimensione verticale, in pixel, dell'area di contenuto della finestra. innerWidth Specifica la dimensione orizzontale, in pixel, dell'area di contenuto della finestra. outerHeight Specifica la dimensione verticale, in pixel, del margine esterno della finestra. outerWidth Specifica la dimensione orizzontale, in pixel, del margine esterno della finestra. pageXOffset Fornisce la posizione x corrente, in pixel, di una pagina mostrata della finestra. pageYOffset Fornisce la posizione y corrente, in pixel, di una pagina mostrata della finestra.
  67. 67. L’oggetto screen Metodi di windows da utilizzare moveBy() Muove la finestra secondo quantità specificate. moveTo () Muove l'angolo in alto a sinistra della finestra secondo le specificate coordinate dello schermo. resizeBy () Dà nuove dimensioni a un'intera finestra muovendo l'angolo in basso a destra secondo una quantità indicata. resizeTo() Dà nuove dimensioni a un'intera finestra secondo le indicate dimensioni esterne di altezza e larghezza. scrollBy() Fa scorrere l'area di visualizzazione di una finestra secondo quantità definite. scrollTo() Fa scorrere l'area di visualizzazione della finestra secondo coordinate definite, in modo che il punto indicato diventi l'angolo superiore sinistro.
  68. 68. I Cookies I Cookies consentono di conservare nel browser dell’utente delle informazioni che possono essere utilizzate nel momento in cui l’utente accede nuovamente al sito. Ogni dominio può salvare nel browser dell’utente massimo 20 cookies Si tratta di file di testo che contengono delle informazioni, quali: Nome Data di scadenza Dominio Percorso
  69. 69. I Cookies function setCookie(NameOfCookie, value, expiredays) { var ExpireDate = new Date (); ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000)); document.cookie = NameOfCookie + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString()); } function delCookie (NameOfCookie) { if (getCookie(NameOfCookie)) { document.cookie = NameOfCookie + "=" + "; expires=Thu, 01-Jan-70 00: 00:01 GMT"; } }
  70. 70. I Cookies function getCookie(NameOfCookie){ if (document.cookie.length > 0) { begin = document.cookie.indexOf(NameOfCookie+"="); if (begin != -1) { begin += NameOfCookie.length+1; end = document.cookie.indexOf(";", begin); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(begin, end)); } } return null; }
  71. 71. Gli eventi In seguito alle azioni che decide di effettuare l’utente, vengono a crearsi degli eventi che devono essere gestiti La gestione di un evento indica la necessità di richiamare delle funzioni pertanto abbiamo la presenza di handler ossia “gestori degli eventi” che hanno il compito di richiamare la funzione appropriata per quell’evento <a href=“pagina.html” onclick=”alert(‘ciao’)”>link</a> Nell’esempio precedente: onclick: è il gestore degli eventi alert(‘ciao’): è l’attività associata al verificarsi dell’evento che verrà avviata dal gestore
  72. 72. Gli eventi Nel corso del tempo il numero degli eventi è progressivamente aumentato Possiamo distinguerli in 5 categorie: Eventi di sistema : onLoad, onUnload, onAbort, onError Eventi legati al mouse: onClick, onMouseOver, onMouseOut Eventi attivabili alle modifiche dell’utente: onChange Eventi legati al fuoco: onFocus, onBlur, onSelect Eventi legati a particolari bottoni: onSubmit, onReset
  73. 73. Gli eventi Eventi di sistema : onLoad: si attiva quando la pagina html viene caricata onUnload: si attiva quando la pagina html viene abbandonata (pressione di un link, chiusura finestra) onAbort: si attiva quando l’utente preme il tasto stop e ESC onError: si attiva quando si verifica un errore durante il caricamento di un oggetto Eventi legati al mouse: onClick: si attiva quando l’utente clicca su un oggetto onMouseOver: si attiva quando l’utente passa il mouse su un oggetto onMouseOut:: si attiva quando l’utente passa il mouse lontano dall’oggetto
  74. 74. Gli eventi Eventi attivabili alle modifiche dell’utente: onChange: si attiva quando l’utente effettua delle modifiche ad un oggetto testo, area di testo, password Eventi legati al fuoco: onFocus: si attiva quando l’utente attiva un determinato oggetto onBlur: si attiva quando l’utente non utilizza un determinato oggetto onSelect: si attiva quando l’utente seleziona delle caselle di testo Eventi legati a particolari bottoni: onSubmit: quando l’utente effettua l’invio di una form onReset: quando l’utente clicca sul tasto “annulla” di una form
  75. 75. Il DOM Il DOM (Document Object Model) è il frutto di una specifica del W3C per consentire di navigare il documento HTML come una struttura XML ed accedere a tutti i suoi elementi Ancor oggi si continua ad utilizzare il BOM in quanto è più intuitivo e per problemi di compatibilità Il DOM presenta un documento HTML come una struttura ad albero composta da elementi attributi e testo Il DOM definisce una modalità standard per accedere e manipolare documenti HTML
  76. 76. Il DOM
  77. 77. Il DOM Per ogni elemento di un albero DOM è possibile accedere, modificarlo, cancellarlo e ricrearlo Il primo elemento si chiama root e non ha padre Gli elementi senza figli si chiamano leaf (foglia) Gli elementi che possiedono lo stesso padre si chiamano siblings (fratelli)
  78. 78. Il DOM Proprietà DOM x.innerHTML - il codice html dell'elemento x x.nodeName - il nome di x x.nodeValue - il valore di x x.parentNode - il nodo padre di x x.childNodes - il nodo figlio di x x.nextSibling – il successivo nodo fratello di x x.previousSibling – il successivo nodo fratello di x x.attributes - gli attributi di x Metodi DOM x.getElementById(id) - recupera il nodo in base al nome x.getElementsByTagName(name) - recupera tutti i nodi in base al nome x.appendChild(node) - inserisce un nodo figlio ad x x.removeChild(node) - rimuove un nodo figlio a x
  79. 79. Il DOM <html> <body><p align="center" id="ciccio"><b>prova</b></p></body> <script language="javascript"> alert(document.getElementById("ciccio").parentNode.nodeName ); alert(document.getElementById("ciccio").nodeName) alert(document.getElementById("ciccio").attributes[0].nodeName); alert(document.getElementById("ciccio").attributes[0].nodeValue); alert(document.getElementById("ciccio").innerHTML) alert(document.getElementById("ciccio").childNodes[0].nodeName); </script> </html>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×