Engº Pedro CostaAcessibilidade e Programação Web 1 Workshop Comunicação Inclusiva Acessibilidade e Programação Web Javascript

Engº Pedro Costa Acessibilidade e Programação Web 1

Workshop

Comunicação Inclusiva

Acessibilidade e Programação Web

Javascript


Javascript

• É uma linguagem de programação em que o código é executado no computador do utilizador.

• Assim evita-se tráfego entre o computador do utilizador e o servidor.

• A linguagem é muito parecida com o php

• A principal utilização do javascript é na interacção com os utilizadores. Desde de informação do teclado, passando pelo rato, informação do browser, etc.


Javascript• Tal como o php pode ser inserido em qualquer parte de uma página de html

ou de php

<html>

<body>

<script>

// Isto é uma linha de comentário

document.write(“Bom dia");

alert("Minha primeira mensagem!"); </script>

</body>

</html>

Para fazer comentários no código usa-se o mesmo que no php:

// para comentar uma linha

/*

Para comentar várias linhas

*/

Começa com <script Language=“javascript”> e acaba em </script>

Todas as instruções acabam com ;

A instrução document.write escreve no ecrã uma ou mais cadeias de caracteres (string);


Janelas

Existem 3 tipos de janelas (popup) que podemos controlar no javascript

alert(“algumtexto”) - Janela de alerta

confirm(“algumtexto”) - Janela de confirmação

prompt(“algumtexto”,”valorpordefeito”) - Janela para escrever

<html> <body> <script> var num=prompt(“Escreva um numero”);Alert(“Escreveu o número”+num); Confirm(“Está certo”);</script> </body> </html>


Variáveis

A diferença que existe entre o php e o Javascript nas variáveis é que no javascript temos de declarar as variáveis antes de usa-las e não têm o $ antes do nome.

Para declarar usamos a palavra var antes do nome da variável

<html> <body> <script LANGUAGUE=“Javascript”> // Isto é uma linha de comentáriovar x;Var nome;Var y=5;X=2;alert(x+y); </script> </body> </html>


Matrizes ou Vectores ( Array )

• Tem de ser declarado da seguinte forma

Var lis = new array();

Var nome = new array(“Rita”;”Ana”;”Joana”);

Var carros= new array(5);

Array multidimensionais

Var lis = new array();

List[0] = new array();

List[0][0] = “João”

List[0][1] = “32”

List[1] = new array();

List[1][0] = “Bruno”

List[1][1] = “3”


Operadores

Operador Descrição

Operador Atribuição

= Atribui o valor da direita à variável da esquerda

Operadores Aritméticos

+ adição

- subtracção

* multiplicação

/ divisão

% Resto da divisão de dois inteiros

Operadores Lógicos

&& Disjunção e

|| Conjunção ou

! negação


Operadores

Operador Descrição

Operador Relacional

== igualdade

< menor que

=< Menor e igual que

> Maior que

=> Maior e igual que

<> desigualdade

Operador de Texto

+ Concatenação (junta dois textos)

Única diferença em relação ao php


if …else (=php)

if (condição) { código a ser executado se a condição for verdadeira; }

else { código a ser executado se a condição for verdadeira; }

<html> <body> <script LANGUAGUE=“Javascript”> var d=5; if (d==5) document.write( “É o número cinco“); else document.write(“Não é o numero cinco“); </script ></body> </html>


While (=php)

<html> <body> <script LANGUAGUE=“Javascript”> Var i=1; While (i<=5) { document.write(“O numero é " +i+ "<br />"; i++; } </script> </body> </html>

while (condição) { código a ser executado enquanto a condição for verdadeira; }


For (php)

For (inicialização; condição; incremento)

{

código

}

A inicialização é executada no inicio do ciclo.

No fim de cada ciclo é executado o incremento e é avaliado a condição.

<html> <body> <script LANGUAGUE=“Javascript”> var i=1;for (i=1; i<=5; i++) { document.write(“Olá<br />“); } </script></body> </html>


Switch (= php)

switch (expressão) { case label1: código a ser executado se a expressão = label1; break; case label2: código a ser executado se a expressão = label2; break; default: código a ser executado se a expressão for diferente de label1 e label2;}

Não é obrigatório usa o break em cada case, mas ao usar evita que o computador vá testar todos a outros hipóteses.


Funções

<html> <head> <script text="text/javascript"> function mensagem() { alert(“Olá” );} </script> </head> <body> <form> <input type="button" value="Click me!" onclick=“mensagem()" > </form> </body> </html>

Os procedimentos e funções têm a mesma sintaxe que o php. A diferença é que devem de se escritas dentro da tag Head do html.


Linguagem por objectos

O javascript é uma linguagem orientada por objectos. Esses objectos são dados desde do mais simples: números , carácteres, uma cadeia de caracteres até dados mais elaborados que podem ser um conjunto de vários dados.

Os objectos têm propriedades e métodos.

As propriedades são valores associados ao objecto.

<script type="text/javascript"> var txt=“Olá”; document.write(txt.length); </script>

Neste exemplo temos a propriedade length que determina o comprimento em caracteres do conteúdo da variável txt


Linguagem por objectos

Os métodos são acções que se pode executar sobre os objectos.

<script type="text/javascript"> var txt=“Olá”; document.write(txt.touppercase()); </script>

Neste exemplo temos o método touppercase que passa todos os caracteres para maiúsculas


Objectos do browser

Objecto window

Objecto location Objecto history Objecto document Objecto navigator Objecto screen

Objecto forms Objecto images Objecto links


Propriedades e Métodos

Propriedade Descrição

length Número de elementos do array

Métodos

join() Juntar os elementos de um array numa string

Reverse() Inverte a ordem dos elementos

Sort() Ordena os elementos

Array



Métodos Descrição

Getday() Fica com o dia

Getmonth() Fica com o mês

Getyear() Fica com o ano

Setdate() Ajusta o dia do mês

Setyear() Ajusta o ano

Date



Propriedade Descrição

length Número de caracteres

Métodos

Indexof() Retoma a posição de onde de encontra a substring

substring() Retoma a substring formada pela posição de inicio e pela do fim

touppercase() Põe todos os elementos em maiúsculas

String


Eventos

Eventos Descrição

onclick Quando clica com o rato num html control

ondblclick Quando dupla clica com o rato num html control

onmousedown Quando pressiona o botão do rato

onmousemove Quando move o rato

onmouseout Quando move o rato para fora

onmouseover Quando move o rato em cima

onmouseup Quando deixa de pressionar

Eventos do rato


Eventos

Eventos Descrição

onkeydown Quando pressiona uma tecla

onkeypress Quando pressiona uma tecla, este evento está activo continuamente até deixar de pressionar na tecla

onkeyup Quando deixa de pressionar a tecla

Teclado

Eventos Descrição

onload Quando a janela é inicializada

onresize Quando o utilizador muda o tamanho da janela

Window


Eventos

Eventos Descrição

onchange Quando um valor é alterado

onfocus Quando um elemento ganha controlo

onreset Quando o utilizador faz reset

onselect Quando o utilizador muda de select

onsubmit Quando o utilizador submite uma form

HTML elementos


objectos

propriedades Descrição

images Retorna um array com todas as imagens do documento

forms Retorna um array com toos os forms do documento

links Retorna um array com todos os links do documento

url Retorna o url do documento

getelementbyid Retorna o elemento especifico dado pelo id

onsubmit Quando o utilizador submite uma form

document

Por exemplo

Document.images[0] -referencia a primeira imagem do documento

document.getElementById(‘teste’) – referencia o lemento de html usado na página que tem o nome teste


objectos

Método Descrição

write() Escreve no documento

Writeln() Escreve uma linha no documento

document

Por exemplo

Document.write(“Este texto é escrito no documento”);


Exemplos

<html>

<body><script type="text/javascript">var browser=navigator.appName;var version=navigator.appVersion;

document.write(“Nome do Browser: "+ browser);document.write("<br />");document.write(" Versão do Browser : "+ version);</script></body>

</html>

Mostrar o nome do browser e a versão


Exemplo<HTML><HEAD><style type="text/css">.simple {border: 1px solid #cccccc; padding: 5px; text-align: center}</style><script type="text/javascript">function fixImgs(whichId, maxW) {var pix=document.getElementById(whichId).getElementsByTagName('img'); for (i=0; i<pix.length; i++) { w=pix[i].width; h=pix[i].height; if (w > maxW) { f=1-((w - maxW) / w); pix[i].width=w * f; pix[i].height=h * f; } }}

</script></head>


Exemplo

<BODY><BODY onload="fixImgs('photos', 108) /*('element ID', maximum width)*/"><div align="center"><table id="photos" cellspacing="2"><tr><td class="simple"><img src="logo.jpg" alt="photo 1"></td><td class="simple"><img src="homem.jpg" alt="photo 2"></td><td class="simple"><img src="cara-mulher.jpg" alt="photo 3"></td></tr><tr><td class="simple" colspan="3"><b>mudar:</b> <input type="button" value="mudar para comprimento de 80 pixels" onclick="fixImgs('photos', 80)"></td></tr></table></div></BODY></HTML>


Exemplo

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">NewImg = new Array ("logo.jpg","homem.jpg","cara-mulher.jpg");var ImgNum = 0;var ImgLength = NewImg.length - 1;var delay = 3000;var lock = false;var run;function chgImg(direction) {if (document.images) {ImgNum = ImgNum + direction;if (ImgNum > ImgLength) {ImgNum = 0;}if (ImgNum < 0) {ImgNum = ImgLength;}

document.slideshow.src = NewImg[ImgNum]; }}function auto() {if (lock == true) {lock = false;window.clearInterval(run);}else if (lock == false) {lock = true;run = setInterval("chgImg(1)", delay); }}

</script>


Exemplo

</HEAD><BODY>

<img src="logo.jpg" name="slideshow"><table><tr><td align="right"><a href="javascript:chgImg(-1)">Anterior</a></td><td align="center"><a href="javascript:auto()">Auto/Parar</a></td><td align="left"><a href="javascript:chgImg(1)">Próximo</a></td></tr></table>

</BODY></HTML>


Exemplos

• <HTML>• <HEAD>

• <SCRIPT language="JavaScript">• function movepic(img_name,img_src) {• document[img_name].src=img_src;• }• </SCRIPT>• </HEAD>• <BODY>• <CENTER>• <A HREF="http://javascript.internet.com" • onmouseover="movepic('button','cara-mulher.jpg')" • onmouseout="movepic('button','homem.jpg')">• <IMG NAME="button" SRC="homem.jpg" ALT="Image"></A>• </CENTER>• </BODY>• </HTML>

Mudar uma imagem quando se passa com a rato em cima da imagem


Exemplo

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">var clockID = 0;function UpdateClock() { if(clockID) { clearTimeout(clockID); clockID = 0; } var tDate = new Date(); document.form1.horas.value = "" + tDate.getHours() + ":" + tDate.getMinutes() + ":" + tDate.getSeconds(); clockID = setTimeout("UpdateClock()", 1000);}function StartClock() { clockID = setTimeout("UpdateClock()", 500);}

function KillClock() { if(clockID) { clearTimeout(clockID); clockID = 0; }}</script><body onload="StartClock()" onunload="KillClock()"><form name="form1"><input type=text name="horas" size=8><form></BODY></HTML>

Documents

Engº Pedro CostaAcessibilidade e Programação Web 1 Workshop Comunicação Inclusiva Acessibilidade e Programação Web Javascript