Parte 1
embora exitam mais formas de correr javascript aqui para já só interessam duas
1 inseri-lo directamente num documento html
2. anexe-lo ao documernto
exemplos:
no primeiro caso
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
código aqui
-->
</script>
</head>
<body> etc
no segundo:
cria-se o script num ficheiro com extensão .js e liga-se à página (aqui tem de ser no cabeçalho
...<head>
<script language="javascript" src="rel.js"></script>
</head>
trabalhemos com o primeiro modelo criando um script só para exemplificar como imprimir no ecrã texto por exemplo.
...
<body>
<script language="javascript" type="text/javascript">
<!--
document.write("olá ppl do mais tráfego");
-->
<script>
aqui teve de se colocar o script no corpo da página porque caso contrário nada apareceria já uqe o conteúdo do cabeçalho não é visivel.
Imaginemos agora que eu queria não só saudar o pessoal que tem um browser que corre javascript, mas também os que não o têm ou que desactivam o javascript por opção.
Existe uma tag muito útil em HTML que é <noscript></noscript>. Assim acrescentaria ao meu código:
<script language="javascript" ...>
blá blá blá
</script>
<noscript>
activa lá o javascript ou actualiza o teu browser
</noscript>
os browseres que suportam javascript não apresentarão este texto
aproveitando o exemplo criado acima, agora queremos enfatizar a nossa saudação, podemos fale-lo de duas maneiras:
...
<body>
<b>
<script language ="javascript" ...>
blá blá blá
</script>
</b>
...
ou então inserir html dentro do script:
...
<body>
<script language="javascript"...>
<!--
document.write("<b> olá ppl do mais tráfego </b>");
-->
</script>
<!-- --> usa-se para esconder o script de navegadores que não suportam javascript e que apresentariam o código no ecrã.
Parte 2
Vejamos outras utilidades do javascript:
<script language="javascript" type="text/javascript">
<!--
prompt("introduza o seu nome","" );
confirm("confirma o nome introduzido");
alert("obrigado por introduzir o nome");
-->
</script>
...
É óbvio que estes comandos por si só não são grande ajuda mas veremos mais tarde como as peças se encaixam
Saltando à frente. Até agora já vimos duas maneiras de colocar javascript no nosso documento, seguidamente vamos abordar uma terceira bastante popular- inserir javascript dentro de tags HTML - os chamados manejadores de eventos.
para isso não é necessário colocar as tags <script></script> nas sim introduzir o código dentro de html, um exemplo:
para dar alguma utilidade a isto vejamos como mudar uma imagem quando o rato lhe passa por cima
...
<body>
<img src="A.gif" border="0" name="imagem1" onMouseOver="document.imagem1.src='B.gif'"onMouseOut="document.imagem1.src='A.gif'">
....
para alem destes eventos poderão experimentar- onBlur, onClick, onFocus, onKeyDown, onKeyPress, onKeyUp, onLoad, onMouseMove, onMouseDown, onMouseUp onUnload (atenção às maiúsculas e minúsculas e ao facto de nem todos os navegadores suportarem todos estes eventos)
relativamente a document.imagem1.src="" veremos mais tarde, para já interessa que o javascript identifica os objectos pelo nome, neste caso imagem1.
Nota: reparem bem na colocação de "" e '' já que isto "bla bla"bla"bla" não é correcto, já assim "bla bla'bla' bla" é a forma correcta.
Parte 3
vamos então um pouco mais ao fundo no javascript:
Até agora vimos como introduzir javascript na nossa página e como imprimir texto, caixas de diálogo, prompts e caixas de confirmação, vejamos agora a estrutra da linguagem
objectos métodos e propriedades.
Sem entrar em grandes eoplicações imaginemos a janela do browser como o objecto (window) que como qualquer objecto, tem propriedades que o definem (uma delas document). Os métodos são funções que actuam sobre os objectos fazendo-o alterar (escolhendo um método para o nosso objecto - write)
portanto objecto.propriedade.método = window.document.write
No entant,o já vimos que document.write chega para imprimir o texto, isto porque o objecto window está subentendido.
vejamos mais dois exemplos:
...
<script languge...
window.status="mensagem que aparecerá na barra de status";
document.bgColor="pink";
...
</script>
...
o primeiro alera a propriedade barra de status do objecto window
o segundo define a cor para rosa da propriedade cor de fundo do objecto window
Isto é só para dar uma ideia de como se estrutura da linguagem a prática depois encarregar-se-á do resto.
variáveis
São de extrema utilidade dado que permitem guardar informação que poderá ser acedida mais tarde
vejamos um exemplo prático utilizando o que já aprendemos até agora:
<script language="javascript" type="text/javascript">
var nomec = prompt("introduza o seu nome completo", "aqui");
document.write("olá " +nomec+ "bem-vindo!")
</script>
portanto a variável é definida por var nome da variável = blá blá
outra novidade que podemos ver é que o texto ou tags html para serem impressos no ecrã têm de estar dentro de aspas "" mas para os elementos da linguagem em si já não é necessário. Para juntar as duas recorre-se ao sinal de mais +
Parte 4
Arrays e o objecto date
Um dos objectos mais usados em javascript é o objecto date que como já vimos terá as suas propriedades e métodos, vejamos então algumas delas
...
<script language blá blá>
var data = new Date(); // cria-se uma variável que contenha o objecto date
var ano = data.getFullYear(); /*através do método getFullyear vai-se buscar o ano do objecto date que agora se chama data */
var mes = data.getMonth() + 1; //o mesmo para o mês (já vamos ao +1)
var dia = data.getDate(); //o mesmo para o dia
document.write("hojé é dia " dia + "de" + mes + "de" + ano); /*aqui imprime-se as 3 variáves dia, mes e ano */
</script>
...
O primeiro a considerar é que o javascript conta tudo em algarismos e portanto não aparcerá dia vinte e cinco mas sim dia 25.
O javascript conta tudo apartir do 0, portanto para se não colocássemos mês + 1 ele ira dar um número errado para nós mas certo para ele, nos casos ano e dia não é necessário como podemos constatar.
Chama-se a atenção para a colocação das aspas e dos sinais de mais no código para imprimir "texto"+ variável + "texto" + variável...
Imaginemos agora que queriamos que o nosso script informasse o dia da semana (para aqueles mais dispistados).
Embora exista um método incorporado em javascript que faz isso getDay ele tem de ser trabalhado, já que o javascript conta tudo vai nos dar números e não o nome da semana.
Existem mais métodos dentro do objecto date mas veremos isso mais tarde na construção de um relógio.
Utilizaremos então arrays, que podemos considerar para já como variáveis de múltiplos valores, vejamos:
<script language blá blá>
<!--
var dsemana = new Array ("Domingo", "Segunda-Feira", "Terça-Feira", "Quarta-Feira", "Quinta-Feira", "Sexta-Feira", "Sábado")
/* até agora o que criámos foi uma variável que contém uma array em que domingo equivale a zero, segunda a 1, terça a 2 etc...*/
var data = new Date();
document.write("hoje é " +dsemana[data.getDay()])
/* traduzindo isto para português quer dizer- hoje é vai ao objecto date ver o número que corresponde ao dia de hoje e associa-o a array que eu criei se o valor retornado for 0 ele associa-o ao valor zero da array,ou seja domingo. */
-->
</script>
Repararam que os comentários se forem só de uma linha começam com // e se form com várias linhas começam com /* e terminam com */. É bastante aconselhável colocar comentários nos scripts por forma a ser mais fácil de os ler mais tarde.
Só mais uma nota que já deveria ter sido apontada antes mas que me esqueci: se houver um erro no script o navegador apontará o tipo de erro e alinha onde foi encontrado o que facilita a depuração. Grosso modo existem dois tipos de erro de sintaxe (sintax error) em que foi escrito algo mal e erro de execução (runtime error) que indica que algum comando foi utilizado de forma incorrecta
Eu não testei os scripts mas deverão funcionar caso não é um bom teste para avaliar os conhecimentos adquiridos.
Parte 5
funções - construção de um Relógio
Quando queremos falar de alguém não dizemos o senhor de cabelo castanho, de olhos azuis, de 1,90m, primo da fulana de tal...
é mais fácil: o Zé Manel
Zé Manel subentenderá tantas noções consoante o grau de conhecimento que temos dessa pessoa.
Ora bem as funções subentendem noções para o navegador e são invocadas pelo nome. Por outras palavras as funções contém as linhas de código que introzudimos e ao invocar o nome da função está a dizer ao navegador para executar todo esse código.
em javascript as funções começam assim:
function nome()
{
o conteúdo
}
e são invocadas pelo nome
vejemos um exemplo prático (hoje com a papinha toda feita é só copiar e colar)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Relógio em Javascript</title>
<script language="javascript" type="text/javascript">
function Relogio() {
data = new Date()
var minutos= data.getMinutes()
var segundos= data.getSeconds()
var hora=data.getHours()
/*estabelecer a condição em que aparecem zeros à esquerda dos números i.e, em vez de 9 teremos 09 */
if (hora < 10) //se a variável hora for menor que 10
{
hora = "0" + hora // a variável hora é alterada para 0+hora
}
if (minutos < 10)
{
minutos = "0" + minutos
}
if (segundos < 10)
{
segundos = "0" + segundos
}
var rel= document.formulario.caixatexto.value = ""
+ hora + ":"
+ minutos + ":"
+ segundos;
var Actualizar =setTimeout("Relogio()", "1000"); //permite uma actualização ao segundo do nosso relógio
}
</script>
</head>
<body onLoad="Relogio()">
<!chama o nosso zé manel para o barulho-->
<form name="formulario">
<input name="caixatexto" type="text">
</form>
</body>
</html>
Se quisermos colocar o nosso relógio em todas as páginas gravamos a função num ficheiro com extensão js , ligamos o ficjheiro às nossas páginas <script LANGUAGE="JavaScript" src="Relogio.js"> </script> e invocamos o nome da função <body onLoad="Relogio()"> .
o método getHours(), retornará a hora do computador ou seja do cliente.
Imaginemos que queriamos dar uma hora de um país diferente. Teriamos de utilizar outro método: por exemplo getUTCHours() que retornará a hora do Merediano de Grenwich.
Se quisermos apresentar as horas na India (se na india forem mais 5 horas)
var horaindia =
data.getUTCHours() + 5;
p.s. fpware será que daria para juntar todas estas iintroduções ao javascript numa mensagem só?
Parte 6
Hoje veremos uma coisa muito simples mas que dá muito jeitinho a quem não tenha uma base de dados disponível.
Um dos sites que fiz em tempos precisava de retornar informação dos utilizadores mas teria de um fazer respondendo às perguntas que nós queríamos, como um guestbook mas para razões diferentes.
Ora base de dados era mentira, ainda que suportasse extensões do frontpage teriamos de lá ir todos os dias para ver se havia resposta. Já para não falar no CGI e Pearl que são de fugir.
vejamos:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
</head>
<body>
<form method="post" action="mailto:icaro@rebeubeu.net?Subject=nome + '' + telefone" name="myform" enctype="text/plain">
Qual é o seu nome? <input type="text" name="nome"> <p>
Quais são os seus apelidos? <input type="text" name="telefone"> <p>
<input type="submit" value="enviar"> <p>
</form>
</body>
</html>
fácil não é?
acho que nem precisa de explicações atenção só os nomes do formulário e das caixas de texto e ao ?Subject
mais tarde veremos como velidar o conteúdo dos formulários
