SlideShare uma empresa Scribd logo
1 de 44
Baixar para ler offline
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

Mais conteúdo relacionado

Semelhante a Javascript moderno

H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍
H3 경쟁력있는 웹앱 개발을 위한 모바일 js 프레임웍민태 김
 
An Introduction to Jquery
An Introduction to JqueryAn Introduction to Jquery
An Introduction to JqueryPhil Reither
 
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!Matt Turnure
 
Cheap frontend tricks
Cheap frontend tricksCheap frontend tricks
Cheap frontend tricksambiescent
 
Let jQuery Rock Your World
Let jQuery Rock Your WorldLet jQuery Rock Your World
Let jQuery Rock Your WorldMatt Gifford
 
Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Jarv.us Showcase — SenchaCon 2011
Jarv.us Showcase — SenchaCon 2011Chris Alfano
 

Semelhante 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
 

Mais de Suissa

ES6 funcional TDC - Suissa
ES6 funcional TDC - SuissaES6 funcional TDC - Suissa
ES6 funcional TDC - SuissaSuissa
 
TypeScript - Olhe teu tipo, script slides
TypeScript - Olhe teu tipo, script slidesTypeScript - Olhe teu tipo, script slides
TypeScript - Olhe teu tipo, script slidesSuissa
 
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.jsSuissa
 
Atomic design
Atomic design Atomic design
Atomic design Suissa
 
Palestra node.js
Palestra   node.js Palestra   node.js
Palestra node.js Suissa
 
Be MEAN JSConf Uruguay - Suissa
Be MEAN JSConf Uruguay - SuissaBe MEAN JSConf Uruguay - Suissa
Be MEAN JSConf Uruguay - SuissaSuissa
 
Atomic design
Atomic designAtomic design
Atomic designSuissa
 
Be MEAN
Be MEANBe MEAN
Be MEANSuissa
 
Be mean
Be meanBe mean
Be meanSuissa
 
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 perfeitoSuissa
 
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 abertoSuissa
 
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 perfeitoSuissa
 
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 grafosSuissa
 
DevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsDevDay - O elo perdido: sincronizando webapps
DevDay - O elo perdido: sincronizando webappsSuissa
 
DevDay - MongoDb no mundo real - slides
DevDay - MongoDb no mundo real - slidesDevDay - MongoDb no mundo real - slides
DevDay - MongoDb no mundo real - slidesSuissa
 
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 abertoSuissa
 
Mongo db no mundo real slides
Mongo db no mundo real   slidesMongo db no mundo real   slides
Mongo db no mundo real slidesSuissa
 
Curso mongo db com php
Curso mongo db com phpCurso mongo db com php
Curso mongo db com phpSuissa
 
Html5 storage api
Html5 storage apiHtml5 storage api
Html5 storage apiSuissa
 
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 Suissa
 

Mais 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

GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdflior mazor
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptxHampshireHUG
 
[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.pdfhans926745
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 
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...Martijn de Jong
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...DianaGray10
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessPixlogix Infotech
 
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...Neo4j
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)wesley chun
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilV3cube
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...apidays
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerThousandEyes
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
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 Scriptwesley chun
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024The Digital Insurer
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
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.pdfUK Journal
 

Último (20)

GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
[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
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Advantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your BusinessAdvantages of Hiring UIUX Design Service Providers for Your Business
Advantages of Hiring UIUX Design Service Providers for Your Business
 
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...
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 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
 
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
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
 

Javascript moderno