Post on 26-Jun-2015
description
DOMinando JavaScript
Thiago Henrique Poiani
IFSP - São CarlosTecnólogo em Análise e Desenvolvimento de Sistemas
Thiago Henrique Poiani
Thiago Henrique Poiani
Apresentações
Apresentações
192.168.210.84:3000
JavaScript
História
História
JavaScript é uma linguagem de programação interpretada
Criada por Brendan Eich em 1995
Padronizada pelo grupo ECMA - ECMAScript
JavaScript
Por onde começar?
Por onde começar?
Por onde começar?
Web ConsoleAptanaEclipseKomodoJetBrains WebStormMicrosoft Visual StudioNetBeans
AtomBracketsNotepad++Sublime TextVim
JavaScript
Hello World
Web Console
JavaScript
Tipos
…
JavaScript
Operações
JavaScript
String
JavaScript
Array
JavaScript
Expressões
…
…
……
…
JavaScript
Function
…
JavaScript
Object
Objeto Literal
…
JSON - JavaScript Object Notation
Função Construtora
Callbacks
AJAX
JavaScript
Strict Mode
Strict Mode
Intervalo
JavaScript
Como vou rodar tudo que vi até agora em um site?
Como vou rodar tudo que vi até agora em um site?
Como vou rodar tudo que vi até agora em um site?
Como vou rodar tudo que vi até agora em um site?
Como vou rodar tudo que vi até agora em um site?
Content Delivery Network (CDN)
Minify / Uglify
JavaScript
O que mais JavaScript faz?
O que mais JavaScript faz?
Manipulação de DOM
DOM é uma multi-plataforma que representa como as marcações em HTML, XHTML e XML são organizadas e lidas pelo navegador
Window Object
Objeto Window representa a janela que contem o DOM.
Window.alert();Window.open();
Document Object
Objeto Document, acessível por window.document, possui o DOM Tree.
https://developer.mozilla.org/en-US/docs/Web/API/Document
JavaScript
Como manipulo um nó?
Document Object
http://caniuse.com/#feat=queryselector
Document Object
http://caniuse.com/#feat=classlist
Cross-browser
Web Semântica
http://www.w3c.br/Padroes/WebSemantica
Document Object
Document Object
Document Object
http://html5doctor.com/html5-custom-data-attributes/
JavaScript
Vamos manipular eventos?
Events
…
https://developer.mozilla.org/pt-BR/docs/Web/API/Element.addEventListener
Events
…
https://developer.mozilla.org/en-US/docs/Web/Events
Events
…
JavaScript
this
this
Toda função, ao ser executada, gera uma associação do objeto criado pelo interpretador através da palavra reservada this.
http://tableless.com.br/javascript-entendendo-o-this/
this
http://tableless.com.br/javascript-entendendo-o-this/
this
…
http://tableless.com.br/javascript-entendendo-o-this/
JavaScript
Hoje e Futuro
Hoje e Futuro
Hoje e Futuro
http://www.forbes.com/sites/quora/2014/07/14/what-is-the-most-valuable-programming-language-to-know-for-the-future-and-why/
JavaScript
Obrigado!