Linguaggio JavaScript A. Lorenzi, R. Giupponi, D. Iovino LINGUAGGI WEB. LATO CLIENT Atlas Copyright Istituto Italiano Edizioni Atlas
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.
JavaScript JavaScript è un linguaggio interpretato, cioè non viene compilato, e ogni comando viene eseguito passo passo direttamente dal browser. Linguaggio Web lato client
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.
Tag <script> e function <SCRIPT language="javascript"> function nomefunzione (parametri) {...... } </SCRIPT>
Eventi
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.
Linguaggio JavaScript (1) Assegnazione: var = valore operatori aritmetici, di confronto, logici funzioni matematiche: metodi della classe Math Selezione: if(condizione) { istruzioni } else { istruzioni }
Linguaggio JavaScript (2) Ripetizione for: for(contatore=valoreiniziale; contatore<valorefinale; incremento) { } istruzioni Ripetizione while: while(condizione){ } istruzioni
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();
Metodi stroke, strokestyle, stroketext linewidth fill, fillstyle moveto, lineto beginpath, closepath rect arc
Validazione dei dati
Validazione implicita (HTML5)
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.
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
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)
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">
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>
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;
Grafica vettoriale SVG Tag <svg> <svg width="400" height="400" viewbox="10-50 400 400" xmlns="http://www.w3.org/2000/svg" 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,183 301,70 301,183"/> </svg>
Mostra, nascondi function mostra(svg) { document.getelementbyid(svg).style.display = 'block'; } function nascondi(svg) { document.getelementbyid(svg).style.display = 'none'; }
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.
Google Maps Mappe statiche (staticmap) http://maps.googleapis.com/maps/api/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 41.899498091988804,12.473258972167968
Street View http://maps.googleapis.com/maps/api/streetview? size=600x400& location=40.75943178056432,-73.98444414138794& heading=210& fov=40& pitch=10& sensor=false