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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Exemplos <HTML> <HEAD> <SCRIPT language="JavaScript"> function movepic(img_name,img_src) { document[img_name].src=img_src; } </SCRIPT> </HEAD> <BODY> <CENTER> <A HREF=" 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

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

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:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

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:

Apresentações semelhantes

Sobre projeto

Feedback