Java Script, Notas de estudo de Análise de Sistemas de Engenharia

Baixe Java Script e outras Notas de estudo em PDF para Análise de Sistemas de Engenharia, somente na Docsity!

Aprendendo JavaScript

Filipe Del Nero Grillo

Renata Pontin de Mattos Fortes

São Carlos 21 de fevereiro de 2008

Sumário

• 1 Introdução
• 2 Histórico de JavaScript
• 3 Conceitos
• 4 Núcleo da Linguagem JavaScript
  • 4.1 Tipos de dados
    • 4.1.1 Tipos numéricos
    • 4.1.2 Booleano
    • 4.1.3 Indefinido
    • 4.1.4 null
    • 4.1.5 Strings
    • 4.1.6 Arrays
  • 4.2 Operadores
    • 4.2.1 Aritméticos
    • 4.2.2 Comparação
    • 4.2.3 Bit a bit
    • 4.2.4 Atribuição
    • 4.2.5 Lógicos
  • 4.3 Estruturas de controle
  • 4.4 Funções
  • 4.5 Objetos
    • 4.5.1 Objeto String
    • 4.5.2 Objeto Array
  • 4.6 Exceções
• 5 Web 2.0
  • 5.1 O que é Ajax?
  • 5.2 O papel do JavaScript
  • 5.3 Exemplo de aplicação Ajax
• 6 Ferramentas

2 HISTÓRICO DE JAVASCRIPT

2 Histórico de JavaScript

A linguagem JavaScript foi criada pela Netscape Communications Corporation^4

e foi desenvolvida com o nome de Mocha, depois passou a se chamar LiveScript

e foi finalmente lançada como JavaScript em 1995 integrando a versão 2.0B

do navegador Netscape e visava implementar uma tecnologia de processamento

modo cliente.

A denominação da linguagem, JavaScript, se deve a similaridades com a sin-

taxe do Java e embora as duas linguagens não tenham nenhuma outra relação

além desta, os nomes ainda causam confusão para alguns usuários.

Mais tarde, a linguagem tornou-se um padrão da ECMA (European Compu-

ter Manufacturers Association) que atualmente é seguido por outros desenvol-

vedores como os da Adobe com a linguagem ActionScript. A implementação da

Microsoft do ECMAScript é chamada de JScript ou ActiveScript, popularmente

conhecido como ActiveX, usada nos navegadores Internet Explorer.

JavaScript permite criar pequenos programas embutidos no próprio código

de uma página HTML e capazes de gerar números, processar alguns dados,

verificar formulários, alterar valor de elementos HTML e criar elementos HTML.

Tudo isso diretamente no computador cliente, evitando a troca de informações

com o servidor e o tempo passa a depender somente do processamento local do

cliente, não mais da latência da rede^5.

A versão mais recente da linguagem é a 1.7, até o momento de redação deste

documento. Esta versão 1.7 é suportada pela versão 2.0 do Mozilla Firefox, mas

versões anteriores continuam funcionando. Além disso, outras versões de testes

já estão sendo desenvolvidas, por exemplo, a versão, chamada de JavaScript

2.0, desenvolvida pela Mozilla que pode vir a se tornar padrão.

JavaScript é uma linguagem completa e poderosa que possui muitas das

qualidades de diversas outras linguagens, como: listas associativas, tipagem di-

nâmica^6 e expressões regulares de Perl e a sintaxe similar a C/C++, linguagens

de grande reconhecimento tanto no mundo acadêmico quanto comercialmente.

Além disso, JavaScript é multiparadigma e entre eles destacam-se a programa-

ção estrutural e orientada a objeto; possui funções de ordem superior; entre

outros.

Mesmo com o alto potencial de recursos para desenvolvimento de progra-

mas oferecido pela linguagem, grande parte das pessoas que usam JavaScript

(^4) Netscape foi uma companhia de serviços de computação bastante conhecida em função de

seu web browser, e atualmente é subsidiária da AOL. (^5) Latência de rede é a diferença de tempo do momento de envio de um pacote pela rede até o

momento em que ele é recebido no destino sendo normalmente este tempo o responsável pela demora ao se receber dados durante uma navegação na web por exemplo. (^6) Também conhecida de forma bem humorada como Duck Typing em referência ao Duck test -

"Se se move como um pato e faz barulho de pato, então deve ser um pato!".

2 HISTÓRICO DE JAVASCRIPT

não são programadores e isso lhe deu a reputação de ser uma linguagem para

amadores, o que não é verdade, como pode ser observado com o surgimento de

técnicas Ajax, que será explicado neste documento, e poderosas aplicações web.

Além disso, JavaScript se tornou o carro chefe da chamada Web 2.0 que também

será explicada mais adiante.

3 CONCEITOS

pos das variáveis são definidos. Nesse modo de tipagem, as variáveis podem

assumir qualquer tipo ou objeto definido pela linguagem, por exemplo, se

uma variável X receber um valor inteiro ela irá se comportar como uma

variável inteira, e se mais tarde X receber uma string passará a se com-

portar como uma string daquele ponto em diante. Assim, não é preciso

definir o tipo da variável no momento da sua declaração. O tipo da variável

é definido implicitamente pelo seu valor.

O contrário disso ocorre na tipagem estática, em que o tipo da variável

precisa ser definido antes de usá-la e isso é verificado em tempo de compi-

lação. Após declarada com seu tipo, nenhum valor de outro tipo pode ser

atribuído a ela, pois geraria um erro de compilação.

JavaScript é uma linguagem de programação de tipagem dinâmica.

Funções de ordem superior - são funções que recebem uma ou mais funções

como argumentos ou que têm uma função como saída. Com isso, é possível

criar o que são chamadas function factories que são funções que a partir de

outras funções simples são capazes de realizar ações mais complexas.

JavaScript é uma linguagem de programação que possibilita a definição de

funções de ordem superior.

Programação Client-side vs. Server-side - JavaScript é uma linguagem que

nasceu como Client-side (que roda no computador cliente) e tem sido muito

mais usada essa forma atualmente. Quando o programa é criado com esta

característica ele é enviado para o computador cliente ainda na forma de

código-fonte, que só então é interpretado e executado, dependendo assim

unicamente da capacidade de processamento do cliente.

Já o programa em uma linguagem Server-side, é executado no computador

Servidor e somente é enviado para o cliente o resultado da execução, sejam

dados puros ou uma página HTML.

Neste estudo, tratamos JavaScript apenas como uma linguagem de progra-

mação Client-side.

Segurança - por ser uma linguagem que é executada no computador do cliente,

o JavaScript precisa ter severas restrições para evitar que se façam códigos

maliciosos que possam causar danos ao usuário.

As principais limitações do JavaScript para garantia de segurança são a

proibição de:

• Abrir e ler arquivos diretamente da máquina do usuario
• Criar arquivos no computador do usuário (exceto cookies)

3 CONCEITOS

• Ler configurações do sistema do usuario
• Acessar o hardware do cliente
• Iniciar outros programas
• Modificar o valor de um campo de formulário do tipo

No entanto, essas limitações interferem muito pouco no desenvolvimento

de aplicações web sérias com a linguagem.

4 NÚCLEO DA LINGUAGEM JAVASCRIPT

Exemplo:

var a = 14; var b = 42; var tr = (a == 14); var fl = (a == b); // Neste caso tr irá conter o valor true e fl o valor false. var int1 = tr+1; var int2 = fl+1; // A variável int1 irá conter o valor 2 (true + 1), pois true é // automaticamente convertido para 1 e int2 irá conter o valor 1 // (false + 1), pois false é convertido para 0.

4.1.3 Indefinido

Uma variável é indefinida quando ela foi declarada de alguma forma mas não

possui nenhum valor concreto armazenado. Quando tentamos acessar uma

variável que não teve nenhum valor associado a ela teremos como retorno "un-

defined" (indefinido).

Exemplo:

var marvin; window.alert(marvin); // Quando tentamos imprimir a variável marvin na janela de alerta // será impresso "undefined" pois não há nenhum valor associado a ela. var text = ""; // O mesmo não ocorre com o caso acima, pois essa variável contém uma // sequência de caractéres nula e nada será impresso.

4.1.4 null

O null é a ausência de valor; quando atribuimos null a um objeto ou variável

significa que essa variável ou objeto não possui valor válido.

Para efeito de comparação, se usarmos o operador de igualdade "==", JavaS-

cript irá considerar iguais os valores null e undefined. E isso não afeta o uso

da comparação (var.metodo == null) quando queremos descobrir se um objeto

possui determinado método. No entanto, se for necessário diferenciar os dois

valores é recomendável o uso do operador "===" de identicidade. Assim, para

efeito de comparação, undefined e null são iguais, mas não idênticos.

Exemplo:

var vazio = null; var ind; var res = (vazio == ind); var res1 = (vazio === ind); // Quando executado a variável res terá o valor true // e res1 terá o valor false. E se tentarmos imprimir // a variável vazio, teremos null impresso.

4 NÚCLEO DA LINGUAGEM JAVASCRIPT

4.1.5 Strings

Strings são sequências de caractéres. Em JavaScript a string pode ser tanto

um tipo primitivo de dado como um objeto; no entanto, ao manipulá-la temos a

impressão de que sejam objetos pois as strings em JavaScript possuem métodos

que podemos invocar para realizar determinadas operações sobre elas. Essa

confusão ocorre porque quando criamos uma string primitiva, o JavaScript cria

também um objeto string e converte automaticamente entre esses tipos quando

necessário.

Este conceito será explicado melhor adiante, quando tratarmos de objetos.

Para se declarar uma string, basta colocar uma sequência de caractéres entre

aspas simples ou duplas.

Exemplo:

var str = "Eu sou uma string!"; var str2 = ’Eu também sou uma string’; // Declaração de strings primitivas var str3 = new String("Outra string"); // Acima um objeto string declarado de forma explícita // não há diferença nenhuma entre esses dois tipos no que se refere // a seu uso.

4.1.6 Arrays

Os Arrays são pares do tipo inteiro-valor para se mapear valores a partir de um

índice numérico. Em JavaScript os Arrays são objetos com métodos próprios.

Um objeto do tipo Array serve para se guardar uma coleção de ítens em uma

única variável.

Exemplo:

var arr = new Array(); // Por ser um objeto podemos usar o "new" em sua criação var arr = new Array(elem1,elem2, ... ,elemN); // Dessa forma criamos um array já iniciado com elementos. var arr = [1,2,3,4]; // outra forma é iniciar um array com elementos sem usar o "new". var arr = new Array(4); // Dessa forma criamos um array vazio de 4 posições.

Para acessar as variáveis dentro de um array basta usar o nome do array e o

índice da variável que se deseja acessar.

Exemplo:

arr[0] = "Até mais e obrigado pelos peixes"; arr[1] = 42; document.write(arr[1]); //imprime o conteúdo de arr[1]

4 NÚCLEO DA LINGUAGEM JAVASCRIPT

4.2.3 Bit a bit

Operador Operação Exemplo

& E (AND) (x & y)

| OU (OR) (x | y)

ˆ Ou Exclusivo (XOR) (x ˆ y)

˜ Negação (NOT) ˜ x

>> Deslocamento à direita (com propagação de sinal) (x >> 2)

<< Deslocamento à esquerda (preenchimento com zero) (x << 1)

>>> Deslocamento à direita (preenchimento com zero) (x >>> 3)

4.2.4 Atribuição

Operador Exemplo Equivalente

= x = 2 Não possui

+= x += y x = x + y

-= x -= y x = x - y

*= x *= y x = x ***** y

/= x /= y x = x / y

%= x %= y x = x % y

&= x &= y x = x & y

|= x |= y x = x | y

ˆ= x ˆ= y x = x ˆ y

>>= x >>= y x = x >>= y

<<= x <<= y x = x <<= y

>>>= x >>>= y x = x >>>= y

4.2.5 Lógicos

Operador Função Exemplo

&& E Lógico (x && y)

|| OU Lógico (x || y)

! Negação Lógica! x

4.3 Estruturas de controle

if ... else

A estrutura if é usada quando se deseja verificar se determinada expressão é

verdadeira ou não, e executar comandos específicos para cada caso.

4 NÚCLEO DA LINGUAGEM JAVASCRIPT

Exemplo 1:

var a = 12; var b = 5; if (a == b) { window.alert("12 é igual a 5?!?!"); } else { window.alert("a é diferente de b"); } // No caso acima a frase escrita seria "a é diferente de b"

Assim, se a expressão for avaliada como verdadeira, o primeiro bloco de

comandos é executado. Caso seja avaliada como falsa, o bloco de comandos que

segue o else será executado.

Também é possível aglomerar mais testes, utilizando-se o comando else if.

Exemplo 2:

var a = 10; if (a < 6) { window.alert("a menor que 6"); } else if (a > 6) { window.alert("a maior que 6"); } else { window.alert("se a não é maior nem menor que 6, a é 6!"); }

Outra forma possível de se utilizar o if é com sua forma abreviada como

na linguagem C, usando o operador ternário ?. Ele pode criar estruturas de

decisão simples em apenas uma linha de comando, porém, muitas vezes isso

pode prejudicar a clareza do seu código, tornando-o complicado de entender

para alguém que não esteja familiarizado com o uso desde operador condicional.

Exemplo:

var a = 8; (a >= 5? window.alert("yes") : window.alert("no"));

// Isso equivale ao código: var a = 5; if (a >= 5) { window.alert("yes"); } else { window.alert("no"); }

switch ... case

As estruturas do tipo switch são usadas quando queremos selecionar uma

opção dentre várias disponíveis.

4 NÚCLEO DA LINGUAGEM JAVASCRIPT

Exemplo:

var cont = [5,2]; do{ cont[0]+=1; cont[1]+=2; document.write(’cont0 = ’+cont[0]+’cont1 = ’+cont[1]); } while ((cont[0]+cont[1]) < 15) // Com o uso de do...while, no primeiro teste, cont[0]+cont[1] // já valerá 10, e os contadores já terao sido impressos uma vez // pois o laço já foi executado a primeira vez antes do teste!

for

Na maioria das vezes, quando usamos um laço do tipo while também construí-

mos uma estrutura com um contador que é incrementado a cada passo para

controle do laço e manipulação interna de objetos, arrays como nos exemplos

anteriores. Os laços for oferecem a vantagem de já possuírem em sua estrutura

essa variável de contador e incrementá-la de maneira implícita.

Exemplo:

var cont = [5,2,3]; for(var i=0 ; i < 3 ; i++) { cont[i]++; } // Ao final do laço cada elemento do vetor cont foi incrementado em 1

O significado do comando é for(variável de contador inicializada ; condição de

parada ; incremento da variável de contador).

for ... in

Existe uma segunda forma de se utilizar os laços for para percorrer propriedades

de um objeto.

Exemplo:

var doc = document; for(var prop in doc) { document.write(prop+"
"); } // Esse laço automaticamente itera pelas propriedades do objeto, // No caso ele listara todas as propriedades do objeto Document // responsavel pelo controle do documento exibido na tela. // Se olhar com cuidado encontrará nessa lista o proprio método // Write que usamos para imprimir no documento com document.write.

4.4 Funções

Funções possuem um papel muito importante na programação estrutural pelo

fato de ajudar muito na modularização no programa, ou seja, viabiliza a divisão

do programa em partes menores e logicamente relacionadas. Em JavaScript,

4 NÚCLEO DA LINGUAGEM JAVASCRIPT

existem diversas maneiras de se declarar uma função; mostraremos todas elas

aqui com exemplos.

Um ponto importante é que em JavaScript as funções são consideradas como

dados, ou seja, podemos atribuir uma função a uma variável ou propriedade de

um objeto e a partir desde momento usar a variável ou a propriedade da mesma

forma que se usaria a função. Elas também podem ser passadas como argumen-

tos para outras funções e por isso funções de JavaScript são chamadas funções

de alta ordem, elas podem tanto receber funções como argumento quanto retor-

nar uma função.

Expressão function

A primeira maneira de se declarar uma função é através do uso da palavra

chave function de maneira similar a como elas são declaradas na linguagem

C, com as diferenças de que em JavaScript não definimos o tipo de retorno

e nem mesmo o tipo dos argumentos. Uma função complexa pode ser capaz

de tratar argumentos diferentes e retornar argumentos diferentes dependendo

das circunstâncias nas quais foi invocada. Deve-se definir seu nome e seus

argumentos conforme mostra o exemplo a seguir.

Exemplo:

function incArray(array,valor) { for(item in array) { array[item]+=valor; } return array; } // Para invocar essa função depois basta usar incArray(arg1,arg2)

O construtor Function()

A segunda forma de se declarar uma função é utilizando o construtor Function()

e o operador new, pois em JavaScript funções e objetos são interligados.

Exemplo:

var areaTri = new Function("b","h","return (b*h)/2;"); // a função acima calcula a área de um triângulo dadas sua base // altura. Para invocá-la basta usar areaTri(arg1,arg2)

Esse construtor aceita um número qualquer de strings como argumentos. O

ultimo argumento será sempre o corpo da função contendo comandos separados

por ponto-e-virgula normalmente e todos os outros argumentos do construtor

serão considerados argumentos da função que se está criando. Devido a sua

4 NÚCLEO DA LINGUAGEM JAVASCRIPT

Para acessar uma propriedade de um objeto, basta usar objeto.propriedade e

no caso de métodos adicionar o operador ().

Podemos definir, como já foi dito, um construtor para um objeto, assim po-

demos inicializar atributos logo no momento da instanciação do objeto. Para

que um construtor inicialize um atributo, ele precisa ser referenciado através da

palavra-chave this.

Exemplo:

function Carro(modelo, marca, ano, motor) { this.modelo = modelo; this.marca = marca; this.ano = ano; this.motor = motor; } // Depois para instanciar um objeto, basta usar: var car = new Carro("G800" , "Gurgel" , 1976 , 1.0);

// Agora car já possui todos os atributos com dados: document.write("Carro: "+car.modelo); // o comando acima irá imprimir "Carro: G800"

Métodos

No paradigma de orientação a objetos, os métodos são simplesmente funções

que são invocadas por meio de um objeto! E em JavaScript isso é levado tão a

sério que a maneira de se criar métodos para seus objetos leva isso ao pé da

letra. Basta criarmos uma função e atribuí-la a uma propriedade do objeto.

Exemplo:

// Uma função fictícia para cálculo de um consumo de combustível function calc_consumo(distancia) { return distancia/(15/this.motor); }

// Agora atribuimos a função, sem os argumentos, para a // propriedade consumo. Considerando o objeto já instânciado // do exemplo anterior car.consumo = calc_consumo;

// Pronto! já podemos invocá-la fazendo: var gas = car.consumo(200); // calculando quanto o carro gastaria de // combustível em 200 kilômetros

Também podemos definir os métodos dentro do próprio construtor de uma

função, tanto definindo a função fora e atribuindo no construtor, como definindo

a própria função dentro do próprio construtor uma vez que JavaScript suporta

o aninhamento de funções.

4 NÚCLEO DA LINGUAGEM JAVASCRIPT

Prototypes

Quando declaramos ou atribuímos um método no construtor de um objeto ele

ficará disponível para todas as instâncias criadas a partir desse construtor. No

entanto, existe um modo muito mais eficiente de se fazer isso, que é com o uso

da propriedade prototype. Tudo o que for definido no prototype de um objeto

poderá ser referenciado por todas as instâncias desse objeto. Mesmo as pro-

priedades do prototype que forem definidas ou alteradas depois da instanciação

serão acessíveis aos objetos declarados anteriormente. Além disso, é importante

ter em mente que os atributos e funções declarados no prototype não são copia-

dos para os objetos, portanto há uma economia significativa de memória quando

usamos muitas propriedades compartilhadas e instâncias.

Exemplo:

// Vamos elaborar mais o exemplo do carro, mas dessa // vez usando prototype

function calc_consumo(distancia) { return distancia/(15/this.motor); }

// Classe que representa um carro function Carro(modelo, marca, ano, motor) { this.modelo = modelo; this.marca = marca; this.ano = ano; this.motor = motor; }

Carro.prototype.rodas = 4; Carro.prototype.consumo = calc_consumo; // Agora a classe possui uma constante que informa // o número de rodas e o método consumo em seu // prototype

var car1 = new Carro("G800" , "Gurgel" , 1976 , 1.0); var car2 = new Carro("147" , "Fiat" , 1984 , 2.0);

// Podemos acessar agora tanto a constante rodas // quanto o método consumo if(car1.rodas == 4) window.alert("ainda bem!"); var gas = car2.consumo(180); // e o mais importante é que ambas estão acessando // apenas uma única constante e um único método // na memória

Arrays Associativos

Para finalizar nossa discussão sobre objetos, vamos mostrar como eles podem

ser usados como arrays associativos, ou seja, um array com objetos indexados

por valores não numéricos. Isso só pode ser feito porque é possível acessarmos

atributos de um objeto usando MeuObjeto["atributo"]. Assim podemos simular

o comportamento de um array associativo armazenando cada item em um atri-