Post on 16-Feb-2019
Chi sono?Riccardo Govoni -- battlehorse@gmail.com
Prima lavoravo qui Adesso lavoro qui
Il mio capo e' questo qui Comunque sempre con questo qui
Disclaimer
Il contenuto di questa presentazione riflette le opinioni personali dell'autore, le quali possono differire dalle posizioni del datore di lavoro.
Il contenuto di questa presentazione risente delle opinioni soggettive dell'autore.
Che c'entra Javascript con ilLinux Day?
Dove lo trovo?
In un browser. Quindi ovunque.Ma non solo.
Perche' ?Perche' il browser ha smesso da un pezzo di essere un visualizzatore di pagine.
Ma e' piuttosto un contenitore di applicazioni.
Javascript e' in linguaggio correntemente in uso per questo scopo. Nel cloud computing ci sei gia' dentro, volente o nolente.
Linguaggio
Javascript ha avuto un'infanzia difficile
Se non e' chiaro, e' colpa dei browser. 1995: Brendan Eich, Livescript, poi Javascript1996 : Netscape Navigator 2, IE 3, JScript1997 : EcmaScript standard2000 : EcmaScript 1.3 ~ Javascript 1.5...... Netscape, Firefox, IE, Opera, Safari, Chrome ......2008 : Javascript 1.8
... e ogni browser agisce a modo suoJavascript vive principalmente in un browserOgni browser implementa gli standard ( HTML, CSS, et al.. ) a modo suo.
Le capacita' percepite di Javascript, e del browser in cui vive, sono un miscuglio di mille diversi fattori.
http://www.joelonsoftware.com/items/2008/03/17.html
Linguaggio
Javascript e' un linguaggio di scripting, principalmente orientato allo sviluppo client, debolmente tipizzato, dinamico, che supporta programmazione procedurale, basata su prototipi e funzionale.
In pratica:
In realta' e' un accrocchio il cui standard non sempre viene rispettato che vive in un mondo di browser in cui ognuno fa quello che gli pare.
Linguaggio di scripting
Interpretato, o compilato on-the-fly, dall'engine in uso. In ogni caso lo sviluppatore non ha lo step intermedio della compilazione. <html> <body> <script>alert("hello world!");</script> </body></html>
Ok, un esempio meno banale. Number.prototype.even = function() this % 2 == 0; function $(id) document.getElementById(id); function rowGenerator(table) { var i = 0; while ( i < table.rows.length ) { if (Number(i++).even()) { yield table.rows[i] } } yield false; } function Colorizer(color) { return function(table) { g = rowGenerator($(table)); while (row = g.next()) { row.style.backgroundColor = color; } } } var blueRowsFor = Colorizer('#0000FF'); blueRowsFor('myTable');
Eh ?? Un passo alla volta
Javascript e' fondamentalmente procedurale e non parallelo.Un'istruzione alla volta, da cima a fondo.
<script> function stampa(messaggio) { document.write("<p>" + messaggio + "</p>"); } stampa("Yodel!");</script>
Questo e' un oggetto
{ }
Con il ripieno.
{ nome: 'Leonardo', cognome: 'Da Vinci', parla: function() { return "blah"; } inventa: function(strumenti) { /* usa strumenti */ }}
Se poi gli dessimo anche un nome...
var leo = { nome: 'Leonardo', cognome: 'Da Vinci', parla: function() { return "blah"; } inventa: function(strumenti) { /* usa strumenti */ }} leo.parla();> blah
E che me ne faccio di un oggetto?
Number.prototype.even = function() this % 2 == 0;
In Javascript posso aprire un oggetto come una cozza e metterci il ripieno che voglio.
In Javascript non ci sono classi. Ma solo oggetti ed i loro prototipi. Pensa ad una catena di dipendenze.
Functions
function $(id) document.getElementById(id); var adder = function(a, b) { return a + b; };var somma = adder;somma(3,5);> 8var eventHandler = function(event) { ... }for (var b in allMyButtons) { b.addEventListener('click', eventHandler);}
Javascript supporta la programmazione funzionale:partials, currying, lambda, high-order functions. Ci puoi fare map/reduce!
Partials & Closures
function Aggiungitore(a) { return function(b) { return a+b; }}var aggiungi5a = Aggiungitore(5); // una partial function!var result = aggiungi5a(10); // 15var result2 = aggiungi5a(6); // 11
Le funzioni sono oggetti come gli altri. Possiamo usarli come valore di ritorno da un metodo. Javascript supporta le closures e quindi possiamo avere i partials! Yay!
Pythonic Generators
function rowGenerator(table) { var i = 0; while ( i < table.rows.length ) { if (Number(i++).even()) { yield table.rows[i] } } yield false; }
Javascript (dalla versione 1.8) ha i generatori come in Python! E tante altre belle cosine (iteratori, list comprehension ...).
Peccato che praticamente solo Firefox supporta questi costrutti. Son tutti fermi alla versione 1.5 !
Mettendo tutto insieme ... Number.prototype.even = function() this % 2 == 0; function $(id) document.getElementById(id); function rowGenerator(table) { var i = 0; while ( i < table.rows.length ) { if (Number(i++).even()) { yield table.rows[i] } } yield false; } function Colorizer(color) { return function(table) { g = rowGenerator($(table)); while (row = g.next()) { row.style.backgroundColor = color; } } } var blueRowsFor = Colorizer('#0000FF'); blueRowsFor('myTable');
Facendo finta che sia una libreria...<html>... <body> <table id='myTable'>...</table> <script>blueRowsFor('myTable');</script> </body></html>
Finalmente! Possiamo manipolare il contenuto della pagina web. E abbiamo un sacco di strumenti potenti per farlo.
(ok, per l'esempio mostrato bastava molto meno)
DOM & CSS
La potenza e' nulla senza controllo ?Come posso interagire con il browser ?
DOM : la struttura della pagina web. Tabelle, paragraphi, box, liste etc...
CSS : l'aspetto della pagina web. Colori, posizioni, layout, fonts, rendering etc ...
Eventi: qualunque cosa succede sulla pagina. Movimenti del mouse, scrolling, clicks, resize, keypress.
E un milione di incoerenze tra i vari browser. Quindi ??
Librerie
Obiettivo: fornire un'astrazione decente sopra alle minuzie del linguaggio e alle incompatibilita' dei browser.
Un po' come le glibc, o le GTK a seconda della libreria.
Se volete imparare javascript, studiatevi i sorgenti di una di esse ( jQuery ).
Esempio di jQuerySe dovete scegliere una libreria, scegliete questa. Il resto non conta.
$('.panel').is(':visible'). hide('fast').next('.panel').is(':hidden').eq(0). show('slow');
$.ajax({ url: "test.html", success: function(html){ $("#results").append(html); }});
$("p").click(function () { $(this).slideUp(); });
Demo!
JParallax : <li> on steroids
Mov oYouTube
Mov oYouTube
JParallax, e come cavolo fa?
http://webdev.stephband.info/parallax.html
<ul id="parallax"> <li></li> <li></li></ul><script>$('#parallax').parallax();</script>
e un pizzico di css positioning in base alla posizione del mouse.
Rhizosphere
Mov o YouTube
Rhizosphere, e come cavolo fa ?User Interface Manager in 30Kb, 100% Javascript :
Drag'n'Drop, Selection, Layout, Filtering, Model Agnostic http://code.google.com/p/rhizosphere/
DIV CSS Positioning, Hiding & Smoothing function:
$('.model'). css('display', filtered ? 'none' : ''). .css('position', 'absolute') .css('top', '130px') .css('left', '200px');
280 Slides
Mov o YouTube
280 Slides. E come cavolo fa?Applicazione per presentazioni ~ PowerPoint, Keynote.
Basata su ObjectiveJ, un linguaggio ibrido basato su Javascript e ObjectiveC, trasformato in Javascript all'interno del browser da un processore scritto anch'esso in Javascript, e Cappuccino, un framework tipo Cocoa. Molto Mac-ish.
280 Slides tecnicamente e' una pagina web tanto quanto un articolo di Wikipedia: HTML, JS, richieste HTTP ... ma sfido chiunque a definirla tale.
Engines
Chi fa andare tutta la baracca ?Esiste una valanga di engine javascript: Mozilla: SpiderMonkey, TraceMonkey, RhinoSafari : SquirrelFish (Extreme)Chrome : V8Internet Explorer : NonMiRicordo Opera : Futhark Flash : Tamarin
I benchmark? non sempre contano ( obsoleti, opinabili e/o non imparziali, l'engine javascript e' solo una parte del browser ).
Quasi tutti si stanno muovendo verso la compilazione on-the-fly.
Canvas
Niente giochi ? Niente mp3 ?<canvas> e' un elemento HTML, programmabile in Javascript, che offre una superficie di disegno 2D.
Introdotto da Apple per i widget della dashboard, poi adottato da Firefox, disponibile in Opera 9 ... ovviamente non supportato da Internet Explorer. Per fortuna c'e' : http://code.google.com/p/explorercanvas/
Esempietto<script type="application/x-javascript">function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); }}</script><canvas id="canvas" width="150" height="150"></canvas>
Esempione ( di 8Kb)
Mov o YouTube
C'e' anche Super Mario Kart, e per i nostalgici, Wolfenstein 3D ! http://blog.nihilogic.dk/search?q=supermario
Ottimizzazione
OttimizzazioneOra avete la vostra bella applicazione, ma contiene 300 file javascript e va leeeeeentaaa. Che si fa?
HTTP Caching & GZippingJavascript MinificationImage SpritingStatic Domain PipeliningDelayed FetchContent Reordering ( http://stevesouders.com/cuzillion/ )Parallel Js Fetching
Richiederebbe una lezione a parte ...
(Dis)Connectivity?
Connectivity : AjaxE' talmente comune che non va nemmeno piu' di moda. Oggi l'anomalia e' quando una applicazione fa richieste HTTP tradizionali, al posto di sole chiamate Ajax.
One Page Applications:1 solo load iniziale, poi tutto Ajax emanipolazione del DOM.
Es.: GMail ( ma Lotus & Outlook Web Access lo facevano da una vita, o quasi )
E' un design che genera una carriola di nuove grane.
Ajax in JQuery
$('.button').click(function() { $.ajax({ url: "test.html", success: function(html){ $("#results").append(html); } });});
Disconnectivity : Un progetto open source, per estendere il browser con la capacita' di lavoro offline e l'integrazione con il desktop.
In pratica:un miniserver locale per servire i contenuti offline (immagini, pagine web, etc)un database sqllite per lo storageun modello multithread per operazioni asincroneuna libreria javascript per coordinare il tutto
http://gears.google.com
Disconnectivity : Gears
In piu' : Integrazione con il DesktopGeolocation
Chi lo usa?
Google Docs, ZohoWriter, WordPress , ... L'anello di giunzione tra una applicazione web ed una classica applicazione desktop ?
Ebbasta!
Ma dobbiamo ancora parlare di un sacco di cose!
e il debugging? e FireBug ? e Javascript Serverside ? e LightBox ? e Processing.js ?
Grazie!