Programmazione.it v6.4
Ciao, per farti riconoscere devi fare il login. Non ti sei ancora iscritto? Che aspetti, registrati adesso!
Info Pubblicità Collabora Autori Sottoscrizioni Preferiti Bozze Scheda personale Privacy Archivio Libri Corsi per principianti Forum
Allegato
Guida ad HTML5: nuovi elementi semantici (4/6)
Scritto da Pellegrino Principe il 14-02-2011 ore 06:44
Intel Parallel Studio XE
Analizziamo ora, in dettaglio, il file newelements.js, che consente di gestire la logica dell’applicazione web:
  1. var NE =
  2. {
  3.     elements:
  4.     [
  5.         "header", "footer", "nav", "aside", "article", "section", "hgroup", "time",
  6.         "mark", "meter", "progress", "details", "menu", "command", "keygen", "datalist",
  7.         "embed", "figcaption", "figure", "ruby", "wbr", "rt", "rp", "summary", "output",
  8.     ],
  9.  
  10.     ph_browser: null,
  11.     ph_el: null,
  12.  
  13.     init: function ()
  14.     {
  15.         NE.ph_browser = document.getElementById("bl");
  16.         NE.ph_el = document.getElementById("ph_el");
  17.  
  18.         NE.checkBrowser();
  19.         NE.checkElements();
  20.     },
  21.  
  22.     checkBrowser: function ()
  23.     {
  24.         var ua = navigator.userAgent;
  25.  
  26.         if (ua.indexOf("Firefox") != -1)
  27.             NE.ph_browser.style.backgroundImage = "url(img/firefox.jpg)";
  28.         else if (ua.indexOf("Chrome") != -1)
  29.             NE.ph_browser.style.backgroundImage = "url(img/chrome.jpg)";
  30.         else if (ua.indexOf("Opera") != -1)
  31.             NE.ph_browser.style.backgroundImage = "url(img/opera.jpg)";
  32.         else if (ua.indexOf("Trident") != -1)
  33.             NE.ph_browser.style.backgroundImage = "url(img/ie9.jpg)";
  34.         else if (ua.indexOf("Safari") != -1)
  35.             NE.ph_browser.style.backgroundImage = "url(img/safari.jpg)";
  36.     },
  37.  
  38.     checkElements: function ()
  39.     {
  40.         for (var ix = 0; i < NE.elements.length; ix++)
  41.         {
  42.             var ans = HTML5_Support.newSemanticElements(NE.elements[ix]);
  43.             var d = document.createElement("div");
  44.             d.innerHTML = NE.elements[ix];
  45.             if (ans)
  46.                 d.style.backgroundImage = "url(img/check_ok.png)";
  47.             else
  48.                 d.style.backgroundImage = "url(img/check_no.png)";
  49.             NE.ph_el.appendChild(d);
  50.         }
  51.     }
  52. }
Come si può notare, abbiamo definito: l’array elements, i cui elementi contengono delle stringhe atte a rappresentare gli elementi da verificare; la funzione init, che inizializza i div placeholder e che invoca le funzioni checkBrowser e checkElements.

In particolare la funzione checkBrowser cerca di rilevare, attraverso la proprietà userAgent dell’oggetto navigator, il browser in uso. Ricordiamo, infatti, che tale proprietà contiene una stringa, al cui interno sono memorizzate varie informazioni conformi alla seguente struttura:
  1. appCodeName/appVersion number (Platform; Security; OS-or-CPU; 
  2. Localization; rv: revision-version-number) product/productSub 
  3. Application-Name Application-Name-version
Nel caso di Firefox 3.6.13 avremo, pertanto, il seguente valore:
  1. "Mozilla/5.0 (Windows; U; Windows NT 6.1; it; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13 GTB7.1"
che indicherà l’utilizzo di tale browser e la cui immagine sarà usata come background del div placeholder con id bl. Infine, la funzione checkElements crea tanti div quanti sono gli elementi da rilevare e per ciascuno inserisce un’immagine, che può essere di check positivo, se il browser supporta l’elemento, o di check negativo in caso contrario.

Potete provare live l’applicazione d'esempio oppure scaricare il codice dall'allegato.
Formato: ZIP (Compressed Archive File)
Dimensione: 48.75 KB
Codice per il download:  
Tutti gli allegati vengono testati, pertanto se non riesci ad aprire un file PDF perché il tuo viewer dice che il file è corrotto, installa l'ultima versione di Adobe Reader, disponibile sia per Windows, che per Mac OS X e Linux/Unix. Nel caso il problema persista segnala l'errore alla redazione usando l'apposita icona (quella che raffigura uno scarafaggio) della toolbar qui sotto.
Precedente: Ruby on Rails e la falla nella difesa dall'attacco CSRF
Successiva: Unit testing con Microsoft Moles Framework
Copyright Programmazione.it™ 1999-2013. Alcuni diritti riservati. Testata giornalistica iscritta col n. 569 presso il Tribunale di Milano in data 14/10/2002. Pagina generata in 0.341 secondi.