SlideShare uma empresa Scribd logo
1 de 22
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 netshoes03Ale Uehara
 
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 utilizarFilipe Falcão
 
Nodejs justdigital
Nodejs justdigitalNodejs justdigital
Nodejs justdigitalJust 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 - 03Luiz 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
 
Conhecendo o Nodejs
Conhecendo o NodejsConhecendo o Nodejs
Conhecendo o NodejsCaio 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 - 13Luiz Duarte
 
Introdução ao NodeJS
Introdução ao NodeJSIntrodução ao NodeJS
Introdução ao NodeJSGiovanni 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 - 06Luiz 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 futuroAlberto Souza
 

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 2017Romualdo Andre
 
Introdução ao JavaScript e DOM
Introdução ao JavaScript e DOMIntrodução ao JavaScript e DOM
Introdução ao JavaScript e DOMRomualdo 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çadoEduardo 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 ecossistemaFabio 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_slideshareMarcio 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 BasicMarcio 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 BasicAmbiente 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 UVAThiago Cifani
 
Mapa de aprendizado Front End
Mapa de aprendizado Front EndMapa de aprendizado Front End
Mapa de aprendizado Front EndCaio Vaccaro
 
Apresentação java
Apresentação javaApresentação java
Apresentação javamunosai
 
Introdução à programação em Ruby
Introdução à programação em RubyIntrodução à programação em Ruby
Introdução à programação em RubyDaniel Andrade
 
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
 
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 inteligentesChristiano Anderson
 
Javascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosJavascript para CSharpers 3 - Conceitos
Javascript para CSharpers 3 - ConceitosWesley 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: ReactMaira 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 servidorRomulo 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
 
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úblicoRomualdo Andre
 
Facilite a vida com guava
Facilite a vida com guavaFacilite a vida com guava
Facilite a vida com guavaRomualdo 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 PassosRomualdo 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 OpenCVRomualdo Andre
 
O programador e o super carro
O programador e o super carroO programador e o super carro
O programador e o super carroRomualdo 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 KohonenRomualdo 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 EvolutivosRomualdo 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 frutasRomualdo 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