Una mica d’història

• Fins fa uns anys hi havia grans diferències entre navegadors:

  • Accedint a DOM
  • Gestionant esdeveniments

• Van aparèixer llibreries per tractar aquest tipus de coses:

  • jQuery (2005)
  • Mootols (2007)
  • ….

• Què ha passat des de, posem al 2010?
  • Microsoft s’ha anat apropant als estàndards des IE9 (2011)
  • l’ús de navegadors no compatibles ha anat decreixent.
  • Hi ha més possibilitats des estigui habilitat per a accés a DOM.
  • Frameworks com Angular (des del 2010) utilitzen jqLite, una versió molt reduïda de jQuery

• Frameworks tipus React (2013) comencen a treballar amb DOM Virtual:
  • treballar amb el DOM és costós, millor treballar amb una versió “més lleugera”
  • Si es produeixen canvis en el DOM Virtual es traslladen a l’DO M real
  • jQuery treballa de forma directa amb el DOM, així que ens resta eficiència

¿Fem servir jQuery?

• Resposta ràpida nO, excepte per temes de compatibidad
• Resposta meditada:
  • Si fas una web (no una webapp) SI
    • Disposes de molts plugins i desenvolupaments ja fets
  • Si fas una webapp NO, utilitza algun framework de JS, però analitza:
    • SEO? ¿Temps de càrrega? ¿Renderització en servidor?
    • Components que necessites?

Selectors en JavaScript

• Ens hem acostumat a fer servir tant jQuery que ara toca tornar a aprendre:
  • a fer les coses amb el JavaScript d’abans
  • a utilitzar noves funcionalitats de l’JavaScript d’ara
• Si és el nostre cas, que venim d’un background amb jQuery, val la pena fer una ullada a alguna guia.

Selector de classe

// jQuery$('.myClass');// JavaScriptdocument.getElementsByClassName('myClass');

Selector de id

// jQuery$('#myID');// JavaScriptdocument.getElementById('myID');

Selector d’etiqueta

// jQuery$('div');// JavaScriptdocument.getElementsByTagName('div');

querySelector

// Grab the first .myClass class namedocument.querySelector('.myClass');// Return a NodeList of all instances of .myClassdocument.querySelectorAll('.myClass');// Grab the myID iddocument.querySelector('#myID');// Return a NodeList of all 'div' instancesdocument.querySelectorAll('div');// Grab the last list Node of .someList unordered listdocument.querySelector('ul.someList li:last-child');// Grab some data-* attributedocument.querySelectorAll('');

Esdeveniments a JavaScript

Esdeveniments

/* * Click */// jQuery$(elem).on('click', function () {...});// JavaScriptdocument.querySelector(elem).onclick = function () {...}

Encolar esdeveniments

document.addEventListener('click', function() { // ...}, false);

Esdeveniment de Dom Ready

• El suporten la majoria de navegadors

  document.addEventListener('DOMContentLoaded', function() { // DOM ready, run it!}, false);