• Tweet
• Email

• Tweet
• Email

Depois de uma abordagem básica, iremos dar início a uma abordagem avançada, entrando mais a fundo no Javascript, conhecendo métodos, funções e técnicas que requerem um pouco mais de trabalho, concentração e atenção à sintaxe. Se não tem experiência em Javascript, é aconselhável ler a abordagem básica primeiro, para fazer uma leve introdução e inteirar-se mais um pouco sobre a linguagem, para que possa de alguma forma seguir a abordagem avançada.

Antes de iniciar, é bom relembrar que Javascript faz diferenciação de maiúsculas e minúsculas. Escrever “a” é diferente de escrever “A”. É preciso ter atenção a este tipo de detalhes, para que quando estiver a seguir o tutorial e a fazer as suas experiências, não desista rapidamente porque a sua programação não está a resultar. Se não resulta, algo está errado e poderá ser solucionado.

Iremos abordar 5 campos diferentes: Dicas de Boas Práticas, Objectos, Uso de Objectos , Matrizes (Arrays) e Alguns Trechos de Código de Objectos.

1 – ANTES DE COMEÇAR

Antes de dar inicio, vou deixar 2 conselhos de boas práticas em Javascript.

1.1 – EVITAR USAR PALAVRAS-CHAVE QUE ESTÃO RESERVADAS AO JAVASCRIPT

break
case
catch
continue
default
delete
do
else
finally
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
void
while
with

1.2 – EVITAR USAR PALAVRAS RESERVADAS AO JAVASCRIPT

abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

2 – OBJECTOS

O tema “Objecto” é fulcral em Javascript, pois a maioria das operações que são realizadas, inclusive as mais simples, são feitas através do uso de objectos. Javascript não é uma linguagem de programação orientada a objectos, embora faça um extenso uso deles. Ao entrar no campo dos objectos, vai-se deparar com uma estrutura ligeiramente diferente do que já viu anteriormente na abordagem básica. No entanto não há razão para alarme, irá ser tudo explicado com o máximo detalhe, para facilitar a compreensão.

Fazendo uma brevíssima introdução a como se processa a programação orientada a objectos, vamos imaginar um carro. Um carro (objecto) tem características (propriedades do objecto) como a cor, cilindrada do motor, largura e diâmetro dos pneus, entre outros. Além disso, tem funções (métodos do objecto) como, acelerar ou travar. É assim que o programador terá de pensar ao idealizar um objecto.

2.1 – CLASSES

As classes são as declarações dos objectos, que é o mesmo que dizer que as características e funções que atribuímos a um objecto, são a sua classe.

2.2 – PROPRIEDADES

As propriedades são as características dos objectos, no nosso caso, a cor ou cilindrada.

2.3 – MÉTODOS

Os métodos são as funções associadas aos objectos, no nosso caso, as funções de travar ou acelerar.

3 – EXEMPLO PRÁTICO DE USO DE OBJECTO

3.1 – COMEÇAMOS POR DEFINIR UMA CLASSE VAZIA

function aMinhaClasse() {}

3.2 – USANDO O OPERADOR “NEW”, DEFINIMOS “ObjectodaClasse” COMO O OBJECTO DA CLASSE “aMinhaClasse”

var ObjectodaClasse = new aMinhaClasse() ;

3.3 – USAMOS “aMinhaClasse” COMO UMA FUNÇÃO DE PROCEDIMENTO

var result = aMinhaClasse() ;

Nota: A diferença entre “aMinhaClasse” ser interpretada como um procedimento ou um construtor está no operador new. Este operador associa um objecto da classe “aMinhaClasse” chamando a função de construtor (3.2) enquanto que na segunda chamada (3.3) é feita uma chamada de procedimento para a função “aMinhaClasse” esperando um retorno de um resultado.

3.4 – ADICIONAR PROPRIEDADES AO OBJECTO

var ObjectodaClasse = new aMinhaClasse();
ObjectodaClasse.km = 50000;
ObjectodaClasse.modelo = "Ferrari F50";
alert( ObjectodaClasse.modelo );   // retorna: "Ferrari F50"

alert( ObjectodaClasse.km+"km" );     // retorna: "50000"

Aqui adicionámos as propriedades “km” (kilómetros) e “modelo” (Modelo do carro), e atribuímos-lhes valores (50000 km, Modelo Ferrari F50). Depois criámos janelas de alerta usando o alert() para mostrar o conteúdo daquelas propriedades do objecto.

Também pode ser feito usando o document.write() que irá escrever na tela os valores do “modelo” e “km”.

var ObjectodaClasse = new aMinhaClasse();
ObjectodaClasse.km = 50000;
ObjectodaClasse.modelo = "Ferrari F50";
document.write( ObjectodaClasse.modelo );   // retorna: "Ferrari F50"

document.write( ObjectodaClasse.km+"km" );     // retorna: "50000km"

3.5 – COMO USAR ESSE SCRIPT?

Até agora, é assim que deve estar o seu código, de forma a que o script funcione.

<html>
<body>

<script>
function aMinhaClasse() {}
var ObjectodaClasse = new aMinhaClasse() ;
var result = aMinhaClasse() ;

var ObjectodaClasse = new aMinhaClasse();
ObjectodaClasse.km = 50000;
ObjectodaClasse.modelo = "Ferrari F50";
alert( ObjectodaClasse.modelo );   // retorna: "Ferrari F50"

alert( ObjectodaClasse.km+"km" );     // retorna: "50000km"

// Também pode ser feito com o document.write()

var ObjectodaClasse = new aMinhaClasse();
ObjectodaClasse.km = 50000;
ObjectodaClasse.modelo = "Ferrari F50";
document.write( ObjectodaClasse.modelo+"<br>" );   // retorna: "Ferrari F50"

document.write( ObjectodaClasse.km+"km <br>" );     // retorna: "50000km"

</script>

</body>
</html>

Como pode ver, usando // pode inserir comentários ao longo do seu código, quer seja para se guiar a si próprio, ou deixar notas a quem venha mais tarde ler o código, facilitando o entendimento do mesmo.

Além disso, também pode introduzir código HTML onde escreve texto dentro das funções, como por exemplo “document.write( ObjectodaClasse.km+”km <br>” )”. Note que para o fazer, coloque um “+” para juntar texto, e o texto e/ou código HTML tem de estar entre aspas “”,  senão o Javascript irá interpretar como uma propriedade e vai tentar retornar o valor dela, e como não há, não vai resultar e você vai ficar desapontado, é necessária muita atenção nestes detalhes!

Realce também para o facto de que o código é executado pela ordem com que está escrito, não que isso seja uma novidade, até porque tem a sua lógica, mas é sempre bom relembrar.

3.6 – DEFINIR PROPRIEDADES A TODAS AS PROPRIEDADES DA CLASSE

No exemplo anterior, apenas “aMinhaClasse” referenciada por “ObjectodaClasse”  tinha propriedades atribuídas. As instâncias seguintes não teriam propriedades. Assim, necessitamos de um meio de atribuir propriedades a todas as instâncias de “aMinhaClasse”. Usando “this” na função de construtor, as propriedades irão ser definidas em todas as instâncias de “aMinhaClasse”

<html>
<body>

<script>

function aMinhaClasse()
{
    this.km = 50000;
    this.modelo = "Ferrari Testarrossa";
}

var aMinhaClasseObj1 = new aMinhaClasse();
var aMinhaClasseObj2 = new aMinhaClasse();
aMinhaClasseObj1.km= 45000;
aMinhaClasseObj1.modelo = "Obj1:  Ferrari Enzo";
aMinhaClasseObj2.km = 33000;
aMinhaClasseObj2.modelo = "Obj2:  Ferrari F40";
alert( aMinhaClasseObj1.km );    // mostra: 45000

alert( aMinhaClasseObj1.modelo );  // mostra: "Obj1:  Ferrari Enzo"

alert( aMinhaClasseObj2.km );    // mostra: 33000

alert( aMinhaClasseObj2.modelo );  // mostra: "Obj2:  Ferrari F40"

</script>

</body>
</html>

3.7 – ADICIONANDO MÉTODOS ÀS PROPRIEDADES QUE REFERENCIAM FUNÇÕES

“aMinhaClasse” ainda está incompleta, pois não há comportamentos associados a ela. Para adicionar métodos, adicionamos propriedades que referenciam funções a “aMinhaClasse”

<html>
<body>

<script>

function aMinhaClasse()
{
    this.Km = 3452;
    this.Modelo = "Ferrari F1";
    this.ShowKm = DisplayKm;
    this.ShowModelo = DisplayModelo;
}

function DisplayKm()
{
    alert( this.Km );
}

function DisplayModelo()
{
    alert( this.Modelo );
}

var aMinhaClasseObj1 = new aMinhaClasse();
var aMinhaClasseObj2 = new aMinhaClasse();
aMinhaClasseObj1.Km = 220000;
aMinhaClasseObj1.Modelo = "Obj1:  Fiat 127";
aMinhaClasseObj2.Km = 440000;
aMinhaClasseObj2.Modelo = "Obj2:  Opel Corsa Van";
aMinhaClasseObj1.ShowKm();     // mostra: 220000

aMinhaClasseObj1.ShowModelo();   // mostra: "Obj1:  Fiat 127"

aMinhaClasseObj2.ShowKm();     // mostra: 440000

aMinhaClasseObj2.ShowModelo();   // mostra: "Obj2:  Opel Corsa Van"

</script>

</body>
</html>

4 – MATRIZ (ARRAY)

Uma Matriz  (Array) é uma variável com uma propriedade especial, que lhe permite guardar mais do que um valor ao mesmo tempo. Em termos figurativos, uma variável normal é uma gaveta, uma Matriz (Array) é um armário com várias gavetas. Nada melhor do que ver um exemplo!

Suponhamos que pretendemos guardar cinco anos diferentes: 1876, 1987, 2010, 1975 e 1994. Para o fazer com uma variável normal seria assim:

data1="1876";
data2="1987";
data3="2010";
data4="1975";
data5="1994";

Iriam ser criadas 3 variáveis. E se um dia tiver 100 datas e quiser correr um loop pelas datas para encontrar uma específica? Seria óptimo se estivessem todas na mesma variável, não?

É aqui que surge a Matriz (Array), que lhe permite guardar vários valores dentro do mesmo nome, tendo apenas uma diferença: existe ligação para cada valor dentro da variável.

Imaginemos a Matriz “Data”. Essa Matriz irá ser usada da seguinte forma: Data[X], em que X é o numero da posição de cada valor, ou por outros termos, é o numero da gaveta do armário onde está o nosso valor.

Então:

var Data=new Array();
Data[0]="1876";
Data[1]="1987";
Data[2]="2010";
Data[3]="1975";
Data[4]="1994";

Sempre que quiser aceder a uma gaveta desse armário, basta chamar por Data[X]

<html>
<body>

<script>

var Data=new Array();
Data[0]="1876";
Data[1]="1987";
Data[2]="2010";
Data[3]="1975";
Data[4]="1994";

document.write("Diogo Espinha nasceu em "+Data[0])
// Irá retornar "Diogo Espinha nasceu em 1876"

</script>

</body>
</html>

Se pretender alterar o conteúdo de uma das gavetas dessa Matriz, basta adicionar o novo valor , com o devido número de índice.

Data[3]="1999";

Fácil, certo?

5 – TRECHOS DE CÓDIGO DE OBJECTOS

5.1 – RETORNAR O COMPRIMENTO DE UMA STRING

<html>
<body>

<script type="text/javascript">

var txt = "Escola de Criatividade Está ao Rubro!";
document.write(txt.length);
// Irá retornar "38"
</script>

</body>
</html>

Alguma vez deu por si a contar o número de caracteres de uma palavra ou frase? Aí está uma ferramenta muito útil!

5.2 – RELÓGIO DIGITAL

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout('startTime()',500);
}

function checkTime(i)
{
if (i<10)
  {
  i="0" + i;
  }
return i;
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

Esse código cria um relógio digital muito simples e que pode ser colocado facilmente numa página web.

5.3 – JUNTAR DUAS MATRIZES (ARRAYS)

<html>
<body>

<script type="text/javascript">

var pais = ["João", "Maria"];
var filhos = ["Celine", "Tomi"];
var familia = pais.concat(filhos);
document.write(familia);
// Irá retornar "João, Maria, Celine, Tomi"
</script>

</body>
</html>

Esse código junta duas matrizes “pais” e “filhos” numa matriz “família”. Bastante simples e quem sabe útil numa situação particular.

5.4 – JUNTAR TRÊS MATRIZES (ARRAYS)

<html>
<body>

<script type="text/javascript">

var pais = ["João", "Maria"];
var filhos = ["Celine", "Tomi"];
var netos = ["Celine Jr.". "Tomi Jr."];
var familia = pais.concat(filhos, netos);
document.write(familia);
// Irá retornar "João, Maria, Celine, Tomi, Celine Jr., Tomi Jr."
</script>

</body>
</html>

Igual à anterior, mas com mais uma matriz.

5.5 – ARREDONDAR NÚMEROS

<html>
<body>

<script type="text/javascript">
// Se o decimal for inferior a 0.5, arredonda para
// baixo, se for superior ou igual arredonda para cima
document.write(Math.round(0.60) + "<br />");
// irá retornar "1"
document.write(Math.round(0.50) + "<br />");
// irá retornar "1"
document.write(Math.round(0.49) + "<br />");
// irá retornar "0"
document.write(Math.round(-4.40) + "<br />");
// irá retornar "-4"
document.write(Math.round(-4.60));
// irá retornar "-5"

</script>

</body>
</html>

5.6 – CONVERTER GRAUS CELSIUS EM FARENHEIT E VICE-VERSA

<html>
<head>
<script type="text/javascript">
function convert(degree)
{
if (degree=="C")
 {
 F=document.getElementById("c").value * 9 / 5 + 32;
 document.getElementById("f").value=Math.round(F);
 }
else
 {
 C=(document.getElementById("f").value -32) * 5 / 9;
 document.getElementById("c").value=Math.round(C);
 }
}
</script>
</head>

<body>
<p></p><b>Insira um número nos campos abaixo:</b></p>
<form>
<input id="c" name="c" onkeyup="convert('C')"> Graus Celsius<br />
é igual a<br />
<input id="f" name="f" onkeyup="convert('F')"> Graus Fahrenheit
</form>
<p>Nota: O método <b>Math.round()</b> é utilizado, então o resultado irá ser retornado como integer.</p>
</body>

</html>

Gostou do nossos tutoriais sobre Javascript? Considere ajudar-nos a divulgá-los enviando-os para o seu Twitter ou partilhando-os com os seus amigos no Facebook. Ah, e não deixe de comentar com as suas opiniões! participe!

Até já!