Introdução à linguagem JavaScript

Transcrição

1 MIEEC SIEM ano letivo 2014/15 Introdução à linguagem JavaScript José A. Faria FEUP, DEGI Setembro 2014

2 Introdução ao JavaScript O JavaScript é uma linguagem utilizada sobretudo em client side scripts de aplicações web. O JavaScript oferece os elementos habituais das linguagens de programação (variáveis, arrays, operadores, controlo de fluxo, comentários,... ). Além disso, permite:...

3 Introdução ao JavaScript Detetar eventos na interface com o utilizador e associarlhes acões (onclick, onselect,...) Atuar sobre valores e atributos dos elementos de páginas web (text fields, buttons,...) Gerir janelas (abrir/fechar, carregar documentos,...)

4 Eventos Eventos são acontecimentos ocorridos quando o utilizador atua sobre um objeto de uma página web. ver exemplo-eventos.html Objetos Text, Button, Image, Form,... Eventos onclick, mousedown, mouseup, onchange, onload, onsubmit,...

5 Eventos A cada tipo de objeto apenas se aplicam alguns tipos de eventos (outros não fazem sentido). Exemplo Objetos do tipo button: aplicam-se eventos como onclick, mousedown e mouseup; não se aplicam os eventos onchange ou onload.

6 Eventos

7 Eventos Nos tutoriais seguintes pode encontrar a lista completa dos eventos detetados pelo javascript para cada tipo de objeto

8 Event handlers (funções de gestão de eventos) O JavaScript deteta a ocorrência dos eventos. Cabe ao programador definir as funções gestoras de eventos (event handlers) a invocar quando são detetados esses eventos.

9 Exemplo <input type= button name= confirmar onclick= carregar(this.form) > 1. após o utilizar clickar no botão confirmar (evento onclick); 2. é invocada a função carregar; 3. à qual é passado como argumento o identificador da form que contém o botão (this.form). ver exemplos formulário1 e formulário2 Nota: this é uma palavra reservada do javascript que designa o objeto corrente, neste caso o botão confirmar.

10 Métodos de eventos Em alguns casos, é vantajoso substituir o evento físico produzido pelo utilizador por uma instrução de código. Para esse efeito, o JavaScript oferece os métodos de evento cuja execução equivale a ocorrência de um evento físico. Exemplo A invocação do método submit() é equivalente à atuação de um botão do tipo submit.

11 Exemplo de aplicação O método submit() pode ser utilizado, por exemplo, para: submeter um formulário após um campo de texto ter sido alterado (tecla enter ter sido premida) sem ser necessário que o utilizador tenha de clicar sobre o botão submit o que simplifica a interação do utilizador com a aplicação.

12 Variáveis No JavaScript, os tipos das variáveis são assumidos implicitamente, não sendo portanto necessário declará-los explicitamente. var nome_da_variável = valor_inicial; Exemplo var n = 10 var s = Porto var x = s + n (a x é atribuída a sting Porto10 ) var y = 5 + n (a y é atribuído o valor inteiro 15)

13 Objetos O JavaScript é uma linguagem baseada em objetos, mas não orientada a objetos dado que: permite instanciar objetos com propriedades e métodos; mas não dispõe de mecanismos de herança e especialização típicos das linguagens orientadas a objetos.

14 Objetos As propriedades dos objetos podem ser acedidas, alternativamente, através: do nome; de um nº de ordem (índice); de uma notação mista.

15 Exemplo Sendo aluno-siem um objeto da classe Aluno-feup: function Aluno-feup { var nome var idade var curso } aluno-siem = new Aluno-feup...

16 Exemplo... A propriedade idade de aluno-siem pode ser acedida através de uma das seguintes notações alternativas: aluno1.idade aluno1[1] aluno1[ idade ]

17 Objetos pré-definidos O JavaScript dispõe de um conjunto de objetos pré-definidos, cada um dos quais permitindo realizar determinadas operações: objeto String para as operações sobre strings objeto Math para as operações matemáticas objeto Date para operações relacionadas com datas e tempo um conjunto de objetos relacionados com o browser (Document, Location, History e Window).

18 Objetos relacionados com o browser Document: objeto que contém diversas informações sobre o documento (página web) que está ser visualizada numa dada janela (title, URL, forms[], links[],...) Location: objeto que contém informação sobre o URL do documento corrente (host, href, protocol,...)...

19 Objetos relacionados com o browser... History: objeto que permite aceder à lista de acessos a locais www conservada pelo browser (next, previous, current,...) Window: objeto associado à janela do browser e que a permite controlar (documento visualizado, posição, tamanho,...)

20 Modelo de objetos Os objetos relacionados com o browser estão organizados numa hierarquia designada por DOM document object model.

21 DOM Document Object Model O DOM: oferece uma representação estruturada dos documentos html através da qual é possível aceder e modificar as propriedades dos objetos bem como a sua representação visual.

22 DOM Document Object Model Por exemplo: a propriedade elements dos objetos form é um array contendo os identificadores dos elementos (input text, buttons,...) contidos no form. a propriedade images dos objetos do tipo document é um array contendo os identificadores das imagens contidas no documento (página web).

23 Exemplo É possível aceder ao: valor do campo de texto apelido, da form entrada_dados do documento visualizado na janela win4, através de: win4.document.forms[ entrada_dados ]. elements[ apelido ].value ver exemplo formularios2

24 Exemplo Se: a form entrada_dados for a segunda form do documento o campo de texto apelido for o quarto elemento dessa form, então, o valor de apelido também poderá ser acedido por: win4.document.forms[1].elements[3].value win4.document.forms[1].elements[ apelido ].value