SlideShare una empresa de Scribd logo
1 de 44
Descargar para leer sin conexión
Javascript Moderno
Jean Carlo Nascimento aka Suissa
Links
               nosqlbr.com.br
              jquerybrasil.org
           frontendbrasil.com.br
          javascriptbrasil.com.br
        comoprogramarphp.com.br
             github.com/suissa
              about.me/suissa
                 @osuissa
Breve História do Javascript
"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
LiveScript
Como selecionar um elemento?
jQuery
$('#container');
Javascript Moderno
var container = document.querySelector
('#container');
Javascript Velho
var container = document.getElementById
('container');
Como procurar li's?
jQuery
$('#container').find('li');
Javascript Moderno
var lis = document.querySelectorAll
('#container li');
Javascript Velho
var lis = document
          .getElementById('container')
          .getElementsByTagName('li');
Trabalhando com classes
jQuery
$('#box').addClass('wrap');
$('#box').removeClass('wrap');
$('#box').toggleClass('wrap');
Javascript Moderno
var container = document.querySelector
('#box');

container.classList.add('wrap');
container.classList.remove('wrap');
container.classList.toggle('wrap');
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');
HTML5
Node.js
Node.js
Javascript moderno
Javascript moderno
Javascript moderno
Javascript moderno
Javascript moderno
Javascript moderno
Javascript moderno
Javascript moderno
Javascript moderno
Javascript moderno

Más contenido relacionado

Similar a Javascript moderno

Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
Chris Alfano
 

Similar a Javascript moderno (8)

H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
 
An Introduction to Jquery
An Introduction to JqueryAn Introduction to Jquery
An Introduction to Jquery
 
So long, jQuery, and thanks for all the fish!
So long, jQuery, and thanks for all the fish!So long, jQuery, and thanks for all the fish!
So long, jQuery, and thanks for all the fish!
 
Jquery News Packages
Jquery News PackagesJquery News Packages
Jquery News Packages
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricks
 
Let jQuery Rock Your World
Let jQuery Rock Your WorldLet jQuery Rock Your World
Let jQuery Rock Your World
 
Javascript in Plone
Javascript in PloneJavascript in Plone
Javascript in Plone
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011
 

Más de Suissa

Secot banco de dados no sql de código aberto
Secot   banco de dados no sql de código abertoSecot   banco de dados no sql de código aberto
Secot banco de dados no sql de código aberto
Suissa
 
Flisol - Nodejs e MongoDb o casamento perfeito
Flisol - Nodejs e MongoDb o casamento perfeitoFlisol - Nodejs e MongoDb o casamento perfeito
Flisol - Nodejs e MongoDb o casamento perfeito
Suissa
 
Fisl banco de dados no sql de código aberto
Fisl   banco de dados no sql de código abertoFisl   banco de dados no sql de código aberto
Fisl banco de dados no sql de código aberto
Suissa
 
Curso mongo db com php
Curso mongo db com phpCurso mongo db com php
Curso mongo db com php
Suissa
 
Html5 storage api
Html5 storage apiHtml5 storage api
Html5 storage api
Suissa
 

Más de Suissa (20)

ES6 funcional TDC - Suissa
ES6 funcional TDC - SuissaES6 funcional TDC - Suissa
ES6 funcional TDC - Suissa
 
TypeScript - Olhe teu tipo, script slides
TypeScript - Olhe teu tipo, script slidesTypeScript - Olhe teu tipo, script slides
TypeScript - Olhe teu tipo, script slides
 
Mongoose - Melhores práticas usando MongoDB e Node.js
Mongoose - Melhores práticas usando MongoDB e Node.jsMongoose - Melhores práticas usando MongoDB e Node.js
Mongoose - Melhores práticas usando MongoDB e Node.js
 
Atomic design
Atomic design Atomic design
Atomic design
 
Palestra node.js
Palestra   node.js Palestra   node.js
Palestra node.js
 
Be MEAN JSConf Uruguay - Suissa
Be MEAN JSConf Uruguay - SuissaBe MEAN JSConf Uruguay - Suissa
Be MEAN JSConf Uruguay - Suissa
 
Atomic design
Atomic designAtomic design
Atomic design
 
Be MEAN
Be MEANBe MEAN
Be MEAN
 
Be mean
Be meanBe mean
Be mean
 
Devcast node.js e mongo db o casamento perfeito
Devcast   node.js e mongo db o casamento perfeitoDevcast   node.js e mongo db o casamento perfeito
Devcast node.js e mongo db o casamento perfeito
 
Secot banco de dados no sql de código aberto
Secot   banco de dados no sql de código abertoSecot   banco de dados no sql de código aberto
Secot banco de dados no sql de código aberto
 
Flisol - Nodejs e MongoDb o casamento perfeito
Flisol - Nodejs e MongoDb o casamento perfeitoFlisol - Nodejs e MongoDb o casamento perfeito
Flisol - Nodejs e MongoDb o casamento perfeito
 
Ph pn rio 2012 - conheça seu primeiro banco de dados orientado a grafos
Ph pn rio 2012 - conheça seu primeiro banco de dados orientado a grafosPh pn rio 2012 - conheça seu primeiro banco de dados orientado a grafos
Ph pn rio 2012 - conheça seu primeiro banco de dados orientado a grafos
 
DevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsDevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webapps
 
DevDay - MongoDb no mundo real - slides
DevDay - MongoDb no mundo real - slidesDevDay - MongoDb no mundo real - slides
DevDay - MongoDb no mundo real - slides
 
Fisl banco de dados no sql de código aberto
Fisl   banco de dados no sql de código abertoFisl   banco de dados no sql de código aberto
Fisl banco de dados no sql de código aberto
 
Mongo db no mundo real slides
Mongo db no mundo real   slidesMongo db no mundo real   slides
Mongo db no mundo real slides
 
Curso mongo db com php
Curso mongo db com phpCurso mongo db com php
Curso mongo db com php
 
Html5 storage api
Html5 storage apiHtml5 storage api
Html5 storage api
 
Palestra sobre MongoDB com PHP no PHP'n'Rio
Palestra sobre MongoDB com PHP no PHP'n'Rio Palestra sobre MongoDB com PHP no PHP'n'Rio
Palestra sobre MongoDB com PHP no PHP'n'Rio
 

Último

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
 

Último (20)

08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 

Javascript moderno