Javascript moderno

2,072 views
1,934 views

Published on

Palestra sobre Javascript Moderno dada no WOB2012

Published in: Technology
5 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total views
2,072
On SlideShare
0
From Embeds
0
Number of Embeds
28
Actions
Shares
0
Downloads
17
Comments
5
Likes
10
Embeds 0
No embeds

No notes for slide

Javascript moderno

  1. 1. Javascript ModernoJean Carlo Nascimento aka Suissa
  2. 2. Links nosqlbr.com.br jquerybrasil.org frontendbrasil.com.br javascriptbrasil.com.br comoprogramarphp.com.br github.com/suissa about.me/suissa @osuissa
  3. 3. Breve História do Javascript
  4. 4. "JS had to look like Java only less so, beJava’s dumb kid brother or boy-hostagesidekick. Plus, I had to be done in tendays or something worse than JS wouldhave happened". Brendan Eich
  5. 5. LiveScript
  6. 6. Como selecionar um elemento?
  7. 7. jQuery$(#container);
  8. 8. Javascript Modernovar container = document.querySelector(#container);
  9. 9. Javascript Velhovar container = document.getElementById(container);
  10. 10. Como procurar lis?
  11. 11. jQuery$(#container).find(li);
  12. 12. Javascript Modernovar lis = document.querySelectorAll(#container li);
  13. 13. Javascript Velhovar lis = document .getElementById(container) .getElementsByTagName(li);
  14. 14. Trabalhando com classes
  15. 15. jQuery$(#box).addClass(wrap);$(#box).removeClass(wrap);$(#box).toggleClass(wrap);
  16. 16. Javascript Modernovar container = document.querySelector(#box);container.classList.add(wrap);container.classList.remove(wrap);container.classList.toggle(wrap);
  17. 17. Javascript Velhovar box = document.getElementById(box),hasClass = function (el, cl) { var regex = new RegExp((?:s|^) + cl + (?:s|$)); return !!el.className.match(regex);},addClass = function (el, cl) { el.className += + cl;},removeClass = function (el, cl) { var regex = new RegExp((?:s|^) + cl + (?:s|$)); el.className = el.className.replace(regex, );},toggleClass = function (el, cl) { hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl);};addClass(box, wrap);removeClass(box, wrap);toggleClass(box, wrap);
  18. 18. HTML5
  19. 19. Node.js
  20. 20. Node.js

×