Introdução à Linguagem JavaScript Professora: Adriana Silva
Sobre a linguagem... Criada em 1995 por Brendan Eich da Netscape, nomeada inicialmente como Mocha, posteriormente LiveScript e por fim JavaScript. É uma Linguagem de Programação Cliente-Servidor em navegadores Web. É uma linguagem de Script, Orientada a Objetos. Foi influenciada por C, Python e Java, entre outras linguagens.
Usando JavaScript O uso de JavaScript em páginas XHTML, pelo padrão W3C, deve ser informado ao navegador da seguinte forma: <script type="text/javascript"> /* script */ </script> É valido lembrar que os scripts devem estar posicionados dentro da tag <body>.
Usando JavaScript O Código XHTML pode criar transtornos referentes à validação pelo consórcio W3C, especialmente em relação aos operadores decimais. Para evitar esse problema usamos o character data, que indica que o código escrito deve ser tratado como uma sequencia de dados baseados em caracter. <script type="text/javascript"> //<![CDATA[[ /* script */ //]]> </script>
Script Básico com entrada/saída de dados: O script abaixo lê o nome do usuário e dá boas-vindas. <body> <script type="text/javascript"> //<![CDATA[[ /* Script de Boas-Vindas */ var NOME; //Declaração de Variável NOME = prompt (‘Entre com seu nome: ’ , ‘Digite-o aqui: ’); document.write (‘Oi ’ + NOME + ‘ esteja a vontade’ ); //]]> </script> </body>
Para valores reais utilizamos parseFloat. Usando Valores Numéricos Inteiros <body> <script type="text/javascript"> //<![CDATA[[ var N1; //Declaração de Variável var N2; var R; N1 = prompt(‘Digite o 1º valor’ , ‘Digite aqui: ’); N2 = prompt(‘Digite o 2º valor’ , ‘Digite aqui: ’); R = parseInt (N1) + parseInt (N2); document.write (‘Resultado = ’+ R); //]]> </script> </body> Utilizamos parseInt para converter a entrada (texto) para o tipo inteiro, caso contrário não seria possível efetuar o cálculo. Para valores reais utilizamos parseFloat.
Usando Valores Numéricos Reais <body> <script type="text/javascript"> //<![CDATA[[ var NOTA1; //Declaração de Variável var NOTA2; var MÉDIA; NOTA1 = prompt(‘Digite a 1ª nota’ , ‘Digite aqui: ’); NOTA2 = prompt(‘Digite o 2ª nota’ , ‘Digite aqui: ’); MÉDIA = (parseFloat (NOTA1) + parseFloat (NOTA2))/2; document.write (‘Resultado = ’ + MÉDIA); //]]> </script> </body>
Usando Operações Matemáticas Pré-definidas O JavaScript oferece um conjunto de recursos matemáticos pré-definidos que estão definidos no Objeto Math. Sintaxe: Math. [<propriedade | método>] Constantes: E: constante do número de Euler.; LN2: constante com o resultado do logaritmo natural na base 2. LN10: constante com o resultado do logaritmo natural na base 10. LOG2E: constante com o resultado do logaritmo na base 2 do número de Euler. LOG10E: constante com o resultado do logaritmo na base 10 do número de Euler. PI: constante do pi (Π). SQRT1_2: constante com o resultado da raíz quadrada de meio.; SQRT2: constante com o resultado da raíz quadrada de 2;
Usando Operações Matemáticas Pré-definidas: Raízes, Potências e Arredondamentos Raiz Quadrada Ex.: var1 = sqrt(4);, é o mesmo que √4. Potência Ex.: var1 = pow(10, 3);, é o mesmo que 10³. Arredondamento round() arredonda um número para o inteiro mais próximo. floor() arredonda um número para o inteiro mais baixo. Também considerado como piso. O método ceil() arredonda um número para o inteiro mais alto. Também considerado como teto. O método abs() remove apenas a parte fracionada.
Usando Operações Matemáticas Pré-definidas: Outras Operações Trigonometria sin(): retorna o valor de seno; cos(): retorna o valor de cosseno; tan(): retorna o valor da tangente; asin(): retorna o valor do arco seno; acos(): retorna o valor do arco cosseno; atan(): retorna o valor do arco tangente; Maior e Menor Método min(valor1, valor2) Método max(valor1, valor2) Número Randômico Gerar automaticamente números randômicos. O método random() retorna um número entre 0 e 1.
Operadores Relacionais Como em Java ou C: Símbolo Significado == Igual a != Diferente de > Maior que < Menor que >= Maior ou igual a <= Menor ou igual a
Estruturas de Decisão Decisão Simples: Decisão Composta: if <(condição)>{ /*Instruções para condição verdadeira*/ } Decisão Composta: /*Instruções para condição verdadeira*/} else{ /*Instruções para condição falsa*/}
Estruturas de Decisão - Operadores Lógicos Como em Java ou C: Através dos operadores Lógicos podemos criar condições compostas. Exemplo: if (sexo==‘F’ && idade>= 10){ document.write (‘Mulher Maior de Idade’); } Símbolo Significado || Ou (OR) && E (AND) ! Não (NOT)
Estruturas de Decisão Decisão Encadeada X Decisão sequencial Seleção Sequencial: Para facilitar a interpretação do código e evitar sequencias muito grandes de encadeamento de decisão, utilizamos o Switch... Case. Exemplo: switch (dia_semana){ case 1: document.write(‘Janeiro’); break; case 2:document.write(‘Fevereiro’); break; ...... }
Sugestão de Exercícios Crie um script que solicite o valor dos 3 lados de um triângulo e imprima se o mesmo é equilátero, isósceles ou escaleno. Crie um script para imprimir a média de 3 notas e dizer se o aluno está aprovado ou não. A média para aprovação é 6. Crie um novo script que leia um número que só pode ser de 1 a 7 e imprima os dias da semana sendo 1 = domingo e 7 = sábado.
Referências: MANZANO. J.A.N.G. , TOLEDO, S. A. Guia de Orientação e Desenvolvimento de Sites – HTML, CSS e JavaScript/Jscript. São Paulo: Editora Érica, 2008.