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
(fabio.mpereira@uesb.edu.br)

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

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:
function sayScript(){
alert(“</script>”);
}
</script>
• O problema pode ser resolvido com:
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
num2 5
(tipo Number)
num1 5
(tipo Number)
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:
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:
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 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...
colors.length = 4;
alert(colors[3]); //undefined
• A propriedade length pode ser útil para adicionar itens:
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:
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:
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;

Aula 05 - Java Script Básico

Mais conteúdo relacionado

Mais procurados (20)

Destaque (20)

Semelhante a Aula 05 - Java Script Básico (20)

Mais de Fabio Moura Pereira (15)

Último (9)

Aula 05 - Java Script Básico