Linguagens e Ambientes de Programação (2016/2017)



Teórica 17 (09/mai/2017)

Introdução à linguagem JavaScript.
Porque vamos trabalhar com a linguagem JavaScript?
JavaScript embebido numa consola.
JavaScript embebido num WEB browser.
DOM - Document Object Model.



Introdução à linguagem JavaScript

Brendan Eich

Algumas características

Versões do JavaScript

A implementação original feita por Brendan Eich evoluiu com o tempo, e deu origem a duas implementações que atualmente são open source e são mantidas pela Mozilla Foundation: Outra implementação que importa referir é a seguinte: O JavaScript foi padronizado em 1997. O padrão chama-se ECMA-262, sendo ECMAScript o nome oficial da linguagem. No entanto, a linguagem continua a ser conhecida informalmente como JavaScript.

Bibliotecas e frameworks

Existem bibliotecas e frameworks que ajudam a escrever programas JavaScript sofisticados, com interfaces ambiciosas. Eis alguns das mais usados:

Porque vamos trabalhar com a linguagem JavaScript?

Na nossa cadeira, vamos estudar e trabalhar com a linguagem JavaScript por diversas razões. Eis as principais:

JavaScript embebido numa consola

O JavaScript só pode ser usado na prática, integrado num ambiente de execução que forneça objetos e métodos para interação com o exterior.

A versão de consola do Rhino corre num ambiente que fornece diversas primitivas, das quais destacamos a função print.

Examine bem esta pequena sessão de trabalho com a versão de consola do interpretador SpiderMonkey. Constitui um bom primeiro contacto com a linguagem.

Com apenas duas exceções, as expressões anteriores também funcionam no "JavaScript Shell" (disponível na coluna da esquerda da página da cadeira) e também na consola do "Firebug", uma extensão do Firefox que pode ser instalada a partir do site http://getfirebug.com.


JavaScript embebido num WEB browser

Virtualmente todos os browsers atuais têm um interpretador de JavaScript embebido. Cada browser proporciona ao JavaScript um ambiente de execução com objetos e métodos que permitem usar essa linguagem para criar páginas WEB interativas.

Chama-se DOM - Document Object Model ao ambiente que qualquer browser é obrigado a disponibilizar ao JavaScript, caso queira suportar a linguagem. O DOM implementa a visão que o JavaScript tem das páginas escritas em HTML e do estado interno do browser. Usando o DOM, o JavaScript consegue examinar e modificar dinamicamente qualquer página WEB e ainda examinar e modificar o estado do browser.

DOM é um padrão controlado pela organização W3C - World Wide Web Consortium, a mesma organização que controla o padrão HTML, XML e muitos outros padrões da WEB.

Para usar JavaScript integrado numa página WEB é necessário saber um pouco de HTML. Nas nossas aulas vamos restinguir-nos à programação de formulários HTML (HTML forms).

Convém saber que há incompatibilidades entre diferentes browsers em diferentes plataformas. Conseguir fazer um programa em JavaScript que funcione em todos os browser existentes é uma tarefa complicada.

Exemplo 1

O seguinte exemplo é um formulário simples que permite somar números. O formulário é constituída por três caixas de texto, a terceira das quais é read-only, e por um botão. Por favor, brinque um pouco com o formulário para perceber o seu comportamento. Agora examine o código HTML e JavaScript que implementa o formulário anterior. Repare que no botão "Add" o atributo ONCLICK tem associado código que será executado sempre que o botão gerar um evento de click.

Exemplo 2

O seguinte exemplo é uma form contendo botões de rádio e uma área de texto. Por favor, teste o formulário. Eis o código HTML e JavaScript correspondentes:

Exemplo 3

O seguinte exemplo mostra como se pode carregar um novo URL, mudando assim completamente o conteúdo do documento corrente. Também ilustra a criação duma caixa de alerta. Eis o código HTML e JavaScript correspondentes:

Exemplo 4

O seguinte exemplo serve para ilustrar a operação eval do JavaScript. Como já foi dito antes, todas as implementações de JavaScript devem ser capazes de interpretar código gerado dinamicamente. Isso pressupõe a existência duma função eval para correr código JavaScript arbitrário. Eis o código HTML e JavaScript que implementa a calculadora. A implementação é verdadeiramente simples. Constrói no mostrador da calculadora, a pouco e pouco, a expressão introduzida pelo utilizador sob a forma de string. No final, quando o utilizador carrega na tecla '=', invoca a função eval para avaliar a o conteúdo da string. Este truque funciona bem porque as expressões aritméticas do JavaScript têm a sintaxe habitual da matemática.

Exemplo 5

O seguinte exemplo ilustra o uso dum canvas em JavaScript. Um canvas é simplesmente um retângulo onde se podem desenhar gráficos. Examine o código HTML e JavaScript que implementa o retângulo anterior.

O preenchimento do canvas só pode ser feito depois do canvas ter sido criado. Uma forma de fazer isso é colocar o código JavaScript nas linhas imediatamente a seguir à definição do canvas. Mas é considerado pouco elegante misturar código JavaScript com código HTML no body da página. É preferível colocar o código JavaScript dentro do header da página, como temos feito sempre, e invocar esse código depois da página ter sido carregada. Existe um evento de onload que é ativado quando a página é carregada. Esse evento é capturado usando o atributo ONLOAD no elemento BODY.

Exemplo 6

Este exemplo mostra como se pode mudar um pedaço de texto arbitrário dentro duma página Web.

Exemplo: blá blá 0 blá blá.

Requer um pouco de planeamento, porque precisamos primeiro de associar um ID ao texto a alterar.

Se o texto já estiver marcado de alguma forma, por exemplo com a marca de bold assim <b>o meu texto</b>, então basta adicionar o ID desta forma, <b id='o meu id'>o meu texto</b>.

Se o texto não estiver marcado, então temos de o marcar com a marca span e adicionar o ID desta forma, <span id='o meu id'>o meu texto</span>.

Agora que o texto já está marcado e tem um ID, para lhe aceder em JavaScript basta usar a expressão document.getElementById('o meu id').innerHTML.

Veja o código do exemplo:



#80