introdução à linguagem javascript professora: adriana silva
TRANSCRIPT
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ávelNOME = prompt (‘Entre com seu nome: ’ , ‘Digite-o
aqui: ’); document.write (‘Oi ’ + NOME + ‘ esteja a vontade’ );
//]]></script></body>
Usando Valores Numéricos Inteiros
<body> <script type="text/javascript"> //<![CDATA[[
var N1; //Declaração de Variávelvar 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 = ’, resposta);//]]>
</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ávelvar 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:if <(condição)>{
/*Instruções para condição verdadeira*/
}
Decisão Composta:if <(condição)>{
/*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
1. 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.
2. 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.