SlideShare uma empresa Scribd logo
1 / 35
JAVA Script
Introdução
2 / 35
O que é o JavaScript ?
● Visando o potencial da Internet para o público
geral e a necessidade de haveruma interação
maior do usuário com as páginas,a Netscape,
criadora do navegador mais popular do início dos
anos 90, de mesmo nome, criou o Livescript,
uma linguagem simples que permitia a
execução de scripts contidosnas páginas
dentro do próprio navegador.
3 / 35
O que é o JavaScript ?
● Aproveitando o iminentesucessodo Java,que
vinhaconquistando cada vez mais espaço no
mercado de desenvolvimentode aplicações
corporativas, a Netscape logo rebatizou o
Livescript comoJavaScript num acordo com a
Sun para alavancar o uso das duas.
4 / 35
O que é o JavaScript ?
● JavaScript é a linguagem de programação
mais popular no desenvolvimento Web.
● Suportada por todos os navegadores, a
linguagem é responsável por praticamente
qualquer tipo de dinamismo que
queiramos em nossas páginas.
5 / 35
O que é o JavaScript ?
● Excelentes exemplos disso são aplicações Web
complexas comoGmail, Google Mapse Google
Docs.
6 / 35
O que é o JavaScript ?
● O ECMAScript (ES) é a especificação
da linguagem de script que o
JavaScript implementa, ou seja, é a
descrição formal e estruturada de
uma linguagem de script, sendo
padronizada pela Ecma International
– associação criada em 1961
dedicada à padronização de sistemas
de informação e comunicação – na
especificação ECMA-262. No dia 17
de junho de 2015, foi definida a sexta
edição da especificação, a ES6
(também chamada de ECMAScript
2015).
7 / 35
O que é o JavaScript ?
● HTML : Estrutura
● CSS: Estilo
● JavaScript: ação
8 / 35
O que é o JavaScript ?
Web Design e Aplicações referem-se aos padrões para o desenvolvimento de páginas Web,
incluindo HTML5 CSS, SVG, Ajax, e outras tecnologias para Aplicações Web (“WebApps”).
Esta seção inclui também informações sobre como tornar páginas acessíveis para pessoas
com deficiências (WCAG), sobre internacionalização, e ainda para dispositivos móveis.
9 / 35
O que é o JavaScript ?
● Outra característica comum nas linguagens de
scripting é que normalmente elas são
linguagens interpretadas, ou seja, não
dependem de compilação para serem
executadas.
● Essa característica é presenteno JavaScript:o
código é interpretado e executado conforme
é lido pelo navegador,linha a linha, assim
comoo HTML.
10 / 35
O que é o JavaScript ?
● O JavaScript também possui grande tolerância
a erros, uma vez que conversões automáticas
são realizadas durante operações.
● O script do programador é enviado com o HTML
para o navegador, mas como o navegador
saberá diferenciar o script de um código html?
● Para que essa diferenciação seja possível,é
necessário envolver o script dentro da tag
<script> .
11 / 35
Quem usa JavaScript
● Google
– O motor de pesquisa mais utilizado e o maior em todo o mundo. Utiliza as seguintes
linguagens:
– Front End: JavaScript
– Back End: C, C++, Go, Java, Python
– Base dados: BigTable, MariaDB
● Youtube
– O site de partilha e publicação de vídeo mais utilizado em todo o mundo. Este, utiliza
as seguintes linguagens:
– Front End: JavaScript
– Back End: C/C++, Python, Java, Go
– Base dados: MySQL, BigTable
12 / 35
Quem usa JavaScript
● Facebook
– Dispensa apresentações. Este é a maior rede social existente no mundo da internet.
– Front End: JavaScript
– Back End: Hack, PHP, C++, Java, Python, Erlang, D, Xhp
– Base dados: MySQL, Hbase
● Amazon
– O site mais famoso de compras online na internet.
– Front End: JavaScript
– Back End: Java, C++, Perl
– Base dados: Oracle Database
13 / 35
Quem usa JavaScript
● Wikipedia
– A maior enciclopédia online. Wikipédia, utiliza as seguintes linguagens:
– Front End: JavaScript
– Back End: HHVM
– Base dados: MySQL, MariaDB
● Twitter
– A segunda maior rede social de todo o mundo, esta utiliza as seguintes linguagens:
– Front End: JavaScript
– Back End: C++, Java, Scala, Ruby on Rails
– Base dados: MySQL
14 / 35
Quem usa JavaScript
● Bing
● Ebay
● Skype
● Linkedin
● Pinterest
● WordPress
15 / 35
Console do Navegador
● Existem várias formas de executar códigos JavasCript
em um página. Uma delas é executar códigos no
que chamamos de Console.
● A maioria dos navegadores desktop já vem com
essa ferramenta instalada. No Chrome, é possível
chegar ao Console apertando F12 e em seguida
acessar a aba "Console" ou por meio do atalho de
teclado Control + Shift + C; no Firefox, pelo
atalho Control + Shift + K.
16 / 35
Console do Navegador
17 / 35
Developer Tools (Ferramentas de
desenvolvedor)
● O console faz parte de uma série de ferramentas
embutidas nos navegadores especificamente
para nós que estamos desenvolvendo um
site. Essa série de ferramentas é o que
chamamos de DeveloperTools.
18 / 35
Developer Tools (Ferramentas de
desenvolvedor)
19 / 35
Especificando
● Com o JavaScript podemos:
– Manipular
● Conteúdo
● Alterar a Apresentação
● Navegador
– Interagir
● Usuário
● Formulário
● Linguagens Dinâmicas
20 / 35
Exemplo de JavaScript
https://www.google.com.br/maps/@-3.6929673,-
40.3591022,14.73z?hl=pt-BR
Google Mapas
21 / 35
Requisitos
● HTML
● CSS
● Browser
● Editor
22 / 35
Sublime Text
● https://www.sublimetext.com/
23 / 35
Exemplo (Olá Mundo)
24 / 35
Exemplo (Olá Mundo)
25 / 35
Método Alert()
● Método JavaScript Alert:
– Com ele é possível criar caixas de diálogos que
aparecem na tela do usuário.
– O alert é uma das mais simples caixas de
diálogo, com uma aparência simples e intuitiva
elas são muito usadas em validações de
formulários e/ou bloqueio de ações do browser.
26 / 35
Método Alert()
● Sua principal função é mostrar ao usuário uma
mensagem e um botão de confirmação de que o
usuário tenha visto a mensagem.
● Para chamar essa função, basta utilizarmos o
código alert(), que receberá uma string (mensagem
que será exibida ao usuário).
27 / 35
Método Alert()
28 / 35
Método Confirm()
● A caixa de diálogo de confirmação é chamada pela
função confirm() e tem apenas dois botões: um OK
e outro CANCELAR.
● A função confirm() também retorna um valor que
pode ser true (verdadeiro) ou false (falso).
29 / 35
Método Confirm()
30 / 35
Método Confirm()
31 / 35
Método Prompt()
● A caixa de diálogo de prompt nos possibilita
requerer uma entrada ao usuário apesar de não ser
tão útil, pois esse recurso pode facilmente ser
substituído por um campo de texto feito em HTML.
● Para chamarmos esta caixa de diálogo, usamos a
função prompt() que recebe uma string como
parâmetro. Esse parâmetro será a mensagem a ser
exibida dentro da caixa de diálogo.
32 / 35
Método Prompt()
33 / 35
Meu código não funciona e agora?
● Não se apavore com os erros. É importante saber
enfrentá-los. Entender uma mensagem de erro é
fundamental. Há sempre também fóruns e listas de
discussão onde você pode pedir ajuda.
● Lembre-se de descrever muito bem seu problema
e qual é a mensagem de erros, mas ao mesmo
tempo, é necessário ser sucinto.
34 / 35
Meu código não funciona e agora?
● O fórum do GUJ é bastante conhecido na
comunidade de desenvolvedores brasileiros de
diversas linguagens.
● Utilize-o para tirar suas dúvidas:
http://www.guj.com.br.
35 / 35
Exercícios
1.Crie um Script em que envie um alert() antes com
a seguinte frase “Olá, bem vindo”.
2.Crie um Script em que envie uma caixa de dialogo
com a função confirm() confirmando se quer
permanecer na pagina.
3.Crie um Script em que envie uma caixa de dialogo
com o método prompt() pedindo para informar o
nome e escrevendo-o na tela.

Mais conteúdo relacionado

Mais procurados

Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
Leonardo Soares
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 
Aula 4 - Teste de mesa
Aula 4 - Teste de mesaAula 4 - Teste de mesa
Aula 4 - Teste de mesa
Pacc UAB
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
Salvador Torres
 
Criação de tabelas com HTML
Criação de tabelas com HTMLCriação de tabelas com HTML
Criação de tabelas com HTML
Leonardo Soares
 
Aula 1 - Introdução a POO
Aula 1 -  Introdução a POOAula 1 -  Introdução a POO
Aula 1 - Introdução a POO
Daniel Brandão
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
Tiago Antônio da Silva
 
Algoritmos - Formas de Representação de Algoritmos
Algoritmos - Formas de Representação de AlgoritmosAlgoritmos - Formas de Representação de Algoritmos
Algoritmos - Formas de Representação de Algoritmos
Elaine Cecília Gatto
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
Centro Paula Souza
 
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
Agrupamento de Escolas da Batalha
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
Eduardo Mendes
 
Aula01 - Logica de Programação
Aula01 - Logica de ProgramaçãoAula01 - Logica de Programação
Aula01 - Logica de Programação
Jorge Ávila Miranda
 
Algoritmos e linguagem pascal
Algoritmos e linguagem pascalAlgoritmos e linguagem pascal
Algoritmos e linguagem pascal
angelicamenegassi
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
Jose Augusto Cintra
 
Ciclo desenvolvimento de sistemas
Ciclo desenvolvimento de sistemasCiclo desenvolvimento de sistemas
Ciclo desenvolvimento de sistemas
Instituto Federal de Educação Ciencia e Tecnologia
 
Aula 01 - Algoritmo e Programação
Aula 01 - Algoritmo e ProgramaçãoAula 01 - Algoritmo e Programação
Aula 01 - Algoritmo e Programação
Aislan Rafael
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
Daniel Brandão
 
Metodologia Ágil
Metodologia ÁgilMetodologia Ágil
Metodologia Ágil
Elaine Cecília Gatto
 

Mais procurados (20)

Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Aula 4 - Teste de mesa
Aula 4 - Teste de mesaAula 4 - Teste de mesa
Aula 4 - Teste de mesa
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Criação de tabelas com HTML
Criação de tabelas com HTMLCriação de tabelas com HTML
Criação de tabelas com HTML
 
Aula 1 - Introdução a POO
Aula 1 -  Introdução a POOAula 1 -  Introdução a POO
Aula 1 - Introdução a POO
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
Algoritmos - Formas de Representação de Algoritmos
Algoritmos - Formas de Representação de AlgoritmosAlgoritmos - Formas de Representação de Algoritmos
Algoritmos - Formas de Representação de Algoritmos
 
10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos10 Java Script - Exemplos práticos
10 Java Script - Exemplos práticos
 
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
5 – Desenvolvimento de Páginas Web Dinâmicas PHP: introdução
 
Web Design Responsivo
Web Design ResponsivoWeb Design Responsivo
Web Design Responsivo
 
Aula01 - Logica de Programação
Aula01 - Logica de ProgramaçãoAula01 - Logica de Programação
Aula01 - Logica de Programação
 
Algoritmos e linguagem pascal
Algoritmos e linguagem pascalAlgoritmos e linguagem pascal
Algoritmos e linguagem pascal
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
Ciclo desenvolvimento de sistemas
Ciclo desenvolvimento de sistemasCiclo desenvolvimento de sistemas
Ciclo desenvolvimento de sistemas
 
Aula 01 - Algoritmo e Programação
Aula 01 - Algoritmo e ProgramaçãoAula 01 - Algoritmo e Programação
Aula 01 - Algoritmo e Programação
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 
Metodologia Ágil
Metodologia ÁgilMetodologia Ágil
Metodologia Ágil
 

Semelhante a Aula01-JavaScript

LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
Carlos Santos
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
Carlos Santos
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
Valmir Justo
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
MarceloRosenbrock1
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1
michellobo
 
Professor rogerio-apostila
Professor rogerio-apostilaProfessor rogerio-apostila
Professor rogerio-apostila
Horacio Diamante Mondlane
 
O que move a web atualmente?
O que move a web atualmente?O que move a web atualmente?
O que move a web atualmente?
Fabio Janiszevski
 
Javascript
JavascriptJavascript
Javascript
Sérgio Reis
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
Fabio Moura Pereira
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
thiagolima
 
Apresentação do V Workshop Demoiselle
Apresentação do V Workshop DemoiselleApresentação do V Workshop Demoiselle
Apresentação do V Workshop Demoiselle
Emerson Saito
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
Ruan Carvalho
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
Ruan Carvalho
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
igorpimentel
 
Pyjamas: Uma Ferramenta Pythônica para Web
Pyjamas: Uma Ferramenta Pythônica para WebPyjamas: Uma Ferramenta Pythônica para Web
Pyjamas: Uma Ferramenta Pythônica para Web
Nielson Santana
 
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
André Luiz Forchesatto
 
Linguagem c
Linguagem cLinguagem c
Linguagem c
saido_embalo1980
 
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
 
01 - Introdução a programação para internet v1.1
01 - Introdução a programação para internet v1.101 - Introdução a programação para internet v1.1
01 - Introdução a programação para internet v1.1
César Augusto Pessôa
 

Semelhante a Aula01-JavaScript (20)

LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
 
Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1
 
Professor rogerio-apostila
Professor rogerio-apostilaProfessor rogerio-apostila
Professor rogerio-apostila
 
O que move a web atualmente?
O que move a web atualmente?O que move a web atualmente?
O que move a web atualmente?
 
Javascript
JavascriptJavascript
Javascript
 
Aula 05 - Java Script Básico
Aula 05 -  Java Script BásicoAula 05 -  Java Script Básico
Aula 05 - Java Script Básico
 
Apresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo SitesApresentação Minas - Desenvolvendo Sites
Apresentação Minas - Desenvolvendo Sites
 
Apresentação do V Workshop Demoiselle
Apresentação do V Workshop DemoiselleApresentação do V Workshop Demoiselle
Apresentação do V Workshop Demoiselle
 
Desenvolvimento web com Software Livre
Desenvolvimento web com Software LivreDesenvolvimento web com Software Livre
Desenvolvimento web com Software Livre
 
Desenvolvimento web com software livre
Desenvolvimento web com software livreDesenvolvimento web com software livre
Desenvolvimento web com software livre
 
Ferramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento WebFerramentas Livres para Desenvolvimento Web
Ferramentas Livres para Desenvolvimento Web
 
Pyjamas: Uma Ferramenta Pythônica para Web
Pyjamas: Uma Ferramenta Pythônica para WebPyjamas: Uma Ferramenta Pythônica para Web
Pyjamas: Uma Ferramenta Pythônica para Web
 
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
Dividindo responsabilidades com VRaptor, Rest, HTML5 e CSS3
 
Linguagem c
Linguagem cLinguagem c
Linguagem c
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
01 - Introdução a programação para internet v1.1
01 - Introdução a programação para internet v1.101 - Introdução a programação para internet v1.1
01 - Introdução a programação para internet v1.1
 

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
 
Aula07 - JavaScript
Aula07 - JavaScriptAula07 - JavaScript
Aula07 - JavaScript
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
 
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
 
Aula05 - Informática Básica
Aula05 - Informática BásicaAula05 - Informática Básica
Aula05 - Informática Básica
Jorge Ávila Miranda
 
Aula04 - Informática Básica
Aula04 - Informática BásicaAula04 - Informática Básica
Aula04 - Informática Básica
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
 
Aula07 - JavaScript
Aula07 - JavaScriptAula07 - JavaScript
Aula07 - JavaScript
 
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
 
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
 
Aula05 - Informática Básica
Aula05 - Informática BásicaAula05 - Informática Básica
Aula05 - Informática Básica
 
Aula04 - Informática Básica
Aula04 - Informática BásicaAula04 - Informática Básica
Aula04 - Informática Básica
 

Último

Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdf
WELITONNOGUEIRA3
 
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
 
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
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdf
joaovmp3
 
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
 
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
 

Último (6)

Manual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.pdfManual-de-Credenciamento ANATER 2023.pdf
Manual-de-Credenciamento ANATER 2023.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
 
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
 
Certificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.pdfCertificado Jornada Python Da Hashtag.pdf
Certificado Jornada Python Da Hashtag.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
 
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
 

Aula01-JavaScript

  • 1. 1 / 35 JAVA Script Introdução
  • 2. 2 / 35 O que é o JavaScript ? ● Visando o potencial da Internet para o público geral e a necessidade de haveruma interação maior do usuário com as páginas,a Netscape, criadora do navegador mais popular do início dos anos 90, de mesmo nome, criou o Livescript, uma linguagem simples que permitia a execução de scripts contidosnas páginas dentro do próprio navegador.
  • 3. 3 / 35 O que é o JavaScript ? ● Aproveitando o iminentesucessodo Java,que vinhaconquistando cada vez mais espaço no mercado de desenvolvimentode aplicações corporativas, a Netscape logo rebatizou o Livescript comoJavaScript num acordo com a Sun para alavancar o uso das duas.
  • 4. 4 / 35 O que é o JavaScript ? ● JavaScript é a linguagem de programação mais popular no desenvolvimento Web. ● Suportada por todos os navegadores, a linguagem é responsável por praticamente qualquer tipo de dinamismo que queiramos em nossas páginas.
  • 5. 5 / 35 O que é o JavaScript ? ● Excelentes exemplos disso são aplicações Web complexas comoGmail, Google Mapse Google Docs.
  • 6. 6 / 35 O que é o JavaScript ? ● O ECMAScript (ES) é a especificação da linguagem de script que o JavaScript implementa, ou seja, é a descrição formal e estruturada de uma linguagem de script, sendo padronizada pela Ecma International – associação criada em 1961 dedicada à padronização de sistemas de informação e comunicação – na especificação ECMA-262. No dia 17 de junho de 2015, foi definida a sexta edição da especificação, a ES6 (também chamada de ECMAScript 2015).
  • 7. 7 / 35 O que é o JavaScript ? ● HTML : Estrutura ● CSS: Estilo ● JavaScript: ação
  • 8. 8 / 35 O que é o JavaScript ? Web Design e Aplicações referem-se aos padrões para o desenvolvimento de páginas Web, incluindo HTML5 CSS, SVG, Ajax, e outras tecnologias para Aplicações Web (“WebApps”). Esta seção inclui também informações sobre como tornar páginas acessíveis para pessoas com deficiências (WCAG), sobre internacionalização, e ainda para dispositivos móveis.
  • 9. 9 / 35 O que é o JavaScript ? ● Outra característica comum nas linguagens de scripting é que normalmente elas são linguagens interpretadas, ou seja, não dependem de compilação para serem executadas. ● Essa característica é presenteno JavaScript:o código é interpretado e executado conforme é lido pelo navegador,linha a linha, assim comoo HTML.
  • 10. 10 / 35 O que é o JavaScript ? ● O JavaScript também possui grande tolerância a erros, uma vez que conversões automáticas são realizadas durante operações. ● O script do programador é enviado com o HTML para o navegador, mas como o navegador saberá diferenciar o script de um código html? ● Para que essa diferenciação seja possível,é necessário envolver o script dentro da tag <script> .
  • 11. 11 / 35 Quem usa JavaScript ● Google – O motor de pesquisa mais utilizado e o maior em todo o mundo. Utiliza as seguintes linguagens: – Front End: JavaScript – Back End: C, C++, Go, Java, Python – Base dados: BigTable, MariaDB ● Youtube – O site de partilha e publicação de vídeo mais utilizado em todo o mundo. Este, utiliza as seguintes linguagens: – Front End: JavaScript – Back End: C/C++, Python, Java, Go – Base dados: MySQL, BigTable
  • 12. 12 / 35 Quem usa JavaScript ● Facebook – Dispensa apresentações. Este é a maior rede social existente no mundo da internet. – Front End: JavaScript – Back End: Hack, PHP, C++, Java, Python, Erlang, D, Xhp – Base dados: MySQL, Hbase ● Amazon – O site mais famoso de compras online na internet. – Front End: JavaScript – Back End: Java, C++, Perl – Base dados: Oracle Database
  • 13. 13 / 35 Quem usa JavaScript ● Wikipedia – A maior enciclopédia online. Wikipédia, utiliza as seguintes linguagens: – Front End: JavaScript – Back End: HHVM – Base dados: MySQL, MariaDB ● Twitter – A segunda maior rede social de todo o mundo, esta utiliza as seguintes linguagens: – Front End: JavaScript – Back End: C++, Java, Scala, Ruby on Rails – Base dados: MySQL
  • 14. 14 / 35 Quem usa JavaScript ● Bing ● Ebay ● Skype ● Linkedin ● Pinterest ● WordPress
  • 15. 15 / 35 Console do Navegador ● Existem várias formas de executar códigos JavasCript em um página. Uma delas é executar códigos no que chamamos de Console. ● A maioria dos navegadores desktop já vem com essa ferramenta instalada. No Chrome, é possível chegar ao Console apertando F12 e em seguida acessar a aba "Console" ou por meio do atalho de teclado Control + Shift + C; no Firefox, pelo atalho Control + Shift + K.
  • 16. 16 / 35 Console do Navegador
  • 17. 17 / 35 Developer Tools (Ferramentas de desenvolvedor) ● O console faz parte de uma série de ferramentas embutidas nos navegadores especificamente para nós que estamos desenvolvendo um site. Essa série de ferramentas é o que chamamos de DeveloperTools.
  • 18. 18 / 35 Developer Tools (Ferramentas de desenvolvedor)
  • 19. 19 / 35 Especificando ● Com o JavaScript podemos: – Manipular ● Conteúdo ● Alterar a Apresentação ● Navegador – Interagir ● Usuário ● Formulário ● Linguagens Dinâmicas
  • 20. 20 / 35 Exemplo de JavaScript https://www.google.com.br/maps/@-3.6929673,- 40.3591022,14.73z?hl=pt-BR Google Mapas
  • 21. 21 / 35 Requisitos ● HTML ● CSS ● Browser ● Editor
  • 22. 22 / 35 Sublime Text ● https://www.sublimetext.com/
  • 23. 23 / 35 Exemplo (Olá Mundo)
  • 24. 24 / 35 Exemplo (Olá Mundo)
  • 25. 25 / 35 Método Alert() ● Método JavaScript Alert: – Com ele é possível criar caixas de diálogos que aparecem na tela do usuário. – O alert é uma das mais simples caixas de diálogo, com uma aparência simples e intuitiva elas são muito usadas em validações de formulários e/ou bloqueio de ações do browser.
  • 26. 26 / 35 Método Alert() ● Sua principal função é mostrar ao usuário uma mensagem e um botão de confirmação de que o usuário tenha visto a mensagem. ● Para chamar essa função, basta utilizarmos o código alert(), que receberá uma string (mensagem que será exibida ao usuário).
  • 27. 27 / 35 Método Alert()
  • 28. 28 / 35 Método Confirm() ● A caixa de diálogo de confirmação é chamada pela função confirm() e tem apenas dois botões: um OK e outro CANCELAR. ● A função confirm() também retorna um valor que pode ser true (verdadeiro) ou false (falso).
  • 29. 29 / 35 Método Confirm()
  • 30. 30 / 35 Método Confirm()
  • 31. 31 / 35 Método Prompt() ● A caixa de diálogo de prompt nos possibilita requerer uma entrada ao usuário apesar de não ser tão útil, pois esse recurso pode facilmente ser substituído por um campo de texto feito em HTML. ● Para chamarmos esta caixa de diálogo, usamos a função prompt() que recebe uma string como parâmetro. Esse parâmetro será a mensagem a ser exibida dentro da caixa de diálogo.
  • 32. 32 / 35 Método Prompt()
  • 33. 33 / 35 Meu código não funciona e agora? ● Não se apavore com os erros. É importante saber enfrentá-los. Entender uma mensagem de erro é fundamental. Há sempre também fóruns e listas de discussão onde você pode pedir ajuda. ● Lembre-se de descrever muito bem seu problema e qual é a mensagem de erros, mas ao mesmo tempo, é necessário ser sucinto.
  • 34. 34 / 35 Meu código não funciona e agora? ● O fórum do GUJ é bastante conhecido na comunidade de desenvolvedores brasileiros de diversas linguagens. ● Utilize-o para tirar suas dúvidas: http://www.guj.com.br.
  • 35. 35 / 35 Exercícios 1.Crie um Script em que envie um alert() antes com a seguinte frase “Olá, bem vindo”. 2.Crie um Script em que envie uma caixa de dialogo com a função confirm() confirmando se quer permanecer na pagina. 3.Crie um Script em que envie uma caixa de dialogo com o método prompt() pedindo para informar o nome e escrevendo-o na tela.