SlideShare uma empresa Scribd logo
4
Mais lidos
5
Mais lidos
15
Mais lidos
PáginasWeb com: HTML, CSS e JavaScript
Profª. Marlene da Silva Maximiano de Oliveira
& Profª. Alessandra Aparecida da Silva
Treinando JavaScript
Exemplos práticos
O Código JavaScript fica Entre o <script> e o </script>.
Ficaremos com a seguinte estrutura:
<html>
<head>
<title> JavaScript - Exemplo 1 </title>
</head>
<body>
<script>
alert("Olá!")
</script>
</body>
</html>
Exemplo com Prompt
<html>
<head>
<title> JavaScript - Exemplo 2 </title>
</head>
<body>
<script>
nome=prompt("Digite seu nome: ","")
document.write("Olá " + nome + " Seja BemVindo(a)!")
</script>
</body>
</html>
Exemplo com Calculo
<html>
<head>
<title> JavaScript - Exemplo 3 </title>
</head>
<body>
<script>
a = 2
b = 9
c = a + b
document.write("A soma de: " + a + " + " + b + " é : " + c)
</script>
</body>
</html>
Calculo com Eval(Prompt)
<html>
<head>
<title> JavaScript - Exemplo 4 </title>
</head>
<body>
<script>
a = eval(prompt("Digite um valor para a: ",""))
b = eval(prompt("Digite um valor para b: ",""))
c = a + b
alert(a + " + " + b + " = " + c)
</script>
</body>
</html>
Exemplo com if
<html>
<head>
<title> JavaScript - exemplo 5 </title>
</head>
<body>
<script>
Nota = 10
if (Nota == 10)
{
alert("É verdade. Ele tirou 10")
}
</script>
</body>
</html>
Exemplo com if else
<html>
<head>
<title> JavaScript - exemplo 6 </title>
</head>
<body>
<script>
Nota = eval(prompt("Digite a nota: " ,""))
if (Nota == 10)
{
alert("É verdade. Ele tirou 10!")
}
else
{
alert("Não é verdade. Ele não tirou 10")
}
</script>
</body>
</html>
Exemplo com if else encadeadas
<html>
<head>
<title> JavaScript - exemplo 7 </title>
</head>
<body>
<script>
Nota = eval(prompt("Digite a nota: "," "))
if (Nota >=7)
{
alert("Aprovado")
}
else if (Nota < 4)
{
alert("Reprovado")
}
else
{
alert("Recuperação")
}
</script>
</body>
</html>
Exemplo com if
<html>
<head>
<title> JavaScript - exemplo 8 </title>
</head>
<body>
<script>
numero = eval(prompt("Digite um valor",""))
if (numero%2==0)
{
alert(numero + " é par")
}
else
{
alert(numero + " é impar")
}
</script>
</body>
</html>
Exemplo com switch
<html>
<head> <title> JavaScript - exemplo 9 </title></head>
<body>
<script>
farol = prompt("Digite a cor do farol","")
switch (farol) {
case "vermelho":
alert("Pare")
break
case "amarelo":
alert("Atencao")
break
case "verde":
alert("Prossiga")
break
default: alert("Cor ilegal") }
</script>
</body>
</html>
Atenção, não esqueça do break!
Sempre inclua um default.
Se todas as condições anteriores
forem falsas, o switch entrará no
default.
2º Exemplo com switch
<html>
<head>
<title> JavaScript - exemplo 10 </title>
</head>
<body>
<script>
letra = prompt("Digite o caracter: ", "")
switch (letra)
{
case "a":
case "e":
case "i":
case "o":
case "u":
alert("Vogal")
break
default: alert("Outro caracter")
}
</script>
</body>
</html>
Exemplo com for
<html>
<head>
<title> JavaScript - Exemplo 11 </title>
</head>
<body>
<script>
for (i = 0; i < 10; i++)
{
alert ( i )
}
</script>
</body>
</html>
Usa-se o for quando se quer
que um trecho de código se
repita n vezes.
document.write( i + "<br>")
Exemplo comWhile
<html>
<body>
<script>
numero = 0
while (numero < 5)
{
alert(numero)
numero++
}
</script>
</body>
</html>
Usa-se o while quando se quer que
um trecho de código se repita n
vezes, com condicional bem simples.
document.write( numero + "<br>")
Exemplo com do while
<html>
<body>
<script>
numero = 0
do
{
alert(numero)
numero ++
}
while (numero < 4)
</script>
</body>
</html>
Usa-se o do while quando se quer que
um trecho de código se repita n
vezes, mas executa o bloco de código
antes da verificação da condição.
document.write( numero + "<br>")

Mais conteúdo relacionado

PPTX
Aula 01 - JavaScript: Introdução
ODP
Aula02 - JavaScript
PPT
Aula javascript
PDF
Introdução a JavaScript
PPT
Minicurso de JavaScript (Portuguese)
PPTX
Introdução básica ao JavaScript
ODP
Aula01-JavaScript
PDF
Java - Primeiros passos
Aula 01 - JavaScript: Introdução
Aula02 - JavaScript
Aula javascript
Introdução a JavaScript
Minicurso de JavaScript (Portuguese)
Introdução básica ao JavaScript
Aula01-JavaScript
Java - Primeiros passos

Mais procurados (20)

PPTX
13 Java Script - Validação de formulário
PDF
Programação Orientação a Objetos - Herança
PPT
PDF
Pseudocódigo ou Portugol (Lógica de Programação)
PPTX
Introdução a programação para a Internet
PPTX
Introdução sobre desenvolvimento web
TXT
Exercicios resolvidos visu alg vetores
PDF
Aula 1 - Introdução a POO
PDF
Introdução a Linguagem Java
PDF
Curso de HTML5 - Aula 01
PDF
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
PPT
Algoritmo 04 - Estruturas de decisão
PDF
Python - Introdução
DOCX
Exercícios - Herança - Java
ODP
Variáveis e portugol
TXT
Exercicios resolvidos visuAlg
PDF
Apresentação HTML e CSS
PDF
Aula 4 - Teste de mesa
PDF
Linguagem PHP
PDF
Javascript aula 01 - visão geral
13 Java Script - Validação de formulário
Programação Orientação a Objetos - Herança
Pseudocódigo ou Portugol (Lógica de Programação)
Introdução a programação para a Internet
Introdução sobre desenvolvimento web
Exercicios resolvidos visu alg vetores
Aula 1 - Introdução a POO
Introdução a Linguagem Java
Curso de HTML5 - Aula 01
Road Show TI SENAC - HTML5 & CSS 3.0 - O que esperar da próxima web?
Algoritmo 04 - Estruturas de decisão
Python - Introdução
Exercícios - Herança - Java
Variáveis e portugol
Exercicios resolvidos visuAlg
Apresentação HTML e CSS
Aula 4 - Teste de mesa
Linguagem PHP
Javascript aula 01 - visão geral
Anúncio

Destaque (20)

PPTX
08 Trabalhando com mais de uma tabela (Relacionamento)
PDF
javscript para iniciantes
PDF
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
PPSX
Sige - Sistema Integrado de Gestão Escolar
PPTX
11 SQL - Funções de string e matemática
PDF
Lógica de Programação com Javascript - Aula #05
PDF
Na prática: STF e CobiT
PDF
Lógica de Programação com Javascript - Aula #04
PDF
Lógica de Programação com Javascript - Aula #02
PDF
Lógica de Programação com Javascript - Aula #01
PDF
Lógica de Programação com Javascript - Aula #03
PDF
Javascript (parte 2)
PDF
Javascript (parte 1)
PDF
Apostila CSS e Java Script
PDF
Desenvolvimento-web-com-html-css-e-javascript
ODP
Html5 - O futuro da Web
ODP
O que há de novo no PHP 5.3
PDF
Espionagem e Software Livre
PPTX
Engenharia Social
PDF
Html5 - Estrutura Básica
08 Trabalhando com mais de uma tabela (Relacionamento)
javscript para iniciantes
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Sige - Sistema Integrado de Gestão Escolar
11 SQL - Funções de string e matemática
Lógica de Programação com Javascript - Aula #05
Na prática: STF e CobiT
Lógica de Programação com Javascript - Aula #04
Lógica de Programação com Javascript - Aula #02
Lógica de Programação com Javascript - Aula #01
Lógica de Programação com Javascript - Aula #03
Javascript (parte 2)
Javascript (parte 1)
Apostila CSS e Java Script
Desenvolvimento-web-com-html-css-e-javascript
Html5 - O futuro da Web
O que há de novo no PHP 5.3
Espionagem e Software Livre
Engenharia Social
Html5 - Estrutura Básica
Anúncio

Semelhante a 10 Java Script - Exemplos práticos (20)

PPTX
JAVASCRIT – Welcome the web world Arquivo: java-script-basico-unipac-extra-v0...
PDF
PDF
PDF
Introdução ao JavaScript
PDF
04_Introducao_JavaScript.pdf
PDF
Java script aula 02 - operadores
PPTX
09 Java Script - As formas de usar
PDF
Javascript manual
PDF
Introdução à MEAN Stack
PDF
LabMM3 - Aula teórica 04
ODP
JavaScript - Aula Introdutória
PDF
WTF Javascript - FrontInRio 2011
PDF
Curso java script
PPT
Aula2
PDF
LabMM3 - Aula teórica 09
PDF
JavaScript
PDF
operadores aritméticos, relacionais e lógicos em javascript
DOC
Apostila script
PDF
Internet I - Aula 07 - Primeiros Passos com JavaScript
JAVASCRIT – Welcome the web world Arquivo: java-script-basico-unipac-extra-v0...
Introdução ao JavaScript
04_Introducao_JavaScript.pdf
Java script aula 02 - operadores
09 Java Script - As formas de usar
Javascript manual
Introdução à MEAN Stack
LabMM3 - Aula teórica 04
JavaScript - Aula Introdutória
WTF Javascript - FrontInRio 2011
Curso java script
Aula2
LabMM3 - Aula teórica 09
JavaScript
operadores aritméticos, relacionais e lógicos em javascript
Apostila script
Internet I - Aula 07 - Primeiros Passos com JavaScript

Mais de Centro Paula Souza (20)

PDF
Ds aula 01 - Introdução ao Visual Studio CSharp - Modo Visual
PPTX
12 SQL - Junções / Join
PPTX
10 SQL - Funções de agregação
PPTX
09 SQL - Trabalhando com campo do tipo data
PPTX
18 CSS - Trabalhando com Links
PPTX
17 CSS - layouts de textos
PPTX
16 CSS Cores e Fundos
PPTX
15 CSS - Trabalhando com fontes
PPTX
14 CSS Introdução
PPTX
07 Modelagem de banco de dados: Modelo Físico
PPTX
06 Modelagem de banco de dados: Modelo Lógico
PPTX
05 Modelagem de banco de dados: Modelo Conceitual
PPTX
07 Consultando os dados de uma tabela
PPTX
06 Trabalhando com registros
PPTX
12 Java Script - Trabalhando com datas
PPTX
11 Java Script - Exemplos com eventos
PPTX
08 Java Script Introdução - Teoria
PPTX
04 modelagem de dados introdução
PPTX
03 Criando um banco de dado no Microsoft Access
PPTX
02 banco de dados relacional
Ds aula 01 - Introdução ao Visual Studio CSharp - Modo Visual
12 SQL - Junções / Join
10 SQL - Funções de agregação
09 SQL - Trabalhando com campo do tipo data
18 CSS - Trabalhando com Links
17 CSS - layouts de textos
16 CSS Cores e Fundos
15 CSS - Trabalhando com fontes
14 CSS Introdução
07 Modelagem de banco de dados: Modelo Físico
06 Modelagem de banco de dados: Modelo Lógico
05 Modelagem de banco de dados: Modelo Conceitual
07 Consultando os dados de uma tabela
06 Trabalhando com registros
12 Java Script - Trabalhando com datas
11 Java Script - Exemplos com eventos
08 Java Script Introdução - Teoria
04 modelagem de dados introdução
03 Criando um banco de dado no Microsoft Access
02 banco de dados relacional

Último (20)

PPTX
Aula 13 - Tópico Frasal - Argumentação.pptx
PPTX
Slide_Macronutrientes e Antinutrientes da Dieta Humana.pptx
PPT
sistema reprodutor para turmas do oitavo ano
PDF
manual-orientacao-asb_5a8d6d8d87160aa636f63a5d0.pdf
PDF
O retorno a origem (islã Islamismo)
PPTX
QuestõesENEMVESTIBULARPARAESTUDOSEAPRENDIZADO.pptx
PDF
Metabolismo_energético_3ano_pre_vest_2026.pdf
PPT
História e Evolução dos Computadores domésticos
PDF
saeb_documentos_de_referencia_versao_1.0.pdf
PPTX
GUERRAFRIA.pptdddddddddddddddddddddddddx
PPTX
Biologia celular: citologia, é o estudo da célula, a unidade básica da vida.
PPTX
ACIDOS NUCLEICOS - REPLICAÇÃO DO DNA - E.M.
PPTX
Reino Monera e Protista: representantes e caracteristicas.pptx
PPTX
Trabalho Cidades sustentáveis ou Utopia.pptx
PDF
A provisão de jojuador (ramadã) islamismo
PPTX
brasilcolnia2-101027184359-phpapp02.pptx
PPTX
O Romantismo e a identidade brasileira..
PPTX
Revolução Industrial - Aula Expositiva - 3U4.pptx
PDF
Ementa 2 semestre PEI Orientação de estudo
PPTX
biossegurança e segurança no trabalho (6).pptx
Aula 13 - Tópico Frasal - Argumentação.pptx
Slide_Macronutrientes e Antinutrientes da Dieta Humana.pptx
sistema reprodutor para turmas do oitavo ano
manual-orientacao-asb_5a8d6d8d87160aa636f63a5d0.pdf
O retorno a origem (islã Islamismo)
QuestõesENEMVESTIBULARPARAESTUDOSEAPRENDIZADO.pptx
Metabolismo_energético_3ano_pre_vest_2026.pdf
História e Evolução dos Computadores domésticos
saeb_documentos_de_referencia_versao_1.0.pdf
GUERRAFRIA.pptdddddddddddddddddddddddddx
Biologia celular: citologia, é o estudo da célula, a unidade básica da vida.
ACIDOS NUCLEICOS - REPLICAÇÃO DO DNA - E.M.
Reino Monera e Protista: representantes e caracteristicas.pptx
Trabalho Cidades sustentáveis ou Utopia.pptx
A provisão de jojuador (ramadã) islamismo
brasilcolnia2-101027184359-phpapp02.pptx
O Romantismo e a identidade brasileira..
Revolução Industrial - Aula Expositiva - 3U4.pptx
Ementa 2 semestre PEI Orientação de estudo
biossegurança e segurança no trabalho (6).pptx

10 Java Script - Exemplos práticos

  • 1. PáginasWeb com: HTML, CSS e JavaScript Profª. Marlene da Silva Maximiano de Oliveira & Profª. Alessandra Aparecida da Silva
  • 3. O Código JavaScript fica Entre o <script> e o </script>. Ficaremos com a seguinte estrutura: <html> <head> <title> JavaScript - Exemplo 1 </title> </head> <body> <script> alert("Olá!") </script> </body> </html>
  • 4. Exemplo com Prompt <html> <head> <title> JavaScript - Exemplo 2 </title> </head> <body> <script> nome=prompt("Digite seu nome: ","") document.write("Olá " + nome + " Seja BemVindo(a)!") </script> </body> </html>
  • 5. Exemplo com Calculo <html> <head> <title> JavaScript - Exemplo 3 </title> </head> <body> <script> a = 2 b = 9 c = a + b document.write("A soma de: " + a + " + " + b + " é : " + c) </script> </body> </html>
  • 6. Calculo com Eval(Prompt) <html> <head> <title> JavaScript - Exemplo 4 </title> </head> <body> <script> a = eval(prompt("Digite um valor para a: ","")) b = eval(prompt("Digite um valor para b: ","")) c = a + b alert(a + " + " + b + " = " + c) </script> </body> </html>
  • 7. Exemplo com if <html> <head> <title> JavaScript - exemplo 5 </title> </head> <body> <script> Nota = 10 if (Nota == 10) { alert("É verdade. Ele tirou 10") } </script> </body> </html>
  • 8. Exemplo com if else <html> <head> <title> JavaScript - exemplo 6 </title> </head> <body> <script> Nota = eval(prompt("Digite a nota: " ,"")) if (Nota == 10) { alert("É verdade. Ele tirou 10!") } else { alert("Não é verdade. Ele não tirou 10") } </script> </body> </html>
  • 9. Exemplo com if else encadeadas <html> <head> <title> JavaScript - exemplo 7 </title> </head> <body> <script> Nota = eval(prompt("Digite a nota: "," ")) if (Nota >=7) { alert("Aprovado") } else if (Nota < 4) { alert("Reprovado") } else { alert("Recuperação") } </script> </body> </html>
  • 10. Exemplo com if <html> <head> <title> JavaScript - exemplo 8 </title> </head> <body> <script> numero = eval(prompt("Digite um valor","")) if (numero%2==0) { alert(numero + " é par") } else { alert(numero + " é impar") } </script> </body> </html>
  • 11. Exemplo com switch <html> <head> <title> JavaScript - exemplo 9 </title></head> <body> <script> farol = prompt("Digite a cor do farol","") switch (farol) { case "vermelho": alert("Pare") break case "amarelo": alert("Atencao") break case "verde": alert("Prossiga") break default: alert("Cor ilegal") } </script> </body> </html> Atenção, não esqueça do break! Sempre inclua um default. Se todas as condições anteriores forem falsas, o switch entrará no default.
  • 12. 2º Exemplo com switch <html> <head> <title> JavaScript - exemplo 10 </title> </head> <body> <script> letra = prompt("Digite o caracter: ", "") switch (letra) { case "a": case "e": case "i": case "o": case "u": alert("Vogal") break default: alert("Outro caracter") } </script> </body> </html>
  • 13. Exemplo com for <html> <head> <title> JavaScript - Exemplo 11 </title> </head> <body> <script> for (i = 0; i < 10; i++) { alert ( i ) } </script> </body> </html> Usa-se o for quando se quer que um trecho de código se repita n vezes. document.write( i + "<br>")
  • 14. Exemplo comWhile <html> <body> <script> numero = 0 while (numero < 5) { alert(numero) numero++ } </script> </body> </html> Usa-se o while quando se quer que um trecho de código se repita n vezes, com condicional bem simples. document.write( numero + "<br>")
  • 15. Exemplo com do while <html> <body> <script> numero = 0 do { alert(numero) numero ++ } while (numero < 4) </script> </body> </html> Usa-se o do while quando se quer que um trecho de código se repita n vezes, mas executa o bloco de código antes da verificação da condição. document.write( numero + "<br>")