SlideShare uma empresa Scribd logo
1 de 17
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
 
Introdução JavaScript e DOM
Introdução JavaScript e DOMIntrodução JavaScript e DOM
Introdução JavaScript e DOMRomualdo Andre
 
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 2Eduardo Mendes
 

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

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
 
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 WebDalton Martins
 
PHP - Programação para seres humanos
PHP - Programação para seres humanosPHP - Programação para seres humanos
PHP - Programação para seres humanosCaike 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 UVAThiago 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 PerformanceFelipe Ribeiro
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPelliando dias
 
Introdução à MEAN Stack
Introdução à MEAN StackIntrodução à MEAN Stack
Introdução à MEAN StackBruno 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 Pimentamichel adriano medeiros
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopDiego Sana
 
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 IIinfo_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 inteligentesChristiano Anderson
 

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

Introdução ao JavaScript e DOM