← Tutoriais

[JAVASCRIPT] Introdução básica

Lida 12718 vezes

Offline

icaro 
Membro
Mensagens 128 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

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
Código: [Seleccione]

<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
Código: [Seleccione]

...<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.

Código: [Seleccione]

...
<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:
Código: [Seleccione]

<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:

Código: [Seleccione]

...
<body>
<b>
<script language ="javascript" ...>
blá blá blá
</script>
</b>
...

ou então inserir html dentro do script:

Código: [Seleccione]

...
<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:
Código: [Seleccione]

<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
Código: [Seleccione]

...
<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:


Código: [Seleccione]

...
<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:

Código: [Seleccione]

<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

Código: [Seleccione]
...
<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:


Código: [Seleccione]


<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)

Código: [Seleccione]


<!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:


Código: [Seleccione]
<!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
Offline

fpware 
Fundador
Mensagens 15318 Gostos 6
Troféus totais: 38
Trófeus: (Ver todos)
Linux User Mobile User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5

muito bom icaro! :D

Muito obrigado pela contribuição!
Offline

morpheus 
Membro
Mensagens 1199 Gostos 0
Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

Grande icaro! Tu tás lá! :D
Offline

icaro 
Membro
Mensagens 128 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

obrigado

sempre é mais fácil que php :wink:
Offline

icaro 
Membro
Mensagens 128 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

parte 7 if else e operadores

como em todas as linguagens também aqui contamos com estas ferramentas poderosas que já vimos na construção do relógio.

if e else são condições que se dão para executar detrminado evento.

Para se entender melhor vamos a uma coisa mais fácil saudar o nosso visitante consoante a hora que ele entre no site

Queremos que se ele entre de manhã a saudação seja bom dia, de tarde , boa tarde e de noite boa noite.

Como ele não sabe o que é manhã temos de recorrer às horas.

dizemos então

se o visitante entrar entre as 6 e as 12 tu dizes bom dia
se o visitante entrar entre 13 e as 19 tu dizes boa tarde
todas as outras horas tu dizes boa noite

Já sabemos o que queremos mas faltam-nos as regras do javascript que são:

if (condição)
{evento}
else é igual
existe ainda o else if que quer diizer basicamente o mesmo que if.
As condições não precisam obrigatoriamente do else

ora vejamos como isto se processa (compliquei um pouco as condições para usar mais operadores)

Código: [Seleccione]

   <script language="javascript" type="text/javascript">

<!--

var d = new Date()//vai buscar o objecto date
var h= d.getHours()//vai buscar a hora da máquina

if (h <= 12 && h >= 6) //<= menor ou igual &&  e >= maior ou igual
document.write(" Bom dia ! ");
else if (h <= 19 && h >= 13)
document.write("Boa tarde !");
else
document.write( "Boa noite !");
document.write(" Bem-vindo! a este maravilhoso site");

-->
   
      </script>


então traduzindo as condições para português será: se a hora do computador for menor ou igual a 12 e maior ou igual a 6 - bom-dia

else quer dizer que se não encontrar uma condição verdadeira - fazes assado.

Atenção que o browser vai de condição em condição a ver se há alguma verdadeira e executa a primeira que encontrar.
Facilmente poderemos colocar mais do que uma condição verdadeira por exemplo:

Código: [Seleccione]
<script language="javascript" type="text/javascript">

<!--

var d = new Date()//vai buscar o objecto date
var h= d.getHours()//vai buscar a hora da máquina

if (h <= 12)
document.write(" Bom dia ! ");
else if (h >=12)
document.write("Boa tarde !");
else if (h =0);
document.write( "Hora do Lobo !");
document.write(" Bem-vindo! a este maravilhoso site");

-->
   
      </script>

este código não fará muito sentido mas é só para exemplificar. Se forem 0 horas a terceira condição está satisfeita no entanto ele não dirá hora do lobo porque 0 é menor que 12, portanto sai o bom dia e já não executa o resto. Se quiséssemos por a hora do lobo com este código, teria de ser a primeira condicional

Código: [Seleccione]


]<script language="javascript" type="text/javascript">

<!--

var d = new Date()
var h= d.getHours()
if (h =0);
document.write( "Hora do Lobo !");
else if (h <= 12)
document.write(" Bom dia ! ");
else if (h >=12)
document.write("Boa tarde !");
document.write(" Bem-vindo! a este maravilhoso site");

-->
   
      </script>

Offline

fpware 
Fundador
Mensagens 15318 Gostos 6
Troféus totais: 38
Trófeus: (Ver todos)
Linux User Mobile User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5

Está excelente icaro! Mais uma vez muito obrigado! :D
Offline

fpware 
Fundador
Mensagens 15318 Gostos 6
Troféus totais: 38
Trófeus: (Ver todos)
Linux User Mobile User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5

então icaro? isto contínua?  :D
Offline

asturmas 
Administrador
Mensagens 19734 Gostos 48
Feedback +2

Troféus totais: 39
Trófeus: (Ver todos)
Mobile User Windows User Super Combination Combination Topic Starter 100 Poll Votes 50 Poll Votes 10 Poll Votes Poll Voter Poll Starter

Parabens icaro =D&gt; ta mmuito bom!
Offline

anjo2 
Membro
Mensagens 3020 Gostos 0
Troféus totais: 31
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3 Level 2

Caso desenterro, mas como é sticky não se vai ser :)

Há para aí muitos erros com os ";", alguém devia os corrigir.