Janeiro 13, 2008

Programar em JavaScript

Posted in Programming tagged , , , , , , às 18:37:29 por João Pedro Pereira

Introdução

JavaScript é uma linguagem muito simples e de fácil aprendizagem.
O JavaScript tem uma sintaxe (forma de escrita) semelhante ao Java, C, C++, PHP.
Foi criada para ter uma utilização Web based por Brendan Eich da Netscape em 1995, como uma extensão para o browser Navigator v2.0, com o principal propósito de permitir uma interactividade superior à que se conseguia com o HTML e para atender principalmente às seguintes necessidades:
• Validação de formulários em client side;
• Iteração com a página. Assim, foi feita como uma linguagem de script.

Existem várias implementações de JavaScript, com ligeiras diferenças entre si: o standard definido pela EMCA, a implementação da Netscape e a implementação da Microsoft.

A principal característica do JavaScript é a forma como interage com o browser, podendo aceder a objectos. Assim, para uma boa programação em JavaScript é necessário conhecer o DOM (Document Object Model) de cada browser.
Devido aos browsers terem DOM diferentes é necessário conhecê-los especificamente, daí vem as diversas implementações do JavaScript.

Á sua união com o CSS chama-se de DHTML, assim usando o JavaScript é possível modificar dinamicamente os estilos das páginas.
A linguagem ActionScript da Macromedia baseia-se no standard do JavaScript criado pela ECMA.

Os recursos básicos para quem quer programar em JavaScript são um editor de texto simples para escrever o código e um browser para o testar.

O JavaScript é uma linguagem embebida no seio do HTML, é orientada a objectos e a eventos que acede do DOM do browser. É uma linguagem independente da plataforma onde corre. É uma linguagem que não é compilada e é interpretada pelo browser, baseando-se em objectos.

Potencialidades do JavaScript a ter em conta:
– gerar código HTML;
– reagir conforme as acções do visitante;
– gerar conteúdos dinâmicos;
– validar formulários;
– criar efeitos gráficos.

Vantagens da utilização do JavaScript:
– fácil aprendizagem;
– não exige recursos server side;
– é rápida por ser interpretada no browser;
– existem muitos recursos na Internet.

Desvantagens da utilização do JavaScript:
– o código pode ser facilmente copiado pois fica exposto;
– não é uma boa ferramenta para interagir com base de dados;
– é menos versátil que a sua parente Java.

Estrutura dos programas em JavaScript

O JavaScript é normalmente inserido em ficheiros HTML e é colocado dentro das marcas <script> </script>.
O código tem de estar ou entre as tags <head> </head> ou entre as tags <body> </body>.

Questões de Sintaxe

O JavaScript é sensível a maiúsculas e minúsculas, desta forma escrever ‘Nome’ e ‘nome’ não é a mesma coisa e vai ser lido como independentes uma da outra.
Os espaços não preenchidos são ignorados, por isso deixar espaçamento é apenas uma questão de entendimento pois o JavaScript não vai notar diferenças.
Todas as instruções JavaScript devem terminar com um ponto e vírgula (;).
É aconselhável desde o inicio a colocar comentários no código para o tornar de mais fácil leitura e edição, para inserir comentários pode escrever entre os delimitadores “/*” e “*/” ou então “//” e escrever até ao fim da linha, tenha em atenção que os comentários vão ser ignorados pelo JavaScript, por isso não convém colocar código dentro de um comentário pois este não será lido.
Se pretende que o script que estiver a desenvolver em JavaScript só seja apresentado na página caso o browser em questão esteja bem configurado e suporte JavaScript coloque o seu código dentro de “<!–” e “–>” como mostra o exemplo:

Código 1

GeSHi (javascript):

<html>
<head>
<title>Inserir código seguro</title>
</head>
<body>
<script type=”text/javascript”>
<!–
document.
write(“bla bla bla”) //escreve bla bla bla na página
–>
</script>
</body>
</html>


Ficheiros Externos

Quando é pretendido utilizar um código por várias páginas ou, por uma questão de organização, é possível e conveniente colocá-lo num ficheiro externo que deve seguir as seguintes regras:
1.a extensão do ficheiro tem de ser .js
2.deve ser invocado a partir de um ficheiro HTML com a seguinte forma <script src=”oTalExterno.js”></script>
3.dentro do ficheiro externo não se deve incluir a tag <script> nem a tag </script>
Desta forma um ficheiro externo deve ter esta formatação:

Código 2

GeSHi (javascript):

document.write(“bla bla bla”)

Tipos de dados


Existem várias possibilidades de tipos de dados em JavaScript entre eles destacam-se os numéricos, os lógicos, as strings, os null e os undefined. Os numéricos como o nome indica podem armazenar valores inteiros e com ponto flutuante e podem fazer parte de operações de aritemética como a soma, a subtracção, a multiplicação e a divisão. Os valores lógicos apenas podem armazenar dois valores o true (verdadeiro) e o false (falso). Os valores strings são cadeias de caracteres, o maior número que uma string pode conter depende do browser em questãoe os valores strings são delimitados por apóstrofe(‘) ou por aspas(“). Valores null são valores especiais, representa um objecto nulo, não deve ser confundido com uma variável não inicializada, pois o valor null existe e existe em memória. O valor undefined significa que a variável não foi criada, inicialmente todas as variáveis se encontram neste estado.

Modelo de Objectos do Documento

O DOM (Document Object Model) de uma página é uma representação hierárquica, em formato de árvore. Desta forma, a raíz é a janela do browser, daí ramifica-se em parágrafos, tabelas, formulários, entre outros.
O JavaScript premite aceder de uma forma dinâmica aos vários ramos, lendo-os e, se necessário, alterando os seus valores.
Existem vários standards dos DOM, o da W3C, o da Netscape e o do Internet Explorer. O DOM do Internet Explorer implementa as recomendações do W3C mas é mais vasto que este.

Eventos

O JavaScript é uma linguagem orientada principalmente a eventos e objectos. Os eventos podem ser produzidos de duas formas: pelo sistema ou pelo utilizador. Pelo sistema quando resultam do facto de carregar ou descarregar uma página, pelo utilizador na medida em que pode interagir com as suas acções, através de sobrepor o rato ou carregar num butão, estes são os exemplos mais comuns apesar de existirem muitos mais.

Elementos
HTML

Eventos suportados

Blur

Click

Change

Focus

Load

Mouseover

Select

Submit

Unload

Button

Checkbox

Document

Form

Link

Sim

Radio

Sim

Reset

Sim

Selection

Sim

Submit

Sim

Text

Sim

Sim

Textarea

Sim

Legenda:

asdfghj = objecto reage ap determinado evento

Evento

Manipulador

Blur

onblur

Click

onclick

Change

onchange

Focus

onfocus

Load

onload

Mouseover

onmouseover

Select

onselect

Submit

onsubmit

Unload

onunload

Eventos do Sistema

Um exemplo de resposta a eventos do sistema:

Código 3
GeSHi (javascript):

<html><head>
<script language=
“JavaScript”>
<!–
function entra(){
window.
alert(“Bem vindo, exemplo de uma reaccao a um evento do sistema”);
}
function sai(){
window.
alert(“Volte sempre”);
}
–>
</script></head>
<body
onload=“entra();” onunload=“sai;”>
<p>Texto escrito na página, bla bla bla</p>
</body></head>

No <head> definem-se duas instruções, a “entra()” e a “sai()”. Na priemeira função (function), “entra()”, faz surgir uma janela de aviso no centro do ecrã quando a página é carregada que mostra uma mensagem, “Bem vindo, exemplo de uma reaccao a um evento do sistema”. Na segunda função (function), “sai()”, faz surgir uma janela de aviso quando se sai da página com a mensagem “Volte sempre”.

As funções só são executadas no momento em que estas são invocadas, por isso as funções presentes no exemplo 3 só são executadas no onload do body e no onunload do body respecivamente.

Eventos de utilizador

Os eventos podem ser utilizados para interagir com o utilizador, desta forma só são invocados por acção deste, assim é possível tornar a página mais atractiva e modelada para cada utilizador pois não apresenta tudo mas só o que o utilizador pretende.

Código 4
GeSHi (javascript):

<head>

<script language=“Javascript”>
function skin1()
{
document.
bgColor=‘red’;
}
function skin2()
{
document.
bgColor=‘green’;
}
function skin3()
{
document.
bgColor=‘yellow’;
}
function skin4()
{
document.
bgColor=‘#FFFFCC’;
}

</script>

</head>
<body>

<form name=“cores”>
<input type=
“radio” name=“campo” onclick=“skin1();”>Fundo vermelho<br>
<input type=
“radio” name=“campo” onclick=“skin2();”>Fundo verde<br>
<input type=
“radio” name=“campo” onclick=“skin3();”>Fundo amarelo<br>
<input type=
“radio” name=“campo” onclick=“skin4();”>Fundo amarelo<br>
</form>

</body></html>

Neste exemplo o visitante da página pode escolher que cor quer dar ao background. No entanto se o utilizador sair da página a sua escolha será perdida.
Desta forma é mostrado uma forma de o JavaScript interagir com o visitante.

Variáveis

Variável é uma posição de memória onde é possível armazenar certas informações. As variáveis são representadas por nomes denominados identificadores que têm uma estrutura definida:

  1. Devem iniciar obrigatoriamente por uma letra ou pelo símbolo “$”;

  2. A partir daí além de letras, “$” pode conter dígitos(0 até 9).

De seguida vai ser mostrado um exemplo de manipulação de variáveis:

Código 5
GeSHi (javascript):

<html>
<body>
<script type=
“text/javascript”>
var mensagem=“Aqui escreve uma mensagem que aparecerá na página”; //define a variável mensagem e o seu conteúdo
document.
write(mensagem);
document.
write(“<p>”+mensagem+“</p>”);
<
/script></body></html>

Declaração de Variáveis

É possível declarar uma variável de duas formas mas só iremos abordar uma delas, a mais utilizada, que consiste em utilizar uma palavra reservada “var”.
Uma variável que não tenha sido inicializada, possui o valor de “undefined”, e tenha em atenção que o JavaScript é sensível a maiúsculas e minúsculas, ou seja, letras minúsculas e maiúsculas são diferentes, portanto, undefined e null devem ser escritos sempre em letra minúsculas.
Se uma variável é declarada apenas, com o comando “var”, o seu conteúdo é “undefined” ou NaN(
Not a Number), caso esteja num contexto numérico.

Declarar uma variável é muito simples, como poderá ver no exemplo seguinte (código 6).

Código 6
GeSHi (javascript):

var nome;
var idade;
var pais=“Portugal”;

Como pode observar no exemplo anterior declarar uma variável é bastante simples.

Tipos de Variáveis

Em JavaScript não é necessário indicar o tipo de variável com a qual se vai trabalhar devido às variáveis em JavaScript poderem armazenar diferentes tipos de dados.

Operadores

Os operadores actuam sobre uma ou mais variáveis de forma a produzir os resultados pretendidos. A linguagem de programação JavaScript possui muitos operadores de diversos tipos. Aqui iremos apenas abordar os aspectos mais básicos dos diversos tipos de operadores disponíveis.

Operadores Aritméticos

Os operadores aritméticos são utilizados para realizar operações matemáticas simples como a adição, a subtracção, a multiplicação, a divisão e o resto da divisão inteira existe também o da negação unária que não vai ser abordado. São também usados no incremento e decremento de uma unidade ou em operações relacionais como a igualdade, diferença, maior ou menor que, entre outros.

Operador Nome

+ Adição

– Subtracção

* Multiplicação

/ Divisão

% Resto da divisão

Exemplo de utilização.

Soma em JavaScript:

Código 7

GeSHi (javascript):

<html><head>

<script language=”Javascript”>

var x=1000;

var y=18;

soma=x+y;

</script>

</head><body>

<script language=”Javascript”>

document.write(soma);

</script></body></html>

Como é possível verificar no código é muito simples escrever uma pequena soma. O mesmo se verifica para as outras operações.

O JavaScript disponibiliza também operadores de incremento e decremento.

Operador Nome

++ Incremento

— Decremento

As instruções de incremento como a de a++ são de pós incremento e as instruções de incremento ++a são instruções de pré incremento. Quando são instruções de decremento verifica-se que quando a instrução é a– é de pós decremento e quando é –a é de pré decremento.

Operadores Relacionais

Os operadores relacionais como o próprio nome indicam operações de relações entre valores.

Operador    Nome
==     igual
!= diferente
>       maior
<      menor
>=      maior ou igual
<=       menor ou igual

Exemplo de utilização:

Código 8

GeSHi (javascript):

<html><head><script type=“text/javascript”>

var x = 1;

var y = 2;

var z = y;

function relaccionais(){

document.write (“<br /> Variável x = “ + x);

document.write (“<br /> Variável y = “ + y);

document.write (“<br /> Variável z = “ + z);

document.write (“<br />”);

w = x == y;

document.write (“<br /> y == z -> “ + w);

w = x != y;

document.write (“<br> y != z -> “ + w);

w = x >= y;

document.write (“<br> x >= y -> “ + w);

w = x < y;

document.write (“<br> x < y -> “ + w);}

</script></head><body><script type=“text/javascript”>

relaccionais();</script></body></html>

Com estes operadores é possível fazer operações para determinar se os valores são iguais, diferentes, maiores ou menores, entre outros

Operadores Lógicos

Os operadores lógicos existentes em na linguagem JavaScript são:

Operador    Nome
!   Navegação
&& Conjunção
||       Disjunção

Estes operadores são os operadores que manipulam valores lógicos.
A disjunção inclusiva só resulta num valor false quando os dois operadores são false. Caso contrário devolve true.
A conjunção só pode resultar num valor true quando ambos os valores forem true.
A negação resulta no valor contrário do operador.

Operadores bit a bit

Operadores bit a bit disponíveis em JavaScript.

Operador    Nome
x&y       Conjunção
x|y       Disjunção inclusiva
x^y       Disjunção exclusiva
-x       Negação lógica
x<<y       Deslocamento à esquerda
x>>y       Deslocamento à direita
x<<<y    Deslocamento lógico à direita

Operadores de cadeias

Ao contrário dos outros operadores apenas existe um operador de cadeias que servem para concatenar cadeias (strings).


Operador   Nome
+       Concatenação

O operador + acrescenta uma cadeia no fim da outra.

Funções

Uma função é uma sequência de instruções que constitui uma entidade coerente e que pode ser invocada a partir de qualquer ponto do programa escrito em JavaScript. O programador pode criar as suas próprias funções que são na maioria das vezes são escritas no cabeçalho do ficheiro e são invocadas posteriormente quando necessário.
Portanto, podemos ver uma função como uma série de instruções que englobamos dentro do mesmo processo. As funções utilizam-se constantemente, não só as que escreve como também as que já estão definidas no sistema, como as parseInt (que é uma string), parseFloat (string) ou NaN (que é um valor), pois todas as linguagens de programação têm funções para realizar processos habituais. As funções servem para quando existe uma acção que seja necessária em diversos locais da página/site/programa usar assim apenas é necessário enunciá-la uma vez.

Para definir uma função é obrigatório utilizar certos padrões:

function nomedafuncao (){
instruções da função
…}

depois é apenas necessário dar as instruções certas à função de forma a actuar da forma pretendida. Depois para invocar a função é apenas necessário colocar o nome da função seguido de ().

Instruções condicionais

Instrução if e else

If como o próprio termo em Inglês indica significa se assim sendo esta instrução serve para realizar scripts que dependam de uma condição. Desta forma apenas se se verificar uma certa condição. Esta instrução pode ter uma pequena variante/consequência que é o else, o else se estiver no código é utilizado de forma a que se a condição if for falsa, o código contido dentro da instrução else é executado, caso a condição if for verdadeira o código dentro do else não tem qualquer efeito. Á que reparar que a instrução if tem de vir sempre primeiramente e só depois a instrução else, a instrução if não necessita de ter uma else e a instrução else necessita que exista uma instrução if previamente.

Instrução switch

No JavaScript existe uma outra instrução de condição a instrução switch.

Formato switch:

Switch (expressão){

case valorx:

instruçãox;

break;

case valory:

instruçãoy;

break;}

Passando a explicar o comportamento do controlo switch: Se o valor da expressão coincidir com o valorx executa-se a instruçãox, no entanto se o valor da expressão for igual ao valory, executa-se a instruçãoy.

Instruções Iterativas

Na linguagem de programação JavaScript apenas existem três instruções iterativas, o ciclo while, o do-while, e o ciclo for.

O ciclo while

Este ciclo utiliza-se quando é necessário repetir um número indefinido de vezes a execução de umas sentenças, sempre que se cumpra uma condição. É mais fácil de se entender que o ciclo for porque somente se indica a condição que tem que se cumprir para que se realize uma repetição.

while (condição){
sentenças do ciclo;
}

O ciclo do-while

Utiliza-se geralmente quando não sabemos quantas vezes haverá de se executar o ciclo, assim como acontece com ciclo while, com a diferença de que sabemos ao certo que o ciclo pelo menos executar-se-á pelo menos uma vez.

do {
sentenças do ciclo;
} while (condição)

O ciclo for

O ciclo for utiliza-se para repetir mais instruções num determinado número de vezes. Entre todos os ciclos o for costuma ser utilizado quando sabemos ao certo o número de vezes que queremos que seja executada a sentença.

for (iniciação;condição;actualização) {
sentenças a executar;
}

O funcionamento do ciclo for é o seguinte: a expressão de inicialização é executada uma vez antes da primeira iteração; a condição é testada antes de cada iteração do ciclo e se for verdadeira executa a instrução do ciclo, se for falsa termina o ciclo.

A instrução executada no ciclo for pode ser substituída por diversas instruções.

Instrução break e continue

A instrução break interrompe um ciclo. Interromper um ciclo significa sair dele e deixá-lo todo como está de forma a continuar com o fluxo do programa imediatamente.

A instrução continue interrompe o ciclo passando assim para a iteração seguinte.

Programação orientada a objectos

O JavaScript dispõe de um conjunto de objectos predefinidos. Os objectos têm atributos (variáveis) e métodos (funções). A sintaxe para a utilização de objectos, métodos e atributos em JavaScript é muito simples:

objecto.atributo

objecto.metodo()

Alguns objectos são criados automaticamente pelo browser, outros têm de ser criados obrigatoriamente pelo programador.

obj = new Object();

Vectores

Um vector é uma estrutura de dados com diversos elementos do mesmo tipo, em relação à qual, através de um índice, se pode designar cada um dos seus elementos.

Os elementos de um vector podem também ser vectores, dando origem a uma estrutura muito complexa.

Anúncios

6 comentários »

  1. Mendes said,

    Apesar de esta nao ser a minha linguagem preferida, pa qem a qer aprender esta aqui um optimo resumo-base. Aproveitem, este autor e de confiança 😛

  2. Ezequiel said,

    Bom achei bom, mas ainda não achei um bom texto em javascript que explica, as dificuldade dos leitores, falando mas de variáveis e suas dificuldades.

  3. André said,

    Este tutorial está óptimo para quem se quer iniciar na linguagem JavaScript!
    Finalmente um bom texto em que está tudo explícito para iniciantes.
    Obrigado! ☺

  4. Vitinho said,

    Gostei 😀

    é um bom blog para quem quer aprender de java script , parabéns (;

  5. Tavares said,

    eu não percebo muito disto :s

    mas visto os comentarios de cima parece tar fixe (y)

    😛

  6. Daniel said,

    Vou iniciar o meu estudo com javascript e vou inicia-lo com este resumo, parece ser o que eu estava a a precisar. Bom trabalho!


Deixe uma Resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

Google+ photo

Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

Connecting to %s

%d bloggers like this: