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

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

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

Apresentações semelhantes


Apresentação em tema: "Engº Pedro CostaAcessibilidade e Programação Web 1 Workshop Comunicação Inclusiva Acessibilidade e Programação Web Javascript."— Transcrição da apresentação:

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

2 Engº Pedro CostaAcessibilidade 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.

3 Engº Pedro CostaAcessibilidade 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 // Isto é uma linha de comentário document.write(Bom dia"); alert("Minha primeira mensagem!"); 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 e acaba em Todas as instruções acabam com ; A instrução document.write escreve no ecrã uma ou mais cadeias de caracteres (string);

4 Engº Pedro CostaAcessibilidade 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 var num=prompt(Escreva um numero); Alert(Escreveu o número+num); Confirm(Está certo);

5 Engº Pedro CostaAcessibilidade 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 // Isto é uma linha de comentário var x; Var nome; Var y=5; X=2; alert(x+y);

6 Engº Pedro CostaAcessibilidade 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); 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

7 Engº Pedro CostaAcessibilidade e Programação Web 7 Operadores OperadorDescriçã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

8 Engº Pedro CostaAcessibilidade e Programação Web 8 Operadores OperadorDescrição Operador Relacional ==igualdade Maior que =>Maior e igual que <>desigualdade Operador de Texto +Concatenação (junta dois textos) Única diferença em relação ao php

9 Engº Pedro CostaAcessibilidade 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; } var d=5; if (d==5) document.write( É o número cinco); else document.write(Não é o numero cinco);

10 Engº Pedro CostaAcessibilidade e Programação Web 10 While (=php) Var i=1; While (i<=5) { document.write(O numero é " +i+ " "; i++; } while (condição) {código a ser executado enquanto a condição for verdadeira; }

11 Engº Pedro CostaAcessibilidade 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. var i=1; for (i=1; i<=5; i++) { document.write(Olá ); }

12 Engº Pedro CostaAcessibilidade 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.

13 Engº Pedro CostaAcessibilidade e Programação Web 13 Funções function mensagem() { alert(Olá );} 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.

14 Engº Pedro CostaAcessibilidade 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. var txt=Olá; document.write(txt.length); Neste exemplo temos a propriedade length que determina o comprimento em caracteres do conteúdo da variável txt

15 Engº Pedro CostaAcessibilidade e Programação Web 15 Linguagem por objectos Os métodos são acções que se pode executar sobre os objectos. var txt=Olá; document.write(txt.touppercase()); Neste exemplo temos o método touppercase que passa todos os caracteres para maiúsculas

16 Engº Pedro CostaAcessibilidade e Programação Web 16 Objectos do browser Objecto window Objecto locationObjecto historyObjecto documentObjecto navigatorObjecto screen Objecto formsObjecto imagesObjecto links

17 Engº Pedro CostaAcessibilidade e Programação Web 17 Propriedades e Métodos PropriedadeDescrição lengthNú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

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

19 Engº Pedro CostaAcessibilidade e Programação Web 19 Propriedades e Métodos PropriedadeDescrição lengthNú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

20 Engº Pedro CostaAcessibilidade e Programação Web 20 Eventos Descrição onclickQuando clica com o rato num html control ondblclickQuando dupla clica com o rato num html control onmousedownQuando pressiona o botão do rato onmousemoveQuando move o rato onmouseoutQuando move o rato para fora onmouseoverQuando move o rato em cima onmouseupQuando deixa de pressionar Eventos do rato

21 Engº Pedro CostaAcessibilidade e Programação Web 21 Eventos Descrição onkeydownQuando pressiona uma tecla onkeypressQuando pressiona uma tecla, este evento está activo continuamente até deixar de pressionar na tecla onkeyupQuando deixa de pressionar a tecla Teclado EventosDescrição onloadQuando a janela é inicializada onresizeQuando o utilizador muda o tamanho da janela Window

22 Engº Pedro CostaAcessibilidade e Programação Web 22 Eventos Descrição onchangeQuando um valor é alterado onfocusQuando um elemento ganha controlo onresetQuando o utilizador faz reset onselectQuando o utilizador muda de select onsubmitQuando o utilizador submite uma form HTML elementos

23 Engº Pedro CostaAcessibilidade e Programação Web 23 objectos propriedadesDescrição imagesRetorna um array com todas as imagens do documento formsRetorna um array com toos os forms do documento linksRetorna um array com todos os links do documento urlRetorna o url do documento getelementbyidRetorna o elemento especifico dado pelo id onsubmitQuando 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

24 Engº Pedro CostaAcessibilidade e Programação Web 24 objectos MétodoDescrição write()Escreve no documento Writeln()Escreve uma linha no documento document Por exemplo Document.write(Este texto é escrito no documento);

25 Engº Pedro CostaAcessibilidade e Programação Web 25 Exemplos var browser=navigator.appName; var version=navigator.appVersion; document.write(Nome do Browser: "+ browser); document.write(" "); document.write(" Versão do Browser : "+ version); Mostrar o nome do browser e a versão

26 Engº Pedro CostaAcessibilidade e Programação Web 26 Exemplo.simple { border: 1px solid #cccccc; padding: 5px; text-align: center } function fixImgs(whichId, maxW) { var pix=document.getElementById(whichId).getElementsByTagName('img'); for (i=0; i maxW) { f=1-((w - maxW) / w); pix[i].width=w * f; pix[i].height=h * f; }

27 Engº Pedro CostaAcessibilidade e Programação Web 27 Exemplo mudar:

28 Engº Pedro CostaAcessibilidade e Programação Web 28 Exemplo 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); }

29 Engº Pedro CostaAcessibilidade e Programação Web 29 Exemplo Anterior Auto/Parar Próximo

30 Engº Pedro CostaAcessibilidade e Programação Web 30 Exemplos function movepic(img_name,img_src) { document[img_name].src=img_src; } Mudar uma imagem quando se passa com a rato em cima da imagem

31 Engº Pedro CostaAcessibilidade e Programação Web 31 Exemplo 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; }


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

Apresentações semelhantes


Anúncios Google