44
Javascript Moderno Jean Carlo Nascimento aka Suissa

Javascript moderno

Embed Size (px)

DESCRIPTION

Palestra sobre Javascript Moderno dada no WOB2012

Citation preview

Page 1: Javascript moderno

Javascript ModernoJean Carlo Nascimento aka Suissa

Page 3: Javascript moderno

Breve História do Javascript

Page 4: Javascript moderno
Page 5: Javascript moderno
Page 6: Javascript moderno

"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

Page 7: Javascript moderno
Page 8: Javascript moderno

LiveScript

Page 9: Javascript moderno
Page 10: Javascript moderno
Page 11: Javascript moderno
Page 12: Javascript moderno
Page 13: Javascript moderno
Page 14: Javascript moderno
Page 15: Javascript moderno
Page 16: Javascript moderno
Page 17: Javascript moderno
Page 18: Javascript moderno

Como selecionar um elemento?

Page 19: Javascript moderno

jQuery

$('#container');

Page 20: Javascript moderno

Javascript Modernovar container = document.querySelector('#container');

Page 21: Javascript moderno

Javascript Velhovar container = document.getElementById('container');

Page 22: Javascript moderno

Como procurar li's?

Page 23: Javascript moderno

jQuery

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

Page 24: Javascript moderno

Javascript Modernovar lis = document.querySelectorAll('#container li');

Page 25: Javascript moderno

Javascript Velhovar lis = document

.getElementById('container')

.getElementsByTagName('li');

Page 26: Javascript moderno

Trabalhando com classes

Page 27: Javascript moderno

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

Page 28: Javascript moderno

Javascript Modernovar container = document.querySelector('#box');

container.classList.add('wrap');container.classList.remove('wrap');container.classList.toggle('wrap');

Page 29: Javascript moderno

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');

Page 30: Javascript moderno

HTML5

Page 31: Javascript moderno
Page 32: Javascript moderno
Page 33: Javascript moderno

Node.js

Page 34: Javascript moderno

Node.js

Page 35: Javascript moderno
Page 36: Javascript moderno
Page 37: Javascript moderno
Page 38: Javascript moderno
Page 39: Javascript moderno
Page 40: Javascript moderno
Page 41: Javascript moderno
Page 42: Javascript moderno
Page 43: Javascript moderno
Page 44: Javascript moderno