Workshop
Download
1 / 31

Workshop - PowerPoint PPT Presentation


  • 100 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Workshop' - carsyn


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Workshop

Workshop

Comunicação Inclusiva

Acessibilidade e Programação Web

Javascript

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.

Acessibilidade e Programação Web


Javascript1
Javascript

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

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

<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

*/

Todas as instruções acabam com ;

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

Acessibilidade e Programação Web


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

Acessibilidade e Programação Web


Vari veis
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ário

var x;

Var nome;

Var y=5;

X=2;

alert(x+y); </script>

</body>

</html>

Acessibilidade e Programação Web


Matrizes ou vectores array
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);

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”

Array multidimensionais

Acessibilidade e Programação Web


Operadores
Operadores

Acessibilidade e Programação Web


Operadores1
Operadores

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

Acessibilidade e Programação Web


If else 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>

Acessibilidade e Programação Web


While php
While (=php)

  • while (condição)

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

<html>

<body>

<script LANGUAGUE=“Javascript”>

Var i=1;

While (i<=5)

{

document.write(“O numero é " +i+ "<br />";

i++;

}

</script>

</body>

</html>

Acessibilidade e Programação Web


For php
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>

Acessibilidade e Programação Web


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

Acessibilidade e Programação Web


Fun es
Funções

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.

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

Acessibilidade e Programação Web


Linguagem por objectos
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.

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

<script type="text/javascript">

var txt=“Olá”;

document.write(txt.length);

</script>

Acessibilidade e Programação Web


Linguagem por objectos1
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

Acessibilidade e Programação Web


Objectos do browser
Objectos do browser

Objecto window

Objecto location

Objecto history

Objecto document

Objecto navigator

Objecto screen

Objecto forms

Objecto images

Objecto links

Acessibilidade e Programação Web


Propriedades e m todos
Propriedades e Métodos

Array

Acessibilidade e Programação Web


Propriedades e m todos1
Propriedades e Métodos

Date

Acessibilidade e Programação Web


Propriedades e m todos2
Propriedades e Métodos

String

Acessibilidade e Programação Web


Eventos
Eventos

Eventos do rato

Acessibilidade e Programação Web


Eventos1
Eventos

Teclado

Window

Acessibilidade e Programação Web


Eventos2
Eventos

HTML elementos

Acessibilidade e Programação Web


Objectos
objectos

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

Acessibilidade e Programação Web


Objectos1
objectos

document

Por exemplo

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

Acessibilidade e Programação Web


Exemplos
Exemplos

Mostrar o nome do browser e a versão

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

Acessibilidade e Programação Web


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

Acessibilidade e Programação Web


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

Acessibilidade e Programação Web


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

Acessibilidade e Programação Web


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

Acessibilidade e Programação Web


Exemplos1
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

Acessibilidade e Programação Web


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

Acessibilidade e Programação Web


ad