Aula 05 - Java Script Básico

UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO

DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1

Fábio M. Pereira

([email protected])

Roteiro

• O que é JavaScript?

• JavaScript em HTML

• Conceitos Básicos da Linguagem – Sintaxe

– Palavras-chave e palavras reservadas

– Variáveis

– Tipos de dados

– Operadores

– Instruções

– Funções

• Variáveis, Escopo e Memória

• Tipos de Referência

O que é JavaScript?

• JavaScript foi criada em 1995 pela Netscape com a finalidade de validação de entrada de dados do lado cliente – Na época as conexões eram lentas e qualquer chamada ao servidor

era um exercício de paciência

• Desde aquele tempo, JavaScript cresceu como uma característica importante dos principais navegadores do mercado

• Não estando mais limitada à simples validação de dados, agora JavaScript interage com quase todos os aspectos da janela do navegador e o seu conteúdo

• É considerada uma linguagem de programação completa, capaz de realizar cálculos e interações complexos – É ao mesmo tempo uma linguagem muito simples e muito

complicada que se leva minutos para aprender, mas anos para dominar

Breve Histórico

• Quando a Web começou a ganhar popularidade, quando usuários eram conectados via modem a uma velocidade de 28.8 kbps, a validação de formulários era muita lenta – Imagine aguardar 30s de processamento após submeter um

formulário e então receber uma mensagem indicando que esquecemos de preencher um campo obrigatório

• A Netscape começou então, o desenvolvimento de uma linguagem de script chamada Mocha, e depois de LiveScript, para ser lançada em 1995 com o Netscape Navigator 2

• A Netscape então entrou em uma aliança com a Sun Microsystems para completar a implementação de LiveScript a tempo do lançamento

• Apenas antes do lançamento oficial do Netscape Navigator 2, a Netscape mudou o nome para JavaScript, a fim de captalizar o alvoroço da imprensa com a linguagem Java

Breve Histórico

• Como JavaScript 1.0 foi um sucesso, a Netscape lançou a versão 1.1 com o Netscape Navigator 3

• A Microsoft decidiu então colocar mais recursos em seu navegador concorrente: – Lançou junto com o Internet Explorer 3 uma implementação de

JavaScript chamada JScript em 1996

• Como haviam três versões diferentes de JavaScript, ficou decidido que a mesma deveria ser padronizada – Em 1997, JavaScript 1.1 foi submetida ao European Computer

Manufacturers Association (Ecma) com essa finalidade

– ECMA-262 definiu o padrão de uma nova linguagem de script, a ECMAScript

• No ano seguinte, a ISO/IEC também adotou ECMAScript como um padrão (ISO/IEC-16262)

Implementações de JavaScript

• Embora JavaScript e ECMAScript sejam geralmente usadas como sinônimos, JavaScript é muito mais do que apenas o que está definido em ECMA-262

• Na verdade, uma completa implementação de JavaScript é feita de três partes distintas:

– O núcleo (core) – ECMAScript

– O Document Object Model (DOM)

– O Browser Object Model (BOM)

JavaScript

ECMAScript DOM BOM

ECMAScript

• ECMAScript, a linguagem definida em ECMA-262, não está atrelada a navegadores Web

• De fato, a linguagem não possui métodos para entrada ou saída

• ECMA-262 define esta linguagem como uma base sobre a qual linguagens de script mais robustas possam ser construídas

• Navegadores Web são apenas um ambiente hospedeiro no qual uma implementação de ECMAScript pode existir – Um ambiente hospedeiro fornece a implementação base de ECMAScript e

implementação de extensões projetadas para realizar a interface com o ambiente

• Extensões, como DOM, usa tipos e sintaxe de ECMAScript para fornecer funcionalidade adicional que é mais específica ao ambiente

• Outros ambientes hospedeiros incluem NodeJS, uma plataforma JavaScript do lado servidor, e Adobe Flash

ECMAScript

• ECMA-262 descreve as seguintes partes da linguagem: – Sintaxe

– Tipos

– Instruções

– Palavras-chave

– Palavras reservadas

– Operadores

– Objetos

• ECMAScript é simplesmente uma descrição de uma linguagem implementando todas as facetas descritas na especificação

• JavaScript implementa ECMAScript, assim como a Adobe ActionScript

Document Object Model (DOM)

• O DOM é uma API para XML que foi estendida para uso em HTML

• O DOM mapeia uma página inteira como uma hierarquia de nós

– Cada parte de uma página HTML ou XML é um tipo de um nó contendo diferentes tipos de dados

• Através da criação de uma árvore para representar um documento, o DOM permite que desenvolvedores tenham um nível de controle sem precedente sobre seu conteúdo e estrutura

– Nós podem ser adicionados, removidos, substituídos e modificados facilmente através da API DOM

Hierarquia de Nós do DOM

<html>

<head>

<title>Sample Page</title>

</head>

<body>

<p>Hello World!</p>

</body>

</html>

Browser Object Model (BOM)

• O BOM permite acesso e manipulação da janela do navegador

• Usando o BOM, desenvolvedores podem interagir com o lado de fora do navegador, no contexto da página mostrada

• O que tornou o BOM verdadeiramente único e geralmente problemático foi o fato de ser a única parte da implementação de JavaScript que não possui padrão relacionado – Isto mudou com a introdução do HTML5, que buscou codificar

muito do BOM como parte de uma especificação formal

– Graças ao HTML5, muito da confusão em torno do BOM foi dissipada


• Fundamentalmente, o BOM lida com a janela do navegador e frames, mas geralmente qualquer extensão específica do navegador é considerada como uma parte do BOM

• São exemplo de algumas extensões: – A capacidade de abrir (pop up) novas janelas do navegador

– A capacidade de mover, modificar o tamanho e fechar janelas do navegador

– O objeto navigator, que fornece informação detalhada sobre o navegador

– O objeto location, que dá informação detalhada sobre a página carregada no navegador

– O objeto screen, que dá informação detalhada sobre a resolução da tela do usuário


• São exemplo de algumas extensões (cont.):

– Suporte a cookies

– Objetos customizados como XMLHttpRequest e o ActiveXObject do Internet Explorer

• Uma vez que não há padronização existente para o BOM, cada navegador possui a sua própria implementação

• Existem algumas padronizações de fato, como o objeto window e o objeto navigator, mas cada navegador define suas propriedades e métodos próprios

• Com o HTML5 agora disponível, detalhes de implementação do BOM são esperados de uma maneira muito mais compatível

Versões de JavaScript

O Elemento <script>

• O método principal para inserir JavaScript em uma página HTML é via o elemento <script>

• Existem seis atributos para o elemento <script>: – async – opcional, indica que o script deve iniciar o download

imediatamente, mas não previne outras ações na página como baixar recursos ou esperar que outros scripts sejam carregados; válido apenas em arquivos de script externos

– charser – opcional, o conjunto de caracteres do código especificado usando o atributo src; raramente usado, pois muitos navegadores raramente respeitam esse valor

– defer – opcional, indica que a execução do script pode de maneira segura ser adiada até que o conteúdo do documento tenha sido completamente analisado e mostrado; válido apenas para scripts externos

O Elemento <script>

• Existem seis atributos para o elemento <script>:

– language – em desuso, originalmente indicava a linguagem de script utilizada pelo bloco de código (como “JavaScript”, “JavaScript1.2”, ou “VBScript”); a maioria dos navegadores ignora este atributo, não devendo ser utilizado

– src – opcional, indica um arquivo externo que contém código a ser executado

– type – opcional, substitui language; indica o tipo de conteúdo (também chamado tipo MIME) da linguagem de script usada no bloco de código; tradicionalmente, este valor tem sido sempre “text/javascript”

O Elemento <script>

• Existem duas maneiras de usar o elemento <script>: embarcando código JavaScript diretamente na página ou incluindo JavaScript a partir de um arquivo externo

• Para incluir código interno, coloque o código JavaScript dentro do elemento <script> diretamente:

<script type=”text/javascript”>

function sayHi(){

alert(“Hi!”);

}

</script>

• O código é interpretado de cima para baixo

• O resto do conteúdo da página não será carregado ou mostrado até que todo o código dentro do elemento <script> seja avaliado

O Elemento <script>

• Quando utilizarmos código interno, a string “</script>” não pode aparecer em nenhum lugar do código

• Por exemplo, o código a seguir causaria um erro: <script type=”text/javascript”>

function sayScript(){

alert(“</script>”);

}

</script>

• O problema pode ser resolvido com: <script type=”text/javascript”>

function sayScript(){

alert(“<\/script>”);

}

</script>

O Elemento <script>

• Para incluir JavaScript de um arquivo externo, o atributo src é necessário – O valor de src é uma URL para o arquivo contendo código JavaScript

<script type=”text/javascript”

src=”example.js”></script>

• Da mesma forma que o código interno, o processamento da página é interrompido enquanto o arquivo externo é interpretado

• Em XHTML podemos omitir a tag de fechamento: <script type=”text/javascript” src=”example.js” />

• O atributo src do elemento <script> pode incluir uma URL completa para um domínio externo da página, embora não seja recomendado:


src=”http://www.somewhere.com/afile.js”>

</script>

Localização da tag

• Tradicionalmente, todos os elementos <script> são colocados no elemento <head> de uma página:

<!DOCTYPE html>

<html>

<head>

<title>Example HTML Page</title>


src=”example1.js”></script>



</head>

<body>



</body>

</html>

• O objetivo principal é manter referências a arquivos externos, como arquivos CSS e JavaScript, na mesma área


• Entretanto, colocar todo o código JavaScript no início do documento significa que todo o código deve ser carregado, analisado e interpretado antes da renderização da página (que inicia a partir da tag <body>)

• Para páginas com muito código, isto pode causar uma demora notável, durante a qual o navegador irá mostrar uma página completamente em branco


• Por este motivo, aplicações Web modernas tipicamente incluem toda referência a JavaScript no elemento <body>, após o conteúdo da página:

<!DOCTYPE html>

<html>

<head>


</head>

<body>






</body>

</html>

Scripts Adiados

• HTML 4.01 define um atributo chamado defer para o elemento <script>

• O objetivo é indicar que um script não irá mudar a estrutura da página quando for executado, assim, o script pode ser executado de maneira segura após a análise de toda a página – Indica que o download pode ser iniciado imediatamente, mas a execução

deve ser adiada <!DOCTYPE html>

<html>

<head>


<script type=”text/javascript” defer


<script type=”text/javascript” defer


</head>

<body>


</body>

</html>

Scripts Assíncronos

• HTML5 introduziu o atributo async para elementos <script>

• É similar a defer por modificar a maneira como o script é processado

• Assim como defer, async é aplicado apenas a scripts externos e indica ao navegador para iniciar o download do arquivo imediatamente

• Diferentemente de defer, scripts marcados com async

não garantem que a execução seja na ordem em que são especificados

Scripts Assíncronos

• No exemplo: <!DOCTYPE html>

<html>

<head>


<script type=”text/javascript” async


<script type=”text/javascript” async


</head>

<body>


</body>

</html>

• O segundo script pode ser executado antes do primeiro, então é importante que não haja dependência entre os dois

Código Interno vs. Arquivos Externos

• Embora seja possível embarcar código JavaScript em arquivos HTML diretamente, geralmente é considerado uma prática melhor incluir JavaScript tanto quanto for possível, usando arquivos externos, dados os seguintes argumentos: – Manutenibilidade – código JavaScript espalhado através de vários

arquivos HTML torna a manutenção um problema; é muito mais fácil ter uma pasta para todos os arquivos JavaScript de maneira que o código possa ser editado independentemente do HTML em que é utilizado

– Caching – navegadores armazenam todo arquivo JavaScript externamente ligado de acordo com atributos específicos, fazendo com que se duas páginas utilizarem o mesmo arquivo, o mesmo seja carregado apenas uma vez

– Teste futuro – a sintaxe para inclusão de arquivos externos é a mesma tanto em HTML como em XHTML, não precisando de cuidados adicionais

O Elemento <noscript>

• O elemento <noscript> foi criado para fornecer conteúdo alternativo para navegadores que não dão suporte a JavaScript ou que o suporte esteja desligado

• Por exemplo: <!DOCTYPE html>

<html>

<head>


<script type=”text/javascript” defer=”defer”


<script type=”text/javascript” defer=”defer”


</head>

<body>

<noscript>

<p>This page requires a JavaScript-enabled browser.</p>

</noscript>

</body>

</html>

Conceitos Básicos da Linguagem

• No núcleo de qualquer linguagem está a descrição de como ela deve funcionar no seu nível mais básico

• Esta descrição tipicamente define sintaxe, operadores, tipos de dados e funcionalidade interna sobre os quais soluções complexas podem ser construídas

• Aqui veremos: – Sintaxe

– Palavras-chave e palavras reservadas

– Variáveis

– Tipos de dados

– Operadores

– Instruções

– Funções

Sintaxe – Sensibilidade à Caixa

• Tudo é sensível à caixa: variáveis, nomes de função e operadores

– Uma variável chamada teste é diferente de uma variável chamada Teste

• Da mesma maneira, typeof não pode ser o nome de uma função, porque é uma palavra-chave, embora typeOf é perfeitamente válido como nome de função

Sintaxe – Identificadores

• Um identificador é o nome de uma variável, função, propriedade ou argumento de função

• Identificadores podem possuir um ou mais caracteres no seguinte formato: – O primeiro caractere deve ser uma letra, um underscore (_) ou um

sinal de cifrão ($)

– Todos os outros caracteres devem ser letras, underscores, cifrões ou números

• Letras em um identificador podem incluir caracteres de letras ASCII ou Unicode estendidos, como À e Æ, embora não seja recomendado

• Por convenção, identificadores ECMAScript utilizam o formato conhecido como camel case, com a primeira letra minúscula e cada palavra adicional iniciando com uma letra maiúscula: – firstSecond, myCar, doSomethingImportant

Sintaxe – Comentários

• ECMAScript usa comentários no estilo da linguagem C tanto para comentários de uma única linha (//) como em comentários de bloco (/* e */):

//single line comment

/*

* This is a multi-line

* Comment

*/

Sintaxe – Modo Estrito

• ECMAScript 5 introduziu o conceito de modo estrito – um modo de análise e execução diferente para JavaScript, onde é dirigido a algum comportamento errado de ECMAScript 3 e erros são disparados para atividades não seguras

• Para habilitar o modo estrito para todo o script, devemos incluir a seguinte instrução no topo:

“use strict”;

• Podemos também especificar que apenas uma função seja executada no modo estrito:

function doSomething(){

“use strict”;

//function body

}

Sintaxe – Instruções

• Instruções em ECMAScript são terminadas por um ponto e vírgula, embora omiti-lo faz com que o analisador (parser) determine onde o fim da instrução ocorre:

var sum = a + b

// válido mesmo sem o ponto e vírgula – não recomendado

var diff = a - b; // válido- preferido

• Mesmo que um ponto e vírgula não seja obrigatório no fim de instruções, é recomendado sempre inclui-lo:

– Ajuda a prevenir erros por omissão

– Aumenta a performance em certas situações


• Múltiplas instruções podem ser combinadas em um bloco de código através do uso da sintaxe ao estilo C, entre chaves ({ e }):

if (test){

test = false;

alert(test);

}

• Instruções de controle, como em if, requerem blocos de código apenas quando executando múltiplas instruções


• Entretanto, se consideramos as melhores práticas de programação, sempre use blocos de código com instruções de controle, mesmo quando apenas uma instrução for executada

– Torna a intenção mais clara e há menos chance de erros quando mudanças forem necessárias

if (test)

alert(test); // válida

if (test){ // preferida

alert(test);

}

Palavras-Chave e Palavras Reservadas

• ECMA-262 descreve um conjunto de palavras-chave de uso específico, como indicar o início ou fim de instruções de controle ou realizar alguma operação específica

• Palavras-chave são reservadas e não podem ser usadas como identificadores ou nomes de propriedades

• Segue a lista completa de palavras-chave (aquelas com um asterisco foram adicionadas na quinta edição):

break do instanceof typeof

case else new var

catch finally return void

continue for switch while

debugger* function this with

default if throw

delete in try


• A especificação também descreve um conjunto de palavras reservadas que não podem ser usadas como identificadores ou nomes de propriedades

• Estas palavras não possuem qualquer uso específico na linguagem, elas são reservada para uso futuro como palavras-chave

• Segue a lista completa de palavras reservadas definidas em ECMA-262, terceira edição:

abstract enum int short

boolean export interface static

byte extends long super

char final native synchronized

class float package throws

const goto private transient

debugger implements protected volatile

double import public


• A quinta edição reduziu a lista de palavras reservadas quando em execução em modo não estrito para:

class enum extends super

const export import

• Quando em modo estrito, a quinta edição também coloca restrições de palavra reservada em:

implements package public

interface private static

let protected yield

Variáveis

• Variáveis em ECMAScript são fracamente tipadas, significando que uma variável podo conter qualquer tipo de dado

• Uma variável é simplesmente um nome de um local reservado para um valor

• Para definir uma variável, utilizamos o operador var

seguido pelo nome da variável (um identificador), como em:

var message;

– Este código define uma variável chamada message, que pode ser usada para conter qualquer valor

– Sem inicialização, ela contem o valor especial undefined

Variáveis

• ECMAScript implementa a inicialização de variáveis, assim é possível definir a variável e atribuir o seu valor ao mesmo tempo, como no exemplo:

var message = “hi”;

• Fazer esta inicialização não marca a variável como sendo do tipo string – simplesmente atribui um valor à variável

• Ainda é possível não apenas mudar o valor armazenado, como também o tipo do valor, como em:

var message = “hi”;

message = 100; //legal, mas não recomendado

Variáveis

• É importante notar que usar o operador var para definir uma variável a torna local ao escopo em que foi definida

• Por exemplo, definir uma variável dentro de uma função usando var significa que a variável é destruída assim que a função termina, como em:

function test(){

var message = “hi”; // variável local

}

test();

alert(message); //erro!

Variáveis

• Entretanto, é possível definir uma variável globalmente, simplesmente omitindo o operador var, como a seguir:

function test(){

message = “hi”; // variável global

}

test();

alert(message); // ”hi”

• Esta abordagem não é recomendável: – Variáveis globais definidas localmente são difíceis de manter e

causam confusão porque não está imediatamente aparente se a omissão de var foi intencional

• Em modo estrito, um ReferenceError é chamado quando é atribuído um valor a uma variável não declarada

Variáveis

• Se precisarmos definir mais de uma variável, podemos fazê-lo em uma única instrução, separando cada variável (e inicialização opcional) com uma vírgula:

var message = “hi”,

found = false,

age = 29;

Tipos de Dados

• Existem cinco tipo de dados simples (também chamados de tipos primitivos) em ECMAScript: Undefined, Null, Boolean, Number e String

• Existe também um tipo de dado complexo chamado Object, que é uma lista não ordenada de pares nome-valor

• Como não há maneira de definição de tipos de dados próprios em ECMAScript, todos os valores podem ser representados como um dos seis

• Ter apenas seis tipos de dados pode parecer pouco para representar dados completamente, entretanto os tipos de dados de ECMAScript possuem aspectos dinâmicos que fazem com que cada tipo de dado se comporte como vários

O Operador typeof

• Como ECMAScript é fracamente tipada, existe uma maneira de determinar o tipo de dados de uma dada variável

• O operador typeof fornece esta informação

• Usar o operador typeof em um valor retorna uma das seguintes strings: – “undefined” se o valor não está definido

– “boolean” se o valor é um booleano

– “string” se o valor é uma string

– “number” se é um valor numérico

– “object” se o valor é um objeto ou null

– “function” se o valor é uma função

O Operador typeof

• Podemos chamar o operador typeof como a seguir: var message = “some string”;

alert(typeof message); // ”string”

alert(typeof(message)); // ”string”

alert(typeof 95); // ”number”

• Note que como typeof é um operador e não uma função, os parênteses não são requeridos, embora possam ser utilizados

• Chamar typeof null retorna um valor “object”, uma vez que o valor especial null é considerado uma referência a um objeto vazio

• No Safari e no Chrome, chamar typeof em uma expressão regular retorna “function” enquanto nos outros navegadores retorna “object”

O Tipo Indefinido

• Possui apenas um valor, que é o valor especial undefined

• Quando uma variável é declarada usando var, mas não inicializada, é atribuído o valor undefined, como a seguir:

var message;

alert(message == undefined); // true

• Um outro exemplo: var message = undefined;

alert(message == undefined); // true

O Tipo Indefinido

• Note que uma variável contendo o valor undefined é diferente de uma variável que não foi declarada:

var message; //declarada mas com valor não definido

//certifique-se de que a variável não foi declarada

//var age

alert(message); // ”undefined”

alert(age); // causa um erro

O Tipo Indefinido

• O operador typeof retorna “undefined” quando uma variável não foi inicializada, mas também retorna “undefined” quando chamado em uma variável que não foi declarada, o que pode ser um pouco confuso

• Considerando o exemplo: var message; //variável declarada mas com valor

//undefined

//certifique-se de que a variável não foi declarada

//var age

alert(typeof message); // ”undefined”

alert(typeof age); // ”undefined”

O Tipo Null

• O segundo tipo de dado que possui apenas um valor: o valor especial null

• Logicamente, um valor null é um ponteiro para um objeto vazio

– Motivo pelo qual typeof retorna “object” quando passado um valor null, como no exemplo: var car = null;

alert(typeof car); // ”object”

• Outro exemplo: if (car != null){

// faça alguma coisa com car

}

O Tipo Null

• O valor undefined é uma derivativa de null, assim ECMA-262 define que eles são superficialmente iguais, como em:

alert(null == undefined); // true

• Usar o operador de igualdade (==) entre null e undefined sempre retorna true, assim tenha em mente que este operador converte seus operandos com o propósito de comparação

O Tipo Booleano

• É um dos tipos mais frequentemente usados em ECMAScript e possui apenas dois valores literais: true e false

• Estes são distintos de valores numéricos, assim true não é igual a 1 e false não é igual a 0

• Embora existam apenas dois valores literais booleanos, todos os tipos de valores possuem equivalente booleanos

• Para converter um valor para seu equivalente booleano, a função de conversão especial Boolean() é chamada:

var message = “Hello world!”;

var messageAsBoolean = Boolean(message);

O Tipo Booleano

• Conversões dos tipos de dados para booleano:

• Instruções de controle de fluxo fazem esta conversão automaticamente:

var message = “Hello world!”;

if (message){

alert(“Value is true”);

}

TIPO DE DADO VALORES CONVERTIDOS PARA TRUE

VALORES CONVERTIDOS PARA FALSE

Boolean true false

String Qualquer string não vazia “” (string vazia)

Number Qualquer número diferente de zero (incluindo infinito)

0, NaN

Object Qualquer objeto null

Undefined --- undefined

O Tipo Number

• Talvez o tipo mais interessantes em ECMAScript, utiliza o formato IEEE-754 para representar valores inteiros e de ponto flutuante

• Para dar suporte aos vários tipos de números, existem vários formatos literais de números diferentes

• Inteiro literal: var intNum = 55; // inteiro

• Inteiro octal (o primeiro dígito deve ser zero, seguido por uma sequência de dígitos octais):

var octalNum1 = 070; //octal para 56

var octalNum2 = 079; //octal inválido - 79

var octalNum3 = 08; //octal inválido – 8

• Octais inválidas irão causar um erro em modo estrito

O Tipo Number

• Inteiro hexadecimal (dois caracteres 0x, seguidos por quaisquer dígitos hexadecimais):

var hexNum1 = 0xA; //hexadecimal para 10

var hexNum2 = 0x1f; //hexedecimal para 31

• Números criados no formato octal ou hexadecimal são tratados como números decimais em todas as operações aritméticas

Números de Ponto Flutuante

• Para definir um número de ponto flutuante, basta incluirmos um ponto decimal e pelo menos um número após o ponto

• Embora um inteiro não seja necessário antes do ponto, é recomendado

var floatNum1 = 1.1;

var floatNum2 = 0.1;

var floatNum3 = .1; //válido, mas não recomendado

• Como é utilizada duas vezes mais memória para armazenar pontos flutuantes que inteiros, sempre que possível, ECMAScript irá tentar a conversão:

var floatNum1 = 1.; // inteiro 1

var floatNum2 = 10.0; // inteiro 10


• Para números muito grandes ou muito pequenos, podemos usar a notação e

var floatNum = 3.125e7; //igual a 31.250.000

• A notação e também pode ser utilizada para representar número muito pequenos, como 0.00000000000000003, que pode ser escrito de maneira sucinta 3e-17

• Valores de ponto flutuante possuem uma precisão de 17 casas decimais, mas são menos precisos que números completos

• Por exemplo, adicionar 0.1 a 0.2 produz 0.30000000000000004 em vez de 0.3


• Este tipo de erro no arredondamento, causado pela forma como a IEEE-754 realiza aritmética de pontos flutuantes, torna difícil testar para valores específicos, como no exemplo:

if (a + b == 0.3){ // evitar!

alert(“You got 0.3.”);

}

• Irá funcionar para 0.05 e 0.25, e para 0.15 e 0.15, mas não para 0.1 e 0.2, como visto anteriormente

Faixa de Valores

• Por restrição de memória, nem todos os números podem ser representados em ECMAScript

• O menor número que pode ser representado é armazenado em Number.MIN_VALUE, e corresponde a 5e-324 na maioria dos navegadores

• O maior número é armazenado em Number.MAX_VALUE e é 1.7976931348623157e+308 na maioria dos navegadores

• Se o resultado de um cálculo é um número que não pode ser representado pela faixa de valores de JavaScript, ele automaticamente recebe o valor especial Infinity

(-Infinity para valores negativos)

Faixa de Valores

• Para determinar se um valor é finito existe a função isFinite():

var result = Number.MAX_VALUE + Number.MAX_VALUE;

alert(isFinite(result)); // false

NaN

• Valor numérico especial NaN (Not a Number), usado para indicar quando uma operação tentou retornar um número e falhou (oposto de gerar um erro)

• Por exemplo, dividir qualquer número por zero tipicamente causa um erro em outras linguagens de programação, abortando a execução do código

• Em ECMAScript, dividir um número por zero retorna NaN, o que permite que o processamento continue

• Propriedades de NaN: – Qualquer operação envolvendo NaN sempre retorna NaN (por

exemplo, NaN/10)

– NaN não é igual a nenhum valor, inclusive NaN (por exemplo, alert(NaN == NaN); // false)

NaN

• A função isNaN() recebe um único argumento, que pode ser de qualquer tipo de dado, para determinar se o valor “não é um número” – qualquer valor que não pode ser convertido para um número faz com que a função retorne true alert(isNaN(NaN)); //true

alert(isNaN(10)); //false - 10 é um número

alert(isNaN(“10”)); //false – pode ser convertido

alert(isNaN(“blue”)); //true – não pode ser convertido

alert(isNaN(true)); //false – pode ser convetido para 1

• Se aplicada a objetos, o método valueOf() é inicialmente chamado para determinar se o valor retornado pode ser convertido para um número, se não, o método toString() é chamado e o valor testado

Conversões de Números

• Existem três funções para conversão de valores não numéricos para números: Number(), parseInt() e parseFloat()

• Number()

– Pode ser usada em qualquer tipo de dado

– Valores booleanos retornam 1 e 0 para true e false, respectivamente

– Números retornam o próprio valor

– null retorna 0

– undefined retorna NaN

– Se a string contém apenas números, ela é sempre convertida para um número decimal (zeros à esquerda são ignorados)


• Number()

– Se a string contém um formato de ponto flutuante válido, como em “1.1”, ela é convertida no valor numérico apropriado

– Se a string contém um formato hexadecimal válido, como em “0xf”, ela é convertida para o número inteiro correspondente

– Uma string vazia é convertida para 0

– Qualquer outra string é convertida para NaN

• Exemplos: var num1 = Number(“Hello world!”); //NaN

var num2 = Number(“”); //0

var num3 = Number(“000011”); //11

var num4 = Number(true); //1


• parseInt()

– Recebe uma string como argumento

– Ignora espaços iniciais, até que o primeiro caractere diferente de espaço seja encontrado, se não for o sinal de mais, menos ou um número, retornará NaN

– Uma string vazia retorna NaN

– Quando encontra um caractere válido, a conversão continua até o fim da string ou até que um caractere não numérico seja encontrado

– Reconhece os formatos decimal, octal e hexadecimal

• Exemplos: var num1 = parseInt(“1234blue”); //1234

var num2 = parseInt(“”); //NaN

var num3 = parseInt(“0xA”); //10 - hexadecimal

var num4 = parseInt(22.5); //22

var num5 = parseInt(“70”); //70 - decimal

var num6 = parseInt(“0xf”); //15 - hexadecimal


• parseInt()

– Podemos passar um radical como segundo argumento da função para mudar a conversão

• Exemplos: var num1 = parseInt(“10”, 2); // 2 - binário

var num2 = parseInt(“10”, 8); // 8 - octal

var num3 = parseInt(“10”, 10); // 10 - decimal

var num4 = parseInt(“10”, 16); // 16 - hexadecimal


• parseFloat()

– Similar a parseInt(), recebe uma string como argumento e tenta realizar a conversão para um número de ponto flutuante

– Um primeiro ponto decimal é válido, mas um segundo ponto, caso seja encontrado, é ignorado juntamente com o resto da string

– Zeros iniciais são sempre ignorados

• Exemplos: var num1 = parseFloat(“1234blue”); //1234 - inteiro

var num2 = parseFloat(“0xA”); //0

var num3 = parseFloat(“22.5”); //22.5

var num4 = parseFloat(“22.34.5”); //22.34

var num5 = parseFloat(“0908.5”); //908.5

var num6 = parseFloat(“3.125e7”); //31250000

O Tipo String

• Uma sequência de nenhum ou mais caracteres Unicode 16-bit

• Podem ser delineadas por aspas duplas ou simples, assim as duas instruções são legais:

var firstName = “Nicholas”;

var lastName = ‘Zakas’;

var firstName = ‘Nicholas”; // erro

• Inclui vários caracteres literais para representar caracteres não imprimíveis ou outros caracteres úteis

var text = “This is the letter sigma: \u03a3.”;

Caracteres Literais

LITERAL SIGNIFICADO

\n Nova linha

\t Tab

\b Backspace

\r Carriage return

\f Form feed

\\ Barra invertida (\)

\’ Aspas simples (‘) - ‘He said, \’hey.\’’

\” Aspas duplas (“) - “He said, \”hey.\””

\xnn Um caractere representado por seu código hexadecimal nn (onde n é um dígito hexadecimal 0-F) - \x41 é equivalente a “A”

\unnnn Um caractere Unicode representado por seu código hexadecimal nnnn (onde n é um dígito hexadecimal 0-F) - \u03a3 é equivalente ao caractere grego

O Tipo String

• A propriedade length retorna o tamanho de uma string: var text = “This is the letter sigma: \u03a3.”;

alert(text.length); //imprime 28

• String são imutáveis em ECMAScript, ou seja, uma vez criada, seu valor não pode mudar

• No exemplo a seguir, a string original é destruída e a variável é preenchida com uma outra string contendo o novo valor, causando ineficiência em alguns navegadores:

var lang = “Java”;

lang = lang + “Script”;

Conversão para String

• Existem duas maneiras de converter valores para uma string

• A primeira é usar o método toString() que quase todo valor possui

var age = 11;

var ageAsString = age.toString(); //the string “11”

var found = true;

var foundAsString = found.toString(); // “true”

• O método toString() está disponível em valores que são números, booleanos, objetos e strings

– Se um valor é null ou undefined, este método não está disponível


• Geralmente, toString() não possui argumentos, embora quando utilizado em um valor numérico, aceite um único argumento: o radical de saída do número:

var num = 10;

alert(num.toString()); //”10”

alert(num.toString(2)); //”1010”



alert(num.toString(16)); //”a”


• Se não estivermos certos de que um valor não é null ou undefined, podemos usar a função de conversão String(), que sempre retorna uma string, independente do tipo do valor

• A função String() segue as seguintes regras:

– Se o valor possui o método toString(), ele é chamado (sem argumentos) e o resultado é retornado

– Se o valor é null, “null” é retornado

– Se o valor é undefined, “undefined” é retornado

• Também podemos converter um valor para uma string adicionando uma string vazia (“”) ao valor usando o operador mais


• Exemplos: var value1 = 10;

var value2 = true;

var value3 = null;

var value4;

alert(String(value1)); //”10”

alert(String(value2)); //”true”

alert(String(value3)); //”null”

alert(String(value4)); //”undefined”

O Tipo Objeto

• Objetos são criados com o uso do operador new seguido do nome do tipo de objeto a ser criado

var o = new Object();

• O formato é similar a Java, embora ECMAScript requer o uso de parênteses apenas quando argumentos forem fornecidos ao construtor

var o = new Object; //legal, mas não recomendado

• O tipo Object é a base para todos os outros objetos

– Todas as propriedades e métodos do tipo Object também estão presentes em outros objetos mais específicos

Propriedades e Métodos de Object

• constructor

– A função que foi usada para criar o objeto

– No exemplo anterior, a função Object()

• hasOwnProperty(propertyName)

– Indica se uma determinada propriedade existe na instância do objeto (não no protótipo)

– O nome da propriedade deve ser especificado como uma string, por exemplo, o.hasOwnProperty(“name”)

• isPrototypeOf(object)

– Determina se o objeto é um protótipo de outro

• propertyIsEnumerable(propertyName)

– Indica se uma dada propriedade pode ser enumerada através da instrução for-in

Propriedades e Métodos de Object

• toLocaleString()

– Retorna uma string representando o objeto apropriada para a localidade do ambiente de execução

• toString()

– Retorna uma string representando o objeto

• valueOf()

– Retorna uma string, número ou booleano equivalente ao objeto

– Geralmente o mesmo valor de toString()

• Observação:

– Objetos que existem no ambiente do navegador, como os do BOM ou do DOM, são considerados objetos do host, não sendo governados por ECMA-262 e, como tal, podendo ou não herdar diretamente de Object

Operadores

• Utilizados para manipular valores de dados

• Operadores Unários

– Incremento (++)

– Decremento (--) var age = 29;

++age;

• Equivalente a: var age = 29;

age = age + 1;

• Outro exemplo: var age = 29;

--age;

Operadores Unários

• De forma prefixada, esses operadores mudam o valor da variável antes da execução da instrução

• De forma posfixada, mudam o valor da variável após a avaliação da instrução

• Exemplos: var age = 29;

var anotherAge = --age + 2;

alert(age); //outputs 28

alert(anotherAge); //outputs 30

var num1 = 2;

var num2 = 20;

var num3 = --num1 + num2; //equals 21

var num4 = num1 + num2; //equals 21

Operadores Unários

• Exemplos: var num1 = 2;

var num2 = 20;

var num3 = num1-- + num2; //equals 22

var num4 = num1 + num2; //equals 21

Operadores Unários

• Sempre convertem o tipo para números: var s1 = “2”;

var s2 = “z”;

var b = false;

var f = 1.1;

var o = {

valueOf: function() {

return -1;

}

};

s1++; //value becomes numeric 3

s2++; //value becomes NaN

b++; //value becomes numeric 1

f--; //value becomes 0.10000000000000009

o--; //value becomes numeric -2

Operadores Booleanos

• NOT (!) alert(!false); //true

alert(!”blue”); //false

alert(!0); //true

alert(!NaN); //true

alert(!””); //true

alert(!12345); //false


• AND (&&)

var found = true;

var result = (found && someUndeclaredVariable);

//error occurs here

alert(result); //this line never executes

------

var found = false;

var result = (found && someUndeclaredVariable);

//no error

alert(result); //works

OPERANDO 1 OPERANDO 2 RESULTADO (&&)

true true true

true false false

false true false

false false false


• OR (||)

var found = true;

var result = (found || someUndeclaredVariable);

//no error

alert(result); //works

------

var found = false;

var result = (found || someUndeclaredVariable);

//error occurs here

alert(result); //this line never executes

OPERANDO 1 OPERANDO 2 RESULTADO (||)

true true true

true false true

false true true

false false false

Operadores Multiplicativos

• Mutiplicação (*)

• Divisão (/)

• Módulo (%)

– Resto da divisão var result = 26 % 5; //equal to 1

Operadores Aditivos

• Subtração (-)

• Soma (+) var result = 1 + 2;

------

var result1 = 5 + 5; //two numbers

alert(result1); //10

var result2 = 5 + “5”; //a number and a string

alert(result2); //”55”

------

var num1 = 5;

var num2 = 10;

var message = “The sum of 5 and 10 is “ + num1 +

num2;

alert(message); //”The sum of 5 and 10 is 510”

Operadores Relacionais

• Menor que (<), maior que (>), menor ou igual a (<=) e maior ou igual a (>=)

var result1 = 5 > 3; //true

var result2 = 5 < 3; //false

var result = “Brick” < “alphabet”; //true

var result = “Brick”.toLowerCase() <

“alphabet”.toLowerCase(); //false

var result = “23” < “3”; //true

var result = “23” < 3; //false

var result = “a” < 3; //false because “a” ==> NaN

var result1 = NaN < 3; //false

var result2 = NaN >= 3; //false

Operadores de Igualdade

• Igual (==) e diferente (!=)

EXPRESSÃO VALOR

null == undefined true

“NaN” == NaN false

5 == NaN false

NaN == NaN false

NaN != NaN true

false == 0 true

true == 1 true

true == 2 false

undefined == 0 false

null == 0 false

“5” == 5 true

Operadores de Igualdade

• Idêntico (===) e não idêntico (!==)

• Equivalente aos operadores de igualdade e diferença, mas não converte os operandos antes do teste de igualdade

var result1 = (“55” == 55); //true

var result2 = (“55” === 55); //false

var result1 = (“55” != 55); //false

var result2 = (“55” !== 55); //true

Operador Condicional

• Equivalente ao Java: variável = expressão_booleana ? valor_true : valor_false;

• Exemplo: var max = (num1 > num2) ? num1 : num2;

Operadores de Atribuição

• Atribuição simples (=) var num = 10;

• Atribuição composta: operadores aditivos ou multiplicativos seguidos pelo sinal de igualdade (*=, /=, %=, += e -=)

var num = 10;

num = num + 10;

var num = 10;

num += 10;

Operador Vírgula

• Permite a execução de mais de uma operação em uma única instrução

var num1=1, num2=2, num3=3;

• Quase sempre utilizado na declaração de variáveis, mas também pode ser usado na atribuição de valores

var num = (5, 1, 4, 8, 0); //num recebe 0

Instruções

• ECMA-262 descreve várias instruções de controle de fluxo

• Essencialmente, instruções definem a maior parte da sintaxe de ECMAScript e tipicamente usam uma ou mais palavras-chave para realizar uma determinada tarefa

A Instrução if

• Sintaxe: if (condição) instrução1 else instrução2

• Exemplos: if (i > 25)

alert(“Greater than 25.”); //instrução 1 linha

else {

alert(“Less than or equal to 25.”); //bloco

}

if (i > 25) {

alert(“Greater than 25.”);

} else if (i < 0) {

alert(“Less than 0.”);

} else {

alert(“Between 0 and 25, inclusive.”);

}

A Instrução do-while

• É um laço com um pós-teste, ou seja, a condição de saída é avaliada apenas após o código dentro do laço ter sido executado

• Sintaxe: do {

instrução

} while (expressão);

• Exemplo: var i = 0;

do {

i += 2;

} while (i < 10);

A Instrução while

• É um laço com um pré-teste, ou seja, a condição de saída é avaliada antes do código dentro do laço ser executado, sendo possível que o laço nunca seja executado

• Sintaxe: while(expressão) instrução

• Exemplo: var i = 0;

while (i < 10) {

i += 2;

}

A Instrução for

• É também um laço com um pré-teste, com a capacidade de inicialização de uma variável antes de entrar no laço e definição de código a ser executado após o laço

• Sintaxe: for (inicialização; expressão; expressão pós-laço)

instrução

• Exemplo: var count = 10;

for (var i=0; i < count; i++){

alert(i);

}

A Instrução for-in

• É uma instrução estritamente iterativa, usada para enumerar as propriedades de um objeto

• Sintaxe: for (propriedade in expressão) instrução

• Exemplo: for (var propName in window) {

document.write(propName);

}

– No exemplo, usada para mostrar todas as propriedades do objeto window do BOM

• Como propriedades em ECMAScript não possuem ordem, é difícil prever a ordem em que as propriedades serão listadas

Instruções Nomeadas

• É possível nomear instruções para uso posterior com a seguinte sintaxe:

nome: instrução

• Exemplo: start: for (var i=0; i < count; i++) {

alert(i);

}

– Neste caso, o nome start pode ser referenciado posteriormente por instruções break ou continue

• Instruções nomeadas são usadas tipicamente em laços aninhados

Instruções break e continue

• Permitem controle estrito sobre a execução do código em um laço

• A instrução break causa a saída imediata do laço, forçando a execução continuar na próxima instrução após o laço

• A instrução continue, por outro lado, provoca a saída imediata do laço, mas a execução continua a partir do topo do laço

• Exemplo: var num = 0;

for (var i=1; i < 10; i++) {

if (i % 5 == 0) {

break;

}

num++;

}

alert(num); //4


• Exemplo: var num = 0;

for (var i=1; i < 10; i++) {

if (i % 5 == 0) {

continue;

}

num++;

}

alert(num); //8


• Com instrução nomeada: var num = 0;

outermost:

for (var i=0; i < 10; i++) {

for (var j=0; j < 10; j++) {

if (i == 5 && j == 5) {

break outermost;

}

num++;

}

}

alert(num); // Qual a saída?

// 55


• Com instrução nomeada: var num = 0;

outermost:

for (var i=0; i < 10; i++) {

for (var j=0; j < 10; j++) {

if (i == 5 && j == 5) {

continue outermost;

}

num++;

}

}

alert(num); // Qual a saída?

// 95

A Instrução with

• Atribui o escopo do código com um objeto em particular

• Sintaxe: with (expressão) instrução;

• Exemplo: var qs = location.search.substring(1);

var hostName = location.hostname;

var url = location.href;

– Uma vez que o objeto location é usado em todas as linhas, pode ser reescrito como: with(location){

var qs = search.substring(1);

var hostName = hostname;

var url = href;

}

A Instrução switch

• Relembra a sintaxe das linguagens baseadas em C: switch (expressão) {

case valor: instrução

break;


break;


break;


break;

default: instrução

}


• Exemplo:

if (i == 25){

alert(“25”);

} else if (i == 35) {

alert(“35”);

} else if (i == 45) {

alert(“45”);

} else {

alert(“Other”);

}

switch (i) {

case 25:

alert(“25”);

break;

case 35:

alert(“35”);

break;

case 45:

alert(“45”);

break;

default:

alert(“Other”);

}


• Exemplo:

var num = 25;

switch (true) {

case num < 0:

alert(“Less than 0.”);

break;

case num >= 0 && num <= 10:

alert(“Between 0 and 10.”);

break;

case num > 10 && num <= 20:

alert(“Between 10 and 20.”);

break;

default:

alert(“More than 20.”);

}

Funções

• São o núcleo de qualquer linguagem porque permitem o encapsulamento de instruções que podem ser executadas em qualquer lugar a qualquer tempo

• Funções em ECMAScript são declaradas com a palavra-chave function, seguida de seus argumentos e pelo corpo da função

• Sintaxe básica: function functionName(arg0, arg1,...,argN) {

instruções

}

• Exemplo: function sayHi(name, message) {

alert(“Hello “ + name + “, “ + message);

}

Funções

• Esta função pode ser chamada usando o nome da função, seguido pelos argumento entre parênteses e separados por vírgula

sayHi(“Nicholas”, “how are you today?”);

• Funções não precisam especificar quando retornam um valor

– Qualquer função pode retornar um valor a qualquer hora através da instrução return seguida pelo valor a retornar function sum(num1, num2) {

return num1 + num2;

}

...

var result = sum(5, 10);

Entendendo Argumentos

• Em ECMAScript funções não se preocupam com quantos argumentos foram passados ou quais os tipos de dados dos argumentos – Se definirmos uma função com dois argumentos, isso não

significa que podemos passar apenas dois argumentos

– Podemos passar um, três ou nenhum e o interpretador não irá reclamar

• Isto acontece porque argumentos são representados internamente como um array – O array é sempre passado para a função, mas para a função não

importa com o que estiver no array (se houver algo)

• Existe um objeto chamado arguments que pode ser acessado dentro da função que retém o valor de cada argumento que foi passado


• O primeiro argumento é arguments[0], o segundo arguments[1] e assim por diante

function sayHi() {

alert(“Hello “ + arguments[0] + “, “ +

arguments[1]);

}

• Podemos determinar quantos argumentos foram passados através da propriedade length

function howManyArgs() {

alert(arguments.length);

}

howManyArgs(“string”, 45); //2

howManyArgs(); //0

howManyArgs(12); //1


• Exemplo: function doAdd() {

if(arguments.length == 1) {

alert(arguments[0] + 10);

} else if (arguments.length == 2) {

alert(arguments[0] + arguments[1]);

}

}

doAdd(10); //20

doAdd(30, 20); //50

Sem Sobrecarga

• Em Java é possível definir duas funções com mesmo nome desde que possuam assinaturas (tipo e número de argumentos aceitos) diferentes

• Em ECMAScript isto não é possível, caso ocorra, a última função se torna proprietária do nome

function addSomeNumber(num){

return num + 100;

}

function addSomeNumber(num) {

return num + 200;

}

var result = addSomeNumber(100); //300

Variáveis, Escopo e Memória

• A natureza das variáveis em JavaScript é única quando comparada com outras linguagens

• Além de ser fracamente tipada, uma variável é literalmente apenas um nome para um valor em particular em um determinado tempo

• Como não há regras definindo o tipo de dado que uma variável pode conter, o valor e o tipo de dado de uma variável pode mudar durante o tempo de vida de um script

• Embora esta seja uma característica interessante, poderosa e problemática, existe muito mais complexidades relativas a variáveis

Valores Primitivos e de Referência

• Uma variável pode conter dois tipos diferentes de dados: valores primitivos e valores de referência

– Valores primitivos são simples peças atômicas de dados

– Valores de referência são objetos que podem ser constituídos de múltiplos valores

• Valores de tipos primitivos são acessados pelo valor: manipulamos o valor atualmente armazenado na variável

• Valores de referência são objetos armazenados na memória que, quando manipulados, trabalhamos em uma referência ao objeto em vez do objeto em si, assim dizemos que ele é acessado por referência

Propriedades Dinâmicas

• Quando trabalhamos com valores de referência, podemos adicionar, mudar ou excluir propriedades e métodos a qualquer momento

var person = new Object();

person.name = “Nicholas”;

alert(person.name); //”Nicholas”

• Valores primitivos não podem ter propriedades adicionadas:

var name = “Nicholas”;

name.age = 27;

alert(name.age); //undefined

Copiando Valores

• Valores primitivos e de referência funcionam de modo diferente quando copiados de uma variável para outra

• Exemplo: var num1 = 5;

var num2 = num1;

• Quando num2 é inicializada com num1, o valor é copiado de maneira completamente separada do valor armazenado em num1

num1 5 (tipo Number)

Variáveis antes da cópia



Variáveis depois da cópia

Copiando Valores

• Quando copiamos um objeto, a nova variável é um ponteiro para um objeto armazenado no heap

– Quando a operação é completada, duas variáveis apontam para exatamente o mesmo objeto, assim, mudanças em uma são refletidas na outra var obj1 = new Object();

var obj2 = obj1;

obj1.name = “Nicholas”;

alert(obj2.name); //”Nicholas”

Copiando Valores

obj1 (tipo Object)

Variáveis antes da cópia

Obj2 (tipo Object)

obj1 (tipo Object)

Variáveis depois da cópia

Heap

Object

Object

Object

Object

Passagem de Argumento

• Todos os argumentos de função são passados por valor – O valor fora da função é copiado em um argumento dentro da

função da mesma forma que um valor de uma variável é copiado em outra

– Passagem de valores por referência não é possível em ECMAScript function addTen(num) {

num += 10;

return num;

}

var count = 20;

var result = addTen(count);

alert(count); //20 – sem mudança

alert(result); //30

Passagem de Argumento

• Com objetos: function setName(obj) {

obj.name = “Nicholas”;

}


setName(person);


-------------

function setName(obj) {

obj.name = “Nicholas”;

obj = new Object();

obj.name = “Greg”;

}


setName(person);


Determinando o Tipo

• Operador typeof var s = “Nicholas”;

var b = true;

var i = 22;

var u;

var n = null;

var o = new Object();

alert(typeof s); //string

alert(typeof i); //number

alert(typeof b); //boolean

alert(typeof u); //undefined

alert(typeof n); //object

alert(typeof o); //object

Determinando o Tipo

• Operador instanceof

• Sintaxe: result = variável instanceof construtor

• Exemplo: alert(person instanceof Object);

//a variável person é um Object?

alert(colors instanceof Array);

//a variável colors é um Array?

alert(pattern instanceof RegExp);

//a variável pattern é um RegExp?

Contexto de Execução e Escopo

• O conceito de contexto de execução é de máxima importância em JavaScript

• O contexto de execução de uma variável ou função define o que outros dados tem acesso a e também como é seu comportamento

• Cada contexto de execução possui um objeto de variável associado, no qual todas as suas funções e variáveis definidas existem

• Este objeto não é acessível por código, mas é usado para manipulação de dados

Exemplo

var color = “blue”;

function changeColor(){

var anotherColor = “red”;

function swapColors(){

var tempColor = anotherColor;

anotherColor = color;

color = tempColor;

//color, anotherColor e tempColor são

//acessíveis aqui

}

//color e anotherColor são acessíveis aqui

swapColors();

}

//apenas color é acessível aqui

changeColor();

Sem Escopo a Nível de Bloco

• JavaScript, diferentemente de outras linguagens baseadas em C, não possui escopo a nível de bloco, permitindo definição condicional de variáveis

• Exemplo: if (true) {


}

alert(color); //”blue”

• Ou: for (var i=0; i < 10; i++){

doSomething(i);

}

alert(i); //10

Declaração de Variáveis

• Se uma variável é inicializada sem ter sido inicialmente declarada, ela assume o contexto global automaticamente

• Por exemplo: function add(num1, num2) {

var sum = num1 + num2;

return sum;

}

var result = add(10, 20); //30

alert(sum); //causa um erro: sum é uma variável local

• Mas… function add(num1, num2) {

sum = num1 + num2; // sem o var!

return sum;

}

var result = add(10, 20); //30

alert(sum); //30 - sum é global!

Busca do Identificador


function getColor(){

return color;

}

alert(getColor()); //”blue”


function getColor(){

var color = “red”;

return color;

}

alert(getColor()); //”red”

Coletor de Lixo

• JavaScript é uma linguagem com coletor de lixo, ou seja, o ambiente de execução é responsável por gerenciar a memória necessária durante a execução do código, diferentemente de linguagens como C e C++

• O coletor de lixo roda periodicamente e pode potencialmente ser um processo caro, caso exista um grande número de variáveis alocadas na memória, então o tempo do processo de coleta de lixo é importante

• Por exemplo, o IE era infame em sua performance: o coletor de lixo rodava baseado no número de alocações, especificamente 256 variáveis, 4.096 objetos/arrays/slots de arrays ou 64Kb de strings

Coletor de Lixo

• O problema com esta implementação é que um script com tantas variáveis provavelmente continuará a ter esse número durante toda a sua execução, fazendo com que o coletor de lixo rodasse frequentemente

• Este problema foi corrigido no IE 7:

– Se a rotina do coletor de lixo liberasse menos que 15% das alocações de memória, o limite de alocações era dobrado

– Se a rotina do coletor de lixo liberasse pelo menos 85% das alocações, o limite retornaria ao normal

– Esta mudança simples representou um grande aumento de performance em páginas com JavaScript pesados

Gerenciamento de Memória

• JavaScript roda em um ambiente onde o gerenciamento de memória e o coletor de lixo operam de maneira única

• A quantidade de memória disponível para uso em navegadores Web é tipicamente muito menor que a disponível para aplicações desktop – Isto ocorre muito mais por questões de segurança,

principalmente para evitar que uma página Web possa travar o sistema operacional utilizando toda a memória do sistema

• Manter um nível mínimo de memória utilizada leva a uma melhor performance

• A melhor maneira de otimizar o uso de memória é garantir que apenas estejam em uso os dados necessários para a execução do código

Gerenciamento de Memória

• Quando os dados não forem mais necessários, o melhor é atribuir ao seu valor null, liberando a sua referência

• Isto é chamado de de referenciar o valor • Isto se aplica em sua maioria ao valores globais e

propriedades de objetos globais – Variáveis locais são de referenciadas automaticamente quando saem

do contexto

• Exemplo: function createPerson(name){

var localPerson = new Object();

localPerson.name = name;

return localPerson;

}

var globalPerson = createPerson(“Nicholas”);

//faça alguma coisa com globalPerson

globalPerson = null;

Tipos de Referência

• Um valor de referência (objeto) é uma instância de um tipo de referência específico

– Estruturas usadas para agrupar dados e funcionalidade e são frequentemente chamados incorretamente de classes

• Embora seja tecnicamente uma linguagem orientada a objetos, ECMAScript não possui alguns construtores básicos que tradicionalmente estão associados com programação orientada a objetos, incluindo classes e interfaces

• Tipos de referência são algumas vezes chamados de definições de objetos porque descrevem as propriedades e métodos que objetos devem ter

O Tipo Objeto

• Existem duas maneiras de explicitamente criar uma instância de Object

• A primeira é utilizando o operador new: var person = new Object();


person.age = 29;

• A outra é utilizando a notação de literal de objeto, uma maneira mais simples de definir um objeto com várias propriedades:

var person = {

name : “Nicholas”,

age : 29

};

O Tipo Objeto

• Nomes de propriedades também podem ser especificados como strings ou números, quando usamos a notação de literal de objeto:

var person = {

“name” : “Nicholas”,

“age” : 29,

5: true

};

– Nomes de propriedades numéricos são automaticamente convertidos para strings

O Tipo Objeto

• Uma outra forma: var person = {}; //o mesmo que new Object()


person.age = 29;

Objetos Como Argumentos

function displayInfo(args) {

var output = “”;

if (typeof args.name == “string”){

output += “Name: “ + args.name + “\n”;

}

if (typeof args.age == “number”) {

output += “Age: “ + args.age + “\n”;

}

alert(output);

}

displayInfo({

name: “Nicholas”,

age: 29

});

displayInfo({

name: “Greg”

});

Outras Notações

alert(person[“name”]); //”Nicholas”


var propertyName = “name”;

alert(person[propertyName]); //”Nicholas”

person[“first name”] = “Nicholas”;

O Tipo Array

• Depois do tipo Object, o tipo Array é provavelmente o mais usado em ECMAScript

• Um array em ECMAScript é muito diferente das maioria das linguagens de programação – Como nas outras linguagens, arrays são listas ordenadas de

dados

– Mas eles podem conter qualquer tipo de dado em cada entrada e são dinamicamente alocados, crescendo de maneira automática

• Um array pode ser criado com a definição de seu tamanho inicial ou não:

var colors = new Array();

var colors = new Array(20);

O Tipo Array

• Também podemos passar os itens que devem ser incluídos no array:

var colors = new Array(“red”, “blue”, “green”);

• Podemos omitir o operador new: var colors = Array(3);

//cria um array com três itens

var names = Array(“Greg”);

//cria um array com um item, a string “Greg”

• Podemos utilizar ainda a notação literal: var colors = [“red”, “blue”, “green”];

//cria um array com três strings

var names = []; //cria um array vazio

O Tipo Array

• Recuperando dados e modificando um array: var colors = [“red”, “blue”, “green”];

alert(colors[0]); //mostra o primeiro item

colors[2] = “black”; //modifica o terceiro item

colors[3] = “brown”; //adiciona um quarto item

• Verificando o número de itens em um array: var colors = [“red”, “blue”, “green”];

var names = [];

alert(colors.length); //3

alert(names.length); //0

O Tipo Array

• Uma característica única da propriedade length é que ela não é somente de leitura, podemos remover ou adicionar itens do array através dela:

var colors = [“red”, “blue”, “green”]; colors.length =

2;

alert(colors[2]); //undefined

• Ou... var colors = [“red”, “blue”, “green”];

colors.length = 4;

alert(colors[3]); //undefined

• A propriedade length pode ser útil para adicionar itens: var colors = [“red”, “blue”, “green”];

colors[colors.length] = “black”;

//adiciona uma cor (posição 3)

colors[colors.length] = “brown”;

//adiciona outra cor (posição 4)

O Tipo Array

• O tamanho de um array é automaticamente calculado: var colors = [“red”, “blue”, “green”];

colors[99] = “black”; //adiciona uma cor (posição 99)


• Detectando um array: if (value instanceof Array){

//faça alguma coisa com o array

}

• Ou, em ECMAScript 5: if (Array.isArray(value)){

// faça alguma coisa com o array

}

O Tipo Array

• Convertendo um array: var colors = [“red”, “blue”, “green”];

alert(colors.toString()); //red,blue,green

alert(colors.valueOf()); //red,blue,green

alert(colors); //red,blue,green

Métodos de Pilha

• Um array pode ser referenciado como uma estrutura LIFO (last-in-first-out – último a entrar, primeiro a sair) através dos métodos push() e pop():

var colors = new Array(); //cria um array

var count = colors.push(“red”, “green”);

//inclui dois itens

alert(count); //2

count = colors.push(“black”);

//inclui um outro item

alert(count); //3

var item = colors.pop(); //recupera o último item

alert(item); //”black”


Métodos de Fila

• Um array também pode se comportar como uma estrutura FIFO (first-in-first-out – primeiro a entrar, primeiro a sair) através dos métodos push() e shift():


var count = colors.push(“red”, “green”);

//inclui dois items

alert(count); //2

count = colors.push(“black”);


alert(count); //3

var item = colors.shift();

//recupera o primeiro item

alert(item); //”red”


Métodos de Fila

• O método unshift() adiciona qualquer número de itens no início do array e retorna o novo tamanho do array, podemos então simular uma fila em direção oposta combinando unshift() com pop():


var count = colors.unshift(“red”, “green”);

//inclui dois items

alert(count); //2

count = colors.unshift(“black”);


alert(count); //3

var item = colors.pop(); //recupera o primeiro item

alert(item); //”green”


Reordenando um Array

• O método reverse() inverte a ordem dos itens de um array:

var values = [1, 2, 3, 4, 5];

values.reverse();

alert(values); //5,4,3,2,1

• O método sort() coloca os itens em ordem ascendente, realizando a conversão para string de cada um dos itens

var values = [0, 1, 5, 10, 15];

values.sort();

alert(values); //0,1,10,15,5

// note que “10” vem antes de “5”


• Para resolver o problema do exemplo anterior podemos passar como parâmetro uma função de comparação que recebe dois argumentos e deve retornar um valor negativo (se o primeiro elemento deve vir antes do segundo), zero (se os elementos forem iguais) ou um valor positivo (se o primeiro elemento deve vir depois do segundo)

function compare(value1, value2) {

if (value1 < value2) {

return -1;

} else if (value1 > value2) {

return 1;

} else {

return 0;

}

}

var values = [0, 1, 5, 10, 15];

values.sort(compare);

alert(values); //0,1,5,10,15


• Podemos colocar os elementos em ordem descendente simplesmente invertendo os valores retornados:

function compare(value1, value2) {

if (value1 < value2) {

return 1;

} else if (value1 > value2) {

return -1;

} else {

return 0;

}

}

var values = [0, 1, 5, 10, 15];

values.sort(compare);

alert(values); //15,10,5,1,0


• Para valores numéricos a função de ordenação poderia ser bem mais simples:

function compare(value1, value2){

return value2 - value1;

}

Manipulando Arrays

• Concatenação: var colors = [“red”, “green”, “blue”];

var colors2 = colors.concat(“yellow”, [“black”, “brown”]);

alert(colors); //red,green,blue

alert(colors2); //red,green,blue,yellow,black,brown

• Particionamento: var colors = [“red”, “green”, “blue”, “yellow”, “purple”];

var colors2 = colors.slice(1);

var colors3 = colors.slice(1,4);

alert(colors2); //green,blue,yellow,purple

alert(colors3); //green,blue,yellow

Métodos de Localização

• Retorna a posição do item no array ou -1 se não for encontrado – Note que a comparação estrita é utilizada

var numbers = [1,2,3,4,5,4,3,2,1];

alert(numbers.indexOf(4)); //3

alert(numbers.lastIndexOf(4)); //5

alert(numbers.indexOf(4, 4)); //5

alert(numbers.lastIndexOf(4, 4)); //3

var person = { name: “Nicholas” };

var people = [{ name: “Nicholas” }];

var morePeople = [person];

alert(people.indexOf(person)); //-1

alert(morePeople.indexOf(person)); //0

Iteração em Arrays

• Todos os métodos de iteração em arrays recebem como argumento uma função que é executada em todos os itens do array

• every() – retorna true se a função retorna true para todos os itens

• filter() – retorna um array com todos os itens cuja função passada retorna true

• forEach() – executa a função em todos os itens, mas não retorna valor

• map() – retorna o resultado de cada chamada de função em um array

• some() – retorna true se a função retorna true para pelo menos um item do array

Exemplos

• every() e some(): var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.every(function(item,

index, array){

return (item > 2);

});

alert(everyResult); //false

var someResult = numbers.some(function(item,

index, array){

return (item > 2);

});

alert(someResult); //true

Exemplos

• filter(): var numbers = [1,2,3,4,5,4,3,2,1];

var filterResult = numbers.filter(function(item, index, array){

return (item > 2);

});

alert(filterResult); //[3,4,5,4,3]

• map(): var numbers = [1,2,3,4,5,4,3,2,1];

var mapResult = numbers.map(function(item,

index, array){

return item * 2;

});

alert(mapResult); //[2,4,6,8,10,8,6,4,2]

Exemplos

• forEach(): var numbers = [1,2,3,4,5,4,3,2,1];

numbers.forEach(function(item, index, array){

//do something here

});

O Tipo Date

• Tipo baseado no formato Java java.util.Date, armazenando datas no formato de milissegundos que se passam desde 1º de janeiro de 1970 UTC (Universal Time Code)

– Pode representar 285.616 anos antes ou depois desta data

• Criando um objeto de data: var now = new Date();

• Quando não passamos argumentos, a data e hora atual são atribuídas

• Para utilizar uma outra data ou hora, devemos passar a representação da data em milissegundos, utilizando dois métodos: Data.parse() e Data.UTC()

O Tipo Date

• O método Date.parse() aceita uma string como argumento, representando uma data

• São formatos válidos:

– mês/dia/ano (como em 6/13/2004)

– nome_do_mês dia, ano (como em January 12, 2004)

– dia_da_semana nome_do_mês dia ano horas:minutos:segundos zona_de_tempo (como em Tue May 25 2004 00:00:00 GMT-0700)

– Formato ISO 8601 extendido YYYY-MM-DDTHH:mm:ss.sssZ (como em 2004-05-25T00:00:00)

• Por exemplo, para criar um objeto de data: var someDate =

new Date(Date.parse(“May 25, 2004”));

// ou

Var someDate = new Date(“May 25, 2004”);

O Tipo Date

• Se a string passada em Date.parse() não representar uma data, então o valor NaN é retornado

• Um outro exemplo: //recupera a hora inicial

var start = Date.now();

//chama uma função

facaAlgumaCoisa();

//recupera a hora final e a duração

var stop = Date.now(),

result = stop – start;

UNIVERSIDADE ESTADUAL DO SUDOESTE DA BAHIA CURSO DE CIÊNCIA DA COMPUTAÇÃO

DESENVOLVIMENTO DE SISTEMAS WEB – 2014.1

Fábio M. Pereira

([email protected])

Aula 05 - Java Script Básico

Internet

Transcript of Aula 05 - Java Script Básico