1 / 31

Workshop

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

carsyn
Download Presentation

Workshop

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Workshop Comunicação Inclusiva Acessibilidade e Programação Web Javascript Acessibilidade e Programação Web

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

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

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

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

  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 Acessibilidade e Programação Web

  7. Operadores Acessibilidade e Programação Web

  8. Operadores Única diferença em relação ao php Acessibilidade e Programação Web

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

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

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

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

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

  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> Acessibilidade e Programação Web

  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 Acessibilidade e Programação Web

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

  17. Propriedades e Métodos Array Acessibilidade e Programação Web

  18. Propriedades e Métodos Date Acessibilidade e Programação Web

  19. Propriedades e Métodos String Acessibilidade e Programação Web

  20. Eventos Eventos do rato Acessibilidade e Programação Web

  21. Eventos Teclado Window Acessibilidade e Programação Web

  22. Eventos HTML elementos Acessibilidade e Programação Web

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

  24. objectos document Por exemplo Document.write(“Este texto é escrito no documento”); Acessibilidade e Programação Web

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

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

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

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

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

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

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

More Related