SlideShare uma empresa Scribd logo
Introdução ao JavaScript e DOM




      Romualdo André da Costa
  Engenheiro de Computação - UEFS
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
●   Usando JavaScript
●   DOM
●   Interação entre JavaScript e DOM
Um pouco de história
●   No início, as páginas eram estáticas
●   Brendan Eich
●   Mocha → LiveScript → JavaScript
●   Netscape 2.0: 1995
●   Baseado em ECMAScript
Características
●   Imperativa e Estruturada
●   Dinâmica
●   Baseada em objetos
●   Funcional
●   Vários ambientes: web, desktop, servidor
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=scoop-1;
●   var x=Math.random() * 10;
●   var ipi=0;
●   var full=volume >= 10;
●   var greeting=”Hello ”+name;
Laços
var enemys=100;
while (enemys > 0){
    shootEnemy();
    enemys=enemys-1;
}
Laços
for(var cups=0; cups<10;cups++){
    drinkBeer();
}
alert(“you cannot drive!”);
Decisões
if(hour < 10){
    alert(“Chegou cedo!”)
}
else if(hour == 10){
    alert(“na hora!”);
}
else{
    alert(“Atrasado!”)
}
Arrays
var sabores=new Array();
sabores[0]=”chocolate”;
sabores[1]=”creme”;


var androids=[16,17,18,19,20];


var len=androids.length;
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



       script           title              Input id=”nome”

window.onload=hello;   Hello
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

Mais conteúdo relacionado

Mais procurados

Uma implementação de suporte a
Uma implementação de suporte a Uma implementação de suporte a
Uma implementação de suporte a
Rômulo Jales
 
Realtime com node.js e socket.io
Realtime com node.js e socket.ioRealtime com node.js e socket.io
Realtime com node.js e socket.io
Caio Ribeiro Pereira
 
Ambiente web (extra)
Ambiente web (extra)Ambiente web (extra)
Ambiente web (extra)
Anderson Henrique
 
Codelab: TypeScript
Codelab: TypeScriptCodelab: TypeScript
Codelab: TypeScript
Romualdo Andre
 
Introdução JavaScript e DOM
Introdução JavaScript e DOMIntrodução JavaScript e DOM
Introdução JavaScript e DOM
Romualdo Andre
 
PHPMongoDB
PHPMongoDBPHPMongoDB
PHPMongoDB
Michel Felipe
 
Java web 6 JSP Expression Language Taglib parte 2
Java web 6 JSP Expression Language Taglib parte 2Java web 6 JSP Expression Language Taglib parte 2
Java web 6 JSP Expression Language Taglib parte 2
Eduardo Mendes
 
Aula de Node
Aula de NodeAula de Node
Aula de Node
Alexandre Oliveira
 
Conteudo curso php
Conteudo curso phpConteudo curso php
Conteudo curso php
Jesse Oliveira
 

Mais procurados (9)

Uma implementação de suporte a
Uma implementação de suporte a Uma implementação de suporte a
Uma implementação de suporte a
 
Realtime com node.js e socket.io
Realtime com node.js e socket.ioRealtime com node.js e socket.io
Realtime com node.js e socket.io
 
Ambiente web (extra)
Ambiente web (extra)Ambiente web (extra)
Ambiente web (extra)
 
Codelab: TypeScript
Codelab: TypeScriptCodelab: TypeScript
Codelab: TypeScript
 
Introdução JavaScript e DOM
Introdução JavaScript e DOMIntrodução JavaScript e DOM
Introdução JavaScript e DOM
 
PHPMongoDB
PHPMongoDBPHPMongoDB
PHPMongoDB
 
Java web 6 JSP Expression Language Taglib parte 2
Java web 6 JSP Expression Language Taglib parte 2Java web 6 JSP Expression Language Taglib parte 2
Java web 6 JSP Expression Language Taglib parte 2
 
Aula de Node
Aula de NodeAula de Node
Aula de Node
 
Conteudo curso php
Conteudo curso phpConteudo curso php
Conteudo curso php
 

Semelhante a Introdução ao JavaScript e DOM

Programando em Go
Programando em GoProgramando em Go
Introdução ao NoSql
Introdução ao NoSqlIntrodução ao NoSql
Introdução ao NoSql
Paulo Roberto Donatilio Rego
 
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Julio Betta
 
PHP GERAL
PHP GERALPHP GERAL
PHP GERAL
Lucas Batistussi
 
Aula 03 - DOM.pdf
Aula 03 - DOM.pdfAula 03 - DOM.pdf
Aula 03 - DOM.pdf
LeonardoSantos779938
 
Aula 02 - Introdução ao PHP - Programação Web
Aula 02  - Introdução ao PHP - Programação WebAula 02  - Introdução ao PHP - Programação Web
Aula 02 - Introdução ao PHP - Programação Web
Dalton Martins
 
PHP - Programação para seres humanos
PHP - Programação para seres humanosPHP - Programação para seres humanos
PHP - Programação para seres humanos
Caike Souza
 
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
 
PHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta PerformancePHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta Performance
Felipe Ribeiro
 
Aula 01 - Curso PHP e MySQL
Aula 01 - Curso PHP e MySQLAula 01 - Curso PHP e MySQL
Aula 01 - Curso PHP e MySQL
B&R Consultoria Empresarial
 
JavaScript
JavaScriptJavaScript
JavaScript
Matheus Soares
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHP
elliando dias
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
Bruno Catão
 
Iniciando com Ruby on Rails - Luiz Fernando Pimenta
Iniciando com Ruby on Rails - Luiz Fernando PimentaIniciando com Ruby on Rails - Luiz Fernando Pimenta
Iniciando com Ruby on Rails - Luiz Fernando Pimenta
michel adriano medeiros
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day Workshop
Diego Sana
 
Java script1
Java script1Java script1
Hands On JavaScript
Hands On JavaScriptHands On JavaScript
Hands On JavaScript
Anderson Luís Furlan
 
Introdução ao PHP - Criação de sites II
Introdução ao PHP - Criação de sites IIIntrodução ao PHP - Criação de sites II
Introdução ao PHP - Criação de sites II
info_cimol
 
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 aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
Cristiano Pires Martins
 

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

Programando em Go
Programando em GoProgramando em Go
Programando em Go
 
Introdução ao NoSql
Introdução ao NoSqlIntrodução ao NoSql
Introdução ao NoSql
 
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
Ruby on Rails (VERSAO COM LAYOUT CONSERTADO)
 
PHP GERAL
PHP GERALPHP GERAL
PHP GERAL
 
Aula 03 - DOM.pdf
Aula 03 - DOM.pdfAula 03 - DOM.pdf
Aula 03 - DOM.pdf
 
Aula 02 - Introdução ao PHP - Programação Web
Aula 02  - Introdução ao PHP - Programação WebAula 02  - Introdução ao PHP - Programação Web
Aula 02 - Introdução ao PHP - Programação Web
 
PHP - Programação para seres humanos
PHP - Programação para seres humanosPHP - Programação para seres humanos
PHP - Programação para seres humanos
 
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
 
PHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta PerformancePHP Jedi - Boas Práticas e Alta Performance
PHP Jedi - Boas Práticas e Alta Performance
 
Aula 01 - Curso PHP e MySQL
Aula 01 - Curso PHP e MySQLAula 01 - Curso PHP e MySQL
Aula 01 - Curso PHP e MySQL
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHP
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN Stack
 
Iniciando com Ruby on Rails - Luiz Fernando Pimenta
Iniciando com Ruby on Rails - Luiz Fernando PimentaIniciando com Ruby on Rails - Luiz Fernando Pimenta
Iniciando com Ruby on Rails - Luiz Fernando Pimenta
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day Workshop
 
Java script1
Java script1Java script1
Java script1
 
Hands On JavaScript
Hands On JavaScriptHands On JavaScript
Hands On JavaScript
 
Introdução ao PHP - Criação de sites II
Introdução ao PHP - Criação de sites IIIntrodução ao PHP - Criação de sites II
Introdução ao PHP - Criação de sites II
 
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 aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 

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
 
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 (15)

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
 
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
 

Último

Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
TomasSousa7
 
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
Momento da Informática
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
Momento da Informática
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
Momento da Informática
 

Último (6)

Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
 
História da Rádio- 1936-1970 século XIX .2.pptx
História da Rádio- 1936-1970 século XIX   .2.pptxHistória da Rádio- 1936-1970 século XIX   .2.pptx
História da Rádio- 1936-1970 século XIX .2.pptx
 
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdfDESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
DESENVOLVIMENTO DE SOFTWARE I_aula1-2.pdf
 
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdfTOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
TOO - TÉCNICAS DE ORIENTAÇÃO A OBJETOS aula 1.pdf
 
Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
 
Logica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptxLogica de Progamacao - Aula (1) (1).pptx
Logica de Progamacao - Aula (1) (1).pptx
 

Introdução ao JavaScript e DOM