A apresentação está carregando. Por favor, espere

A apresentação está carregando. Por favor, espere

Comunicação Inclusiva Acessibilidade e Programação Web

Apresentações semelhantes


Apresentação em tema: "Comunicação Inclusiva Acessibilidade e Programação Web"— Transcrição da apresentação:

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

2 Acessibilidade e Programação Web
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. Engº Pedro Costa Acessibilidade e Programação Web

3 Acessibilidade e Programação Web
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); Engº Pedro Costa Acessibilidade e Programação Web 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); Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

4 Acessibilidade e Programação Web
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> Engº Pedro Costa Acessibilidade e Programação Web Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

5 Acessibilidade e Programação Web
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> Engº Pedro Costa Acessibilidade e Programação Web Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

6 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 Engº Pedro Costa Acessibilidade e Programação Web

7 Acessibilidade e Programação Web
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 Engº Pedro Costa Acessibilidade e Programação Web

8 Acessibilidade e Programação Web
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 Engº Pedro Costa Acessibilidade e Programação Web

9 Acessibilidade e Programação Web
if …else (=php) if (condição) { código a ser executado se a condição for verdadeira; } else <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> Engº Pedro Costa Acessibilidade e Programação Web Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

10 Acessibilidade e Programação Web
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> Engº Pedro Costa Acessibilidade e Programação Web Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

11 Acessibilidade e Programação Web
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> Engº Pedro Costa Acessibilidade e Programação Web Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

12 Acessibilidade e Programação Web
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; 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. Engº Pedro Costa Acessibilidade e Programação Web

13 Acessibilidade e Programação Web
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> Engº Pedro Costa Acessibilidade e Programação Web

Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

14 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> Engº Pedro Costa Acessibilidade e Programação Web Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

15 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 Engº Pedro Costa Acessibilidade e Programação Web Neste exemplo temos o método touppercase que passa todos os caracteres para maiúsculas. Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

16 Acessibilidade e Programação Web
Objectos do browser Objecto window Objecto location Objecto history Objecto document Objecto navigator Objecto screen Objecto forms Objecto images Objecto links Engº Pedro Costa Acessibilidade e Programação Web

17 Propriedades e Métodos
Array 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 Engº Pedro Costa Acessibilidade e Programação Web

18 Propriedades e Métodos
Date 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 Engº Pedro Costa Acessibilidade e Programação Web

19 Propriedades e Métodos
String 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 Engº Pedro Costa Acessibilidade e Programação Web

20 Acessibilidade e Programação Web
Eventos Eventos do rato 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 Engº Pedro Costa Acessibilidade e Programação Web

21 Acessibilidade e Programação Web
Eventos Teclado 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 Window Eventos Descrição onload Quando a janela é inicializada onresize Quando o utilizador muda o tamanho da janela Engº Pedro Costa Acessibilidade e Programação Web

22 Acessibilidade e Programação Web
Eventos HTML elementos 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 Engº Pedro Costa Acessibilidade e Programação Web

23 Acessibilidade e Programação Web
objectos document 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 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 Engº Pedro Costa Acessibilidade e Programação Web

24 Acessibilidade e Programação Web
objectos document Método Descrição write() Escreve no documento Writeln() Escreve uma linha no documento Por exemplo Document.write(“Este texto é escrito no documento”); Engº Pedro Costa Acessibilidade e Programação Web

25 Acessibilidade e Programação Web
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> Engº Pedro Costa Acessibilidade e Programação Web Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

26 Acessibilidade e Programação Web
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> Engº Pedro Costa Acessibilidade e Programação Web Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

27 Acessibilidade e Programação Web
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> <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> Engº Pedro Costa Acessibilidade e Programação Web

28 Acessibilidade e Programação Web
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> Engº Pedro Costa Acessibilidade e Programação Web Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

29 Acessibilidade e Programação Web
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> Engº Pedro Costa Acessibilidade e Programação Web

30 Acessibilidade e Programação Web
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 Engº Pedro Costa Acessibilidade e Programação Web

Image
Mudar uma imagem quando se passa com a rato em cima da imagem. Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }

31 Acessibilidade e Programação Web
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> Engº Pedro Costa Acessibilidade e Programação Web

Engº Pedro Costa. Acessibilidade e Programação Web.", "width": "800" }


Carregar ppt "Comunicação Inclusiva Acessibilidade e Programação Web"

Apresentações semelhantes


Anúncios Google