Escolar Documentos
Profissional Documentos
Cultura Documentos
Apostila Javascript
Apostila Javascript
Apostila Javascript
O que é JavaScript?
Pergunta: Se JavaScript não é a mesma coisa que Java, porque possuem nomes semelhantes?
Resposta: Quando a Netscape adicionou capacidades básicas de script ao seu navegador da
Web, ela chamou aquela linguagem de LiveScript. Na mesma época, a linguagem Java estava
sendo considerada pela mídia como "o próximo grande feita da informática". Quando a Netscape
revisou o Navigator para executar applets Java no Navigator 2, ela renomeou o LiveScript para
JavaScript,esperando obter um pouco do brilho do Java.
Características JavaScript:
A tag <script>
</script>
Encerra o JavaScript e informa que o navegador deve começar a esperar HTML novamente.
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
document.write("Escrevendo com JavaScript");
</script>
</head>
<body>
</body>
</html>
Orientação a Objetos:
Objeto: no mundo real, um objeto é alguma coisa que exite como por exemplo uma cadeira, uma
bolsa, etc. Para o JavaScript, existem os objetos com que ele lida em navegadores Web, como
janelas, formulários, elementos do formulário, dentre outros.
Métodos: os métodos são as ações que os objetos podem realizar. Imprimir, abrir uma janela,
fechar uma janela, são exemplos de ações (métodos) que um objeto JavaScript pode realizar.
Eventos: os são ações que o usuário executa enquanto visita a página. Exemplo: entrar na página,
sair da página, clicar, passar o mouse, etc.
Valores e Variáveis:
Operadores JavaScript
Operadores Aritméticos:
Exemplo:
Operadores de Atribuição:
== igual
!= diferente
> maior
>= maior ou igual
< menos
<= menor ou igual
&& e
|| ou
! não
O atributo language da tag script permite especificar a versão mínima do JavaScript de que o
navegador necessita para executar o script.
<html>
<head>
<script language="JavaScript1.3" type="text/JavaScript">
<!--
código
-->
</script>
</head>
<body>
</body>
</html>
Definindo um conteúdo alternativo para navegadores que estão com a execução de script
bloqueado.
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
document.write("Escrevendo com JavaScript");
-->
</script>
<noscript>
ERRO: Seu Navegador não suporta JavaScript.
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
var nome = prompt("Digite seu nome","");
if(confirm("Quer ver seu nome?")){
alert("Seu nome é: "+ nome);
}
-->
</script>
<noscript>
ERRO: Seu Navegador não suporta JavaScript.
</noscript>
</head>
<body>
</body>
</html>
Caracteres especiais
\n quebra de linha
\t tabulação
\' aspas simples
\" aspas duplas
\\ barra invertida
Condicionais
São decisões (sim ou não) que o código JavaScript deve tomar quando são executadas. Em cada
uma destas condições podemos criar um bloco de comandos que será executado apenas se o
resultado da condição for verdadeiro e outro para ser executado apenas quando o resultado for
falso.
if(condição){
bloco de comandos para condição verdadeira
}
else{
bloco de comandos para condição falsa
}
OBS: isNaN significa is Not a Number e retorna verdadeiro se o valor não for numérico e falso caso
contrário.
switch(atributo){
case valor1:
bloco de comandos
break;
case valor2:
bloco de comandos
break;
default:
bloco de comandos
}
<!--
var x=prompt("Entre com um número","");
var aux = x%2;
switch(aux){
case 0:
alert("Número par");
break;
case 1:
alert("Número ímpar");
break;
default:
alert("Valor inválido");
}
-->
</script>
Loops
Laços lógicos servem para executar mais de uma vez um trecho de código. É importante sempre
criar uma forma para o programa sair do laço; caso contrário, é criado um loop infinito que trava o
navegador.
while(condição){
bloco de comandos
}
-->
</script>
do{
bloco de comandos
} while(condição);
-->
</script>
-->
</script>
Exercício: Escreva um script que leia um número, calcule seu fatorial e exiba na tela.
Resposta:
<script language="JavaScript" type="text/JavaScript">
<!--
var num=eval(prompt("Entre com um número",""));
var res = 1;
for(i=num;i>1;i--){
res *= i;
}
alert(res);
-->
</script>
Eventos
Os eventos Javascript, associados as funções, aos métodos e aos formulários, abrem uma grande
porta para uma verdadeira interatividade nas páginas.
Exemplo 1:
<HTML>
<HEAD>
</HEAD>
<BODY onLoad="alert('Bem Vindo!');" onUnload="alert('Adeus!');">
Conteúdo da Página
</BODY>
</HTML>
Exemplo 2:
<FORM>
<INPUT TYPE=text onFocus="alert('Isto é um onFocus!')">
</FORM>
Exemplo 3:
<FORM>
<INPUT TYPE="button" VALUE="Clicar" onClick="alert('Acaba de clicar no botão')">
</FORM>
Objeto Date:
Com a função Date() obtemos a data e a hora correntes do computador do usuário no formato:
Exemplo:
Funções:
<script>
function BoasVindas(nome){
document.write("Olá " + nome)
}
var x = window.prompt("Entre com seu nome","");
BoasVindas(x);
</script>
Múltiplos parâmetros:
Uma função pode receber tantos parâmetros quanto quisermos e para expressá-lo colocam-se os
parâmetros separados por vírgulas dentro dos parênteses. Vejamos a sintaxe para que a função de
antes receba dois parâmetros, primeiro, o nome a quem saudar e segundo, a cor do texto.
<script>
function BoasVindas(nome,cor){
document.write("<FONT color=" + cor + ">");
document.write("Olá " + nome);
document.write("</FONT>");
}
var x = window.prompt("Entre com seu nome","");
var y = window.prompt("Entre com o código hexadecimal para a cor","#");
BoasVindas(x,y);
</script>
<script>
function passoPorValor(meuParametro){
meuParametro = 32;
document.write("o valor da variavel na função e: "+ meuParametro);
}
var minhaVariavel = 5;
passoPorValor(minhaVariavel);
document.write ("o valor da variavel e: " + minhaVariavel);
</script>
Valores de retorno
As funções também podem retornar valores, de modo que ao executar a função poderá se realizar
ações e dar um valor como saída. Vejamos um exemplo de função que calcula a média de dois
números. A função receberá os dois números e retornará o valor da média.
<script>
function media(valor1,valor2){
var resultado
resultado = (valor1 + valor2) / 2
return resultado
}
var minhaMedia;
var x = window.prompt("Entre com o primeiro valor","");
x = parseFloat(x);
var y = window.prompt("Entre com o segundo valor","");
y = parseFloat(y);
minhaMedia = media(x,y);
document.write(minhaMedia);
</script>
Múltiplos Retornos
Em uma mesma função podemos colocar mais de um return. Logicamente só vamos poder
retornar uma coisa, mas dependendo do que tenha acontecido na função poderá ser de um tipo ou
de outro, com uns dados ou outros. Vejamos um exemplo de uma função que retorna zero se o
parâmetro passado for par e retorna o valor do parâmetro de este for ímpar.
<script>
function multiploReturn(numero){
var resto = numero % 2
if (resto == 0)
return 0
else
return numero
}
var resposta
var x = window.prompt("Entre com um número","");
x = parseFloat(x);
resposta = multiploReturn(x);
document.write(resposta);
</script>
As variáveis declaradas dentro da função são variáveis locais, ou seja, seu valor só vale para
dentro da função. As variáveis criadas fora da função são variáveis globais e podem ser acessadas
em qualquer parte do script.
Arrays:
Nas linguagens de programação existem estruturas de dados especiais que nos servem para
salvar informações mais complexas do que simples variáveis. Uma estrutura típica em todas as
linguagens é o Array, que é como uma variável onde podemos introduzir vários valores, ao invés
de somente um como ocorre com as variáveis normais.
Os arrays nos permitem salvar várias variáveis e acessá-las de maneira independente, é como ter
uma variável com distintos compartimentos onde podemos introduzir dados distintos. Para isso
utilizamos um índice que nos permite especificar o compartimento ou posição ao qual estamos nos
referindo.
Os arrays foram introduzidos em versões Javascript 1.1 ou superiores, ou seja, somente podemos
utilizá-los a partir dos navegadores 3.0. Para navegadores antigos se pode simular o array
utilizando sintaxe de programação orientada a objetos.
Criação de Arrays
O primeiro passo para utilizar um array é criá-lo. Para isso utilizamos um objeto Javascript já
implementado no navegador:
NomeDoArray[0] = 290
NomeDoArray[1] = 97
NomeDoArray[2] = 127
var x = meuArray[0]
Nos campos dos arrays podemos salvar dados de qualquer tipo, inclusive salvar tipos distintos em
um mesmo Array.
Exemplo1:
<script>
var meuArray = new Array(2)
meuArray[0] = "Colômbia"
meuArray[1] = "Estados Unidos"
meuArray[5] = "Brasil"
for (i=0;i<meuArray.length;i++){
document.write("Posição " + i + " do array: " + meuArray[i] + "<br>")
}
</script>
Arrays multidimensionais
Um array multidimensional é como um contêiner que guardará mais valores para cada posição, ou
seja, como se os elementos do array fossem por sua vez outros arrays.
Em Javascript não existe um autêntico objeto array-multidimensinal. Para utilizar estas estruturas
poderemos definir arrays onde, em cada uma de suas posições haverá outro array.
Exemplo2:
<script>
var nome = new Array(3)
nome[0] = "Fulano"
nome[1] = "Ciclano"
nome[2] = "Beltrano"
for (i=0;i<cadastro.length;i++){
for (j=0;j<cadastro[i].length;j++){
document.write(cadastro[i][j])
}
}
</script>
Iniciação de arrays
Exemplo:
<script>
x=eval("(10+10)*2");
alert(x);
y="10.5";
z="10.5";
alert(y+z);
y=parseInt(y);
z=parseInt(z);
alert(y+z);
y="10.5";
z="10.5";
y=parseFloat(y);
z=parseFloat(z);
alert(y+z);
</script>
Funções Matemáticas:
Exemplo:
<script>
x=10.6;
y=Math.round(x);
alert(y); // retorna 11
</script>
Manipulando Strings:
Exemplo:
<script>
x="Uniban";
y=x.substring(2,4);
alert(y); // retorna ib
</script>
Move Condicional
receptor = ((condição)?verdadeiro:falso);
Exemplo:
<script>
sexo = prompt("Digite o sexo (M/F)","");
nomesexo=((sexo=="M")?"Masculino":"Feminino");
alert(nomesexo);
</script>
Objetos JavaScript:
Propriedades:
<html>
<head>
<script>
window.defaultStatus="Qualquer coisa";
</script>
</head>
<body>
<a href="#" onmousemove="window.status='Qualquer texto' "> link </a>
</body>
</html>
Métodos:
Forma geral:
location.propriedade
location.metodo()
Propriedades:
host - Armazena uma string com o formato "hostname:port" da página HTML atual.
Ex: alert('Demostração da propriedade host: '+location.host)
History: Este objeto armazena todas as URLs das páginas HTML por onde o usuário passou
durante a sessão atual do browser. É uma cópia das informações armazenadas na opção Go da
barra de menu do Navigator.
Forma geral:
history.propriedade
history.método
Propriedades:
Métodos:
back - Retorna à página anterior, de acordo com a relação de páginas do objeto history.
Equivale a clicar o botão back do browser.
Ex: history.back()
forward - Passa para a próxima página, de acordo com a relação de páginas do objeto
history. Equivale a clicar o botão forward do browser.
Ex: history.forward()
go - Permite que qualquer URL que esteja presente na relação de páginas visitadas do
objeto history, seja carregada.
Ex: history.go(parâmetro)
Document: Este objeto armazena todas as características da página HTML, como por exemplo:
cor das letras, cor de fundo, figura que aparecerá como papel de parede, etc
Sempre que incluimos alguma declaração no <BODY> do documento, estamos alterando
(sem perceber) o objeto Document.
Forma geral:
<BODY [BACKGROUND="Imagem"]
[BGCOLOR="#CorDeFundo"]
[FGCOLOR="#CorDoTexto"]
[LINK="#CorDosLinks"]
[ALINK="#CorDoLinkAtivado"]
[VLINK="#CorDoLinkVisitado"]
[onLoad="função"]
[onUnLoad="funcao"]>
Propriedades:
fgColor - Determina a cor das letras em uma página HTML. Esta propridade não altera o
que já está impresso na página HTML.
Ex: document.fgColor="#0000FF"
alinkColor - Determina a cor do link enquanto o botão do o mouse estiver pressionado sobre
o link.
Ex: document.alinkColor="#FFFFFF"
linkColor - Determina a cor dos links que ainda não foram visitados pelo usuário.
Ex: document.linkColor = "#00FF00"
Exemplo:
<html>
<head>
<script>
document.bgColor="#000000";
document.fgColor="#FF0000";
</script>
</head>
<body>
<a href="#" onmousemove="window.status='Qualquer texto' "> link </a><br>
texto
</body>
</html>
Métodos:
writeln - Imprime informações na página HTML e passa para a próxima linha. Em meus
testes, esse método não apresentou diferença com relação ao método write.
Ex: document.writeln("Qualquer coisa" [,variável] [,..., expressão])
Eventos:
onLoad, onUnload
Outros Objetos: frames, forms, links, anchor, text fields, textarea, checkbox, password,
radio, select, button, reset e submit.
Formulários:
Focando um objeto:
document.form.campo.focus();
document.form.campo.value;
document.form.campo=valor;
if(document.form.campo.value==””){
alert(“Preencha o campo!”);
}
if(document.form.campo.value==””){
alert(“Preencha o campo!”);
}
Validação de e-mail:
email=document.frm.email.value;
if(email!=""){
aux=false;
for(i=0; i<email.length; i++){
if(email.charAt(i)=="@"){
aux=true;
}
}
}
if((email=="") || (aux==false)){
alert("Verifique o campo e-mail!")
}
x = document.frm.campo;
aux=false;
for(i=0; i<x.length; i++){
if(x[i].checked){
aux=true;
}
}
if(aux==false){
alert("Selecione uma opção!")
}
Desabilitar/habilitar campos:
document.form.campo.disabled=true/false;
Na tabela:
document.all.fav.style.display = '';
Na tag Body:
<body onkeydown="KeyDown();">
Na tag SCRIPT:
function KeyDown(){
var ctrl = window.event.ctrlKey;
var code = window.event.keyCode;
//CTRL+P (print)
if (ctrl && code==80) {
alert("CTRL + P bloqueado.");
window.event.returnValue = false;
}
//CTRL+C (copy)
else if (ctrl && code==67){
alert("CTRL + C bloqueado.");
window.event.returnValue = false;
}
//CTRL+A (select all)
else if (ctrl && code==65) {
alert("CTRL + A bloqueado.");
window.event.returnValue = false;
}
//CTRL+S (select all)
else if (ctrl && code==83) {
alert("CTRL + S bloqueado.");
window.event.returnValue = false;
}
//CTRL+N (New page)
else if (ctrl && code==78) {
alert("CTRL + N bloqueado.");
window.event.returnValue = false;
}
}