Introdução JavaScript e DOM 2016
-
Upload
romualdo-andre -
Category
Technology
-
view
98 -
download
2
Transcript of Introdução JavaScript e DOM 2016
![Page 1: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/1.jpg)
Introdução a JavaScript e DOM
Romualdo André da CostaAnalista de TI – UFRB
#Thiago Mascarenhas
Analista de TI – Mederi
![Page 2: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/2.jpg)
Sumário
● Um pouco de história● Características● Como isso funciona?● Declarando uma variável● Expressões● Template strings● Laços● Decisões● Arrays
![Page 3: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/3.jpg)
Sumário
● Destructuring assignment● Funções● Objetos● Classes e herança● Usando JavaScript● DOM● Interação entre JavaScript e DOM
![Page 4: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/4.jpg)
Um pouco de história
No início, as páginas eram estáticas...
![Page 5: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/5.jpg)
Um pouco de história
Brendan Eich
![Page 6: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/6.jpg)
Um pouco de história
● Mocha → LiveScript → JavaScript● Netscape 2.0: 1995● Baseado em ECMAScript
![Page 7: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/7.jpg)
Características
● Imperativa e Estruturada● Tipagem Dinâmica● Baseada em objetos● Funcional: funções são objetos de primeira classe.● Vários ambientes: web, desktop, servidor, IoT
![Page 8: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/8.jpg)
Como isso funciona?
![Page 9: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/9.jpg)
Declarando uma variável
● Comece o nome com uma letra, _ ou $● Depois use qualquer letra, número, _, $● Evite as palavras reservadas● Escolha nomes significativos● CamelCase● Use $ e _ apenas com bom motivo: convenção utilizada em algumas bibliotecas
![Page 10: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/10.jpg)
Declarando uma variável
![Page 11: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/11.jpg)
Declarando uma variável
● const: significa que a variável não pode ser alterada.● let: variável pode ser alterada no algoritmo.● var: é a forma mais “fraca” de definir uma variável em JavaScript.
![Page 12: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/12.jpg)
Hoisting
![Page 13: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/13.jpg)
Hoisting
![Page 14: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/14.jpg)
Expressões
![Page 15: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/15.jpg)
Template strings
Antigamente
Hoje
![Page 16: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/16.jpg)
Laços
![Page 17: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/17.jpg)
Laços
![Page 18: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/18.jpg)
Decisões
![Page 19: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/19.jpg)
Array
![Page 20: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/20.jpg)
Array
![Page 21: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/21.jpg)
Array
![Page 22: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/22.jpg)
Destructuring assignment
![Page 23: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/23.jpg)
Destructuring assignment
![Page 24: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/24.jpg)
Funções
![Page 25: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/25.jpg)
Funções
![Page 26: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/26.jpg)
Funções
![Page 27: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/27.jpg)
Funções
![Page 28: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/28.jpg)
Funções
![Page 29: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/29.jpg)
Objeto
![Page 30: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/30.jpg)
Objeto
![Page 31: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/31.jpg)
Classes
● Introduzida no ECMAScript 6 (Junho/2015)
● Nada mudou em relação à herança entre objetos no JavaScript
● Nova sintaxe para lidar de forma mais clara e simples com objetos
![Page 32: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/32.jpg)
Classes
![Page 33: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/33.jpg)
Classes
![Page 34: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/34.jpg)
Classes (Métodos Estáticos)
![Page 35: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/35.jpg)
Classes (Herança)
![Page 36: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/36.jpg)
Usando JavaScript
O script pode ficar dentro do <head>
Referenciar um arquivo separado dentro do <head>
Colocar o script ou a referencia ao arquivo dentro do <body>
Exemplo nos arquivos hello.html e hello.js
![Page 37: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/37.jpg)
DOM
![Page 38: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/38.jpg)
Interação entre JavaScript e DOM
Ver arquivos hello.html e hello.js
![Page 39: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/39.jpg)
Referências
Head First: HTML5 Programming
JavaScript: a bíblia
World Wide Web: Como programar
Site: www.codecademy.com
Site: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript
![Page 40: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/40.jpg)
Use o código JSDAY e ganhe 25% desconto em todo o site da Novatec até dia 07/08/16.
![Page 41: Introdução JavaScript e DOM 2016](https://reader031.fdocumentos.com/reader031/viewer/2022022412/58f218681a28ab637a8b45cf/html5/thumbnails/41.jpg)
OBRIGADO!Thiago Mascarenhas
Romualdo André da [email protected]
http://www.programadorfeirense.com.br/blog