SlideShare uma empresa Scribd logo
Introdução ao JavaScript e DOM
Romualdo André da Costa
Engenheiro de Computação – UEFS
Analista de TI – UFRB
http://www.programadorfeirense.com.br
Sumário
● Um pouco de história
● Características
● Como isso funciona?
● Declarando uma variável
● Expressões
● Laços
● Decisões
● Arrays
Sumário
● Funções
● Objetos
● 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
● var number=2;
● var floatNumber=3.14;
● var name=”Dr. Light”;
● var isValid=false;
● var cupsOfBeer;
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
Expressões
● var scoop+=1;
● var x=Math.random() * 10;
● var ipi=0;
● var full=volume >= 10;
● var greeting=”Hello ”+name;
Laços
var enemys=10;
while (enemys > 0){
console.log('Resta '+enemys+' inimigos.');
enemys=enemys-1;
}
Laços
for(var cups=1; cups<3;cups++){
console.log('Bebi '+cups+' copos de cerveja.');
}
alert('Não dirija!');
Decisões
var hour=12;
if(hour < 9){
alert('Chegou cedo!');
}
else if(hour == 9){
alert('na hora!');
}
else{
alert('Atrasado!');
}
var i;
if(i) console.log('definido'); else console.log('undefined');
Arrays
var sabores=new Array();
sabores[0]='chocolate';
sabores[1]='creme';
sabores[3]='limão';
var androids=[16,17,18,19,20,30,40,44,50,51,60];
var mix=['a',true,4.67];
Funções
function soma(a,b){
a=a+b;
return a;
}
console.log(soma(3,4));
var pula=function (){
console.log('pulei!');
}
pula();
Funções
function compara(comparador){
var c=4,d=5;
console.log(comparador(a,b));
}
//função anônima
compara(function (a,b){ return a<b;});
Objeto
var moto={
cilindrada: 150,
ano: 2014,
acelera: function (){
console.log('vvvruuummmmm!');
}
};
moto.modelo=2015;
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
document
html
head
title
Hello
script
window.onload=hello;
Input id=”nome”
Interação entre JavaScript e DOM
● Ver arquivos index.html e hello.js
Referências
● Head First: HTML5 Programming
● JavaScript: a bíblia
● World Wide Web: Como programar
● Site: www.codecademy.com

Mais conteúdo relacionado

Mais procurados

Visao geralti netshoes03
Visao geralti netshoes03Visao geralti netshoes03
Visao geralti netshoes03
Alexandre Uehara
 
Visao geralti netshoes03
Visao geralti netshoes03Visao geralti netshoes03
Visao geralti netshoes03
Ale Uehara
 
Javascript nos dias de hoje
Javascript nos dias de hojeJavascript nos dias de hoje
Javascript nos dias de hoje
Caio Ribeiro Pereira
 
Node.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizarNode.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizar
Filipe Falcão
 
Primeiros passos com protractor - GUTS-SC
Primeiros passos com protractor - GUTS-SCPrimeiros passos com protractor - GUTS-SC
Primeiros passos com protractor - GUTS-SC
Walmyr Lima e Silva Filho
 
Nodejs justdigital
Nodejs justdigitalNodejs justdigital
Nodejs justdigital
Just Digital
 
Curso de Node.js e MongoDB - 03
Curso de Node.js e MongoDB - 03Curso de Node.js e MongoDB - 03
Curso de Node.js e MongoDB - 03
Luiz Duarte
 
Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?
Pablo Souza
 
Node.js for Noobs
Node.js for NoobsNode.js for Noobs
Node.js for Noobs
Caio Ribeiro Pereira
 
Por que Node JS?
Por que Node JS?Por que Node JS?
Por que Node JS?
Austin Felipe Santos
 
Conhecendo o Nodejs
Conhecendo o NodejsConhecendo o Nodejs
Conhecendo o Nodejs
Caio Cutrim
 
Curso de Node.js e MongoDB - 13
Curso de Node.js e MongoDB - 13Curso de Node.js e MongoDB - 13
Curso de Node.js e MongoDB - 13
Luiz Duarte
 
Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJS
Giovanni Bassi
 
Curso de Node.js e MongoDB - 06
Curso de Node.js e MongoDB - 06Curso de Node.js e MongoDB - 06
Curso de Node.js e MongoDB - 06
Luiz Duarte
 
MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.
Leonardo Quevedo
 
Node.js e a web do futuro
Node.js e a web do futuroNode.js e a web do futuro
Node.js e a web do futuro
Alberto Souza
 
Jclouds jug vale
Jclouds jug valeJclouds jug vale
Jclouds jug vale
Eclis Rodrigues de Castilho
 
Conhecendo mundo Node.js
Conhecendo mundo Node.jsConhecendo mundo Node.js
Conhecendo mundo Node.js
Caio Ribeiro Pereira
 
Groovy stack
Groovy stackGroovy stack
Groovy stack
Leonardo Silva
 

Mais procurados (19)

Visao geralti netshoes03
Visao geralti netshoes03Visao geralti netshoes03
Visao geralti netshoes03
 
Visao geralti netshoes03
Visao geralti netshoes03Visao geralti netshoes03
Visao geralti netshoes03
 
Javascript nos dias de hoje
Javascript nos dias de hojeJavascript nos dias de hoje
Javascript nos dias de hoje
 
Node.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizarNode.js: 5 razões para começar a utilizar
Node.js: 5 razões para começar a utilizar
 
Primeiros passos com protractor - GUTS-SC
Primeiros passos com protractor - GUTS-SCPrimeiros passos com protractor - GUTS-SC
Primeiros passos com protractor - GUTS-SC
 
Nodejs justdigital
Nodejs justdigitalNodejs justdigital
Nodejs justdigital
 
Curso de Node.js e MongoDB - 03
Curso de Node.js e MongoDB - 03Curso de Node.js e MongoDB - 03
Curso de Node.js e MongoDB - 03
 
Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?Node.js - Devo adotar na minha empresa?
Node.js - Devo adotar na minha empresa?
 
Node.js for Noobs
Node.js for NoobsNode.js for Noobs
Node.js for Noobs
 
Por que Node JS?
Por que Node JS?Por que Node JS?
Por que Node JS?
 
Conhecendo o Nodejs
Conhecendo o NodejsConhecendo o Nodejs
Conhecendo o Nodejs
 
Curso de Node.js e MongoDB - 13
Curso de Node.js e MongoDB - 13Curso de Node.js e MongoDB - 13
Curso de Node.js e MongoDB - 13
 
Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJS
 
Curso de Node.js e MongoDB - 06
Curso de Node.js e MongoDB - 06Curso de Node.js e MongoDB - 06
Curso de Node.js e MongoDB - 06
 
MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.
 
Node.js e a web do futuro
Node.js e a web do futuroNode.js e a web do futuro
Node.js e a web do futuro
 
Jclouds jug vale
Jclouds jug valeJclouds jug vale
Jclouds jug vale
 
Conhecendo mundo Node.js
Conhecendo mundo Node.jsConhecendo mundo Node.js
Conhecendo mundo Node.js
 
Groovy stack
Groovy stackGroovy stack
Groovy stack
 

Semelhante a Introdução JavaScript e DOM

Iniciando com javaScript 2017
Iniciando com javaScript 2017Iniciando com javaScript 2017
Iniciando com javaScript 2017
Romualdo Andre
 
Typescript
TypescriptTypescript
Typescript
Adrian Caetano
 
Introdução ao JavaScript e DOM
Introdução ao JavaScript e DOMIntrodução ao JavaScript e DOM
Introdução ao JavaScript e DOM
Romualdo Andre
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
Eduardo Bohrer
 
JavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistemaJavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistema
Fabio Agostinho Boris
 
Programacao de macros_com_libre_office_basic_slideshare
Programacao de macros_com_libre_office_basic_slideshareProgramacao de macros_com_libre_office_basic_slideshare
Programacao de macros_com_libre_office_basic_slideshare
Marcio Junior Vieira
 
Programação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice BasicProgramação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice Basic
Marcio Junior Vieira
 
Programação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice BasicProgramação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice Basic
Ambiente Livre
 
Palestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVAPalestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVA
Thiago Cifani
 
Mapa de aprendizado Front End
Mapa de aprendizado Front EndMapa de aprendizado Front End
Mapa de aprendizado Front End
Caio Vaccaro
 
Apresentação java
Apresentação javaApresentação java
Apresentação java
munosai
 
Introdução à programação em Ruby
Introdução à programação em RubyIntrodução à programação em Ruby
Introdução à programação em Ruby
Daniel Andrade
 
Java e orientação a objetos
Java e orientação a objetosJava e orientação a objetos
Java e orientação a objetos
Frederico Maia Arantes
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!
Lucas Brasilino
 
O Poder do JavaScript
O Poder do JavaScriptO Poder do JavaScript
O Poder do JavaScript
Gabriel Ferreira
 
Utilizando NoSQL no desenvolvimento de soluções inteligentes
Utilizando NoSQL no desenvolvimento de soluções inteligentesUtilizando NoSQL no desenvolvimento de soluções inteligentes
Utilizando NoSQL no desenvolvimento de soluções inteligentes
Christiano Anderson
 
Javascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosJavascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - Conceitos
Wesley Lemos
 
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
tdc-globalcode
 
HackaPET 2019: React
HackaPET 2019: ReactHackaPET 2019: React
HackaPET 2019: React
Maira Bello
 
Node js - O poder do JavaScript do lado do servidor
Node js  - O poder do JavaScript do lado do servidorNode js  - O poder do JavaScript do lado do servidor
Node js - O poder do JavaScript do lado do servidor
Romulo Fagundes
 

Semelhante a Introdução JavaScript e DOM (20)

Iniciando com javaScript 2017
Iniciando com javaScript 2017Iniciando com javaScript 2017
Iniciando com javaScript 2017
 
Typescript
TypescriptTypescript
Typescript
 
Introdução ao JavaScript e DOM
Introdução ao JavaScript e DOMIntrodução ao JavaScript e DOM
Introdução ao JavaScript e DOM
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
 
JavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistemaJavaScript: uma visão geral da linguagem e seu ecossistema
JavaScript: uma visão geral da linguagem e seu ecossistema
 
Programacao de macros_com_libre_office_basic_slideshare
Programacao de macros_com_libre_office_basic_slideshareProgramacao de macros_com_libre_office_basic_slideshare
Programacao de macros_com_libre_office_basic_slideshare
 
Programação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice BasicProgramação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice Basic
 
Programação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice BasicProgramação de Macros com LibreOffice Basic
Programação de Macros com LibreOffice Basic
 
Palestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVAPalestra Desenvolvimento Ágil para Web com ROR UVA
Palestra Desenvolvimento Ágil para Web com ROR UVA
 
Mapa de aprendizado Front End
Mapa de aprendizado Front EndMapa de aprendizado Front End
Mapa de aprendizado Front End
 
Apresentação java
Apresentação javaApresentação java
Apresentação java
 
Introdução à programação em Ruby
Introdução à programação em RubyIntrodução à programação em Ruby
Introdução à programação em Ruby
 
Java e orientação a objetos
Java e orientação a objetosJava e orientação a objetos
Java e orientação a objetos
 
AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!AJAX?? Não!! Asynchronous Javascript and... JSON!!
AJAX?? Não!! Asynchronous Javascript and... JSON!!
 
O Poder do JavaScript
O Poder do JavaScriptO Poder do JavaScript
O Poder do JavaScript
 
Utilizando NoSQL no desenvolvimento de soluções inteligentes
Utilizando NoSQL no desenvolvimento de soluções inteligentesUtilizando NoSQL no desenvolvimento de soluções inteligentes
Utilizando NoSQL no desenvolvimento de soluções inteligentes
 
Javascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosJavascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - Conceitos
 
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
 
HackaPET 2019: React
HackaPET 2019: ReactHackaPET 2019: React
HackaPET 2019: React
 
Node js - O poder do JavaScript do lado do servidor
Node js  - O poder do JavaScript do lado do servidorNode js  - O poder do JavaScript do lado do servidor
Node js - O poder do JavaScript do lado do servidor
 

Mais de Romualdo Andre

Web, híbrido, cross compiled ou nativo: qual escolher?
Web, híbrido, cross compiled ou nativo: qual escolher?Web, híbrido, cross compiled ou nativo: qual escolher?
Web, híbrido, cross compiled ou nativo: qual escolher?
Romualdo Andre
 
Python Class
Python ClassPython Class
Python Class
Romualdo Andre
 
Dúvidas e respostas sobre carreira de TI: serviço público
Dúvidas e respostas sobre carreira de TI: serviço públicoDúvidas e respostas sobre carreira de TI: serviço público
Dúvidas e respostas sobre carreira de TI: serviço público
Romualdo Andre
 
Tendências 2018
Tendências 2018Tendências 2018
Tendências 2018
Romualdo Andre
 
Codelab HTML e CSS
Codelab HTML e CSSCodelab HTML e CSS
Codelab HTML e CSS
Romualdo Andre
 
Império JavaScript
Império JavaScriptImpério JavaScript
Império JavaScript
Romualdo Andre
 
Angular 2 Básico
Angular 2 BásicoAngular 2 Básico
Angular 2 Básico
Romualdo Andre
 
Facilite a vida com guava
Facilite a vida com guavaFacilite a vida com guava
Facilite a vida com guava
Romualdo Andre
 
Web, híbrido, cross compiled ou nativo: qual escolher?
Web, híbrido, cross compiled ou nativo: qual escolher?Web, híbrido, cross compiled ou nativo: qual escolher?
Web, híbrido, cross compiled ou nativo: qual escolher?
Romualdo Andre
 
Android Studio: Primeiros Passos
Android Studio: Primeiros PassosAndroid Studio: Primeiros Passos
Android Studio: Primeiros Passos
Romualdo Andre
 
Corrigindo o vestibular com Python e OpenCV
Corrigindo o vestibular com Python e OpenCVCorrigindo o vestibular com Python e OpenCV
Corrigindo o vestibular com Python e OpenCV
Romualdo Andre
 
O programador e o super carro
O programador e o super carroO programador e o super carro
O programador e o super carro
Romualdo Andre
 
Identificação de grupos de estudantes no Prosel usando Mapas de Kohonen
Identificação de grupos de estudantes no Prosel usando Mapas de KohonenIdentificação de grupos de estudantes no Prosel usando Mapas de Kohonen
Identificação de grupos de estudantes no Prosel usando Mapas de Kohonen
Romualdo Andre
 
Exercício 2: Aplicações de Algoritmos Evolutivos
Exercício 2: Aplicações de Algoritmos EvolutivosExercício 2: Aplicações de Algoritmos Evolutivos
Exercício 2: Aplicações de Algoritmos Evolutivos
Romualdo Andre
 
Uso de redes neurais na classificação de frutas
Uso de redes neurais na classificação de frutasUso de redes neurais na classificação de frutas
Uso de redes neurais na classificação de frutas
Romualdo Andre
 
Introdução ao XML
Introdução ao XMLIntrodução ao XML
Introdução ao XML
Romualdo Andre
 

Mais de Romualdo Andre (16)

Web, híbrido, cross compiled ou nativo: qual escolher?
Web, híbrido, cross compiled ou nativo: qual escolher?Web, híbrido, cross compiled ou nativo: qual escolher?
Web, híbrido, cross compiled ou nativo: qual escolher?
 
Python Class
Python ClassPython Class
Python Class
 
Dúvidas e respostas sobre carreira de TI: serviço público
Dúvidas e respostas sobre carreira de TI: serviço públicoDúvidas e respostas sobre carreira de TI: serviço público
Dúvidas e respostas sobre carreira de TI: serviço público
 
Tendências 2018
Tendências 2018Tendências 2018
Tendências 2018
 
Codelab HTML e CSS
Codelab HTML e CSSCodelab HTML e CSS
Codelab HTML e CSS
 
Império JavaScript
Império JavaScriptImpério JavaScript
Império JavaScript
 
Angular 2 Básico
Angular 2 BásicoAngular 2 Básico
Angular 2 Básico
 
Facilite a vida com guava
Facilite a vida com guavaFacilite a vida com guava
Facilite a vida com guava
 
Web, híbrido, cross compiled ou nativo: qual escolher?
Web, híbrido, cross compiled ou nativo: qual escolher?Web, híbrido, cross compiled ou nativo: qual escolher?
Web, híbrido, cross compiled ou nativo: qual escolher?
 
Android Studio: Primeiros Passos
Android Studio: Primeiros PassosAndroid Studio: Primeiros Passos
Android Studio: Primeiros Passos
 
Corrigindo o vestibular com Python e OpenCV
Corrigindo o vestibular com Python e OpenCVCorrigindo o vestibular com Python e OpenCV
Corrigindo o vestibular com Python e OpenCV
 
O programador e o super carro
O programador e o super carroO programador e o super carro
O programador e o super carro
 
Identificação de grupos de estudantes no Prosel usando Mapas de Kohonen
Identificação de grupos de estudantes no Prosel usando Mapas de KohonenIdentificação de grupos de estudantes no Prosel usando Mapas de Kohonen
Identificação de grupos de estudantes no Prosel usando Mapas de Kohonen
 
Exercício 2: Aplicações de Algoritmos Evolutivos
Exercício 2: Aplicações de Algoritmos EvolutivosExercício 2: Aplicações de Algoritmos Evolutivos
Exercício 2: Aplicações de Algoritmos Evolutivos
 
Uso de redes neurais na classificação de frutas
Uso de redes neurais na classificação de frutasUso de redes neurais na classificação de frutas
Uso de redes neurais na classificação de frutas
 
Introdução ao XML
Introdução ao XMLIntrodução ao XML
Introdução ao XML
 

Introdução JavaScript e DOM