SlideShare uma empresa Scribd logo
1 / 6
JavaScript
Aula 04
2 / 6
Vamos interagir ?
● Relembrando a principal característica do javaScript é
interação com a pagina WEB, especificamente o
HTML.
● O JavaScript permite detectar praticamente qualquer
coisa que ocorre em uma pagina WEB, como um
usuário clicando botões, redimensionando a janela do
navegador ou fornecendo dado em um campo de texto.
3 / 6
Vamos praticar
● Eu lhes apresento
Arocha!
● Um mascote virtual
que precisa da sua
ajuda para
conseguir interagir
com os usuários
4 / 6
Vamos praticar
● Basicamente:
1. Criar uma pagina Web HTML
2. Adicionar um Alert() JavaScript para fazer
com que Arocha cumprimente o usuário
quando a pagina web for carregada.
3. Escrever o código JavaScript para solicitar o
nome do usuário, imprimir um cumprimento
personalizado e fazer a rocha sorrir.
4. Adicione uma sub-rotina de eventos ( função
) para quando o usuário clicarem na rocha, o
código escrito na etapa 3 seja executado.
5 / 6
Boa sorte!
6 / 6
6 / 6

Mais conteúdo relacionado

Mais procurados

Lifestream Em Tumblr
Lifestream Em TumblrLifestream Em Tumblr
Lifestream Em Tumblr
Juliana Garcia Sales
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Cristofer Sousa
 
Pauta 10 08
Pauta 10 08Pauta 10 08
O que é blog
O que é blogO que é blog
O que é blog
Natanael Gates
 
Como Criar e Editar um Blog
Como Criar e Editar um BlogComo Criar e Editar um Blog
Como Criar e Editar um Blog
Eduardo1
 
Ação magalhães aula2
Ação magalhães aula2Ação magalhães aula2
Ação magalhães aula2
anapatricio
 
Master App - Porque menos é mais!
Master App - Porque menos é mais!Master App - Porque menos é mais!
Master App - Porque menos é mais!
Rodrigo Serradura
 
A utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de PáginasA utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de Páginas
Ramon Sousa
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
COTIC-PROEG (UFPA)
 
O que é Web 2.0
O que é Web 2.0O que é Web 2.0
O que é Web 2.0
Agencia Sete
 

Mais procurados (10)

Lifestream Em Tumblr
Lifestream Em TumblrLifestream Em Tumblr
Lifestream Em Tumblr
 
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
Bootstrap desenvolvendo e customizando interfaces para web, introduzindo aos ...
 
Pauta 10 08
Pauta 10 08Pauta 10 08
Pauta 10 08
 
O que é blog
O que é blogO que é blog
O que é blog
 
Como Criar e Editar um Blog
Como Criar e Editar um BlogComo Criar e Editar um Blog
Como Criar e Editar um Blog
 
Ação magalhães aula2
Ação magalhães aula2Ação magalhães aula2
Ação magalhães aula2
 
Master App - Porque menos é mais!
Master App - Porque menos é mais!Master App - Porque menos é mais!
Master App - Porque menos é mais!
 
A utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de PáginasA utilização do Bootstrap Para a Otimização de Páginas
A utilização do Bootstrap Para a Otimização de Páginas
 
Acessibilidade na web
Acessibilidade na webAcessibilidade na web
Acessibilidade na web
 
O que é Web 2.0
O que é Web 2.0O que é Web 2.0
O que é Web 2.0
 

Semelhante a Aula07 - JavaScript

Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: JavascriptMódulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
Agrupamento de Escolas da Batalha
 
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio LopesOffline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio Lopes
Caelum
 
JavaScript - #Aula01 - Introdução
JavaScript - #Aula01 - IntroduçãoJavaScript - #Aula01 - Introdução
JavaScript - #Aula01 - Introdução
Erick L. F.
 
Ajax para quem_ouviu_falar
Ajax para quem_ouviu_falarAjax para quem_ouviu_falar
Ajax para quem_ouviu_falar
Charleston Anjos
 
SEO para Front-End - BeagaJS
SEO para Front-End - BeagaJSSEO para Front-End - BeagaJS
SEO para Front-End - BeagaJS
Fabio Ricotta
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
Bruno Grange
 
Tchelinux: Go Web!
Tchelinux:  Go Web!Tchelinux:  Go Web!
Tchelinux: Go Web!
Lucas L.
 
Criar um blog
Criar um blogCriar um blog
Criar um blog
IedaSantana
 
Apostila ajax
Apostila ajaxApostila ajax
Apostila ajax
Andre Meirelles
 
RIA - Conhecendo o Adobe Flex 2
RIA - Conhecendo o Adobe Flex 2RIA - Conhecendo o Adobe Flex 2
RIA - Conhecendo o Adobe Flex 2
elliando dias
 
Tutorial sobre-flogs-12848
Tutorial sobre-flogs-12848Tutorial sobre-flogs-12848
Tutorial sobre-flogs-12848
Mariá Pohlmann da Silveira
 
JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, fu...
JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, fu...JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, fu...
JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, fu...
Erick L. F.
 
Tutorial Sobre Flogs
Tutorial Sobre FlogsTutorial Sobre Flogs
Tutorial Sobre Flogs
neuza
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
Carlos Eduardo Kadu
 
Guia BáSico 3
Guia BáSico 3Guia BáSico 3
Guia BáSico 3
guest17fe7a82
 
gae
gaegae
Web Performance Client Side
Web Performance Client SideWeb Performance Client Side
Web Performance Client Side
Levy Carneiro Jr.
 
Destruindo com AJAX: evitando o apocalipse - riojs
Destruindo com AJAX: evitando o apocalipse - riojsDestruindo com AJAX: evitando o apocalipse - riojs
Destruindo com AJAX: evitando o apocalipse - riojs
Hugo Roque
 
Dreamweaver aula 1
Dreamweaver aula 1Dreamweaver aula 1
Dreamweaver aula 1
Élida Tavares
 
Aplicações Realtime em Android | Fisl 15 | GuMobileRS
Aplicações Realtime em Android | Fisl 15 | GuMobileRSAplicações Realtime em Android | Fisl 15 | GuMobileRS
Aplicações Realtime em Android | Fisl 15 | GuMobileRS
Jackson F. de A. Mafra
 

Semelhante a Aula07 - JavaScript (20)

Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: JavascriptMódulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
Módulo: 5 – Desenvolvimento de Páginas Web Dinâmicas: Javascript
 
Offline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio LopesOffline Web com Service Workers - Sérgio Lopes
Offline Web com Service Workers - Sérgio Lopes
 
JavaScript - #Aula01 - Introdução
JavaScript - #Aula01 - IntroduçãoJavaScript - #Aula01 - Introdução
JavaScript - #Aula01 - Introdução
 
Ajax para quem_ouviu_falar
Ajax para quem_ouviu_falarAjax para quem_ouviu_falar
Ajax para quem_ouviu_falar
 
SEO para Front-End - BeagaJS
SEO para Front-End - BeagaJSSEO para Front-End - BeagaJS
SEO para Front-End - BeagaJS
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Tchelinux: Go Web!
Tchelinux:  Go Web!Tchelinux:  Go Web!
Tchelinux: Go Web!
 
Criar um blog
Criar um blogCriar um blog
Criar um blog
 
Apostila ajax
Apostila ajaxApostila ajax
Apostila ajax
 
RIA - Conhecendo o Adobe Flex 2
RIA - Conhecendo o Adobe Flex 2RIA - Conhecendo o Adobe Flex 2
RIA - Conhecendo o Adobe Flex 2
 
Tutorial sobre-flogs-12848
Tutorial sobre-flogs-12848Tutorial sobre-flogs-12848
Tutorial sobre-flogs-12848
 
JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, fu...
JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, fu...JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, fu...
JavaScript - #Aula03 parte 04 - Bichinho Virtual - Evento Onclick, Prompt, fu...
 
Tutorial Sobre Flogs
Tutorial Sobre FlogsTutorial Sobre Flogs
Tutorial Sobre Flogs
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Guia BáSico 3
Guia BáSico 3Guia BáSico 3
Guia BáSico 3
 
gae
gaegae
gae
 
Web Performance Client Side
Web Performance Client SideWeb Performance Client Side
Web Performance Client Side
 
Destruindo com AJAX: evitando o apocalipse - riojs
Destruindo com AJAX: evitando o apocalipse - riojsDestruindo com AJAX: evitando o apocalipse - riojs
Destruindo com AJAX: evitando o apocalipse - riojs
 
Dreamweaver aula 1
Dreamweaver aula 1Dreamweaver aula 1
Dreamweaver aula 1
 
Aplicações Realtime em Android | Fisl 15 | GuMobileRS
Aplicações Realtime em Android | Fisl 15 | GuMobileRSAplicações Realtime em Android | Fisl 15 | GuMobileRS
Aplicações Realtime em Android | Fisl 15 | GuMobileRS
 

Mais de Jorge Ávila Miranda

Aula16 - Jquery
Aula16 - JqueryAula16 - Jquery
Aula16 - Jquery
Jorge Ávila Miranda
 
Aula15 - Array PHP
Aula15 - Array PHPAula15 - Array PHP
Aula15 - Array PHP
Jorge Ávila Miranda
 
Aula13 - Estrutura de repetição (for e while) - PHP
Aula13 - Estrutura de repetição (for e while) - PHPAula13 - Estrutura de repetição (for e while) - PHP
Aula13 - Estrutura de repetição (for e while) - PHP
Jorge Ávila Miranda
 
Aula14 - Funções em PHP
Aula14 - Funções em PHPAula14 - Funções em PHP
Aula14 - Funções em PHP
Jorge Ávila Miranda
 
Aula Herança
Aula HerançaAula Herança
Aula Herança
Jorge Ávila Miranda
 
Aula05 - Poojava
Aula05 - PoojavaAula05 - Poojava
Aula05 - Poojava
Jorge Ávila Miranda
 
Aula12- PHP
Aula12- PHPAula12- PHP
Aula11 - PHP
Aula11 - PHPAula11 - PHP
Aula11 - PHP
Jorge Ávila Miranda
 
Aula10 -PHP
Aula10 -PHPAula10 -PHP
Aula09 - Java Script
Aula09 - Java ScriptAula09 - Java Script
Aula09 - Java Script
Jorge Ávila Miranda
 
Aula08 - Java Script
Aula08 - Java ScriptAula08 - Java Script
Aula08 - Java Script
Jorge Ávila Miranda
 
Aula04-POOJAVA
Aula04-POOJAVAAula04-POOJAVA
Aula04-POOJAVA
Jorge Ávila Miranda
 
Aula06 - JavaScript
Aula06 - JavaScriptAula06 - JavaScript
Aula06 - JavaScript
Jorge Ávila Miranda
 
Aula05-JavaScript
Aula05-JavaScriptAula05-JavaScript
Aula05-JavaScript
Jorge Ávila Miranda
 
Aula04-JavaScript
Aula04-JavaScriptAula04-JavaScript
Aula04-JavaScript
Jorge Ávila Miranda
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
Jorge Ávila Miranda
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
Jorge Ávila Miranda
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
Jorge Ávila Miranda
 
Aula07 - Arquitetura e Manutenção de Computadores
Aula07 - Arquitetura e Manutenção de ComputadoresAula07 - Arquitetura e Manutenção de Computadores
Aula07 - Arquitetura e Manutenção de Computadores
Jorge Ávila Miranda
 
Aula06 - Arquitetura e Manutenção de Computadores
Aula06 - Arquitetura e Manutenção de ComputadoresAula06 - Arquitetura e Manutenção de Computadores
Aula06 - Arquitetura e Manutenção de Computadores
Jorge Ávila Miranda
 

Mais de Jorge Ávila Miranda (20)

Aula16 - Jquery
Aula16 - JqueryAula16 - Jquery
Aula16 - Jquery
 
Aula15 - Array PHP
Aula15 - Array PHPAula15 - Array PHP
Aula15 - Array PHP
 
Aula13 - Estrutura de repetição (for e while) - PHP
Aula13 - Estrutura de repetição (for e while) - PHPAula13 - Estrutura de repetição (for e while) - PHP
Aula13 - Estrutura de repetição (for e while) - PHP
 
Aula14 - Funções em PHP
Aula14 - Funções em PHPAula14 - Funções em PHP
Aula14 - Funções em PHP
 
Aula Herança
Aula HerançaAula Herança
Aula Herança
 
Aula05 - Poojava
Aula05 - PoojavaAula05 - Poojava
Aula05 - Poojava
 
Aula12- PHP
Aula12- PHPAula12- PHP
Aula12- PHP
 
Aula11 - PHP
Aula11 - PHPAula11 - PHP
Aula11 - PHP
 
Aula10 -PHP
Aula10 -PHPAula10 -PHP
Aula10 -PHP
 
Aula09 - Java Script
Aula09 - Java ScriptAula09 - Java Script
Aula09 - Java Script
 
Aula08 - Java Script
Aula08 - Java ScriptAula08 - Java Script
Aula08 - Java Script
 
Aula04-POOJAVA
Aula04-POOJAVAAula04-POOJAVA
Aula04-POOJAVA
 
Aula06 - JavaScript
Aula06 - JavaScriptAula06 - JavaScript
Aula06 - JavaScript
 
Aula05-JavaScript
Aula05-JavaScriptAula05-JavaScript
Aula05-JavaScript
 
Aula04-JavaScript
Aula04-JavaScriptAula04-JavaScript
Aula04-JavaScript
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
Aula07 - Arquitetura e Manutenção de Computadores
Aula07 - Arquitetura e Manutenção de ComputadoresAula07 - Arquitetura e Manutenção de Computadores
Aula07 - Arquitetura e Manutenção de Computadores
 
Aula06 - Arquitetura e Manutenção de Computadores
Aula06 - Arquitetura e Manutenção de ComputadoresAula06 - Arquitetura e Manutenção de Computadores
Aula06 - Arquitetura e Manutenção de Computadores
 

Aula07 - JavaScript

  • 2. 2 / 6 Vamos interagir ? ● Relembrando a principal característica do javaScript é interação com a pagina WEB, especificamente o HTML. ● O JavaScript permite detectar praticamente qualquer coisa que ocorre em uma pagina WEB, como um usuário clicando botões, redimensionando a janela do navegador ou fornecendo dado em um campo de texto.
  • 3. 3 / 6 Vamos praticar ● Eu lhes apresento Arocha! ● Um mascote virtual que precisa da sua ajuda para conseguir interagir com os usuários
  • 4. 4 / 6 Vamos praticar ● Basicamente: 1. Criar uma pagina Web HTML 2. Adicionar um Alert() JavaScript para fazer com que Arocha cumprimente o usuário quando a pagina web for carregada. 3. Escrever o código JavaScript para solicitar o nome do usuário, imprimir um cumprimento personalizado e fazer a rocha sorrir. 4. Adicione uma sub-rotina de eventos ( função ) para quando o usuário clicarem na rocha, o código escrito na etapa 3 seja executado.
  • 5. 5 / 6 Boa sorte!