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

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
  • 2.
  • 3.
    O Código JavaScriptfica 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 ifelse <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 ifelse 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 comswitch <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 dowhile <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>")