Linguaggio JavaScript

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Linguaggio JavaScript"

Dorotea Casati
8 anni fa
Visualizzazioni

1 Linguaggio JavaScript A. Lorenzi, R. Giupponi, D. Iovino LINGUAGGI WEB. LATO CLIENT Atlas Copyright Istituto Italiano Edizioni Atlas

2 Script Il termine script in informatica indica, in generale, un testo che, anziché contenere una descrizione o un messaggio, è formato dai comandi di un linguaggio, organizzati in una sequenza o in una selezione del tipo se... allora oppure in una ripetizione.

formato dai comandi di un linguaggio, organizzati in una

3 JavaScript JavaScript è un linguaggio interpretato, cioè non viene compilato, e ogni comando viene eseguito passo passo direttamente dal browser. Linguaggio Web lato client

4 Script nelle pagine HTML gestire gli eventi provocati dall utente con il clic del mouse o dalla navigazione all interno di un sito; fornire messaggi di avvertimento o risposte alle scelte effettuate; acquisire le scelte dell utente e lanciare l esecuzione dell azione conseguente; controllare la validità dei dati inseriti in un modulo (form); apportare modifiche all aspetto di una pagina Web durante la visualizzazione con il browser.

scelte dell utente e lanciare l esecuzione dell azione conseguente; controllare la validità dei dati

5 Tag <script> e function <SCRIPT language="javascript"> function nomefunzione (parametri) { } </SCRIPT>

6 Eventi

7 HTML e JavaScript <P ID="descrizione">...</P> function scrivitesto(testo) { document.getelementbyid("descrizione").innerhtml=testo; } document è l intero documento HTML; getelementbyid ( descrizione ) è l oggetto nella pagina HTML, avente ID uguale a descrizione; innerhtml è il codice all interno dell oggetto.

innerhtml=testo; } document è l intero documento HTML; getelementbyid (

8 Linguaggio JavaScript (1) Assegnazione: var = valore operatori aritmetici, di confronto, logici funzioni matematiche: metodi della classe Math Selezione: if(condizione) { istruzioni } else { istruzioni }

9 Linguaggio JavaScript (2) Ripetizione for: for(contatore=valoreiniziale; contatore<valorefinale; incremento) { } istruzioni Ripetizione while: while(condizione){ } istruzioni

10 Canvas Superficie su cui disegnare oggetti statici o dinamici. <CANVAS ID="canvasProva" WIDTH="400" HEIGHT="300"> Attenzione: il tuo browser non supporta il tag CANVAS. </CANVAS> Esempio: arco di circonferenza miocanvas = document.getelementbyid("canvasprova"); context = miocanvas.getcontext("2d"); context.arc(200, 200, 100, 0, Math.PI, true); context.stroke();

il tag CANVAS. </CANVAS> Esempio: arco di circonferenza miocanvas = document.

11 Metodi stroke, strokestyle, stroketext linewidth fill, fillstyle moveto, lineto beginpath, closepath rect arc

12 Validazione dei dati

13 Validazione implicita (HTML5)

14 Cookie Pacchetto di informazioni che viene salvato sul computer dell utente. In successive sessioni di collegamento a Internet (normalmente per un periodo di tempo limitato) il browser può accedere e utilizzare questi dati.

15 Webstorage memorizzare dati in maniera simile ai cookie due oggetti principali: localstorage: può contenere dati che sono comuni a tutto il dominio sessionstorage: i dati sono disponibili solamente alla pagina che li ha creati. Metodi: setitem, getitem, removeitem, clear

tutto il dominio sessionstorage: i dati sono disponibili solamente

16 Application cache Strumento per la creazione di applicazioni che possono essere fruite in modalità aereo nei dispositivi mobili e in navigazione off-line (non in linea) Vengono stabiliti a priori i file che devono essere salvati sul computer locale in modo da permettere la navigazione off-line (application cache)

off-line (non in linea) Vengono stabiliti a priori i file che devono essere

17 File manifest Esempio: offline.manifest CACHE MANIFEST index.html /img/banner.jpg /img/logo.jpg /css/stile.css /js/calcola.js /js/offline.js Nella pagina Web: <html manifest="offline.manifest">

18 Audio e video <audio src="podcast.mp3" type="audio/mp3" autoplay controls> </audio> <video id="video1" width="320" height="240" poster="picture.jpg" autoplay controls> <source src="demo.mp4" type="video/mp4" /> Il tuo browser Web non supporta il tag video. </video>

19 Metodi e attributi play, pause currenttime volume var video = document.getelementbyid("video1"); video.play(); video.pause(); video.currenttime = 0; video.currenttime += value; video.volume +=0.1;

20 Grafica vettoriale SVG Tag <svg> <svg width="400" height="400" viewbox=" " xmlns=" version="1.1"> <rect fill="green" x="75" y="75" width="50" height="50" stroke="black" stroke-width="5"/> <rect fill="green" x="75" y="75" width="50" height="50" rx="10" ry="10" /> <polygon fill="yellow" stroke="blue" strokewidth="10" points="69,69 69, ,70 301,183"/> </svg>

1"> <rect fill="green" x="75" y="75" width="50" height="50" stroke="black" stroke-width="5"/> <rect

21 Mostra, nascondi function mostra(svg) { document.getelementbyid(svg).style.display = 'block'; } function nascondi(svg) { document.getelementbyid(svg).style.display = 'none'; }

22 Geolocalizzazione Oggetto navigator.geolocation Metodi: navigator.geolocation.getcurrentposition(); i dati vengono forniti una volta sola navigator.geolocation.watchposition(); i dati sono aggiornati ogni volta che l utente cambia posizione.

23 Google Maps Mappe statiche (staticmap) center=piazza+navona,roma& zoom=15& size=400x400& maptype=roadmap& markers=color:blue label:p piazza+navona,roma& format=gif& sensor=false Anche coordinate: markers=color:blue label:p ,

24 Street View size=600x400& location= , & heading=210& fov=40& pitch=10& sensor=false

Documenti analoghi

Cookie e Webstorage. Vediamo ora i metodi dell oggetto localstorage. Per memorizzare un valore si utilizza il metodo setitem:

Cookie e Webstorage. Vediamo ora i metodi dell oggetto localstorage. Per memorizzare un valore si utilizza il metodo setitem: Cookie e Webstorage Un cookie (letteralmente biscotto) è un pacchetto di informazioni che viene salvato sul computer dell utente. In successive sessioni di collegamento a Internet (normalmente per un periodo