Post on 15-Apr-2017
Introdução a JavaScript e DOM
Romualdo André da CostaAnalista de TI – UFRB
#Thiago Mascarenhas
Analista de TI – Mederi
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
Sumário
● Destructuring assignment● Funções● Objetos● Classes e herança● Usando JavaScript● DOM● Interação entre JavaScript e DOM
Um pouco de história
No início, as páginas eram estáticas...
Um pouco de história
Brendan Eich
Um pouco de história
● Mocha → LiveScript → JavaScript● Netscape 2.0: 1995● Baseado em ECMAScript
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
Como isso funciona?
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
Declarando uma variável
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.
Hoisting
Hoisting
Expressões
Template strings
Antigamente
Hoje
Laços
Laços
Decisões
Array
Array
Array
Destructuring assignment
Destructuring assignment
Funções
Funções
Funções
Funções
Funções
Objeto
Objeto
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
Classes
Classes
Classes (Métodos Estáticos)
Classes (Herança)
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
DOM
Interação entre JavaScript e DOM
Ver arquivos hello.html e hello.js
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
Use o código JSDAY e ganhe 25% desconto em todo o site da Novatec até dia 07/08/16.
OBRIGADO!Thiago Mascarenhas
Oliveirathiago_si@ymail.com
Romualdo André da Costaromualdoandre@gmail.com
http://www.programadorfeirense.com.br/blog