This document provides a summary of modern JavaScript compared to older techniques. It discusses how elements can be selected, lists can be found, and classes can be manipulated. It also briefly mentions the history of JavaScript and related technologies like jQuery, LiveScript, HTML5 and Node.js.

1. Javascript Moderno
Jean Carlo Nascimento aka Suissa

2. Links
nosqlbr.com.br
jquerybrasil.org
frontendbrasil.com.br
javascriptbrasil.com.br
comoprogramarphp.com.br
github.com/suissa
about.me/suissa
@osuissa

3. Breve História do Javascript

6. "JS had to 'look like Java' only less so, be
Java’s dumb kid brother or boy-hostage
sidekick. Plus, I had to be done in ten
days or something worse than JS would
have happened". Brendan Eich

8. LiveScript

18. Como selecionar um elemento?

19. jQuery
$('#container');

20. Javascript Moderno
var container = document.querySelector
('#container');

21. Javascript Velho
var container = document.getElementById
('container');

22. Como procurar li's?

23. jQuery
$('#container').find('li');

24. Javascript Moderno
var lis = document.querySelectorAll
('#container li');

25. Javascript Velho
var lis = document
.getElementById('container')
.getElementsByTagName('li');

26. Trabalhando com classes

27. jQuery
$('#box').addClass('wrap');
$('#box').removeClass('wrap');
$('#box').toggleClass('wrap');

28. Javascript Moderno
var container = document.querySelector
('#box');
container.classList.add('wrap');
container.classList.remove('wrap');
container.classList.toggle('wrap');

29. Javascript Velho
var 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');

30. HTML5

33. Node.js

34. Node.js