DESENVOLVIMENTO DE APLICAES COMPUTACIONAIS

Guio n 6: Introduo programao em PHP e Javascript

Edio 2012/13, verso 1.2 10 de Maio

Objectivos

Compreender a interactividade nas pginas HTML;

Distinguir os mtodos GET e POST de um FORM;

Introduo programao PHP;

Introduo programao Javascript;

Desenvolvimentos de pginas Web interactivas com PHP e/ou Javascript.

Pginas Web interactivas

As pginas Web so documentos de texto contendo etiquetas (tags ou elementos) HTML, sendo o
respectivo nome delimitado pelo caracteres < e >. Estes elementos indicam a apresentao
desejada

aos contedos (texto, imagens, sons,

etc.) dos documentos. Essas pginas so

posteriormente alojadas em servidores Web e fornecidas como resposta a pedidos HTTP provenientes
dos clientes WWW, isto dos Web browsers.
As pginas permitem a insero de dados por parte do utilizador atravs de seces delimitadas pelas
tags <FORM> e </FORM>. Uma seco FORM contm a identificao dos programas do servidor que
sero responsveis por processar a informao inserida pelo utilizador no formulrio, o mtodo de
transferncia da informao para o servidor, bem como um conjunto de comandos que definem o
formato da interface de interaco com o utilizador. A ttulo de exemplo, ilustra-se a seco Form de
uma pgina html:
<FORM action="http://programa.que.vai/processar/dados/prog" method="post">
<P>
First name:
<INPUT type="text" id="firstname"> <BR>
Last name:
<INPUT type="text" id="lastname"> <BR> </P>
<P>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR> </P>
<P>
I have a bike:
<INPUT type="checkbox" name="vehicle" value="Bike"> <br>
I have a car:
<INPUT type="checkbox" name="vehicle" value="Car"> <br> </p>
<p>
What files are you sending?
<INPUT type="file" name="name_of_files"> <br> </p>
<p>
Select your OS distribution:
<SELECT name="OperSist">
<OPTION selected label="none" value="none">None</OPTION>
<OPTGROUP label="Fedora">
<OPTION label="core6" value="fc6"> Core 6</OPTION>
<OPTION label="core7" value="fc7"> Core 7</OPTION>
</OPTGROUP>

<OPTGROUP label="Suse">
<OPTION label="opsus1" value="osuse10.1">OpenSuse 10.1</OPTION>
<OPTION label="opsus3" value="osuse10.3">OpenSuse 10.3</OPTION>
</OPTGROUP>
</SELECT> </p>
<INPUT type="submit" value="Enviar">
<INPUT type="reset" value="Cancelar">
</FORM>

a) Construa uma pgina Web e acrescente-lhe a seco Form da pgina anterior;

b) Visualize a pgina no seu Web browser;
c)

Identifique nessa pgina cada um dos campos de entrada;

Em qualquer formulrio existe um campo do tipo Submit (graficamente representado por um boto).
Quando o utilizador selecciona ou prime esse boto o contedo do formulrio enviado para o
programa ou script identificada no atributo action do formulrio.
a) Onde se encontra o programa que ir processar os valores inseridos no form anterior?
b) Qual o nome desse programa?

Adicionalmente os forms incluem o atributo method que identifica o mtodo usado para transferir a
informao inserida nos formulrios para o servidor onde ser processada. Este atributo pode assumir
apenas dois valores: GET e POST.
Usando o mtodo GET, a informao do formulrio acrescentada informao do atributo action
(o URI), dando origem a um novo URL que ento enviado para o servidor. As variveis associadas a
cada um dos campos do formulrio, bem como os seus valores, so separados do URI inicial por um
ponto de interrogao ?. Quando o formulrio composto por diversos campos, esses so separados
entre si pelo carcter &.
a) No Form da sua pgina altere o mtodo para GET;
b) Invoque a pgina com o novo mtodo;
c)

Preencha cada um dos campos do Form e envie-os para o servidor;

d) No URL da pgina de resposta, identifique as diversas variveis do Form bem como os valores
que lhes atribuiu.

Usando o mtodo POST, a informao do formulrio usada para construir o corpo de uma
mensagem que codificada e enviada para o URI definido no atributo action.
a) Reponha o mtodo POST no Form;
b) Invoque a pgina com o mtodo POST;

c)

Compare o URL enviado neste caso com o enviado usando o mtodo GET.

Que mtodo escolher?

GET
o

Se a interaco segura, no havendo qualquer consequncia com a exposio dos

dados transferidos;

Para efectuar pedidos de dados ou de informao;

Se a informao no altera o estado do servidor (por exemplo dados ou informao)

POST
o

Se a informao a transferir no pode ser exposta;

Se a interaco mais do que um pedido de informao requerendo, por exemplo a

autenticao do utilizador;

Se a informao enviados poder alterar o estado do servidor, por exemplo na

subscrio de servios ou na compra de produtos.

Pginas HTML dinmicas

As pginas Web podem ser classificadas em estticas ou dinmicas. As primeiras tm contedo
fixo, tipicamente introduzido de forma manual pelo seu criador, enquanto as ltimas no. A
necessidade de utilizao de pginas dinmicas decorre do facto de em mltiplas situaes no ser
possvel determinar previamente o seu contedo. Este ir depender de diversas variveis, tais como:
provenincia do pedido, utilizador em causa, data, hora, estado do tempo, etc., bem como de dados
que possam ser enviados pelo utilizador. Nestas situaes a informao enviada que determina o
resultado a ser apresentado na pgina pedida, como por exemplo numa pesquisa que se pretenda
efectuar. Nestes casos as pginas Web so ditas dinmicas.
Existe um conjunto de ferramentas e linguagens de programao (scripting) que permitem a criao
de pginas dinmicas. Exemplos que podem ser referidos incluem a linguagem php, as applets java,
e a linguagem javascript. Cada uma destas solues tem as suas vantagens e desvantagens, e
baseiam-se em arquitecturas e modelos distintos que implicam a execuo de um programa no
servidor Web (Apache, IIS, etc) ou no cliente (browser Web IE, Firefox, etc).
Nas primeiras (server-side), como por exemplo PHP, o contedo de uma pgina dinmica o
resultado da execuo de um determinado procedimento (script) no servidor, como consequncia do
pedido efectuado. De uma forma geral, partes desta pgina encontram-se previamente construdas,
semelhana de um template de texto. Quando efectuado o pedido, este contm determinada
informao utilizada na pgina que posteriormente gerada. Alm desta, tambm podem ser
utilizadas outras fontes de informao, como por exemplo provenientes de Bases de Dados.
Nas segundas (client-side), como por exemplo o Javascript, no necessria a interaco com o
servidor para conseguir pginas que reagem de forma dinmica de acordo com um conjunto de
interaces ou situaes.

PARTE I
PHP - Hypertext Preprocessor
PHP1 is a powerful server-side scripting language for creating dynamic and interactive websites.
PHP is the widely-used, free, and efficient alternative to competitors such as Microsoft's ASP. PHP is
perfectly suited for Web development and can be embedded directly into the HTML code.
The PHP syntax is very similar to Perl and C. PHP is often used together with Apache (web server) on
various operating systems. ()
PHP uma linguagem de programao interpretada2 que permite criar pginas e stios Web
dinmicos. A programao em PHP faz-se embebendo directamente o seu cdigo no cdigo da pgina
HTML. O interpretador PHP executado no servidor, o que significa que ao ser pedida uma pgina
contendo um script PHP, este vai ser interpretado, produzindo-se dinamicamente uma pgina (HTML)
que posteriormente enviada para o cliente atravs do protocolo HTTP.
PHP uma linguagem com licena Open Source, de fcil aprendizagem e que suporta
funcionalidades de programao avanadas, cujas principais so:

Nvel bsico
possvel definir variveis ($var), vectores e matrizes de variveis, manipular essas variveis atravs
de operadores (aritmticos, atribuio, comparao e lgicos). possvel definir strings, concaten-las
e manipul-las (strlen, strpos, etc). possvel definir instrues condicionais (if else, switch), definir
loops (while, do while, for, foreach), criar funes (function), utilizar funes previamente elaboradas
(PHP contm uma vasta coleco de funes de grande utilidade e simplicidade disposio do
programador) e processar dados de formulrios atravs dos mtodos HTTP GET e POST.

Nvel avanado
Entre outras funcionalidades, destaca-se a possibilidade de introduzir a data e hora na pgina Web
(date), incluir texto automtico na pgina (include), manipulao de ficheiros (fopen), fazer upload de
ficheiros para o servidor (Upload-File Form), criar e gerir cookies (setcookie, $_COOKIE),
estabelecimento e gesto de sesses (PHP session variable), enviar emails directamente do script
(mail), existem tambm ferramentas para filtrar e validar dados oriundos de fontes inseguras (funes
filter_***). Existem ainda funes de manipulao de bases de dados (funes mysql_***) e para
processamento de documentos XML (Extensible Markup Language).

PHP - Hypertext Preprocessor.

2
Scripting compilao em tempo de execuo, ou seja cada vez que o script PHP executado este previamente
compilado. Por oposio s linguagens compiladas (ex. C) nas quais gerado um ficheiro executvel.

Programao em PHP
Os scripts PHP so delimitados por tags especficas. Esses scripts PHP sero embebidos numa pgina
HTML que, ao ser pedida por um cliente (browser), vai ser interpretado pelo servidor, produzindo uma
pgina dinmica (HTML) que enviada para o cliente atravs do protocolo HTTP.

Tags PHP
<?php

?>;

Comentrios em PHP
Para inserir uma linha de comentrio:
// Linha de comentrio

Mltiplas linhas de comentrio:

/*
Comentrio Linha 1

Linha N
*/

Variveis
As variveis guardam valores (nmeros, caracteres ou sequncias de nmeros arrays ou caracteres
strings).
EM PHP os nomes das variveis comeam com o smbolo $.
Declarao e inicializao de uma varivel:
$var1 = 10;

Em PHP no necessrio declarar o tipo da varivel, pois o interpretador converte a varivel

automaticamente para o tipo que est a ser inicializado na varivel.
Em PHP as variveis podem suportar os seguintes tipos:

Booleanos

Inteiros

Vrgula flutuante

Carcter

Operadores
Aritmticos

Adio +
Subtraco -
Multiplicao *
Diviso /
Mdulo (resto da diviso) %
Incremento ++
Decremento --

Atribuio
=
+= (x+=y
-= (x-=y
*= (x*=y
/= (x/=y
.= (x.=y
%= (x%=y

x=x+y)
x=x-y)
x=x*y)
x=x/y)
x=x.y)
x=x%y)

Comparao

Igual ==
Diferente !=
Maior >
Menor <
Maior ou igual >=

Menor ou igual <=

Lgicos

E &&

OU ||

Negao !

Strings
Estas variveis contm sequncias de caracteres.
Criar uma string ( criar uma varivel genrica):
$string1;

Inicializar uma string (ao inicializar uma varivel genrica com uma sequencia de caracteres)
$string1 = A minha primeira string;

Imprimir uma string no ecr:

echo $string1;

Operador concatenao
Concatenao consiste em anexar o contedo de uma string a outra (colar no final). Em PHP esta
operao tem um operador prprio . .
$string1 = A minha primeira string;
$string2 = PHP foi escrita em DEAPC;

Concatenao da string guardada na varivel $string2 com a da $string1, guardando a string

resultante na varivel $string1.
$string1 = $string1 . $string2;

Concatenao colocando uma palavra no meio:

$string1 = $string1 . em . $string2;

Exemplos de funes para operar com strings

strlen - Determinar o tamanho de uma string
strlen (A minha primeira string);
cujo resultado ser 23.
Imprimindo no ecr:
echo strlen (A minha primeira string);

strpos Procurar um carcter ou string dentro de uma string

Quando encontra o carcter ou a string retorna a posio em que a expresso de procura se encontra.
Caso no encontre retorna FALSE.
Exemplo de uso:
strpos (A minha primeira string,pri);

cujo resultado ser 8 (1 posio de string 0).

If else
Para execuo condicional de cdigo testando condies, temos tal como noutras linguagens
de programao o ciclo if else.
Sintaxe:
if (condio) {
Cdigo a ser executado caso a condio seja verdadeira }
else {
Cdigo a ser executado caso a condio seja falsa }

Exemplo de uso:
<html>
<body>
<?php
$d=date("D");
if ($d=="Fri")
//3
echo "Bom Fim de semana!";
else
echo "Bom estudo!";
?>
</body>
</html>

Ciclo While
Este ciclo permite executar uma instruo enquanto a condio for verdadeira.

Funo Date permite extrair a data/tempo apresentando-os num formato escolha do programador.

Sintaxe:
while (condio) {
Cdigo a ser executado }

Exemplo de uso:
<html>
<body>
<?php
$i=1;
while($i<=5)
{
echo "Numero: " . $i . "<br />";
$i++;
}
?>
</body>
</html>

Ciclo For
Este ciclo permite executar determinado cdigo n vezes.
Sintaxe:
for (inicializao; condio; incremento)
{
Cdigo a ser executado;
}

Exemplo de uso:
<html>
<body>
<?php
for ($i=1; $i<=5; $i++)
{
echo "teste do FOR<br />";
}
?>
</body>
</html>

Funes
As funes so suportadas pelo PHP. O programador pode criar funes ou utilizar funes
implementadas por outros. A biblioteca de funes do PHP extensa, um dos seus pontos mais
fortes, disponibilizando ao programador funes prontas a utilizar nas diferentes tarefas.

Criar uma nova funo em PHP

Implementao e chamada de uma nova funo:
<html>
<body>
//Declarao
<?php
function funcao_1()
{
echo "Minha 1 funcao";
}
?>
//Chamada da funo
<?php
funcao_1();
?>

</body>
</html>

Funo com parmetros

A declarao e chamada de uma funo com parmetros:
<html>
<body>
//Declarao
<?php
function funcao_1($nome)
{
echo $nome.<br />";
}
?>
//Chamada da funo
<?php
$nome = Marta;
funcao_1($nome);
?>
</body>
</html>

Valor de retorno de uma funo

A declarao de uma funo com um valor de retorno:
<html>
<body>
<?php
function adicao($x,$y)
{
$soma = $x + $y;
return $soma;
}
echo "2 + 11 = " . adicao(2,11);
?>
</body>
</html>

Processamento de formulrios HTML em PHP

A utilizao de scripts PHP facilita e simplifica a utilizao de formulrios de insero de dados em
pginas HTML.

Consideremos o seguinte formulrio:

<form>
Name: <input type="text" name="NomeInserido" />
</form>

Mtodo GET
O cdigo do formulrio para que os dados sejam processados pelo mtodo http GET o seguinte:
<form action="welcome.php" method="get">
Name: <input type="text" name=" NomeInseridoA" />
<input type="submit" />
</form>

E o contedo do ficheiro que processa o formulrio welcome.php ser:

<html><body>
Welcome <?php echo $_GET["NomeInseridoA"]; ?>.<br />
</body></html>

Mtodo POST
O cdigo do formulrio para que os dados sejam processados pelo mtodo http POST o seguinte:
<form action="welcome.php" method="post">
Name: <input type="text" name="NomeInseridoB" />
<input type="submit" />
</form>

E o contedo do ficheiro que processa o formulrio welcome.php ser neste caso:

<html>
<body>
Welcome <?php echo $_POST["NomeInseridoB"]; ?>.<br />
</body>
</html>

Exerccios
1) Crie um ficheiro de texto com a designao index.php, e insira o seguinte cdigo HTML:

<html >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"/>
<title>Ttulo da pgina</title>
</head>
<body>
<p/>
O meu primeiro script em php.
<p/>
</body>
</html>

Considere a seguinte declarao de variveis:

<?php
$res;
$var0 = "DEAPC ";
$var1 = 2009;
$var2 = "/";
$var3 = 2010;
?>
a) No documento anterior insira cdigo PHP que concatene na varivel $res as variveis $var0 a
$var3. Imprima na pgina Web o contedo da varivel $res.

10

2) Crie uma pgina HTML que invoque um script PHP que processe o seguinte formulrio utilizando o
mtodo http GET.

A aplicao deve retornar a seguinte saudao (nome de campo a referir o seu contedo):

Viva

Titulo profissional

Primeiro Nome

Ultimo Nome

parabns pelos

Idade

anos.

3) Altere o script anterior de forma a utilizar o mtodo http POST para processar os dados do
formulrio.
Compare os URL aps a submisso do pedido neste caso e no problema anterior.
4) Desenvolva um site Web que permita calcular o volume (v=1/3*r2*h*3.141592) de um cone,
cujas altura (h) e raio (r) sejam inseridos numa pgina formulrio. Construa o html da pgina
formulrio e o programa php necessrios para apresentar os resultados esperados.

Exerccios Propostos
1) Crie uma pgina HTML contendo um script PHP que implemente uma calculadora (suportando as
operaes +, - , * , / ). Para isso a pgina deve apresentar ao utilizador dois campos de texto que
recebem os operandos e quatro radio buttons para seleccionar a operao. Processado o script,
imprime operandos, operao e resultado.
2) Crie uma funo em PHP, chamada factorial, que receba como parmetro um nmero inteiro e
calcule o factorial do nmero introduzido. A funo dever escrever no ecr o nmero recebido e o
valor do factorial calculado, ex: 4! = 24.
3) Desenvolva uma script php que determine o troco a devolver a um utilizador que lhe passa atravs
de um formulrio o montante que pretende pagar (Custo) e a quantidade por ele apresentada
para efectuar o pagamento (Pagamento). Como resultado a script deve imprimir o nmero de
notas (notas: 5, 10, 20, 50, 100, 200, 500) de cada montante a devolver como troco e o
valor a devolver em moedas. Ex.:
Custo: 356,7 euros
Pagamento: 500 euros
Troco Total: 143,3 euros
notas:
1 x 100 euros
2 x 20 euros
moedas: 3,3 euros
4) Crie uma pgina HTML contendo um script PHP que apresente um formulrio com um campo de
texto pedindo ao utilizador para inserir nomes prprios de pessoas. A cada submisso de um
nome o script deve guard-lo num ficheiro de texto a criar. Caso o utilizador insira imprimir o
script imprime o contedo do ficheiro de texto.

11

Adicione pgina HTML criada um script PHP que permita fazer upload de um ficheiro de texto
para substituir o anteriormente criado.

Referncias
[1] PHP Tutorial, http://www.w3schools.com/PHP/ .
[2] PHP: A simple tutorial - Manual, http://us.php.net/tut.php.
[3] ScriptTester by vanKonGa, http://forumferney.free.fr/stester.html.
[4] WampServer : Install PHP 5 Apache MySQL on Windows
http://www.wampserver.com/en/index.php.
[5] :: PHP Magazine ::, http://www.phpmagazine.com.br/portal/?modulo=secao&id=1.
[6] W3Schools Online Web Tutorials, http://www.w3schools.com/default.asp.
[7] PHP :: Hot Scripts, http://www.hotscripts.com/PHP/index.html.
[8] PHP Date(), http://www.w3schools.com/php/php_date.asp.
[9] PHP 5 in Practice: Elliott White, Jonathan D. Eisenhamer: Books, http://www.amazon.com/PHP5-Practice-Developers-Library/dp/0672328887?tag=particculturf-20.
[10]

PHP: PHP Manual - Manual, http://www.php.net/manual/en/.

[11]

PHP Operators, http://www.w3schools.com/php/php_operators.asp.

Histrico
1) 5 de Junho de 2008, Verso 1.0, mailto: vms@isep.ipp.pt
2) 13 de Junho de 2008, Verso 2.3, vms@isep.ipp.pt; jbm@isep.ipp.pt
3) 11 de Junho de 2010, Verso 2.4, crc@isep.ipp.pt
4) 11 de Maio de 2011, Verso 2.5, jbm@isep.ipp.pt

12

PARTE II
Javascript
A linguagem Javascript permite incluir em pginas Web funcionalidades to variadas como a validao
dos dados introduzidos por um utilizador num formulrio ou incluir mapas da Google em pginas
HTML4 utilizando a sua API Javascript.
O problema principal que se pode apontar o de poder haver diferenas na forma como navegadores
distintos reagem ao mesmo programa (script) Javascript.
O cdigo Javascript pode ser executado no momento em que a pgina HTML carregada ou quando
se verifica uma determinada condio ou evento (por exemplo, quando o rato passa em cima de uma
zona da pgina, o utilizador introduz dados num formulrio, etc). No primeiro caso, o cdigo deve ser
colocado no corpo principal da pgina (<body>), enquanto que no segundo caso, ser invocada uma
funo definida, normalmente, no cabealho da pgina (<head>).
index1.html
<html>
<head>
<script type="text/javascript">
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>Funo JavaScript definida no HEAD da pgina/h1>
<p id="demo"></p>
<button type="button" onclick="displayDate()">Display Date</button>
</body>
</html>
index2.html
index3.html
<html>
<html>
<head>
<head>
<script src="myscript.js">
</head>
</script>
<body>
</head>
<body>
<p id=demo>Texto HTML:</p>
<input type="button" onclick="popup()"
value="Click Me!">
</body>
<script type=text/javascript>
</html>
document.write(Hello World!);
</script>
myscript.js
</body>
function popup() {
</html>
alert("Hello World")
}

De forma a simplificar as pginas HTML, o cdigo javascript pode ser alternativamente guardado
externamente num ficheiro com a extenso .js.

http://code.google.com/intl/pt-PT/apis/maps/documentation/javascript/tutorial.html

13

Dentro de uma pgina HTML, o cdigo Javascript encontra-se entre as etiquetas <script> e </script>
que permite definir o tipo de linguagem de extenso. As linhas entre estas etiquetas so executadas
pelo navegador. Por exemplo, a linha Javascript document.write(Hello World!); indica ao
navegador para escrever uma mensagem (dentro de aspas) na pgina HTML.

A linguagem Javascript uma linguagem de extenso (scripting) e interpretada, onde o cdigo

executado por um interpretador sem envolver compilao prvia. A sintaxe desta linguagem
bastante semelhante da linguagem C. Dever ter em ateno que, ao contrrio de HTML, esta
linguagem distingue entre maisculas e minsculas (case-sensitive). De seguida apresentada uma
listagem da sintaxe bsica da linguagem Javascript.

Sintaxe Javascript
Variveis
Como em qualquer linguagem de programao, as variveis em Javascript podem conter diferentes
tipos de dados (ex. numrico, booleano, string). A diferena fundamental para a maior parte das
outras linguagens que o tipo de uma varivel automaticamente definido com a atribuio do valor
no sendo definido de forma explicita com base numa palavra chave. Isto significa tambm que ao
longo de um programa a mesma varivel pode ser utilizada para guardar diferentes tipos de dados.
As variveis podem ser declaradas explicitamente utilizando a palavra chave var (ex. var i=12;) ou
implicitamente (i=12;). Contudo o mbito da varivel ser diferente nos dois casos. Uma varivel tem
mbito global se for declarada fora de uma funo ou se for definida implicitamente, mesmo que
dentro de uma funo; uma varivel local se declarada explicitamente dentro de funes e apenas
pode ser acedida dentro desta.
var inteiro = 7;
var booleano = true;
var str1 = DEAPC;
str2 = 2010;
var ano=parseInt(str2);
Diversas operaes aritmticas e lgicas podem ser executadas com as variveis. A tabela seguinte
apresenta os principais operadores. A sintaxe destes operadores semelhante utilizada na
linguagem de programao C.
Tipo

Operadores

Exemplo

Aritmtica

++

Atribuio

+=

-=

*=

/=

%=

Comparao

<

>

<=

>=

==

!=

--

Nota

X=y+2
x+=y
=== (os operandos so

===

x===5

exactamente iguais em
valor e tipo)

Lgicos

&&

||

x< 10 && y>5

14

Em Javascript o operador + tambm se aplica ao contexto das variveis do tipo string permitindo
fazer a concatenao de strings. O contexto em que este operador utilizado vai determinar o
resultado, ou seja, se utilizado com operandos numricos vai resultar tambm num valor numrico
enquanto que se for utilizado com strings resultar numa nova string.
A utilizao do operador + entre uma string e uma varivel do tipo numrico ir resultar numa nova
string.
<html>
<body>
<script type=text/javascript>
var str1 = DEAPC;
var str2 = 2010/;
var str3 = str1 + + str2 + 2011;
document.write(str3);
document.write(<br />);
</script>
</body>
</html>

Controlo de execuo
O controlo do fluxo de execuo determina quais e como as instrues de um programa so
executadas. Este controlo efectuado atravs da utilizao de construes condicionais e de ciclos
iterativos. A sintaxe das duas principais expresses condicionais (if..else if.. else / switch)

apresentada na seguinte tabela.

Nome

Modo de funcionamento

Sintaxe
if (condio 1) {
// cdigo 1}

if..else if..

O cdigo de um bloco apenas

executado se a condio for
verdadeira

else if (condio 2){

// cdigo 2 }
else {
// cdigo
}
swicth (n) {

switch

O cdigo de um dos blocos de

cdigo executado se se verifica
a condio. Para evitar que o
cdigo referente condio
seguinte seja executado, utilizase, tal como na Linguagem C, a
primitiva break)

case 1: // cdigo 1
break;
case 2: // cdigo 2
break;
default:

// cdigo

Os ciclos permitem que um bloco de cdigo seja executado um determinado nmero de vezes ou
enquanto uma condio se verificar. A sintaxe dos trs principais ciclos (for / while / do while)
apresentada na seguinte tabela

15

Modo de funcionamento

Nome

for

Sintaxe

Um bloco de cdigo
executado
um
nmero
especfico de vezes

for(var=valor_inicial; var<valor_final; modificao de var)

{
// cdigo
}
while (condio) {

while

Um

bloco

executado
dowhile

de

cdigo

enquanto

// cdigo

condio for verdadeira

}
do{
// cdigo
} while (condio);

As primitivas break e continue permitem interromper a normal execuo de um ciclo ou expresso

condicional. O primeiro termina a execuo do bloco de cdigo e continua a execuo aps este. Por
outro lado, a primitiva continue termina a execuo da execuo da iterao actual e continua no
prximo valor.

Funes
As funes so blocos de cdigo que executam uma tarefa especfica. Em Javascript estas so
invocadas por um evento ou por uma chamada funo. As funes podem ser definidas
internamente em qualquer parte do documento (usualmente so agregadas na seco HTML <head>)
ou externamente num ficheiro com extenso .js.
A sintaxe de uma funo compreende a utilizao da palavra chave function, a definio de um
nome, parmetros de entrada e valor de retorno como se mostra de seguida:
function nome (argumento_1, argumento_2, )
{
// cdigo;
return var;
}
Em Javascript os parmetros so passados com um vector. Cada funo tem duas propriedades que
podem ser utilizadas para determinar informaes sobre os parmetros:

nome.arguments vector contendo os parmetros que foram passados

nome.arguments.length devolve o nmero de parmetros

De seguida dado um exemplo da utilizao de funes e ciclos nesta linguagem tendo como
objectivo fazer a soma de dois nmeros:
<html>
<head>
<script type=text/javascript>
function soma(a,b)
{
var args = soma.arguments;
var comp = args.length;
document.write(<p> Comprimento dos argumentos = + comp + </p>);
for(i=0;i<comp;i++){

16

document.write(<p> argumento[ + i +]= + args[i] + </p>);

}
return a+b;
}
</script>
</head>
<body>
<h1>Programa que efectua a soma de dois nmeros</h1>
<script type=text/javascript>
document.write(Resultado = + soma(4,3));
</script>
</body>
</html>

Eventos
O Javacript permite detectar determinados eventos resultantes de aces realizadas pelo utilizador de
uma dada pgina Web, e utiliz-los para despoletar uma determinada funo javascript. Alguns dos
eventos definidos no javascript so os seguintes:
onClick

A funo ser iniciada quando o utilizador carregar num boto do rato.

onMouseOver

A funo ser iniciada quando o rato se encontrar sobre um determinado

objecto (texto, imagem, )

onChange

A funo ser iniciada aps deteco de alterao do valor predefinido de

um campo.

onSubmit

A funo ser iniciada quando os dados de um FORM forem submetidos.

Pode ser usada para activar a funo de validao dos valores submetidos

Experimente alguns destes eventos com a seguinte pgina

index.html

myjs.js

<html>

function popup() {

<head>

alert("Hello World")

<script src="myjs.js">

</script>

function onMoOv() {

</head>

alert("O rato est l ...")

<body>
<input

}
type="button"

onclick="popup()"

value="Click

function valida() {

Me!">

alert("A alterar o valor?")

<a href="http://www.isep.ipp.pt" onmouseover="onMoOv()">

ISEP website </a>

<input type="text" value="chave" onchange="valida()">
</body>
</html>

17

Exerccios
1.) Considere o seguinte cdigo Javascript:
x=8+13;
document.write(x);
x=8+13;
document.write(x);
x=8+13;
document.write(x);
x=13+8;
document.write(x);
Qual dever ser o resultado da execuo deste script? Embeba o cdigo numa pgina HTML e valide
as suas concluses.
2.) Faa agora a anlise do resultado das seguintes operaes.
x = 5 + 5 + 5;
document.write(x);
x=5 + 5 + 5;
document.write(x);
O que conclui quando ordem de execuo das diversas operaes de soma?
3.) Qual o resultado da seguinte operao?
x = 5;
y = x + 3;
x = 5;
y += x;
document.write(y);

4.) Pretende-se criar uma pgina HTML que verifica a hora actual e imprima uma saudao diferente
dependendo do valor obtido. A saudao dever ser Bom dia no caso de ainda no serem 12h,
Boa Tarde para o perodo da tarde entre as 12h01 e 19h, Boa Noite entre as 19h01 e as 23h
e Durma bem a partir das 23h. Nota: Utilize a funo Date() do Javascript.
5.) Desenvolva uma mquina de calcular em Javascript que possibilite a utilizao de dois operandos.
Os operandos e operao a efectuar devero ser introduzidos atravs de um formulrio em HTML
e devero ser consideradas situaes invlidas, e.g.: operador invlido, diviso por 0, etc.

18

Exerccios propostos
1) Desenvolva uma aplicao que permita inserir num formulrio dados de pessoas (nome, data de
nascimento), e os apresente por ordem alfabtica ou por ordem cronolgica de idade (de acordo
com uma opo tambm efectuada no formulrio). Valide os dados inseridos no formulrio,
assegurando que os nomes contm apenas caracteres do alfabeto, a data inserida na forma
AAAA-MM-DD.
a.

Desenvolva a pagina inicial socios.html com um formulrio de insero de 10 nomes

e datas no mximo.

b.

Desenvolva a script novosocio.php que receba os dados enviados (via mtodo

POST), os grave no ficheiro socios.dat no formato seguinte, e os devolva nesse
formato numa pgina html com fundo amarelo.
1:nomeA:aaaA-mA-dA
2:nomeB:aaaB-mB-dB

c.

Acrescente o cdigo javascript necessrio pgina socios.html para validar os nomes

inseridos no formulrio, aquando da submisso.

d.

Acrescente o cdigo javascript necessrio pgina socios.html para validar as data

inseridas no formulrio, aquando da submisso.

e.

Na pgina socio.html acrescente campos de seleco do tipo de ordenao

pretendida (por nome ou por data).

f.

Altere o ficheiro novosocio.php para que receba o valor do tipo de ordenao

escolhido, e acrescente pagina html com fundo amarelo um dos textos seguintes
consoante a seleco do utilizador Ordenar por NOME! ou Ordenar por DATA !.
Teste a sua aplicao.

g.

Altere o ficheiro novosocio.php para que efectue a ordenao de dados solicitada e

gere uma pgina html final com os valores ordenados que tenha fundo azul. Teste a
sua aplicao.

2) Pretende desenvolver-se uma aplicao Web que converta graus Fahrenheit para graus Clsius.
a) Construa o ficheiro far2cel.html da pgina web ao lado para que esta invoque um programa
convertF2C.cgi que gere uma pgina que apresente o resultado dessa converso.
Nota: o programa convertF2C.cgi encontra-se no directrio cgi-bin/ de um servidor local
(localhost).

19

b) Como implementao alternativa, considere que uma outra pgina far2cel_A.html usa um
formulrio de aspecto igual ao da alnea a), mas utiliza a script php do ficheiro
convertF2C.php para gerar a pgina com o resultado da converso. Construa o script php
desse ficheiro de modo a que funcione com qualquer um dos mtodos (GET ou POST).
Nota: considere que
c)

1Celcius = 5/9 x (1Fahrenheit -32)

Construa a pgina far2cel_A.html referida na questo anterior, que inclua o cdigo javascript necessrio
para garantir que apenas valores numricos sero inseridos no campo do formulrio. Sempre que sejam
inseridos caracteres no numricos, isto , dgitos
diferentes de 0-9, dever ser mostrada a mensagem
seguinte.

Referncias
[12]

JavaScript Tutorial, http://www.w3schools.com/js/default.asp

[13]

JavaScript Bible, D. Goodman, M. Morrison, P. Novitski and T. G. Rayl.

[14]

Beginning HTML, XHTML, CSS, and JavaScript, Jon Duckett

Histrico
1) 27 de Abril de 2011, Verso 0.1, pmd@isep.ipp.pt
2) 4 de Maio de 2011, Verso 0.3, pmv@isep.ipp.pt, rjc@isep.ipp.pt
3) 11 de Maio de 2011, Verso 1.1, jbm@isep.ipp.pt
4) 14 de Maio de 2012, Verso 1.2, jbm@isep.ipp.pt

20