Programmazione lato client Java Script Java Script Netscape
![Oggetto link Viene creato l'array document. links[], ogni cella descrive un'istanza dell'oggetto link Proprietà](https://slidetodoc.com/presentation_image/0412040213fc0d9d1f24525e6ef097a7/image-64.jpg "Oggetto link Viene creato l'array document. links[], ogni cella descrive un'istanza dell'oggetto link Proprietà")
![Oggetto form Proprietà document. forms[]. length document. forms[]. action document. forms[]. method document. forms[].](https://slidetodoc.com/presentation_image/0412040213fc0d9d1f24525e6ef097a7/image-69.jpg "Oggetto form Proprietà document. forms[]. length document. forms[]. action document. forms[]. method document. forms[].")
![Oggetto form document. forms[]. elements[] è a sua volta un array con tante celle](https://slidetodoc.com/presentation_image/0412040213fc0d9d1f24525e6ef097a7/image-70.jpg "Oggetto form document. forms[]. elements[] è a sua volta un array con tante celle")
![Oggetto form: select e option … <select name=“citta” on. Change=“i=this. selected. Index; alert(this. options[i].](https://slidetodoc.com/presentation_image/0412040213fc0d9d1f24525e6ef097a7/image-79.jpg "Oggetto form: select e option … <select name=“citta” on. Change=“i=this. selected. Index; alert(this. options[i].")
![Espressioni regolari /[abc]/“a”, “b”, “c” /^a/tutte le stringhe che iniziano con “a” /a$/tutte le](https://slidetodoc.com/presentation_image/0412040213fc0d9d1f24525e6ef097a7/image-84.jpg "Espressioni regolari /[abc]/“a”, “b”, “c” /^a/tutte le stringhe che iniziano con “a” /a$/tutte le")
- Slides: 86
Programmazione lato client Java. Script
Java. Script Netscape: Java. Script Microsoft: JScript ECMAScript (ECMA-262, Edition 3, 1999) (European Computer Manufactures Association) Linguaggio di script interpretato Object. Based
Java. Script L'ambiente di esecuzione Java. Script è composto da un core (nucleo) e dall'host che interagisce con il “mondo esterno” variabili espressioni istruzioni funzioni oggetti e array core language client-side (IE, Mozilla, ecc. . . ) browser DOM Acrobat Windows Scripting Host Java 6 Helma application server XSLT ecc. . . server-side (es. IIS) HTTP Request/Response Local filesystems Session DB
Browser e Java. Script HTTP Request web server browser interprete Java. Script file HTML che contiene codice Java. Script HTTP Response
Java. Script e pagine HTML HTM L Java. Script
Dove si scrivono gli script? <script> istruzione 1; istruzione 2; istruzione 3; … </script> Gli script sono eseguiti dal browser durante la lettura del codice HTML Attenzione: uno script nella parte <head> non può fare riferimento ad oggetti (link, immagini, form) del <body> perché non sono ancora stati definiti <script type=“text/javascript”>
Dove si scrivono gli script? È possibile scrivere delle funzioni che vengono eseguite al momento del richiamo (vanno scritte prima del punto in cui vengono richiamate) Si inseriscono nella parte di <head> … oppure (opportuno) in file esterni <script src="myfile. js"></script>
Dove si scrivono gli script? Si possono assegnare come valori di particolari attributi HTML non vengono eseguiti durante la lettura del file HTML ma quando si verificano certi eventi Gestori di eventi
Gestori di eventi Durante l'interazione con il browser l'utente genera un certo numero di eventi Se nel file HTML esiste del codice Java. Script associato ad un evento questo viene eseguito <a href="" on. Mouse. Over ="codice Java. Script; " on. Mouse. Out ="codice Java. Script; " on. Click ="codice Java. Script; ">testo del link</a>
Core Java. Script
Core Java. Script Fornisce i costrutti di base di un linguaggio di programmazione: variabili, espressioni, istruzioni, … Per molti aspetti ricorda i linguaggi C e Java
Java. Script: struttura lessicale Le istruzioni devono essere separate tra loro dal ; Commenti es. // questo è un commento es. /* questo è un commento */ es. <!--questo è un commento//-->
Java. Script: struttura lessicale Gli identificatori possono iniziare con _ $ o con una lettera e non possono iniziare con un numero Non si possono usare le parole riservate Java. Script è case sensitive
Java. Script: tipi di dati Numeri (floating point, 8 byte) Infinity, -Infinity, Na. N Number. MAX_VALUE, Number. MIN_VALUE non esistono gli interi Stringhe msg = “hello world” msg. length Booleani
Java. Script: tipi di dati Array a = new Array() b = (10, “ciao”, true) Oggetti Java. Script permette al programmatore di definire i propri oggetti e fornisce anche alcuni oggetti predefiniti Permette di accedere ad altri oggetti che dipendono dall'ambiente Host (es. per manipolare documenti HTML)
Java. Script: array associativi Oggetti e array associativi sono sostanzialmente la stessa cosa Si può accedere alle proprietà degli oggetti usando 1. la notazione con il simbolo . 2. la notazione degli array associativi a = nome_oggetto[“nome_proprietà”]
Java. Script: funzioni Le funzioni Java. Script sono oggetti function quadrato(x) { return x*x; } a = quadrato(4); b = quadrato; c = b(5); Esiste il costruttore Function che accetta un elenco di argomenti, l'ultimo argomento è il corpo della funzione (si parla di funzioni anonime) f = new Function(“x”, “y”, “return x*y”; );
Oggetti built in: Date var oggi = new Date(); a = oggi. get. Date(); b = oggi. get. Day(); c = oggi. get. Full. Year(); d = oggi. get. Hours(); e = oggi. get. Time(); restituisce i millisecondi trascorsi dalla mezzanotte del 1/1/1970
Oggetti built in: Math a = Math. min(x, y); b = Math. pow(x, y); c = Math. abs(x); d = Math. random(); e = Math. PI; f = Math. E;
Oggetti built in: String var a = “Hello world”; oppure var a = new String(“Hello world); a = a. length; b = a. char. At(n); c = a. index. Of(substr); d = a. last. Index. Of(substr); a. replace(espr 1, espr 2); a. split(delimitatore);
Java. Script: variabili Java. Script è un linguaggio debolmente tipizzato i = 1; i = “Hello world”; i = true;
Java. Script: variabili Non è obbligatorio dichiarare le variabili per dichiarare una variabile si usa la parola chiave var se si introduce una variabile senza averla prima dichiarata lo spazio ad essa riservato viene allocato automaticamente nello scope globale
Java. Script: variabili Esistono variabili globali e locali All'interno delle funzioni, per essere sicuri di usare variabili locali, si devono dichiarare esplicitamente con var
Java. Script: input/output Come nel C, Java. Script non ha propri costrutti di input o output; mentre il C si affida alle librerie I/O standard, un interprete Java. Script si basa su un programma ospite in cui è integrato Se integrato in un browser Web, Java. Script si collega alle applicazioni tramite interfacce chiamate DOM (Document Object Model)
Esempi window. prompt window. confirm somma di due interi loop infinito
Client side Java. Script
Client side Java. Script Parte del linguaggio che manipola gli oggetti che vengono generati dal browser durante la lettura di pagine HTML Il browser, quando interpreta una pagina HTML, oltre a visualizzarne il contenuto, crea ed inizializza delle istanze di oggetti che rappresentano gli elementi all’interno della pagina Document Object Model
Oggetto window document link text form image radio button ……… … … … …
Oggetto window È l'oggetto principale della gerarchia degli oggetti e descrive il browser correntemente aperto Fornisce metodi e proprietà per manipolare il browser per aprire e chiudere altre finestre per la navigazione tra le pagine …
Oggetto window: metodi window. alert() window. prompt() window. confirm() window. open() window. close() window. print() window. move. By() window. move. To() window. set. Timeout()
Java. Script: input/output window. alert(“Hello world”) undefined
Java. Script: input/output window. prompt(“Dimmi il tuo nome”, ””) valore in input “” (null)
Java. Script: input/output window. confirm(“Vuoi davvero uscire? ”) true false
alert() - confirm() - prompt() Creano finestre di dialogo per l'input/output Il titolo [Java. Script Application] in queste finestre evita di scrivere programmi “Trojan horses” in cui si simulano finestre di sistema … a Trojan horse is defined as a malicious, security-breaking program that is disguised as something benign …
window. open() Permette di aprire una nuova finestra window. open(arg 1, arg 2, arg 3, arg 4) URL del documento che deve essere visualizzato nella nuova finestra
window. open() Permette di aprire una nuova finestra window. open(arg 1, arg 2, arg 3, arg 4) nome della nuova finestra
window. open() Permette di aprire una nuova finestra window. open(arg 1, arg 2, arg 3, arg 4) GUI width, height, status, scrollbars, resizable
window. open() Permette di aprire una nuova finestra window. open(arg 1, arg 2, arg 3, arg 4) booleano fornisce informazioni sulla gestione della storia delle pagine visitate (opzionale)
window. open() var fin 1 = window. open(‘miofile. html’, ’nuova’, ’width=200, height=200’); crea una nuova istanza di un oggetto window di nome fin 1
window. close() Permette di chiudere una finestra window. close() chiude la finestra che contiene l'istruzione fin 1. close() chiude una finestra di nome fin 1 precedentemente creata
window. print() Simula il pulsante Stampa del browser ed apre la finestra di dialogo per la stampa Esempi apertura di una nuova finestra apertura di due finestre
Oggetto window: proprietà window. status window. default. Status window. opener window. parent window. closed window. location window. navigator window. history window. document
Oggetto window: proprietà window. status, window. default. Status permettono di modificare il valore della barra di stato in basso window. opener restituisce un riferimento alla finestra che ha aperto quella corrente window. closed quando si chiude una finestra, la sua proprietà closed viene messa a true
window. location Si riferisce ad un oggetto che contiene le informazioni relative alla URL del documento correntemente visualizzato window. location. host window. location. href window. location. pathname window. location. protocol … Esempio: proprietà dell'oggetto location
window. navigator Si riferisce ad un oggetto che descrive il browser window. navigator. app. Name window. navigator. app. Version window. navigator. user. Agent window. navigator. app. Code. Name window. navigator. platform window. navigator. language Esempio: proprietà dell'oggetto navigator
Browser sniffing Usando l’oggetto navigator è possibile scrivere codice personalizzato per browser diversi Si riconosce il tipo di user agent e si scrivono le istruzioni opportune
Sniffer <script> // controllo il tipo di browser var temp = window. navigator. user. Agent; if (temp. index. Of("Netscape") != -1) { istruzioni per Netscape } else if (temp. index. Of("Opera") != -1) { istruzioni per Opera } else if (temp. index. Of("MSIE") != -1) { istruzioni per Explorer } </script>
window. history si riferisce ad un oggetto che contiene la storia delle pagine già visitate window. history. back() window. history. forward() window. history. go(-5) NB: per molti oggetti si può omettere l’oggetto globale window. Es: history. back() location. href
window. document fa riferimento all'oggetto che rappresenta il documento HTML correntemente aperto nel browser È il nodo centrale del DOM Le sue proprietà e i suoi metodi permettono di modificare in modo dinamico l'aspetto della pagina HTML
Document Object Model (DOM) Standard ufficiale del W 3 C Permette di rappresentare documenti strutturati in modo neutrale rispetto al linguaggio di programmazione che li deve manipolare Il DOM è inoltre la base per una vasta gamma delle interfacce di programmazione delle applicazioni
Document Object Model (DOM) Al DOM può essere associata una rappresentazione ad albero Nel caso di documenti HTML, il DOM vede una pagina come costituita da nodi I nodi (ad es. <a>) possono avere attributi (ad es. href) Inoltre, un nodo (ad es. <body>) può contenere altri nodi
Document Object Model (DOM) La parte client-side di Java. Script fornisce un meccanismo per accedere al DOM Dispone di proprietà che forniscono le informazioni sul documento nel browser metodi che permettono di modificare le proprietà Molte proprietà sono array che rappresentano a loro volta gli oggetti all'interno di una pagina HTML: moduli, immagini, link, …
DOM document link text form image radio button ……… … … … …
Oggetto document Proprietà document. bg. Color document. fg. Color document. link. Color document. alink. Color document. vlink. Color document. last. Modified document. title document. referrer Esempio: proprietà dell'oggetto document
Oggetto document Metodi document. open() document. write(“…”) document. writeln(“…”) document. close() Qui si scrive codice HTML che il browser visualizza in modo dinamico Esempio: uso di document. write()
Oggetto document Per evitare ambiguità con l'oggetto window si deve sempre scrivere document. open() per aprire un nuovo documento window. open() per aprire una nuova finestra document. close() window. close()
Oggetto document <html> <body> <img src="myimg 1. gif" name="img 1"> <img src="myimg 2. gif" name="img 2"> <img src="myimg 3. gif" name="img 3"> <a href="myfile 1. html">testo 1</a> <a href="myfile 2. html">testo 2</a> <a href="myfile 3. html">testo 3</a> </body> <html> document. images[] document. links[]
Oggetto document <html> <body> <img src="myimg 1. gif" name="img 1"> <img src="myimg 2. gif" name="img 2"> <img src="myimg 3. gif" name="img 3"> … </body> <html> document. images. length document. images[0]. src="myimg 1. gif" document. images[1]. src="myimg 2. gif" document. images[2]. src="myimg 3. gif" document. images[0]. name="img 1" document. images[1]. name="img 2" document. images[2]. name="img 3"
Oggetto document I nomi degli oggetti diventano delle proprietà dell'oggetto document che possono essere usate al posto degli array HTML <img src="myimg 1. gif" name="img 1"> Java. Script document. images[0]. src="myimg 1. gif" oppure document. img 1. src="myimg 1. gif"
Oggetto document Si possono usare gli identificatori per recuperare gli elementi con il metodo document. get. Element. By. Id() Questo metodo restituisce un riferimento all'elemento con un certo identificatore <img src="myimg 1. gif" id="img 1"> imm = document. get. Element. By. Id(img 1);
Oggetto document Si possono recuperare gli elementi caratterizzati dallo stesso tag HTML con document. get. Elements. By. Tag. Name(nome_TAG) Viene restituito un array di tutti gli elementi del tag considerato, nell'ordine in cui compaiono nel file HTML
Oggetto image Per ogni immagine all'interno di un file HTML il browser crea un'istanza di un oggetto image document. img 1. src document. img 1. name document. img 1. width document. img 1. height document. img 1. hspace document. img 1. vspace NB: ricordate gli attributi del tag <img>? Esempio: proprietà delle immagini
Roll over delle immagini Si ottiene cambiando dinamicamente il valore della proprietà src di un'immagine Di solito questo effetto si associa ai gestori di eventi on. Mouse. Over, on. Mouse. Out Esempi: roll over delle immagini
Oggetto link Viene creato l'array document. links[], ogni cella descrive un'istanza dell'oggetto link Proprietà document. ln 1. href document. ln 1. pathname document. ln 1. protocol document. ln 1. text document. ln 1. search
Oggetto link Gestori di eventi on. Click on. Dbl. Click on. Mouse. Down on. Mouse. Over on. Mouse. Out on. Mouse. Up
Programmazione lato client Gestione dei moduli
Oggetto form
Oggetto form È uno degli oggetti più importanti del DOM Durante la lettura di un file HTML, viene creato un array con tante celle quanti sono i moduli all'interno del file document. forms[]
Oggetto form Proprietà document. forms[]. length document. forms[]. action document. forms[]. method document. forms[]. encoding document. forms[]. name document. forms[]. target document. forms[]. elements[]
Oggetto form document. forms[]. elements[] è a sua volta un array con tante celle quanti sono gli elementi del modulo document. forms[0]. elements[4] document. forms[2]. elements[3] Esempio: informazioni sugli elementi dei moduli
Oggetto form È fondamentale dare dei nomi ai moduli e ai loro elementi I nomi permettono di distinguere tra i dati che vengono inviati al server Ogni volta che si introduce un nome, l'interprete Java. Script crea una proprietà corrispondente
Oggetto form: eventi on. Change on. Focus on. Blur text password file Browse on. Click on. Focus on. Blur checkbox radio button Button
Oggetto form: eventi on. Change on. Focus on. Blur textarea select (option) hidden reset/submit campo nascosto, non sente nessun evento Invia on. Click, on. Focus, on. Blur, on. Submit, on. Reset
Oggetto form: value campo di testo di nome txt 1 nel modulo frm 1 <input type="text" name="txt 1" on. Change="alert(this. value); "> on. Change="alert(document. frm 1. txt 1. value); ">
Oggetto form: value Tutti gli elementi di un modulo hanno un valore che in Java. Script si legge grazie alla proprietà value Il valore può essere L'etichetta dell'elemento specificata nell'attributo VALUE Il valore dell'elemento specificato nell'attributo VALUE Il valore fornito in input dall'utente Esempio: informazioni sugli elementi dei moduli
Un esempio <html> <body> <form id="frm 1" action="form_action. asp"> First name: <input type="text" name="fname" value="Donald" /> Last name: <input type="text" name="lname" value="Duck" /> <input type="submit" value="Submit" /> </form> <p>Return the value of each element in the form: </p> <script type="text/javascript"> var x=document. get. Element. By. Id("frm 1"); for (var i=0; i<x. length; i++) { document. write(x. elements[i]. value); document. write(" "); } </script></body></html>
Oggetto form: radio e checkbox I bottoni radio e checkbox hanno anche la proprietà checked document. frm 1. rd 1. value
Oggetto form: select e option Gli oggetti select e option permettono di creare menu a discesa Select possiede le proprietà selected. Index e options[] i = document. frm 1. selected. Index document. frm 1. sel 1. options[i]. value
Oggetto form: select e option … <select name=“citta” on. Change=“i=this. selected. Index; alert(this. options[i]. value); ”> <option value=“ge”>Genova</option> <option value=“mi”>Milano</option> <option value=“na”>Napoli</option> <option value=“to”>Torino</option> <option value=“ve”>Venezia</option> </select> … Esempio: menu a tendina
Oggetto form: invio “ … all input is evil until proven otherwise …” “Data must be validated as it crosses the boundary between untrusted and trusted environment. ” “Any data submitted by a user is initially untrusted data. ”
Oggetto form: invio Al momento dell'invio di un modulo, oppure quando si vogliono cancellare i campi, si possono fare dei controlli mediante i gestori di eventi on. Submit e on. Reset <form name="frm 1" method="post" action="…" on. Submit="return conferma_invio(); " on. Reset="return conferma_canc(); "> … … </form>
Oggetto form: invio Se le funzioni conferma_invio() e conferma_canc() restituiscono false le azioni corrispondenti vengono impedite Si può verificare Che l'utente abbia inserito i dati nei campi obbligatori Il formato dell'input
Espressioni regolari Le espressioni regolari permettono di descrivere pattern testuali Sono rappresentate da un oggetto Reg. Exp ma possono essere create anche mediante assegnazione var pattern = / exp. reg / var pattern = new Reg. Exp(“exp. reg”)
Espressioni regolari /[abc]/“a”, “b”, “c” /^a/tutte le stringhe che iniziano con “a” /a$/tutte le stringhe che finiscono con “a” /[a-z]/ /[A-Z]/ /[0 -9]/ /[a-z. A-Z 0 -9]/ /[a-z]{n}/ /[0 -9]{n, m}/ /[a, b, c]{n, }/
Espressioni regolari Metodi di String per le espressioni regolari String. search(pattern, str) restituisce la posizione del primo carattere della sottostringa che coincide con il pattern, oppure – 1 String. replace(pattern, str) String. match(pattern) restituisce un array contenente i risultati del confronto. Supporta le ricerche globali Esempio: validazione dell'input
Oggetto Reg. Exp Il costruttore Reg. Exp() ha due argomenti 1) il pattern dell'espressione regolare, 2) un parametro opzionale “i”, “gi” L'oggetto Reg. Exp supporta i metodi test() e exec() si veda la documentazione ufficiale
Esercizi programmazione concorrente java
Programmazione orientata agli oggetti java
H80004005
1994 netscape navigator
Netscape composer download
Netscape
Netscape communicator
Netscape plugin api
Navigator internet
Investimento in senso stretto
Lato b marta menegatti
Organi lato destro
Zimne lato typ urody
Quadrato dei lombi
Poligoni regolari e irregolari
Una scatola cubica di lato 25 cm
Lato wiersze dla dzieci
Quadrilateri non parallelogrammi
Wiersze o liściach jesiennych
Decrescente em sentido lato
Gerson malarz
Example of two tier architecture
Vmatrix server manager
Linux leger
Us staffing calling script
Fatal error in client side script
Strumenti di programmazione del comune
Programmazione allenamento minivolley
Programmazione lineare teoria
Programmazione awl
Programmazione orientata agli oggetti roma tre
Programmazione concorrente e distribuita
Programmazione midi
Modelli di programmazione lineare
Google presentazioni linguaggio di programmazione
Strumenti compilazione/programmazione
Programmazione procedurale
Ambienti di programmazione per il software di base
Programmazione reticolare
Programmazione ad eventi
Programmazione concorrente
Programmazione religione scuola infanzia 2019-2020
Programmazione cnc simulator
Cruciverba laurea esempio
Organizzazione modulare scuola primaria
Zero macchina cnc
Programmazione procedurale
24 simbologia
Ambienti di programmazione per il software di base
Simboli linguaggio ladder
Programmazione alto livello
Programmazione midi
Ciclo while
Programmazione e controllo arcari
Ambienti di programmazione per il software di base
Paradigmi di programmazione
Programmazione distribuita
Polimorfismo c++
Esercizi programmazione dinamica
Linguaggio dichiarativo
Ambiti operativi da supportare
Java rich client
Pircbot
Java client server tutorial
Lập trình socket giao tiếp tcp client/server java
Hopper khan academy
Java script email
Java script wikipedia
Java script classes
Java script course
Java script ide
Language
Java script
Java script examples
Script de java
"java script"
"java script"
"java script"
Inside which html element so we put the javascript?
Data types in javascript
"java script"
"java script"
Java interpreter
Swing vs awt
Java import java.util.*
Java thread import
Java bean vs enterprise java bean
