Obiettivi

Javascript e il Browser

Dopo aver analizzato Javascript come linguaggio di programmazione, è necessario comprendere in che modo entra in relazione con il Browser:

• Javascript di fatto è il linguaggio di scripting del rendering engine che renderizza le pagine web.
• Il rendering engine espone alcune interfacce sotto forma di nuovi oggetti accessibili e manipolabili in Javascript come First-Class Object.

Javascript e il DOM

Mentre un numero ristretto di caratteristiche del rendering engine e dell’interprete javascript saranno lievemente differenti tra un browser e l’altro, la stragrande maggioranza sono state standardizzate (e continuano ad esserlo) da un consorsio per la standardizzazione delle tecnologie legate al web chiamato W3C.

DOM on Wikipedia

AJAX

AJAX (Asynchronous Javascript and XML) è il termine nato nel 2005 per descrivere le nuove tecniche di caricamento dinamico e asincrono di contenuti attraverso l’oggetto detto XMLHttpRequest

Nel’aprile 2006 la W3C ha rilasciato il primo draft di una specifica che ne descrive una implementazione standard.

Tutti i browser moderni implementano tale caratteristica anche se a volte con API differenti.

AJAX on Wikipedia

JSON

JSON (JavaScript Object Notation) è un sottoinsieme della sintassi per gli object in JavaScript.

JSON consente di descrivere strutture a grafo e ad albero analogamente all’XML e può essere una valida e meno verbosa alternativa all’XML in molti contesti.

JSON on Wikipedia

Developers Tools

IDE vs. IDE

Integrated Development Environment vs. Interactive Development Environment

Mozilla Firefox oltre ad essere un browser molto potente e flessibile, rappresenta uno strumento di sviluppo insostituibile sul Web.

Oltre a Firefox sono pero’ necessari alcuni tool (e firefox addons) obbligatori per poter prendere seriamente in considerazione JavaScript come un vero linguaggio di programmazione, ad esempio:

• Debugger
• API Doc generator
• Syntax Checker

Debuggers

Inutile chiedersi se ci sarà un bug da identificare… possiamo al massimo chiederci quando… e quali tecniche useremo per scovarlo… vogliamo riempire il nostro codice di console.log ?!?

• Firebug
• Venkman

Debuggers: Venkman

Venkman è il debugger grafico nativo di Mozilla, ed è in grado di effettuare il debugging sia del codice presente nelle pagine web (content) che di quello presente all’interno delle estensioni e del codice nativo di Firefox (chrome).

Venkman info and download

Debuggers: Firebug

Firebug è una estensione di Mozilla Firefox che integra nella status bar di firefox:

• un potente debugger javascript
• un inspector del DOM, CSS e Box Model
• network sniffer

Firebug info and download

Api Doc

Un software o un API non documentata quasi non è software, la possibilità di generare un API Doc completa dai sorgenti non è un requisito da sottovalutare:

• Natural Docs
• JSDoc Toolkit

Api Doc: Natural Docs

Natural Docs è un sistema di formattazione e generazione API Doc multilinguaggio e multipiattaforma, sviluppato in Perl.

Natural Docs info and downloads

Api Doc: JsDOC Toolkit

JSDoc Toolkit è un sistema di formattazione e generazione API Doc specifico per Javascript e sviluppato in Javascript stesso.

JSDoc Toolkit

Syntax Checkers

Data la natura dinamica di Javascript e la sua sintassi piena di trabocchetti è utile a volte effettuare degli auditing del codice con dei syntax checkers nati a questo proposito:

• JSLint
• JSLint4java

Syntax Checkers: JSLint.com

JSLint è il syntax checker sviluppato da Crockford, oltre a testare il rispetto delle regole di sintassi vere e proprie, effettua una analisi per identificare i problemi silenzioni

JSLint è accessibile online attraverso un semplice form Web.

JSLint info e use

Syntax Checkers: JSLint4java

JSLint4Java è un porting del syntax checker sviluppato da Crockford, allo scopo di poter essere utilizzato, fuori dal browser (nell’editor) e offline.

JSLint4java info e download

jQuery

• Why javascript frameworks?
• When e When jQuery?
• Unobtrusive JavaScript
• jQuery by Examples

Why javascript frameworks?

• appianare le differente/incompatibilità tra le implementazioni di ECMAScript / DOM / CSS tra i vari browser
• aggiunta di nuovi costrutti al linguaggio, funzioni di utilità
• semplificazione di procedure macchinose
• implementazione di design pattern e best pratices

Why and When jQuery? (1/2)

Why and When jQuery? (2/2)

jQuery semplifica i patterni più comuni delle applicazioni javascript client-side:

• selecting elements
• attribute updating and CSS manipulating
• create and copy elements around the page
• hide, show and animate elements

Il tutto implementato mediante metaprogrammazione Javascript, completamente multibrowser e sotto le sembianze di un maneggevole DSL.

Unobtrusive Javascript

Inizialmente era l’HTML…

semplici pagine di testo statiche, con la possibilità di includere delle immagini e link ipertestuali tra le pagine HTML

nelle pagine HTML venivano a mescolarsi contenuto e stile…

<p width="800px"> 
  Some text <b>Bold Text</b> Other 
  <i> Italic Text </i>
</p>

Unobtrusive Javascript

poi arrivarono i CSS allo scopo di separare lo stile (CSS) dal contenuto (HTML) e i tag e gli attributi che applicavano lo stile all’interno dell’HTML entrarono in deprecazione…

<style  TYPE="text/css"> 
<!--
.wide { width: 800px; }
.bold { font-weight: bold; }
.italic { font-style: italic; }
-->
</style>

<p class="wide"> 
  Some text <span class="bold">Bold Text</span> Other 
  <span class="italic"> Italic Text </span>
</p>

Unobtrusive Javascript

Ma con l’ingresso di Javascript l’HTML ne è risultato nuovamente contaminato… questa volta era il comportamento (behaviour) a mescolarsi con il contenuto:

<h2 onclick="this.style.color = 'red';"> CLICK ME </h2>

Unobtrusive Javascript

I benefici ottenibili separando il compartamento (behaviour) dal contenuto sono paragonabili se non superiori a quelli ottenuti separandone lo stile con i CSS.

<h2 id="clickme"> CLICK ME </h2>

<script type="text/javascript"> 
  function init_behaviour() {
    document.getElementById("clickme").
      onclick = function() {
        this.style.color = "red";
    };
  };

  window.onload = init_behaviour;
</script>

jQuery by Examples

Con una conoscenza delle caratteristiche base di Javascript, delle sue particolarità e delle tecniche comuni, è possibile apprendere e comprendere il funzionamento di jQuery (come di qualunque altro framework javascript) by example

ex0. jquery minimal page

Ogni release di jQuery viene rilasciata in due formati:

• Minified
• Uncompressed

E’ possibile seguire lo sviluppo sul server SVN in hosting su googlecode:

rpl:/home/rpl/Code/jquery_examples$ svn co http://jqueryjs.googlecode.com/svn/trunk

ex0. jquery minimal page

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <!--[if IE 6]>
        <link rel="stylesheet" href="ie6fix.css" type="text/css" />
    <![endif]-->
    <title>jQuery Test Page</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
        // YOUR CODE HERE
    </script>
  </head>
[...]

ex1. jquery wrapper

Il centro dell’API di jQuery è il factory pattern costituito dal jQuery wrapper:

jQuery è il suo alias abbreviato $

typeof jQuery   // function
jQuery === $    // true
dir(jQuery)     // navigazione object in Firebug

doc = $();            // jQuery wrapped document
doc instanceof jQuery // true
dir(jQuery())         // navigazione object in Firebug
dir(jQuery.fn)        // navigazione metodi wrapped object

ex2. document ready handler

• molte delle operazioni che eseguiremo in javascript necessitano che il DOM sia completo
• window.onload è un handler standard presente a questo scopo, ma attende il caricamento di tutte le risorse (comprese immagini) e gli si può associare una sola callback
• jQuery().ready al contrario controlla la sola completezza del DOM e può essere usato ripetutamente senza rischi

$(document).ready(function() {
  // DO SOMETHING
});

// OR

$(function() {
  // DO SOMETHING
});

ex3. select elements from page

• gli elementi posso essere selezionati mediante i comuni CSS selectors (sino a supportare caratteristiche relative a CSS3), espressioni XPATH e altri selector avanzati
• la selezione avviene mediante il soluto jquery wrapper
• l’oggetto ritornato è un oggetto jquery wrapped contenente una notevole quantità di metodi di utilità oltre che gli oggetti DOM standard
• i metodi di utilità sono in grado di agire sia su singoli elementi selezionati che su liste di elementi in modo trasparente
• gli elementi selezionati possono essere ulteriormente filtrati

ex3. select elements from page

dir($('body'));

$('body > *').each(function(i,v) { console.log(typeof v); });

dir($('#test-table'));

$('.content').each(function(i,v) { dir(v); });

$('table tr').filter(".header").each(function(i,v) { dir(v); });

$('a[href^=http://]').addClass('http-link');
$('a[href$=.pdf]').addClass('pdf-link');

ex4. change attributes of selected elements

• aggiungere/rimuovere una class CSS
• manipolare lo stile CSS di una selezione
• cambiare il contenuto html di una selezione

$('table tr').addClass("MYCLASS"")
$('table tr').removeClass("MYCLASS"")

$('table tr').html("MYTEXT")

$('table tr').css({background: "yellow"})

ex5. create/copy new elements in the page

• creare nuovi elementi
• clonare elementi selezionati
• inserire elementi nella pagina
• eliminare elementi dalla pagina

dir($("<p> A new unuseful paragraph </p>"))

$("<p> A new unuseful paragraph </p>").insertAfter("table");

$("<p> A new unuseful paragraph </p>").insertBefore("h1");

$('table').clone().insertAfter("h1")

$('table').insertBefore("h1")

$('table').insertAfter("h1")

$($('table')[0]).remove()

ex6. event handling

$('h1').click(function() { $(this).css({color: "red"}); });

$('table tr').click(function() { 
  $(this).find('td').each(function() {
     $(this).clone().insertBefore($('h1'));
  });
});

ex7. animation effects

$('h1').click(function() { $('table').toggle('fade'); });

$('table tr').click(function() { 
  $(this).scrollLeft();
});

$('h1').
  mouseover(function() { $(this).css({background: "yellow"}) }).
  mouseout(function() { $(this).css({background: "white"}) });

ex8. ajax query

$("<textarea/>").insertAfter("table");
$.get("jquery.js", function (data) { $('textarea')[0].value = data; });
$('textarea').css({width: "100%", height: "600px"})

$.getJSON("data.json", function(json) { dir(json); });

$("<div id='newcontent'/>").insertAfter('h1');
$("#newcontent").load("remote url");

Bibliografia

• Learning jQuery (Packt)
• jQuery Reference (Packt)
• jQuery in Action (Manning)

Link-ografia

• DOM on Wikipedia
• AJAX on Wikipedia
• JSON on Wikipedia
• Firebug
• Venkman
• Natural Docs
• JSDoc Toolkit
• JSLint
• JSLint4java
• jQuery Documentation and Manuals
• jQuery API reference