DOM è un modello ad oggetti per la rappresentazione di un documento
DOM è un API per accedere e manipolare dinamicamente il contenuto, struttura e stile di un documento HTML/XML/XHTML
DOM (Wikipedia)Mentre un numero ristretto di caratteristiche del rendering engine e dell’interprete javascript possono risultare differenti tra un browser e l’altro, la stragrande maggioranza di esse sono state standardizzate (e continuano ad esserlo) dal W3C.
Tra le variabili disponibili nello spazio globale Javascript in un pagina web ci sono ‘window’, che rappresenta la finestra/tab contenente la pagina, e ‘document’, che rappresenta il documento stesso.
window E’ lo spazio globale:
1 | window === window.window |
2 | document === window.document |
3 |
4 | window.location |
5 | document.title |
1 | var el1 = document.getElementById("header"); |
2 | var el2 = document.getElementsByTagName("h1")[0]; |
1 | el.nodeType |
2 | el.tagName |
3 | el.innerHTML |
4 | el.textContent |
nodeType può corrispondere al valore di una delle seguenti costanti:
01 | document.ELEMENT_NODE=1 |
02 | document.ATTRIBUTE_NODE=2 |
03 | document.TEXT_NODE=3 |
04 | document.CDATA_SECTION_NODE=4 |
05 | document.ENTITY_REFERENCE_NODE=5 |
06 | document.ENTITY_NODE=6 |
07 | document.PROCESSING_INSTRUCTION_NODE=7 |
08 | document.COMMENT_NODE=8 |
09 | document.DOCUMENT_NODE=9 |
10 | document.DOCUMENT_TYPE_NODE=10 |
11 | document.DOCUMENT_FRAGMENT_NODE=11 |
12 | document.NOTATION_NODE=12 |
1 | el.parentNode |
2 | el.hasChildNodes() |
3 | el.childNodes |
4 | el.firstChild |
5 | el.lastChild |
6 | el.previousSibling |
7 | el.nextSibling |
8 | el.ownerDocument |
1 | var elements = document.getElementsByTagName("h1"); |
2 |
3 | for(var i=0; i<elements.length; i++) { |
4 | console.log(elements[i]); |
5 | } |
6 |
7 | console.log(elements[0].tagName); |
8 | console.log(elements[0].innerHTML); |
9 | console.log(elements[0].nodeType); |
1 | var current = document.body.firstChild |
2 | current = current.nextSibling |
3 | current = current.previousSibling |
4 |
5 | var parent = current.parentNode |
1 | el.getAttribute("class") |
2 | el.setAttribute("id","newtest_id_value") |
3 | el.removeAttribute("class") |
4 |
5 | el.attributes |
6 | el.attributes.length |
7 |
8 | el.attributes[0].nodeName |
9 | el.attributes[0].nodeValue |
1 | document.createElement() |
2 | document.createTextNode() |
3 |
4 | element.appendChild() |
5 | element.insertBefore() |
01 | paragraph = document.createElement('p'); |
02 | bold = document.createElement('b'); |
03 |
04 | text1 = document.createTextNode('Some random'); |
05 | text2 = document.createTextNode(' example '); |
06 | text3 = document.createTextNode('text'); |
07 |
08 | bold.appendChild(text2); |
09 | paragraph.appendChild(bold); |
10 | paragraph.appendChild(text3); |
11 | paragraph.insertBefore(text1,bold); |
12 |
13 | document.body.appendChild(paragraph); |
1 | node.addEventListener |
2 | node.removeEventListener |
3 |
4 | event.type |
5 | event.target |
1 | onclick = function(event) { |
2 | // ANALIZZA event, event.type, event.target etc. |
3 | // e fai qualcosa di utile :-) |
4 | }; |
5 | document.body.addEventListener("click", onclick, false) |
Tipi di eventi:
MouseEvents (click, mousedown, mouseup, mouseover, mousemove, mouseout)
MutationEvents (DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified)
HTMLEvents (load, unload, abort, error, reset, select, focus, blur, resize, scroll)
Dual licensed: GPL / MIT
leggero e piuttosto veloce
semplice e documentato
discreto ed estendibile
sviluppatori
real world usecases:
jQuery semplifica i patterni più comuni delle applicazioni javascript client-side:
Il tutto implementato mediante metaprogrammazione Javascript, completamente multibrowser e sotto le sembianze di un maneggevole DSL.
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…
1 | <p width="800px"> |
2 | Some text <b>Bold Text</b> Other |
3 | <i> Italic Text </i> |
4 | </p> |
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…
01 | <style TYPE="text/css"> |
02 | .wide { width: 800px; } |
03 | .bold { font-weight: bold; } |
04 | .italic { font-style: italic; } |
05 | </style> |
06 |
07 | <p class="wide"> |
08 | Some text <span class="bold">Bold Text</span> Other |
09 | <span class="italic"> Italic Text </span> |
10 | </p> |
Ma con l’ingresso di Javascript l’HTML ne è risultato nuovamente contaminato… questa volta era il comportamento (behaviour) a mescolarsi con il contenuto:
1 | <h2 onclick="this.style.color = 'red';"> CLICK ME </h2> |
I benefici ottenibili separando il compartamento (behaviour) dal contenuto sono paragonabili se non superiori a quelli ottenuti separandone lo stile con i CSS.
01 | <h2 id="clickme"> CLICK ME </h2> |
02 |
03 | <script type="text/javascript"> |
04 | function init_behaviour() { |
05 | document.getElementById("clickme"). |
06 | onclick = function() { |
07 | this.style.color = "red"; |
08 | }; |
09 | }; |
10 |
11 | window.onload = init_behaviour; |
12 | </script> |
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
Ogni release di jQuery viene rilasciata in due formati:
La release corrente è la versione 1.4.2
01 | <html> |
02 | <head> |
03 | <title>jQuery Test Page</title> |
04 | <script src="jquery.js" type="text/javascript"></script> |
05 | <script type="text/javascript"> |
06 | // YOUR CODE HERE |
07 | </script> |
08 | </head> |
09 | <body> |
10 | </body> |
11 | </html> |
Il centro dell’API di jQuery è il factory pattern costituito dal jQuery wrapper:
jQuery e il suo alias abbreviato $
1 | typeof jQuery // function |
2 | jQuery === $ // true |
3 | dir(jQuery) // navigazione object in Firebug |
4 |
5 | doc = $(document); // jQuery wrapped document |
6 | doc instanceof jQuery // true |
1 | $(document).ready(function() { |
2 | // FAI QUALCOSA DI UTILE |
3 | }); |
4 |
5 | // OPPURE |
6 |
7 | $(function() { |
8 | // FAI QUALCOSA DI UTILE |
9 | }); |
01 | $('body'); |
02 |
03 | $('body > *').each(function(i,v) { console.log(typeof v); }); |
04 |
05 | $('#test-table'); |
06 |
07 | $('.content').each(function(i,v) { console.log(v); }); |
08 |
09 | $('table tr').filter(".header").each(function(i,v) { console.log(v); }); |
10 |
11 | $('a[href^=http://]').addClass('http-link'); |
12 | $('a[href$=.pdf]').addClass('pdf-link'); |
1 | $('table tr').addClass("MYCLASS"") |
2 | $('table tr').removeClass("MYCLASS"") |
3 |
4 | $('table tr').html("MYTEXT") |
5 |
6 | $('table tr').css({background: "yellow"}) |
01 | $("<p> A new unuseful paragraph </p>"); |
02 |
03 | $("<p> A new unuseful paragraph </p>").insertAfter("#footer"); |
04 |
05 | $('body').append("<a href='http://myhost/mydoc.pdf'>test</a>"); |
06 |
07 | $('table').clone().insertAfter("h1"); |
08 |
09 | $('table').insertBefore("h1"); |
10 |
11 | $('table').insertAfter("h1"); |
12 |
13 | $($('table')[0]).remove(); |
1 | $('h1').click(function() { $(this).css({color: "red"}); }); |
2 |
3 | $('#header').click(function() { |
4 | $(this).find('h1').each(function() { |
5 | $(this).clone().insertBefore($('#footer')); |
6 | }); |
7 | }); |
1 | $('h1').click(function() { $('h1').toggle('fade'); }); |
2 |
3 | $('h1'). |
4 | mouseover(function() { $(this).css({background: "yellow"}) }). |
5 | mouseout(function() { $(this).css({background: "white"}) }); |
1 | $("<textarea/>").insertAfter("#footer"); |
2 | $.get("blank.html", function (data) { $('textarea')[0].value = data; }); |
3 | $('textarea').css({width: "100%", height: "600px"}) |
4 |
5 | $.getJSON("data.json", function(json) { console.log(json); }); |
6 |
7 | $("<div id='newcontent'/>").insertAfter('h1'); |
8 | $("#newcontent").load("remote url"); |