Javascript Para que serve Tipos de dados Lista de operadores de
Propaganda
Javascript
JavaScript (JS) é uma linguagem de programação client side Funciona no navegador do usuário.
É uma linguagem baseada em objetos.
"Walmir".length;
6
Para que serve
-
fazer websites responder à interação do usuário (alterar cor, fonte, inserir conteúdo novo na página, validar
formulários (html 5 substitui), etc.
criar apps.
organizar e apresentar dados (por ex. automatizar o trabalho com planilhas, visualização de dados).
Tipos de dados
-
números (1, 101.23, etc.)
strings (“Jose da Silva”, “abc”, etc.)
booleanos (um booleano é verdadeiro (true) ou falso (false)). Ex.: 23 > 11 é true; 3 < 2 é false.
"Estou programando como um profissional".length > 10
true
Lista de operadores de comparação
-
> Maior que
< Menor que
<= Menor ou igual a
>= Maior ou igual a
=== Igual a
!== Diferente de
Primeiros comandos de interação
// Isto e um comentário, que o computador vai ignorar.
Atenção! A linguagem é CASE SENSITIVE, ou seja, document é diferente de Document.
document.write("OLA! ")
OLA! (será impresso no corpo da página)
alert("OLA! ");
Página
1
confirm("Isto e um exemplo do uso de JS para criar interação em um website. Clique em OK para continuar! ");
prompt("Qual o seu nome?");
Inserir código javascript na página html:
É possível inserir código javascript em uma página html de duas maneiras. Veja a seguir.
1) Direto no código da página html (em head)
Basta escrever o código entre as tags <script> </script>
Exemplo:
<script>
alert("Olá!");
</script>
<script type="text/javascript">
<script language="javascript">
Quando o navegador interpretar este código, mostrará uma janela onde se lê “Olá!”.
2) Indicando um arquivo externo (em head)
É a mais utilizada.
a) Cria-se um arquivo com a extensão .js onde o código será escrito.
Exemplo:
Conteúdo do arquivo chamado arquivo.js
alert ("Olá! ");
b) Conteúdo no arquivo .html
<script src="arquivo.js"></script>
Vantagem para reutilizar o código em outras páginas basta fazer a mesma referência ao arquivo .js (item b) e
quando houver alteração no código javascript, será necessário alterar apenas em um local (arquivo.js).
Página
2
O resultado será o mesmo:
Variável
É um texto (nome) que representa uma área de memória.
Pode assumir (guardar) diversos conteúdos (textos, números resultantes de cálculos, etc.).
Geralmente estes conteúdos serão usados posteriormente pelo programa.
Algumas vezes os conteúdos são dados de entrada (dados que o programa precisa receber antes de realizar
o processamento que vai produzir o resultado\informação). Exemplo: nome de um aluno, nota do aluno, etc.
Maneiras de declarar (criar) uma variável:
1) var nome = "Ana Maria da Silva";
ou
var nome;
2) nome = "Ana Maria da Silva";
Recomenda-se usar a 1ª opção e usá-la no início do programa Facilita a visualização das variáveis quando é
necessário fazer uma manutenção no programa.
Exemplo:
<script language="javascript">
var mensagem;
mensagem = "Olá!";
alert(mensagem);
mensagem = "Bem vindo";
alert(mensagem);
</script>
Quando o navegador interpretar este código, mostrará duas janelas em sequência:
Exemplos de script´s (programas em JS)
Página
<html>
<head>
<script language="javascript">
document.write("Bom dia!<br>");
</script>
</head>
<body>
</body>
</html>
3
Primeiro exemplo de script
O exemplo a seguir imprime a frase “Bom dia!” na página. Observe que, apesar de não existirem elementos entre as
marcações <BODY> e </BODY>, esta frase é exibida. Isto ocorre porque a função document.write() instrui o
navegador a colocar o que estiver entre apóstrofos na página.
Segundo exemplo de script
Uma das razões de utilizar Javascript é a possibilidade de montar um texto para ser exibido, incluindo valores de
variáveis que podem ser inseridos pelo usuário.
<html>
<head>
<script language="javascript">
var nome
nome = window.prompt("Digite o seu nome:");
// na linha anterior pode-se usar apenas prompt, conforme exemplos.
document.write("Bom dia, " + nome + "!<br>");
</script>
</head>
<body>
</body>
</html>
Eventos em Javascript
Javascript é uma linguagem dirigida por eventos. Eventos (tais como, clicar no mouse, ou pressionar um botão) são
utilizados para controlar a interação do usuário com o aplicativo.
Manipuladores de eventos Javascript servem para ativar um script conforme atividades do sistema ou ações do
usuário. Eles são divididos em 2 categorias: eventos de sistema e eventos de mouse.
Alguns eventos de sistema: OnLoad, OnUnload, OnBeforeUnload. Eles não exigem a interação do usuário para
serem ativados.
Alguns eventos de mouse: OnClick, OnFocus, OnSelect, OnSubmit, OnMouseOver. Eles exigem a interação do
usuário para serem ativados.
Terceiro exemplo de script
OnLoad
Este evento é ativado após a página HTML ser completamente carregada. Ele é associado à tag <BODY>.
Página
4
<html>
<head>
<script language="Javascript">
function chegada() {
window.alert("Seja bem-vindo ao nosso site!");
}
</script>
</head>
<body onload="chegada()">
<h1>Veja que interessante utilização do evento OnLoad.</h1>
</body>
</html>
Quarto exemplo de script
OnBeforeUnload
Este evento é ativado antes da página HTML ser abandonada. Pode ser associado à tag <BODY>.
No Internet Explorer, abra o código a seguir e, em seguida, feche a guia de navegação correspondente:
<html>
<head>
<script language="Javascript">
function saida() {
window.alert("Volte sempre!");
}
</script>
</head>
<body onbeforeunload="saida()">
<h1>Veja que interessante utilização do evento OnBeforeUnload.</h1>
</body>
</html>
Quinto exemplo de script
No Chrome ou no Internet Explorer, abra o código a seguir e, em seguida, feche a guia de navegação
correspondente:
<script language="JavaScript">
window.onbeforeunload = saida;
function saida()
{
return "Mensagem da página";
}
</script>
Estrutura de Decisão
Uma das mais importantes ações de um programa é a tomada de decisão conforme uma condição imposta.
Página
5
Operadores Lógicos
Símbolo
Significado
&&
E
||
OU
!
NÃO
Estrutura 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).
Funções/Métodos
-
Métodos usados com PROMPT quando o valor informado deve ser convertido em numérico:
parseInt() captura um valor como numérico inteiro.
parseFloat() captura um valor como numérico real.
-
Funções Matemáticas:
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.
EXERCÍCIOS
Obs.: para obter números sorteados entre 0 e 99: numero = Math.round(Math.random()*100);
Página
<html>
<body>
<script type="text/javascript">
var base, res, numero;
base = parseInt(prompt('Entre com valor:','Digite aqui'));
res = Math.sqrt(base);
document.write('A raiz quadrada de ', base , ' é ', res);
numero = Math.random();
document.write('<br> O valor sorteado foi ', numero);
</script>
</body>
</html>
6
Exercício 1:
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/aleatória (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('....... ' , variável)).
Salve como E1.html, execute no navegador e analise o resultado.
Exercício 2:
Faça um programa que receba três notas de um aluno, calcule e mostre a média aritmética e a mensagem
correspondente, conforme a tabela a seguir.
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).
Exercício 3:
Considere que agora queremos fazer o mesmo processamento do exercício 2, mas não para um aluno apenas e
sim para um grupo de 4 (quatro) alunos. Altere o código do programa anterior e teste.
Exercício 4:
Faça com que o programa anterior (exercício 3) 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.
Página
7
Exercício 5:
Considerando o exercício anterior (exercício 5), 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;
