1 - O que é JAVASCRIPT? É uma linguagem de script orientada a
Propaganda
1-
O que é JAVASCRIPT?
É uma linguagem de script orientada a objetos, usada para aumentar a interatividade de
páginas Web. O JavaScript foi introduzido pela Netscape em seu navegador 2.0 e
posteriormente adotado pela Microsoft.
Apesar do nome Java e JavaScript não têm quase nenhuma relação um com o outro. O Java é
uma linguagem de programação repleta de recursos, desenvolvida pela Sun Microsystems.
Diferente de outras linguagens, Java cumpre a promessa de compatibilidade independente de
plataforma, ou seja, um programador deve ser capaz de escrever um único programa em Java
que poderia então funcionar em qualquer tipo de máquina, esteja essa máquina executando o
Windows, Unic ou Mac OS.
Com JavaScript pode-se controlar o navegador, abrindo novas janelas, checando formulários,
exibir caixas de alerta, testar a presença de plugins e várias outras coisas. Programas
JavaScript são executados na máquina cliente∗ e devem ser compatíveis com o navegador, por
isso a importância de testar exaustivamente os códigos para diferentes versões de browsers.
Um script de JavaScript é um programa incluído em uma página Web dentro dos tag
<script>.....</script> e assim não aparece na tela do usuário.
Os tags <script> podem ser colocados tanto no cabeçalho quanto no corpo de uma página
HTML.
Para incluir algum código Javascript em seu documento basta colocar:
<script language=”javascript” type=”text/javascript”>
<!-código Javascript
/* Este é um exemplo de comentário dentro do JavaScript */
-->
</script>
O tag <script> indica uma linguagem script. language="javascript" indica para o navegador
qual a linguagem script utilizada e type=”text/javascript” informa ao navegador que o script é
texto sem formatação.
O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso
de navegadores antigos que não reconhecem a linguagem.
No exemplo anterior ainda podemos ver como são inseridos comentários em um script .
Utilizamos os tag /* para início e */ para fim do trecho de comentário.
O JavaScript pode ser executado também no lado servidor acessando inclusive banco de
dados. Esse tipo de arquitetura não está sendo retratado neste documento.
∗
1
2-
Primeiro Programa Javascript
<html >
<head>
<title> Primeiro Programa </title>
</head>
<body>
<script language="javascript" type=”text/javascript”>
document.write("Meu primeiro programa Javascript");
</script>
</body>
</html>
3-
Variáveis e Operadores em Javascript
3.1- Variável
Uma variável é um elemento utilizado para armazenar informações (texto e números), que
posteriormente podem ser utilizadas em operações diversas (validações, operações
matemáticas).
Exemplos de variáveis:
X=7
B="teste"
Existem diferentes tipos de valores que podem ser armazenados nas variáveis:
Number – valor numérico
String – Caracteres entre sinais de aspas
Boolean – Verdadeiro ou Falso
Null – Vazio
Object – Valor associado a objeto
Importante
1.
O JavaScript faz distinção entre maiúscula e minúscula. Isso significa que meunome
é diferente de meuNome e também de MeuNome.
2. Nomes de variáveis não podem conter espaços ou pontuação.
3.2-
Operadores
Os operadores podem ser matemáticos:
2
x + y (numérico)
- soma numérica
x + y (string) - concatena x e y
x - y (numérico)
– subtrai y de x
x * y (numérico)
– multiplica x por y
x / y (numérico)
– divide x por y
x % y (numérico)
– módulo de x por y (resto da divisão x por y)
x++ , ++x
- soma uma unidade a x (x=x+1)
x-- , --x
- subtrai uma unidade a x (x=x-1)
-x
- inverte o sinal de x
Obs:
x++ e ++x não são idênticos. O primeiro faz a atribuição e depois incrementa x, já o segundo
incrementa x e depois faz a atribuição.
Ex1: Se x=5, e y=x++ , então y=5 e x=6.
Ex2: Se x=5 e y=++x, então y=6 e x=6.
ou comparadores:
= = (igual a)
> (maior)
< (menor)
> = (maior ou igual)
< = (menor ou igual)
!= (diferente)
&& (and)
|| (or)
! (not)
4-
Funções em Javascript
Uma função é basicamente um miniscript dentro do documento. Há dois momentos para
utilizarmos as funções: primeiro declara-se a função e depois utiliza-se no corpo do script,
passando parâmetros para a sua execução.
Para declarar uma função, utiliza-se o tags <script> </script> dentro do tag <head> e
depois pode-se utilizá-la nos formulários existentes.
Ex.:
<html>
3
<head>
<title> Funções em Javascript </title>
<script language="javascript" type=”text/javascript”>
function escreve(texto)
{
document.write("<b>"+texto+"</b>")
}
</script>
</head>
<body>
<script language="javascript" type=”text/javascript”>
escreve("A função funciona!");
</script>
</body>
</html>
5-
Comandos em Javascript
Comandos de Decisão
•
Comando IF
if (condição)
{
Instruções
}
else
{
outras instruções
}
Ex.:
<script language="javascript" type=”text/javascript”>
if (x= =1)
{ alert("x é igual a 1!"); }
else
{ alert("x é diferente de 1!"); }
</script>
•
Comando SWITCH
4
switch (variavel_de_controle) {
opção1 : comandos ;
break;
opção2 : comandos ;
break;
default : comandos;
}
Ex.
<script language="javascript" type=”text/javascript”>
var teste = prompt("digite um valor de 1 até 5");
switch(teste){
case '1': alert('seu valor foi 1');break;
case '2': alert('seu valor foi 2'); break;
case '3': alert('seu valor foi 3'); break;
case '4': alert('seu valor foi 4'); break;
case '5': alert('seu valor foi 5'); break;
default: alert('seu valor não foi nenhum valor entre 1 e 5');
}
</script>
Comandos de Repetição
É utilizado para repetição de operações.
•
Comando FOR
For (contador; condição, adicionar ao contador)
{ Instruções }
Ex1.:
<script language="javascript" type=”text/javascript”>
for (x=0;x<10;x=x+1)
{
y=2*x;
document.write("Duas vezes ", x, " é igual a ", y,"</br>");
5
}
</script>
•
Comando WHILE
While ( condição)
{ Instruções }
Ex2.:
<script language="javascript" type=”text/javascript”>
x=0
while (x<=5)
{
x= x+1;
document.write("X agora é igual a ", x, "<br>")
}
</script>
Exemplo completo:
<html >
<head>
<title> Variáveis, operadores e comandos</title>
<script language="javascript" type=”text/javascript”>
function quadrado(numero) {
novo_numero = (numero * numero)
return(novo_numero)
}
</script>
<body>
<script language="javascript" type=”text/javascript”>
num=5;
num_quadrado=quadrado(num);
alert("o quadrado de " + num + " é " + num_quadrado);
</script>
</body>
</html>
6-
Funções
A seguir algumas funções importantes do JavaScript
6
alert - Mostra uma caixa de alerta, seguido de um sinal sonoro e o botão de OK.
Ex: alert(“Esta é uma janela de alerta!”)
confirm - Mostra uma caixa de diálogo, seguida de um sinal sonoro e os botão de OK e
Cancel. Retorna true se o usuário escolher OK.
Ex: retorno=confirm('Deseja prosseguir?')
eval - Avalia uma expressão numérica, retornando um resultado também numérico.
Ex: document.write(eval(10*9*8*7*6*5*4*3*2))
parseFloat - Converte uma string que representa um número, para um número com ponto
flutuante. Caso a string não possa ser avaliada, a função retorna 0.
Ex: document.write(parseFloat("-3.14e-2"))
parseInt - Converte uma string, que representa um número em uma base predefinida para
base 10. Caso a string possua um caracter que não possa ser convertido, a operação pára,
retornando o valor antes do erro.
Ex: paseInt("string",base)
parseInt("FF",16) // retorna 255
parseInt("10",8) // retorna 8
parseInt("10",2) // retorna 2
prompt - Monta uma caixa de entrada de dados. Retorna o valor digitado pelo usuário.
Ex: prompt( “texto” ,valor)
prompt("Entre com a sua idade:", 20)
onde:
texto - texto que aparece ao lado da caixa.
valor – (opcional) é o conteúdo inicial da caixa.
Exercícios
1) Faça uma função que imprima a tabuada de um determinado valor. Depois crie um
programa em javascript que primeiro informe ao usuário o que irá fazer o seu programa e
depois peça que o usuário digite o valor para o calculo de sua tabuada e mostre a tabuada do
valor digitado pelo usuário.
2) Faça uma função que calcula os primeiros 10 múltiplos de um valor e imprima-os. Depois
crie um programa em javascript que peça que o usuário digite um valor e chame a função que
você criou anteriormente passando o valor digitado como parâmetro. Depois pergunte se o
usuário deseja prosseguir e caso afirmativo, volte ao início do programa e comece novamente.
7
