Pablo Valério Polônia. Um estudo da linguagem de programação EcmaScript

Transcrição

1 Pablo Valério Polônia Um estudo da linguagem de programação EcmaScript 25 de Novembro de 2007

2 Pablo Valério Polônia Um estudo da linguagem de programação EcmaScript Orientador: Luiz Fernando Bier Melgarejo 25 de Novembro de 2007

3 Um estudo da linguagem de programação EcmaScript Trabalho de conclusão de curso apresentado como parte dos requisitos para obtenção do grau de Bacharel em Ciência da Computação. Prof. Luiz Fernando Bier Melgarejo Orientador Banca Examinadora Prof. Dr. José Mazzucco Jr. Prof. Dr. Rosvelter Coelho da Costa

4 Sumário 1 Introdução p Motivação p Objetivo p. 5 2 Histórico p Especificação da linguagem p Confusões ocasionadas pela escolha do nome p. 7 3 Estado da arte p Ambientes Hospedeiros p Interpretadores, tradutores e máquinas virtuais p A nova especificação do EcmaScript p Características gerais da linguagem p Tipagem dinâmica p Dinamismo p Gerenciamento de memória p Tipos de dados da linguagem p Tipos primitivos p Objetos p Wrappers p Funções p. 13

5 6.1 Funções tratadas como objetos p Funções aninhadas p Closures p Orientação a objetos p Conceitos de OO sob a perspectiva tradicional p Classes p Objetos p Herança p Prototipação p O modelo de prototipação do EcmaScript p Objetos p Criando objetos p Propriedades p Métodos p Encapsulamento p Protótipos e Herança p Simulando classes com meta-programação p O framework Prototype p Outras funcionalidades do framework p. 22 Referências Bibliográficas p. 23

6 5 1 Introdução O EcmaScript popularmente conhecido por uma de suas implementações, o JavaScript, é uma linguagem muito popular pois praticamente todo computador pessoal possuí um navegador web que a suporta[1]. Por alguns motivos que serão explicados no decorrer deste trabalho ela é também muito mal compreendida[2] e tem aspectos muito interessantes que muitas vezes são ignorados ou desconhecidos pelos desenvolvedores. 1.1 Motivação O interesse pela linguagem tem crescido nos últimos anos devido ao surgimento de aplicações web que incorporam funcionalidades antes nunca vistas neste contexto (Rich Web Applications)[3]. Para responder a esta demanda, novas tecnologias diretamente relacionadas com o ECMAScript tem sido criadas, como o AJAX(Asynchronous JavaScript and XML)[4] que facilita o desenvolvimento de aplicações mais interativas e eficientes e a ferramenta Google Gears[5] que permite que uma aplicação web execute sem precisar de uma conexão com a Internet, entre outras. 1.2 Objetivo Descrever de forma clara e sucinta o histórico e aspectos gerais da linguagem, focando no paradigma utilizado de orientação a objetos conhecido como prototipação. Este trabalho deverá auxiliar como fonte de pesquisa em trabalhos futuros de implementação de aplicações web.

7 6 2 Histórico Em meados de 1995, Brendan Eich que trabalhava para a Netscape estudava uma linguagem para se comunicar com o navegador, com a qual seria possível tornar as páginas mais dinâmicas. Na época utilizar somente Java era uma alternativa, mas a idéia era que a linguagem fosse mais simples, para que pessoas sem muita experiência em programação também pudessem desenvolver e executar seus programas de forma rápida e simples, para ele "Criação de conteúdo hipermídia não deveria ser algo tão complicado e obscuro"[6]. Por fim ficou decidido que a nova linguagem deveria se parecer sintaticamente com Java, mas semanticamente semelhante a linguagens com verificação dinâmica de tipos como Hyper- Talk, DBase e Self [7]. Inicialmente chamada de Mocha, foi integrada ao navegador Netscape Navigator 2.0 em Setembro de 1995 onde era chamada de LiveScript, em Dezembro do mesmo ano foi renomeado para JavaScript em um anúncio conjunto entre a Sun e a Netscape[8]. Posteriormente foi criada uma especificação para a linguagem, surgindo outras implementações para esta especificação como o JScript[9] da Microsoft incluído na versão 3.0 do Internet Explorer, e o ActionScript [10] da Adobe. Atualmente pelo menos uma versão da especificação do ECMAScript é suportada pelos navegadores web mais utilizados[1].

8 7 2.1 Especificação da linguagem Em 1996 a Netscape enviou o JavaScript para a Ecma International para o desenvolvimento de uma especificação padronizada para a linguagem, o padrão chamado de ECMA-262[11] ficou pronto em Junho de 1997 e a linguagem especificada foi chamada de EcmaScript. No decorrer dos anos novas especificações surgiram: A ECMA-290[12] criada em Dezembro de 1999, entre as mudanças estão o tratamento de exceções e suporte nativo a expressões regulares. A ECMA-357[13] divulgada em Junho de 2004 conhecido por E4X que adiciona suporte nativo a manipulação de dados no formato XML. Atualmente está sendo desenvolvida a quarta edição[14] da especificação que pretende mudar muito a linguagem e que tem previsão de conclusão em Confusões ocasionadas pela escolha do nome JavaScript é o nome de uma implementação realizada pela Netscape da especificação da linguagem ECMAScript, os dois nomes ainda são muito confundidos. Outro fator de confusão é que o nome JavaScript a vincula com o Java, na realidade o nome JavaScript foi dado como estratégia de propaganda devido as duas tecnologias terem sido integradas no navegador Netscape em um curto espaço de tempo. A idéia era que o nome mostrasse que as duas tecnologias se complementavam. O impacto negativo deste nome é que ele pode levar a idéias errôneas, como de que o JavaScript é um um produto da Sun Microsystems ou uma linguagem de alguma forma inferior ao Java[2].

9 8 3 Estado da arte Figura 3.1: Relacionamento entre as tecnologias ligadas ao EcmaScript [15] Losango: Uma linguagem que implementa a especificação EcmaScript. Elipse Verde: Interpretador ou máquina virtual. Retângulo arredondado: Aplicativo. 1 Área pontilhada: Empresa responsável pelo desenvolvimento. Nuvem prateada: Linguagem de implementação. 1 OBS: A justificativa dos casos onde a linguagem está ligada diretamente ao aplicativo é que o próprio aplicativo tem um interpretador embutido, como é o caso do Silverlight.

10 9 3.1 Ambientes Hospedeiros Segundo a especificação, a linguagem não foi criada para ser computacionalmente autosuficiente[11], por exemplo não existe um mecanismo nativo para escrever um texto na tela. A linguagem deve ser integrada a um ambiente hospedeiro, sendo que o ambiente fornece os objetos que poderão ser manipulados, por exemplo o ambiente pode fornecer um objeto que represente a tela do usuário e que possa receber mensagens para escrever na mesma. O primeiro, e o mais comum ambiente para o EcmaScript é o navegador web, de fato a linguagem foi criada para manipular objetos do navegador, tais como componentes gráficos da página ou informações do histórico e favoritos. Porém a linguagem não está restrita ao ambiente do navegador, como mostra a figura 3. Outros ambientes podem ser utilizados como o servidor web Apache ou o aplicativo Adobe Photoshop criado para edição de imagens de rastreio, basta que possuam uma forma de interpretar a linguagem e que forneçam os objetos necessários para tornar esta integração útil. 3.2 Interpretadores, tradutores e máquinas virtuais A linguagem foi concebido para ser interpretada, linguagens interpretadas tem seu código fonte submetido a outro programa que o analisa e depois executa, este programa é denominado interpretador.[16] O SpiderMonkey[17] foi o primeiro interpretador de JavaScript criado, desenvolvido em C, ele foi integrado as primeiras versões do Netscape e atualmente ao Mozilla Firefox. O Rhino[18], é um interpretador desenvolvido em Java, ele vem distribuído com a versão 6 da máquina Java, o que permite que código JavaScript possa ser inserido em código Java e depois executado. Outras linguagens também possuem formas de integração com o EcmaScript, conforme a figura 3 temos os tradutores Scheme2Js que gera código em JavaScript com base em um código em Scheme, o ParentScript para Lisp e o RubyJS para Ruby. Atualmente a Adobe e a Mozilla trabalham em conjunto em um projeto chamado Tamarim[19], uma máquina virtual de código aberto utilizada atualmente para o ActionScript no Flash 9, e que prentende ser integrado com o SpiderMonkey e utilizada na próxima versão do EcmaScript.

11 10 O Tamarim pretende melhorar a performance da execução dos programas escritos em EcmaScript, sendo que um dos objetivos do projeto é criar um compilador Just in Time que converta bytecode EcmaScript em instruções de arquiteturas nativas tais como o IA A nova especificação do EcmaScript Prevista para 2008, a quarta edição da especificação EcmaScript (ES4)[14] pretende trazer profundas mudanças a linguagem, tais como: Suporte nativo a classes e interfaces. Sistema de pacotes. Definição e verificação estática opcional de tipos. Tipos parametrizáveis. Apesar de ser muito diferente a quarta versão será compatível com a versão três, o que possibilita uma adoção muito mais rápida do novo padrão.

12 11 4 Características gerais da linguagem 4.1 Tipagem dinâmica Linguagens dinamicamente tipadas são aquelas onde a verificação de tipos do programa ocorre em tempo de execução, o que difere da tipagem estática onde o tipo é determinado em tempo de compilação[20]. A escolha da verificação dinâmica de tipos implica que o tipo de um dado pode se alterar com o tempo durante a execução do programa, enquanto que na verificação estática ocorre erro de compilação se uma variável for associada a um tipo diferente da qual foi declarada. 4.2 Dinamismo O termo linguagem dinâmica se refere a uma classe de linguagens de programação que compartilham determinadas características em tempo de execução que só estão presentes em linguagens estáticas em tempo de compilação, que são verificação dinâmica de tipos e modificação de código em tempo de execução[21]. Tais características podem ser simuladas na compilação, mas com muito mais complexidade de implementação do que na interpretação. 4.3 Gerenciamento de memória O gerenciamento de memória é transparente para o programador, o processo de liberação de memória é realizado automaticamente via coletor de lixo[11].

13 12 5 Tipos de dados da linguagem 5.1 Tipos primitivos Um tipo primitivo é um membro dos tipos de mais baixo nível da linguagem, que são: Boolean: Valores lógicos booleanos. Number: Números inteiros e de ponto flutuante. String: Texto. Undefined: Associado por padrão quando uma variável não foi inicializada ou declarada[22]. Null: Representa a ausência de valor, ou o objeto nulo[11]. A passagem de parâmetros é feita por valor(cópia) para os tipos primitivos. 5.2 Objetos Um objeto é uma estrutura que contém propriedades, cada propriedade tem um nome único e está associada a um tipo primitivo ou objeto. A linguagem provê objetos básicos para manipulação de datas, textos e expressões regulares, outros objetos podem ser criados pelo programador ou fornecidos pelo ambiente hospedeiro. A passagem de parâmetros é feita por referência no caso dos objetos. 5.3 Wrappers Os tipos primitivos podem ser tratados como objetos, isto acontece porque a linguagem tem suporte a conversão automática de tipos primitivos em objetos que os encapsulam(wrappers)[22].

14 13 6 Funções Uma função representa a definição de uma computação. No código abaixo definimos uma função e a invocamos passando parâmetros para ela: Listing 6.1: Exemplo de função function soma (x, y) return x + y; soma (0,1); Funções não precisam ter um nome, isto é conhecido como funções anônimas, ou funções lambda. Listing 6.2: Exemplo de função anônima var f = f u n c t i o n ( x, y ) { r e t u r n x + y ; f ( 0, 1 ) ; 6.1 Funções tratadas como objetos Uma função também é um objeto, pode-se usar a mesma sintaxe de criação de objetos para criar uma função: Listing 6.3: Exemplo de funções criadas como objetos var soma = new Function (" x", "y", " return x+y ;"); 6.2 Funções aninhadas Também é possível definir funções aninhadas:

15 14 Listing 6.4: Exemplo de funções aninhadas function soma (x, y){ function f(x, y ){ return x + y; return f(x, y ); Como visto, funções são muito flexíveis podendo ser associadas a variáveis, passadas como parâmetros para outras funções e manipuladas como objetos, ou seja, funções são "cidadãos de primeira classe"[23]. Aspecto que torna interessante uma abordagem de programação funcional com esta linguagem. 6.3 Closures Closures são fragmentos de código que mantém uma referência ao ambiente no qual foram criados. Desta forma, o retorno de um método não necessariamente implica na destruição das variáveis locais deste, já que um closure pode estar referenciando estas variáveis locais[24]. Listing 6.5: Exemplo de closure function Retangulo ( umaaltura, umalargura ) { var altura = umaaltura ; var largura = umalargura ; this. obterlargura = function () { return largura ; this. obteraltura = function () { return altura ; Closures são muito utilizados em linguagens como Ruby, Python, Lisp, entre outras linguagens.

16 15 7 Orientação a objetos A linguagem é orientada a objetos e baseada no paradigma de orientação a protótipos(prototipação), que apresenta diferenças conceituais da orientação a objetos tradicional que é utilizada em linguagens como Java e SmallTalk. Por isto é conveniente definir alguns conceitos na abordagem tradicional para avaliar estas diferenças. 7.1 Conceitos de OO sob a perspectiva tradicional Classes O conceito de classe está presente desde a primeira linguagem orientada a objetos desenvolvida, o Simula. Podemos definir uma classe como um tipo abstrato de dados que define comportamento(métodos) e dados(atributos) em um único módulo, que representa uma entidade do sistema desenvolvido[25] Objetos : Todo objeto é uma instância de uma classe[25], representando um dos estados possíveis dela. Objetos são criados passando uma mensagem de criação para sua classe Herança : É o compartilhamento de comportamento e atributos entre as classes[26]. Quando uma classe herda comportamento de mais de uma classe dizemos que houve herança múltipla, caso contrário a herança é simples.

17 Prototipação Os princípios da orientação a objetos sob a perspectiva tradicional estão totalmente atrelados ao conceito de classe, o que gera alguns problemas. Na abordagem com classes todos os objetos de uma determinada classe tem o mesmo comportamento, toda vez que se queira modificar o comportamento de um objeto é necessário criar uma classe e instanciar o mesmo. Foi com o intuito de eliminar a dependência entre classes e instâncias que a prototipação foi criada[27]. Sua motivação foi o desenvolvimento de um ambiente de simulação orientado a objetos feito em SmallTalk chamado ThingPad[28], como a linguagem era gráfica, o ciclo padrão de criação de classe e instanciação de objetos limitava o seu potencial exploratório. Neste modelo existem os objetos, que são entidades auto-consistentes, que possuem estado e comportamento, entretanto se só existissem objetos não haveria como alterar propriedades que são comuns entre um conjunto de objetos, devido a inexistência da noção de tipo[27]. O protótipo introduz a noção de tipo, ele é um objeto como qualquer outro, mas que serve de exemplo para criação de objetos do mesmo tipo e também para definição de comportamento compartilhado, ou seja herança[27]. O EcmaScript teve seu modelo de prototipação baseado no Self [29], uma das primeiras linguagens a utilizarem este paradigma[30]. 7.3 O modelo de prototipação do EcmaScript Objetos Um objeto em EcmaScript é uma estrutura que contém propriedades, cada propriedade tem um nome único e está associada a um tipo primitivo ou um objeto[22].

18 Criando objetos Para se criar objetos é necessário utilizar o operador new e em seguida uma função qualquer. Listing 7.1: Exemplo de criação de objeto function Livro ( titulo, autor ) { this. titulo = titulo ; this. autor = autor ; var livro = new Livro (" O Alienista ", " Machado de Assis "); Nesta operação o operador new é invocado criando um objeto, este novo objeto então chama a função Livro() com dois parâmetros, quando esta função é invocada a palavra reservada this recebe automaticamente a referência do objeto criado, desta forma são criadas as propriedades título e autor que são associadas aos parâmetros, por fim o objeto é retornado. Utilizando as funções construtoras podemos criar objetos que compartilham das mesmas propriedades, uma função construtora tem seu nome igual ao nome do tipo do objeto criado iniciado por letra maiúscula por convenção, porém é possível embora não recomendável que elas tenham outro nome. É importante enfatizar que em Java ou C++ quando estamos no escopo de uma classe, um atributo precedido de this é a mesma variável que sem o this, isto não é verdade no caso do EcmaScript Propriedades Propriedades podem ser definidas das seguintes formas: livro. autor = " Machado de Assis "; Listing 7.2: Exemplo de acesso a propriedades livro [" autor "] = " Machado de Assis "; A primeira forma é idêntica a notação de ponto utilizada pelo Java, a segunda opção é conveniente para criação de propriedades com nomes variáveis. Se a propriedade não existir ela é criada no objeto, outros objetos criados não terão esta propriedade a não ser que ela seja criada na função construtora, propriedades também podem ser removidas utilizando o comando delete, esta capacidade de definir propriedades dos objetos em tempo de execução traz muita flexibilidade a linguagem.

19 Métodos Um método é uma propriedade associada a uma função. Listing 7.3: Exemplo de definição de métodos function Retangulo ( altura, largura ) { this. altura = altura ; this. largura = largura ; this. area = function () { return this. altura * this. largura ; var umretangulo = new Retangulo (10,20); var areadoretangulo = umretangulo. area (); No código acima temos uma função utilizada como construtor, chamada "Retangulo"que cria três propriedades em um objeto quando é invocada depois do operador new, a propriedade área esta associada a uma função e portanto é um método dos objetos do tipo "Retangulo" Encapsulamento Cada objeto deve esconder suas informações do resto do sistema o tanto quanto for possível, se uma informação do seu estado é necessária então ela deve ser acessada por uma interface bem definida através de passagem de mensagens[25]. No EcmaScript não existem modificadores de acesso para propriedades dos objetos, todas as propriedades podem ser acessadas em qualquer parte do programa, o que acaba rompendo o principio do encapsulamento. Para contornamos este problema e criarmos métodos de acesso para as propriedades basta definir variáveis dentro do construtor para guardar o valor das propriedades escondidas e depois criar funções para retornar e alterar estas variáveis.

20 19 Listing 7.4: Exemplo de encapsulamento de propriedades function Retangulo ( umaaltura, umalargura ) { var altura = umaaltura ; var largura = umalargura ; this. obterlargura = function () { return largura ; this. obteraltura = function () { return altura ; Como variáveis declaradas dentro do escopo de uma função não podem ser acessadas de fora do escopo da mesma garantimos que elas só poderão ser acessadas por meio dos métodos de acesso, garantindo o encapsulamento Protótipos e Herança No EcmaScript a prototipação é implementada através das funções construtoras. Toda função possuí uma propriedade chamada prototype, por padrão esta propriedade é definida como um objeto do tipo Object, mas pode ser alterada sendo associada ao objeto do qual queremos herdar as propriedades. Listing 7.5: Exemplo de herança de propriedades function Ponto (x, y){ this.x = x; this.y = y; Ponto. prototype = new Colorido (" marrom "); function Colorido ( cor ){ this. cor = cor ; Neste código definimos a propriedade prototype da função construtora do tipo Ponto como sendo um novo objeto do tipo Colorido, todos os objetos criados com a função Ponto terão a propriedade cor herdada do protótipo definido no construtor.

21 20 Sobrescrevendo propriedades Para sobrescrever métodos e propriedades basta defini-los novamente no objeto criado. Listing 7.6: Exemplo de redefinição de propriedades herdadas function Ponto (x, y){ this.x = x; this.y = y; this. cor = " verde "; Ponto. prototype = new Colorido (" marrom "); function Colorido ( cor ){ this. cor = cor ; Estendendo o protótipo Para estender um método basta utilizar o protótipo sobrescrevendo aonde for preciso. Listing 7.7: Estendendo propriedades herdadas function Colorido ( cor ){ this. obtercor = function () { return cor ; this. comotexto = function () { return " cor : " + this. obtercor (); function PontoColorido (x,y, cor ){ prototype = new Colorido ( cor ); this. obterx = function () { return x; this. obtery = function () { return y; this. comotexto = function (){ return " x :" + this. obterx () + " y :" + this. obtery () + " " + prototype. comotexto ();

22 21 8 Simulando classes com meta-programação Apesar do EcmaScript não ter um mecanismo de definição de classes embutido, é possível implementar um framework para simular classes utilizando a própria linguagem para isto. 8.1 O framework Prototype Um framework que possuí suporte a simulação de classes é o Prototype, podemos por exemplo criar uma classe, definindo seu construtor e métodos para ela. Listing 8.1: Criando uma classe com o framework Prototype var Colorido = Class. create ({ initialize : function ( cor ) { this. cor = cor ;, comotexto : function () { return " cor : " + this. cor ; ); No código acima criamos uma classe Colorido, que tem um construtor e um método como- Texto, podemos criar uma sub-classe de Colorido com o código abaixo: Listing 8.2: Criando uma sub-classe utilizando o framework Prototype var Ponto = Class. create ( Colorido, { initialize : function (x, y) { this.x = x; this.y = y;, comotexto : function ( $super ) { return "x: " + this.x + "y: " + this.y + $super (); );

23 22 No código acima definimos a classe Ponto como uma sub-classe de Colorido, sobrescrevendo seu método comotexto, a super-classe pode ser acessada na sub-classe utilizando a variável $super Outras funcionalidades do framework Além da simulação de classes o framework também possuí funções que estendem o DOM(Document Object Model), um padrão definido pela W3C para o modelo de objetos de uma página web, além de funcionalidades que facilitam o desenvolvimento de aplicações web utilizando AJAX.

24 23 Referências Bibliográficas [1] BROWSER Statistics. Disponível em: s tats.asp.acessoe 25nov [2] CROCKFORD, D. JavaScript: The World s Most Misunderstood Programming Language Disponível em: Acesso Em: 25 nov [3] RICH Internet application - Wikipedia, the free encyclopedia. Disponível em: I nternet a pplication.acessoem : 25nov [4] GOOGLE Gears, sítio oficial. Disponível em: Acesso Em: 25 nov [5] AJAX - Wikipedia, the free encyclopedia. Disponível em: 2 5nov [6] INNOVATORS of the Net: Brendan Eich and JavaScript. Disponível em: 2 5nov [7] CORE JavaScript 1.5 Guide. Disponível em: J avascript 1.5 G u JavaScript O verviewwhat i s J avascript.3f.acessoem : 25nov [8] NETSCAPE and Sun announce JavaScript, the Open, cross plataform object scripting language for enterprise networks and the Internet. Disponível em: Acesso Em: 25 nov [9] JSCRIPT (Windows Script Technologies). Disponível em: Acesso Em: 25 nov [10] ADOBE ActionScript Technology Center. Disponível em: Acesso Em: 25 nov [11] STANDARD ECMA-262 ECMAScript Language Specification. Disponível em: Acesso Em: 25 nov [12] STANDARD ECMA-290 ECMAScript Components Specification. Disponível em: Acesso Em: 25 nov [13] STANDARD ECMA-357 ECMAScript for XML (E4X) Specification. Disponível em: Acesso Em: 25 nov

25 24 [14] PROPOSED ECMAScript 4 Edition Language Overview. Disponível em: Acesso Em: 25 nov [15] THE World of ECMAScript. Disponível em: Acesso Em: 25 nov [16] INTERPRETER - Wikipedia, the free encyclopedia. Disponível em: ( computing).acessoem : 25nov [17] SPIDERMONKEY (JavaScript-C) Engine. Disponível em: Acesso Em: 25 nov [18] RHINO: JavaScript for Java. Disponível em: Acesso Em: 25 nov [19] TAMARIN Project. Disponível em: Acesso Em: 25 nov [20] PIERCE, B. C. Types and Programming Languages. [S.l.]: The MIT Press, ISBN [21] MIKKONEN, A. T. T. Using JavaScript as a Real Programming Language. [S.l.], [22] FLANAGAN, D. JavaScript: The Definitive Guide. 5th. ed. [S.l.]: O Reilly Media, p. ISBN [23] BURSTALL, R. Christopher strachey - understanding programming languages. Higher- Order and Symbolic Computation, [24] PIERI, G. Desenvolvimento de uma linguagem de programação [25] MEYER, B. Object-Oriented Software Construction. 2th. ed. [S.l.]: Prentice Hall, p. ISBN [26] ABADI, L. C. M. A Theory of Objects. 1th. ed. [S.l.]: Springer, p. ISBN [27] BOMING, A. Classes vs. Prototypes in Object-oriented languages. [S.l.], [28] BOMING, A. ThingLab - A Constraint-Oriented Simulation Laboratory. Tese (Doutorado) Stanford University, [29] UNGAR, R. B. S. D. Self: The Power of Simplicity. [S.l.], [30] INTRODUCTION to Object-Oriented JavaScript From MDC. Disponível em: t o O b ject Oriented J avascript.acessoem : 25nov.2007.