1. Introdução JavaScript (ou JScript) 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, e- mail 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) </body> 13) </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: - 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. Atenção! A linguagem é CASE SENSITIVE, ou seja, parseint é diferente de parseint 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. Existem muitos outros métodos para o objeto Math Desenvolva um programa que apresente como resultado:
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) <html> 02) 03) <body> 04) <script type="text/javascript"> 05) // <![CDATA[ 06) /* Script c/ operadores relacionais e lógicos */ 07) var A = parsefloat(prompt('informe lado A:','')); 08) var B = parsefloat(prompt('informe lado B:','')); 09) var C = parsefloat(prompt('informe lado C:','')); 10) document.write('lado A: '+ A + '<br>'); 11) document.write('lado B: '+ B + '<br>'); 12) document.write('lado C: '+ C + '<br>');
13) if (A<B+C && B<A+C && C<A+B) A { 14) if (A==B && B==C) B { 15) document.write('triângulo Equilátero'); B 16) else C { 17) if (A==B A==C C==B) D { 18) document.write('triângulo Isósceles'); D 19) else E { 20) document.write('triângulo Escaleno'); E C A 21) else F { 22) document.write('não é um Triângulo'); F 23) // ]]> 24) </script> 25) </body> 26) </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 0,0 3,0 3,0 7,0 7,0 10,0 Mensagem Reprovado Exame 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 ax 2 + 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. b. = b 2 4 * a * c 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 )
Programas com Laços de Repetição Há situações em que é necessário repetir trechos de um programa um determinado número de vezes, isso pode ser conseguido utilizando-se o laço de repetição (também conhecido pelo nome looping). Estrutura WHILE while (condição) { Instrução1 executada enquanto condição for verdadeira; Instrução2 executada enquanto condição for verdadeira; Instruçãon executada enquanto condição for verdadeira; Exemplo laço while: Estrutura FOR for (início; fim; incremento) { Instrução1; Instrução2; Instruçãon; Exemplo laço for: i=1; for (i=1; i<=10; i++) { while (i<=10) { document.write( Mensagem + i+ <br> ); document.write( Mensagem + i + <br> ); i++; Obs.: A variável i é o controlador do laço (controla quando ele será reexecutado ou termina). i++ corresponde a i=i+1 (incremento de um em um da variável controladora i). EXERCÍCIO-11 Faça um programa em javascript que monte os 11 primeiros termos da seqüência de Fibonacci, apresentada abaixo (observe antes a solução em algoritmo). 0 1 1 2 3 5 8 13 21 34 55... Solução em algoritmo Usando laço PARA (for): INÍCIO ALGORITMO DECLARE cont, num1, num2, res NUMÉRICO num1 0 num2 1 ESCREVA num1 ESCREVA num2 PARA cont 3 ATÉ 11 FAÇA INÍCIO res num1 + num2 ESCREVA res num1 num2 num2 res FIM FIM ALGORITMO Solução em algoritmo usando laço ENQUANTO (while): INÍCIO ALGORITMO DECLARE cont, num1, num2, res NUMÉRICO num1 0 num2 1 ESCREVA num1 ESCREVA num2 cont 3 ENQUANTO cont <= 11 INÍCIO res num1 + num2 ESCREVA res num1 num2 num2 res cont cont + 1 FIM FIM ALGORITMO
Reproduzimos abaixo o enunciado do exercício 7 (já feito) e a solução em JavaScript. 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 Entre 0,0 e 3,0 3,0 e 7,0 7,0 e 10,0 Mensagem Reprovado Exame Aprovado <html> <body> <script type='text/javascript'> var n1,n2,n3,media,notaexame; n1=prompt('informe nota1:','digite aqui'); n2=prompt('informe nota2:','digite aqui'); n3=prompt('informe nota3:','digite aqui'); media=(parsefloat(n1)+parsefloat(n2)+parsefloat(n3))/3; media=math.round(media*100)/100 document.write('média: ',media); if (media >= 0 && media < 3) { document.write('<br> Reprovado'); else { if (media >= 3 && media < 7) { document.write('<br> Exame'); notaexame=12-media; document.write('<br> Deve tirar: ' + notaexame + ' para ser aprovado'); else { document.write('<br> Aprovado'); </script> </body> </html> EXERCÍCIO-12 Considere que agora queremos fazer o mesmo processamento acima, mas não para um aluno apenas e sim para um grupo de 4 (quatro) alunos. Altere o programa acima e teste. EXERCÍCIO-13 Faça com que o programa anterior (exercício 12) funcione para grupos com qualquer quantidade de alunos, ou seja, o usuário deve informar, no início do processamento, a quantidade de alunos da turma. Altere e teste. EXERCÍCIO-14 Considerando o exercício anterior (exercício 13), altere o código para que o programa apresente também as seguintes informações ao final da execução: - O total de alunos aprovados; - O total de alunos em exame; - O total de alunos reprovados; - A média geral do grupo de alunos;