JAVAScript COMPLETO
Propaganda
JavaScript (ou JScript)
1. Introdução
Uma linguagem como o JavaScript permite criar interfaces interativas na web (permite a
interação do usuário).
Para desenvolver web sites interativos precisamos de uma interface que recebe os dados
do usuário para validação e processamento.
Quando um usuário digita dados em uma interface (um formulário, por exemplo), estes dados
precisam ser validados antes de serem processados, ou seja, é necessário verificar se eles
se encontram no formato correto, se foram preenchidos, etc. (são dados do tipo CEP, CPF, email e outros).
JavaScript – Possibilidade de interatividade do lado do cliente nos documentos web
(validação no lado cliente – Tag SCRIPT) e processamento de dados no lado do servidor
(banco de dados e processamento no servidor – Tag SERVER).
As linguagens de script não são interpretadas pelo processador mas por programas, ou seja,
não precisam ser traduzidas em linguagens de máquina para serem interpretadas pelo
navegador.
O JavaScript é suportado por todas as plataformas, como o Windows e o Macintosh.
2. Programas Seqüenciais Simples
Com a finalidade de exemplificar alguns programas sequenciais escritos na linguagem
JavaScript, serão apresentados a seguir alguns códigos que usam sequências de caracteres
(string), valores inteiros e valores reais.
EXEMPLO
O programa a seguir escrito em código JavaScript lê o nome de uma pessoa a ser fornecido
numa caixa de prompt, armazenando esse nome em uma variável denominada NOME. Em
seguida o programa apresenta uma saudação de boas-vindas à pessoa que informou o nome.
Escreva no Bloco de Notas o código seguinte (note o JavaScript entre as tags <body> e </body>):
01)
<html>
02)
.................................................
03)
<body>
04)
<script type="text/javascript">
05)
// <![CDATA[
06)
/* Script de Boas-vindas */
07)
var NOME;
08)
NOME = prompt('Entre com seu nome:' , 'Digite-o aqui');
09)
document.write('Oi ' + NOME + ' bem vindo!');
10)
// ]]>
11)
</script>
12)
13)
</body>
</html>
Após escrever o código anterior, execute no editor de textos o comando Arquivo/Salvar
Como e defina para o arquivo o nome sauda.html.
Execute no NAVEGADOR (digite sauda.html na barra de endereços) e analise o resultado.
Explicação do programa anterior:
Linhas 04 e 11: tags que delimitam um código javascript.
Linhas 05 e 10: indica para os programas de validação html que o código escrito entre a linha
5 e a linha 10 deve ser ignorado.
Linha 06: comentário no programa, não há processamento.
Linha 07: definição de uma variável chamada NOME (o “;” é obrigatório no final de cada
linha de comando).
Linha 08: o método prompt (pertencente ao objeto window, que será visto com mais
detalhes posteriormente) apresenta uma uma caixa de mensagem de entrada de dados. O
conteúdo digitado será guardado ( = ) na variável NOME. Obs.: o comando poderia ser
window.prompt.
Linha 09: document.write efetua a saída da informação digitada (o nome) formando uma
mensagem de boas vindas através de concatenação ('Oi ' + NOME + ' bem vindo!'). Este
comando apresenta o texto na área do documento html no navegador.
Obs.2: Nomes de Variáveis:
•
Iniciar com letra ou _
•
Podem conter letras, números e sublinhado
•
Podem ter letras maiúsculas ou minúsculas
•
Não pode ter espaços
•
Os nomes são case-sensitive
•
Não podem incluir palavras reservadas (boolean, if, etc)
Obs.3: Tipos de Variáveis:
Numeric (integer ou floating-point); String (armazena caracteres alfanuméricos:
números letras e símbolos especiais); Boolean (armazena os valores lógicos
verdadeiro ou falso).
Obs.4: Declaração de Variáveis:
var nome_da_variável;
var nome_da_variável1, nome_da_variável2, nome_da_variável3, ...
EXERCÍCIO-1
Complete o código abaixo para desenvolver um programa em JavaScript que efetue a leitura
de dois valores inteiros e apresente o resultado da soma deles.
Salve como E1.html, execute no navegador e analise o resultado.
A RESPOSTA FOI A ESPERADA? EXPLIQUE O QUE OCORREU.
<html>
<body>
<script type="text/javascript">
.......................................................................
</script>
</body>
</html>
EXERCÍCIO-2
Tente corrigir o problema ocorrido no exercício-1 sabendo que:
Atenção! A linguagem é
CASE SENSITIVE, ou seja,
parseInt é diferente de parseint
- O método parseInt() captura um valor como numérico inteiro.
- O método parseFloat() captura um valor como numérico real.
Salve como E2.html, execute no navegador e analise o resultado.
EXERCÍCIO-3
Desenvolva um programa em JavaScript que faça o cálculo do salário líquido de um operário
que trabalha por hora.
Para isso, é necessário receber alguns dados, como o valor de uma hora de trabalho, o total
de horas trabalhadas no mês e o percentual de desconto do INSS. O programa deve
apresentar o valor do salário líquido.
Salve como E3.html, execute no navegador e analise o resultado.
EXERCÍCIO-5
A linguagem JavaScript possui um conjunto de recursos matemáticos predefinidos. Para usar
esses recursos, é necessário utilizar o objeto Math e um de seus métodos (que fazem
operações matemáticas pré-definidas).
Exemplos:
Math.PI retorna o valor de pi (3,14...).
Math.cos retorna o cosseno de um número.
Math.random retorna um valor aleatório entre 0 e 1.
Math.sqrt retorna a raiz quadrada de um número.
Desenvolva um programa que apresente como resultado:
Existem muitos outros
métodos para o
objeto Math
O valor da raiz quadrada (Math.sqrt) de um número qualquer inteiro informado pelo usuário
e
o valor sorteado de forma randômica (Math.random) entre 0 e 1.
Obs.: os resultados devem aparecer em linhas diferentes. Utilize a tag <br> (um código html)
no comando document.write('<br>....... ' , variável).
Salve como E5.html, execute no navegador e analise o resultado.
Desafio:
Altere o código do exercício 5 para que os números sorteados estejam entre 0 e 99.
3. Programas com Tomada de Decisão
Uma das mais importantes ações de um programa é a tomada de decisão conforme uma
condição imposta. Uma condição é definida com o auxílio de:
Operadores Relacionais
Símbolo
Significado
==
Igual a
!=
diferente de
>
maior que
<
menor que
>=
maior ou igual a
<=
menor ou igual a
Operadores Lógicos
Símbolo
Significado
&&
E
||
OU
!
NÃO
Estrutura de Decisão Simples
Estrutura de Decisão Composta
if (condição) {
if (condição) {
<instruções para condição verdadeira>; }
<instruções para condição verdadeira>; else {
}
<instruções para condição falsa>;
}
Obs.: a condição deve estar entre parênteses
EXEMPLO
O programa a seguir, escrito em código JavaScript, lê (recebe) três valores (dados de
entrada) para os lados de um triângulo (gravando estes dados nas variáveis A, B e C).
A seguir, verifica se os lados fornecidos (guardados em A, B e C) formam realmente um
triângulo.
Se a condição for verdadeira, ou seja, se os valores em A, B e C puderem formar um
triângulo, o programa deve indicar o tipo de triângulo formado: isósceles (2 lados iguais),
escaleno (todos os lados diferentes) ou equilátero (todos os lados iguais).
Se a condição for falsa, ou seja, se os valores em A, B e C não puderem formar um triângulo,
o programa deve apresentar uma mensagem do tipo: “Não é um triângulo”.
01)
02)
03)
04)
05)
06)
07)
08)
09)
10)
11)
12)
<html>
………………………………
<body>
<script type="text/javascript">
// <![CDATA[
/* Script c/ operadores relacionais e lógicos */
var A = parseFloat(prompt('Informe lado A:',''));
var B = parseFloat(prompt('Informe lado B:',''));
var C = parseFloat(prompt('Informe lado C:',''));
document.write('Lado A: '+ A + '<br>');
document.write('Lado B: '+ B + '<br>');
document.write('Lado C: '+ C + '<br>');
13)
A
14)
B
15)
B
16)
C
17)
D
18)
D
19)
E
20)
E
C
A
21)
F
22)
F
23)
24)
25)
26)
if (A<B+C && B<A+C && C<A+B)
{
if (A==B && B==C)
{
document.write('Triângulo Equilátero');
}
else
{
if (A==B || A==C || C==B)
{
document.write('Triângulo Isósceles');
}
else
{
document.write('Triângulo Escaleno');
}
}
}
else
{
document.write('Não é um Triângulo');
}
// ]]>
</script>
</body>
</html>
Explicação do programa anterior:
Este programa utiliza operadores lógicos e relacionais em uma estrutura de decisão
encadeada (vários IF/ELSE entrelaçados).
O primeiro IF verifica se os valores podem formar um triângulo (linha 13: cada lado precisa
ser menor que a soma dos outros dois).
Se esta condição for verdadeira, o segundo IF verifica se o triângulo é equilátero (linha 14:
se todos os lados são iguais).
Se esta condição não for verdadeira, o terceiro IF verifica se o triângulo é isósceles (linha
17: dois lados iguais).
Se esta terceira condição também não for verdadeira (“else” puro na linha 19), é informado
que o triângulo é escaleno (todos os lados são diferentes).
Se a primeira condição (linha 13: A<B+C && B<A+C && C<A+B) não for verdadeira, ou seja,
se os valores não formam um triângulo, nenhum dos testes (IF) anteriores é executado e a
mensagem “Não é um triângulo” é apresentada (o programa pula da linha 13 diretamente
para a linha 21).
DESAFIO: ALTERE O PROGRAMA ANTERIOR. Use apenas UM ELSE e QUATRO
IF´s para executar o mesmo procedimento.
EXERCÍCIO-6
Sabendo que o comando abaixo apresenta uma mensagem na tela com dois botões (OK e
Cancelar), construa um programa que, apresenta a mensagem “Você acionou: OK” ou “Você
acionou: Cancelar”, conforme o botão clicado pelo usuário.
confirm('Selecione um botão');
Obs.: quando o botão OK é
pressionado, o valor gerado é true
EXERCÍCIO-7
Faça um programa que receba três notas de um aluno, calcule e mostre a média aritmética e
a mensagem constante na tabela a seguir. Aos alunos que ficaram para exame, calcule e
mostre a nota que deverão tirar para serem aprovados, considerando que a média final
exigida para aprovação é 6,0 (média anual + nota exame final = 12).
Média Aritmética
Mensagem
0,0
3,0
Reprovado
3,0
7,0
Exame
7,0
10,0
Aprovado
EXERCÍCIO-8
Obs.: a função Math.round(variável) faz o arredondamento de um número. Exemplos:
Math.round(3,23678) 3; Math.round(3,63454) 4; Math.round(3,23678 * 100)/100 3,24
Faça o valor da média do exercício 7 aparecer sempre com duas decimais (ver 3º exemplo).
EXERCÍCIO-9
Um supermercado deseja alterar (aumentar ou diminuir) os preços de seus produtos.
O produto terá seu preço aumentando ou diminuído conforme preencher pelo menos um dos
requisitos a seguir:
Venda Média Mensal
Preço Atual
% de Aumento
% de Diminuição
< 500
< R$ 30,00
10
-
>= 500 e < 1200
>= R$ 30,00 e < R$ 80,00
15
-
>= 1200
>= R$ 80,00
-
20
Faça um programa que receba a venda média mensal e o preço atual do produto, calcule e
mostre o novo preço.
EXERCÍCIO-10
Faça um programa para resolver equações do 2º grau ax2 + bx + c = 0. Detalhes:
a.
Primeira condição a ser verificada: a variável a deve ser diferente de zero, se não for,
informar “não é equação de 2º grau”.
= b2 – 4 * a * c
b.
c.
Se
< 0, informar: “não existe raiz real”
d.
Se
= 0, informar: “existe uma raiz real” e calcular a raiz: (- b) / (2 * a )
e.
Se
> 0, informar: “existem duas raízes reais” e calcular as raízes:
(- b + V
) / (2 * a )
e
(- b - V
) / (2 * a )
