SlideShare uma empresa Scribd logo
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
Browser Object Model (BOM)
• 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
Browser Object Model (BOM)
• 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:
<script type=”text/javascript”
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>
<script type=”text/javascript”
src=”example1.js”></script>
<script type=”text/javascript”
src=”example2.js”></script>
</head>
<body>
<!-- content here -->
</body>
</html>
• O objetivo principal é manter referências a arquivos externos,
como arquivos CSS e JavaScript, na mesma área
Localização da tag
• 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
Localização da tag
• 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>
<title>Example HTML Page</title>
</head>
<body>
<!-- content here -->
<script type=”text/javascript”
src=”example1.js”></script>
<script type=”text/javascript”
src=”example2.js”></script>
</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>
<title>Example HTML Page</title>
<script type=”text/javascript” defer
src=”example1.js”></script>
<script type=”text/javascript” defer
src=”example2.js”></script>
</head>
<body>
<!-- content here -->
</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>
<title>Example HTML Page</title>
<script type=”text/javascript” async
src=”example1.js”></script>
<script type=”text/javascript” async
src=”example2.js”></script>
</head>
<body>
<!-- content here -->
</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>
<title>Example HTML Page</title>
<script type=”text/javascript” defer=”defer”
src=”example1.js”></script>
<script type=”text/javascript” defer=”defer”
src=”example2.js”></script>
</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
Sintaxe – Instruçõ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
Sintaxe – 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
Palavras-Chave e Palavras Reservadas
• 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
Palavras-Chave e Palavras Reservadas
• 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
Números de Ponto Flutuante
• 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
Números de Ponto Flutuante
• 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)
Conversões de Números
• 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
Conversões de Números
• 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
Conversões de Números
• 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
Conversões de Números
• 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
Conversão para String
• 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(8)); //”12”
alert(num.toString(10)); //”10”
alert(num.toString(16)); //”a”
Conversão para String
• 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
Conversão para String
• 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
Operadores Booleanos
• 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
Operadores Booleanos
• 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
Instruções break e continue
• Exemplo:
var num = 0;
for (var i=1; i < 10; i++) {
if (i % 5 == 0) {
continue;
}
num++;
}
alert(num); //8
Instruções break e continue
• 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
Instruções break e continue
• 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;
case valor: instrução
break;
case valor: instrução
break;
case valor: instrução
break;
default: instrução
}
A Instrução switch
• 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”);
}
A Instrução switch
• 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
Entendendo Argumentos
• 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
Entendendo Argumentos
• 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”;
}
var person = new Object();
setName(person);
alert(person.name); //”Nicholas”
-------------
function setName(obj) {
obj.name = “Nicholas”;
obj = new Object();
obj.name = “Greg”;
}
var person = new Object();
setName(person);
alert(person.name); //”Nicholas”
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) {
var color = “blue”;
}
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
var color = “blue”;
function getColor(){
return color;
}
alert(getColor()); //”blue”
var color = “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.name = “Nicholas”;
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.name = “Nicholas”;
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”
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)
alert(colors.length); //100
• 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”
alert(colors.length); //2
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 colors = new Array(); //cria um array
var count = colors.push(“red”, “green”);
//inclui dois items
alert(count); //2
count = colors.push(“black”);
//inclui um outro item
alert(count); //3
var item = colors.shift();
//recupera o primeiro item
alert(item); //”red”
alert(colors.length); //2
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 colors = new Array(); //cria um array
var count = colors.unshift(“red”, “green”);
//inclui dois items
alert(count); //2
count = colors.unshift(“black”);
//inclui um outro item
alert(count); //3
var item = colors.pop(); //recupera o primeiro item
alert(item); //”green”
alert(colors.length); //2
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”
Reordenando um Array
• 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
Reordenando um Array
• 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
Reordenando um Array
• 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
(fabio.mpereira@uesb.edu.br)

Mais conteúdo relacionado

Mais procurados

Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
André Constantino da Silva
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
Bruno Catão
 
Introdução CSS
Introdução CSSIntrodução CSS
Aula - Metodologias Ágeis
Aula - Metodologias ÁgeisAula - Metodologias Ágeis
Aula - Metodologias Ágeis
Mauricio Cesar Santos da Purificação
 
Fundamentos da Engenharia de Software
Fundamentos da Engenharia de SoftwareFundamentos da Engenharia de Software
Fundamentos da Engenharia de Software
Álvaro Farias Pinheiro
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
Léo Dias
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
Léo Dias
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
Sérgio Souza Costa
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
Tiago Luiz Ribeiro da Silva
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
Salvador Torres
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
André Constantino da Silva
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
Jorge Ávila Miranda
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
Bruno Grange
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
Cristiano Pires Martins
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
Anderson Luís Furlan
 
PHP - Introdução
PHP - IntroduçãoPHP - Introdução
PHP - Introdução
Fabio Moura Pereira
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
Eduardo Bohrer
 
Html Básico
Html BásicoHtml Básico
Front End x Back End
Front End x Back EndFront End x Back End
Front End x Back End
Tatiane Aguirres Nogueira
 

Mais procurados (20)

Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
Introdução CSS
Introdução CSSIntrodução CSS
Introdução CSS
 
Aula - Metodologias Ágeis
Aula - Metodologias ÁgeisAula - Metodologias Ágeis
Aula - Metodologias Ágeis
 
Fundamentos da Engenharia de Software
Fundamentos da Engenharia de SoftwareFundamentos da Engenharia de Software
Fundamentos da Engenharia de Software
 
Curso de css3 unidade 1 - introdução ao css
Curso de css3   unidade 1 - introdução ao cssCurso de css3   unidade 1 - introdução ao css
Curso de css3 unidade 1 - introdução ao css
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Aula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de UsuárioAula 6 - Design e Processo de Design de Interfaces de Usuário
Aula 6 - Design e Processo de Design de Interfaces de Usuário
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Programação web e o front-end
Programação web e o front-endProgramação web e o front-end
Programação web e o front-end
 
PHP - Introdução
PHP - IntroduçãoPHP - Introdução
PHP - Introdução
 
Node.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançadoNode.JS - Workshop do básico ao avançado
Node.JS - Workshop do básico ao avançado
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Front End x Back End
Front End x Back EndFront End x Back End
Front End x Back End
 

Destaque

04 - Gerenciamento de Threads - II
04 -  Gerenciamento de Threads - II04 -  Gerenciamento de Threads - II
04 - Gerenciamento de Threads - II
Fabio Moura Pereira
 
Aula Prolog - 05
Aula Prolog - 05Aula Prolog - 05
Aula Prolog - 05
Fabio Moura Pereira
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Fabio Moura Pereira
 
Haskell - Introdução
Haskell - IntroduçãoHaskell - Introdução
Haskell - Introdução
Fabio Moura Pereira
 
05 - Sincronização de Threads - I
05 - Sincronização de Threads - I05 - Sincronização de Threads - I
05 - Sincronização de Threads - I
Fabio Moura Pereira
 
Programação Concorrente - Gerenciamento de Threads - Parte II
Programação Concorrente - Gerenciamento de Threads - Parte IIProgramação Concorrente - Gerenciamento de Threads - Parte II
Programação Concorrente - Gerenciamento de Threads - Parte II
Fabio Moura Pereira
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Fabio Moura Pereira
 
Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3
Fabio Moura Pereira
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
Fabio Moura Pereira
 
Curso de PHP - Objetos
Curso de PHP - ObjetosCurso de PHP - Objetos
Curso de PHP - Objetos
Fabio Moura Pereira
 
Aula de Prolog 07 - Estruturas de Dados
Aula de Prolog 07 - Estruturas de DadosAula de Prolog 07 - Estruturas de Dados
Aula de Prolog 07 - Estruturas de Dados
Fabio Moura Pereira
 
Aula de Prolog 08 - Unificação
Aula de Prolog 08 - UnificaçãoAula de Prolog 08 - Unificação
Aula de Prolog 08 - Unificação
Fabio Moura Pereira
 
Aula Prolog 03
Aula Prolog 03Aula Prolog 03
Aula Prolog 03
Fabio Moura Pereira
 
Aula Persistência 01 (Java)
Aula Persistência 01 (Java)Aula Persistência 01 (Java)
Aula Persistência 01 (Java)
Fabio Moura Pereira
 
Aula Tratamento de Exceções
Aula Tratamento de ExceçõesAula Tratamento de Exceções
Aula Tratamento de Exceções
Fabio Moura Pereira
 
Desenvolvimento de Jogos - Mercado Parte 2
Desenvolvimento de Jogos - Mercado Parte 2Desenvolvimento de Jogos - Mercado Parte 2
Desenvolvimento de Jogos - Mercado Parte 2
Fabio Moura Pereira
 
Desenvolvimento de Jogos - Game Design
Desenvolvimento de Jogos - Game DesignDesenvolvimento de Jogos - Game Design
Desenvolvimento de Jogos - Game Design
Fabio Moura Pereira
 
Aula Interface Gráfica do Usuário
Aula Interface Gráfica do UsuárioAula Interface Gráfica do Usuário
Aula Interface Gráfica do Usuário
Fabio Moura Pereira
 
Aula Java Swing
Aula Java SwingAula Java Swing
Aula Java Swing
Fabio Moura Pereira
 
Javascript
JavascriptJavascript
Javascript
Tiago
 

Destaque (20)

04 - Gerenciamento de Threads - II
04 -  Gerenciamento de Threads - II04 -  Gerenciamento de Threads - II
04 - Gerenciamento de Threads - II
 
Aula Prolog - 05
Aula Prolog - 05Aula Prolog - 05
Aula Prolog - 05
 
Desenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - IntroduçãoDesenvolvimento de Sistemas Web - HTML5 - Introdução
Desenvolvimento de Sistemas Web - HTML5 - Introdução
 
Haskell - Introdução
Haskell - IntroduçãoHaskell - Introdução
Haskell - Introdução
 
05 - Sincronização de Threads - I
05 - Sincronização de Threads - I05 - Sincronização de Threads - I
05 - Sincronização de Threads - I
 
Programação Concorrente - Gerenciamento de Threads - Parte II
Programação Concorrente - Gerenciamento de Threads - Parte IIProgramação Concorrente - Gerenciamento de Threads - Parte II
Programação Concorrente - Gerenciamento de Threads - Parte II
 
Curso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTMLCurso de Desenvolvimento de Sistemas Web - (X)HTML
Curso de Desenvolvimento de Sistemas Web - (X)HTML
 
Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3Aula de Desenvolvimento de Sistemas Web - CSS3
Aula de Desenvolvimento de Sistemas Web - CSS3
 
Desenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos BásicosDesenvolvimento de Sistemas Web - Conceitos Básicos
Desenvolvimento de Sistemas Web - Conceitos Básicos
 
Curso de PHP - Objetos
Curso de PHP - ObjetosCurso de PHP - Objetos
Curso de PHP - Objetos
 
Aula de Prolog 07 - Estruturas de Dados
Aula de Prolog 07 - Estruturas de DadosAula de Prolog 07 - Estruturas de Dados
Aula de Prolog 07 - Estruturas de Dados
 
Aula de Prolog 08 - Unificação
Aula de Prolog 08 - UnificaçãoAula de Prolog 08 - Unificação
Aula de Prolog 08 - Unificação
 
Aula Prolog 03
Aula Prolog 03Aula Prolog 03
Aula Prolog 03
 
Aula Persistência 01 (Java)
Aula Persistência 01 (Java)Aula Persistência 01 (Java)
Aula Persistência 01 (Java)
 
Aula Tratamento de Exceções
Aula Tratamento de ExceçõesAula Tratamento de Exceções
Aula Tratamento de Exceções
 
Desenvolvimento de Jogos - Mercado Parte 2
Desenvolvimento de Jogos - Mercado Parte 2Desenvolvimento de Jogos - Mercado Parte 2
Desenvolvimento de Jogos - Mercado Parte 2
 
Desenvolvimento de Jogos - Game Design
Desenvolvimento de Jogos - Game DesignDesenvolvimento de Jogos - Game Design
Desenvolvimento de Jogos - Game Design
 
Aula Interface Gráfica do Usuário
Aula Interface Gráfica do UsuárioAula Interface Gráfica do Usuário
Aula Interface Gráfica do Usuário
 
Aula Java Swing
Aula Java SwingAula Java Swing
Aula Java Swing
 
Javascript
JavascriptJavascript
Javascript
 

Semelhante a Aula 05 - Java Script Básico

Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
Valmir Justo
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
Cláudio Amaral
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1
michellobo
 
2006 - ASP.NET.ppt
2006 - ASP.NET.ppt2006 - ASP.NET.ppt
2006 - ASP.NET.ppt
Ricardo Guerra Freitas
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
Carlos Santos
 
Curso asp - basico
Curso   asp - basicoCurso   asp - basico
Curso asp - basico
Regisnaldo Alencar
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Luiz Antonio
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com Polymer
Stefan Horochovec
 
Csharp
CsharpCsharp
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
Carlos Santos
 
Web tools pt-br
Web tools pt-brWeb tools pt-br
Web tools pt-br
Paulo Mattos
 
NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.
Filipe Morelli
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
Ruben Marcus Luz Paschoarelli
 
Desenvolvemos para web?
Desenvolvemos para web?Desenvolvemos para web?
Desenvolvemos para web?
Luis Vendrame
 
Introdução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos BazilioIntrodução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos Bazilio
RicardoKratz2
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
Carlos Santos
 
Fundamentos do asp.net
Fundamentos do asp.netFundamentos do asp.net
Fundamentos do asp.net
leojr_0
 
Java Web Dev Introdução
Java Web Dev IntroduçãoJava Web Dev Introdução
Java Web Dev Introdução
Marcio Marinho
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
MarceloRosenbrock1
 
A Linguagem Php
A Linguagem PhpA Linguagem Php
A Linguagem Php
Joaquim Vieira
 

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

Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.Desenvolvimento web - conceitos, tecnologia e tendências.
Desenvolvimento web - conceitos, tecnologia e tendências.
 
Aplicativo aula03
Aplicativo aula03Aplicativo aula03
Aplicativo aula03
 
Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1Curso ASP.Net - Módulo 1
Curso ASP.Net - Módulo 1
 
2006 - ASP.NET.ppt
2006 - ASP.NET.ppt2006 - ASP.NET.ppt
2006 - ASP.NET.ppt
 
T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)T03_LM3: Javascript (2013-2014)
T03_LM3: Javascript (2013-2014)
 
Curso asp - basico
Curso   asp - basicoCurso   asp - basico
Curso asp - basico
 
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptxProjeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
Projeto Web - Aula 1 - Fundamentos do Dev WEB.pptx
 
Componentizando a Web com Polymer
Componentizando a Web com PolymerComponentizando a Web com Polymer
Componentizando a Web com Polymer
 
Csharp
CsharpCsharp
Csharp
 
(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript(A04 e A05) LabMM3 - JavaScript
(A04 e A05) LabMM3 - JavaScript
 
Web tools pt-br
Web tools pt-brWeb tools pt-br
Web tools pt-br
 
NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.NodeJS - Tutorial de forma simples e pratica.
NodeJS - Tutorial de forma simples e pratica.
 
Escalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLIDEscalando apps com React e Type Script e SOLID
Escalando apps com React e Type Script e SOLID
 
Desenvolvemos para web?
Desenvolvemos para web?Desenvolvemos para web?
Desenvolvemos para web?
 
Introdução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos BazilioIntrodução à Programação “para Web” de Carlos Bazilio
Introdução à Programação “para Web” de Carlos Bazilio
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
 
Fundamentos do asp.net
Fundamentos do asp.netFundamentos do asp.net
Fundamentos do asp.net
 
Java Web Dev Introdução
Java Web Dev IntroduçãoJava Web Dev Introdução
Java Web Dev Introdução
 
Introdução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptxIntrodução ao desenvolvimento da web.pptx
Introdução ao desenvolvimento da web.pptx
 
A Linguagem Php
A Linguagem PhpA Linguagem Php
A Linguagem Php
 

Mais de Fabio Moura Pereira

Aula Prolog 09 - Listas
Aula Prolog 09 - ListasAula Prolog 09 - Listas
Aula Prolog 09 - Listas
Fabio Moura Pereira
 
Aula de Prolog 06 - Recursão
Aula de Prolog 06 - RecursãoAula de Prolog 06 - Recursão
Aula de Prolog 06 - Recursão
Fabio Moura Pereira
 
Prolog 04 - Regras
Prolog 04 - RegrasProlog 04 - Regras
Prolog 04 - Regras
Fabio Moura Pereira
 
Aula Prolog 02
Aula Prolog 02Aula Prolog 02
Aula Prolog 02
Fabio Moura Pereira
 
Aula Prolog 01
Aula Prolog 01Aula Prolog 01
Aula Prolog 01
Fabio Moura Pereira
 
Programação Concorrente - Gerenciamento de Threads - Parte I
Programação Concorrente - Gerenciamento de Threads - Parte IProgramação Concorrente - Gerenciamento de Threads - Parte I
Programação Concorrente - Gerenciamento de Threads - Parte I
Fabio Moura Pereira
 
Programação Concorrente - Objetos e Concorrência
Programação Concorrente - Objetos e ConcorrênciaProgramação Concorrente - Objetos e Concorrência
Programação Concorrente - Objetos e Concorrência
Fabio Moura Pereira
 
Programação Concorrente - Introdução
Programação Concorrente - IntroduçãoProgramação Concorrente - Introdução
Programação Concorrente - Introdução
Fabio Moura Pereira
 
Aula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de InteraçãoAula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de Interação
Fabio Moura Pereira
 
Aula Desenvolvimento de Jogos - Game Engine (Motor de Jogos)
Aula Desenvolvimento de Jogos - Game Engine (Motor de Jogos)Aula Desenvolvimento de Jogos - Game Engine (Motor de Jogos)
Aula Desenvolvimento de Jogos - Game Engine (Motor de Jogos)
Fabio Moura Pereira
 
Padrões de Projeto de Software
Padrões de Projeto de SoftwarePadrões de Projeto de Software
Padrões de Projeto de Software
Fabio Moura Pereira
 
Curso de PHP - Arrays
Curso de PHP - ArraysCurso de PHP - Arrays
Curso de PHP - Arrays
Fabio Moura Pereira
 
Desenvolvimento de Jogos - Mercado Parte 1
Desenvolvimento de Jogos - Mercado Parte 1Desenvolvimento de Jogos - Mercado Parte 1
Desenvolvimento de Jogos - Mercado Parte 1
Fabio Moura Pereira
 
PHP - Funções
PHP - FunçõesPHP - Funções
PHP - Funções
Fabio Moura Pereira
 

Mais de Fabio Moura Pereira (14)

Aula Prolog 09 - Listas
Aula Prolog 09 - ListasAula Prolog 09 - Listas
Aula Prolog 09 - Listas
 
Aula de Prolog 06 - Recursão
Aula de Prolog 06 - RecursãoAula de Prolog 06 - Recursão
Aula de Prolog 06 - Recursão
 
Prolog 04 - Regras
Prolog 04 - RegrasProlog 04 - Regras
Prolog 04 - Regras
 
Aula Prolog 02
Aula Prolog 02Aula Prolog 02
Aula Prolog 02
 
Aula Prolog 01
Aula Prolog 01Aula Prolog 01
Aula Prolog 01
 
Programação Concorrente - Gerenciamento de Threads - Parte I
Programação Concorrente - Gerenciamento de Threads - Parte IProgramação Concorrente - Gerenciamento de Threads - Parte I
Programação Concorrente - Gerenciamento de Threads - Parte I
 
Programação Concorrente - Objetos e Concorrência
Programação Concorrente - Objetos e ConcorrênciaProgramação Concorrente - Objetos e Concorrência
Programação Concorrente - Objetos e Concorrência
 
Programação Concorrente - Introdução
Programação Concorrente - IntroduçãoProgramação Concorrente - Introdução
Programação Concorrente - Introdução
 
Aula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de InteraçãoAula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de Interação
 
Aula Desenvolvimento de Jogos - Game Engine (Motor de Jogos)
Aula Desenvolvimento de Jogos - Game Engine (Motor de Jogos)Aula Desenvolvimento de Jogos - Game Engine (Motor de Jogos)
Aula Desenvolvimento de Jogos - Game Engine (Motor de Jogos)
 
Padrões de Projeto de Software
Padrões de Projeto de SoftwarePadrões de Projeto de Software
Padrões de Projeto de Software
 
Curso de PHP - Arrays
Curso de PHP - ArraysCurso de PHP - Arrays
Curso de PHP - Arrays
 
Desenvolvimento de Jogos - Mercado Parte 1
Desenvolvimento de Jogos - Mercado Parte 1Desenvolvimento de Jogos - Mercado Parte 1
Desenvolvimento de Jogos - Mercado Parte 1
 
PHP - Funções
PHP - FunçõesPHP - Funções
PHP - Funções
 

Aula 05 - Java Script Básico

  • 1. 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)
  • 2. 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
  • 3.
  • 4. 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
  • 5. 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
  • 6. 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)
  • 7. 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
  • 8. 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
  • 9. 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
  • 10. 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
  • 11. Hierarquia de Nós do DOM <html> <head> <title>Sample Page</title> </head> <body> <p>Hello World!</p> </body> </html>
  • 12. 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
  • 13. Browser Object Model (BOM) • 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
  • 14. Browser Object Model (BOM) • 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
  • 16.
  • 17. 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
  • 18. 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”
  • 19. 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
  • 20. 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>
  • 21. 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: <script type=”text/javascript” src=”http://www.somewhere.com/afile.js”> </script>
  • 22. 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> <script type=”text/javascript” src=”example1.js”></script> <script type=”text/javascript” src=”example2.js”></script> </head> <body> <!-- content here --> </body> </html> • O objetivo principal é manter referências a arquivos externos, como arquivos CSS e JavaScript, na mesma área
  • 23. Localização da tag • 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
  • 24. Localização da tag • 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> <title>Example HTML Page</title> </head> <body> <!-- content here --> <script type=”text/javascript” src=”example1.js”></script> <script type=”text/javascript” src=”example2.js”></script> </body> </html>
  • 25. 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> <title>Example HTML Page</title> <script type=”text/javascript” defer src=”example1.js”></script> <script type=”text/javascript” defer src=”example2.js”></script> </head> <body> <!-- content here --> </body> </html>
  • 26. 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
  • 27. Scripts Assíncronos • No exemplo: <!DOCTYPE html> <html> <head> <title>Example HTML Page</title> <script type=”text/javascript” async src=”example1.js”></script> <script type=”text/javascript” async src=”example2.js”></script> </head> <body> <!-- content here --> </body> </html> • O segundo script pode ser executado antes do primeiro, então é importante que não haja dependência entre os dois
  • 28. 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
  • 29. 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> <title>Example HTML Page</title> <script type=”text/javascript” defer=”defer” src=”example1.js”></script> <script type=”text/javascript” defer=”defer” src=”example2.js”></script> </head> <body> <noscript> <p>This page requires a JavaScript-enabled browser.</p> </noscript> </body> </html>
  • 30.
  • 31. 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
  • 32. 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
  • 33. 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
  • 34. 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 */
  • 35. 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 }
  • 36. 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
  • 37. Sintaxe – Instruçõ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
  • 38. Sintaxe – 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); }
  • 39. 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
  • 40. Palavras-Chave e Palavras Reservadas • 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
  • 41. Palavras-Chave e Palavras Reservadas • 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
  • 42. 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
  • 43. 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
  • 44. 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!
  • 45. 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
  • 46. 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;
  • 47. 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
  • 48. 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
  • 49. 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”
  • 50. 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
  • 51. 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
  • 52. 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”
  • 53. 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 }
  • 54. 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
  • 55. 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);
  • 56. 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
  • 57. 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
  • 58. 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
  • 59. 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
  • 60. Números de Ponto Flutuante • 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
  • 61. Números de Ponto Flutuante • 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
  • 62. 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)
  • 63. 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
  • 64. 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)
  • 65. 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
  • 66. 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)
  • 67. Conversões de Números • 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
  • 68. Conversões de Números • 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
  • 69. Conversões de Números • 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
  • 70. Conversões de Números • 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
  • 71. 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.”;
  • 72. 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 
  • 73. 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”;
  • 74. 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
  • 75. Conversão para String • 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(8)); //”12” alert(num.toString(10)); //”10” alert(num.toString(16)); //”a”
  • 76. Conversão para String • 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
  • 77. Conversão para String • 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”
  • 78. 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
  • 79. 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
  • 80. 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
  • 81. 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;
  • 82. 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
  • 83. Operadores Unários • Exemplos: var num1 = 2; var num2 = 20; var num3 = num1-- + num2; //equals 22 var num4 = num1 + num2; //equals 21
  • 84. 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
  • 85. Operadores Booleanos • NOT (!) alert(!false); //true alert(!”blue”); //false alert(!0); //true alert(!NaN); //true alert(!””); //true alert(!12345); //false
  • 86. Operadores Booleanos • 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
  • 87. Operadores Booleanos • 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
  • 88. Operadores Multiplicativos • Mutiplicação (*) • Divisão (/) • Módulo (%) – Resto da divisão var result = 26 % 5; //equal to 1
  • 89. 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”
  • 90. 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
  • 91. 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
  • 92. 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
  • 93. Operador Condicional • Equivalente ao Java: variável = expressão_booleana ? valor_true : valor_false; • Exemplo: var max = (num1 > num2) ? num1 : num2;
  • 94. 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;
  • 95. 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
  • 96. 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
  • 97. 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.”); }
  • 98. 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);
  • 99. 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; }
  • 100. 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); }
  • 101. 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
  • 102. 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
  • 103. 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
  • 104. Instruções break e continue • Exemplo: var num = 0; for (var i=1; i < 10; i++) { if (i % 5 == 0) { continue; } num++; } alert(num); //8
  • 105. Instruções break e continue • 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
  • 106. Instruções break e continue • 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
  • 107. 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; }
  • 108. A Instrução switch • Relembra a sintaxe das linguagens baseadas em C: switch (expressão) { case valor: instrução break; case valor: instrução break; case valor: instrução break; case valor: instrução break; default: instrução }
  • 109. A Instrução switch • 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”); }
  • 110. A Instrução switch • 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.”); }
  • 111. 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); }
  • 112. 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);
  • 113. 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
  • 114. Entendendo Argumentos • 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
  • 115. Entendendo Argumentos • 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
  • 116. 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
  • 117.
  • 118. 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
  • 119. 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
  • 120. 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
  • 121. 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
  • 122. 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”
  • 123. 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
  • 124. 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
  • 125. Passagem de Argumento • Com objetos: function setName(obj) { obj.name = “Nicholas”; } var person = new Object(); setName(person); alert(person.name); //”Nicholas” ------------- function setName(obj) { obj.name = “Nicholas”; obj = new Object(); obj.name = “Greg”; } var person = new Object(); setName(person); alert(person.name); //”Nicholas”
  • 126. 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
  • 127. 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?
  • 128. 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
  • 129. 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();
  • 130. 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) { var color = “blue”; } alert(color); //”blue” • Ou: for (var i=0; i < 10; i++){ doSomething(i); } alert(i); //10
  • 131. 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!
  • 132. Busca do Identificador var color = “blue”; function getColor(){ return color; } alert(getColor()); //”blue” var color = “blue”; function getColor(){ var color = “red”; return color; } alert(getColor()); //”red”
  • 133. 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
  • 134. 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
  • 135. 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
  • 136. 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;
  • 137.
  • 138. 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
  • 139. 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.name = “Nicholas”; 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 };
  • 140. 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
  • 141. O Tipo Objeto • Uma outra forma: var person = {}; //o mesmo que new Object() person.name = “Nicholas”; person.age = 29;
  • 142. 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” });
  • 143. Outras Notações alert(person[“name”]); //”Nicholas” alert(person.name); //”Nicholas” var propertyName = “name”; alert(person[propertyName]); //”Nicholas” person[“first name”] = “Nicholas”;
  • 144. 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);
  • 145. 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
  • 146. 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
  • 147. 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)
  • 148. O Tipo Array • O tamanho de um array é automaticamente calculado: var colors = [“red”, “blue”, “green”]; colors[99] = “black”; //adiciona uma cor (posição 99) alert(colors.length); //100 • 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 }
  • 149. 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
  • 150. 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” alert(colors.length); //2
  • 151. 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 colors = new Array(); //cria um array var count = colors.push(“red”, “green”); //inclui dois items alert(count); //2 count = colors.push(“black”); //inclui um outro item alert(count); //3 var item = colors.shift(); //recupera o primeiro item alert(item); //”red” alert(colors.length); //2
  • 152. 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 colors = new Array(); //cria um array var count = colors.unshift(“red”, “green”); //inclui dois items alert(count); //2 count = colors.unshift(“black”); //inclui um outro item alert(count); //3 var item = colors.pop(); //recupera o primeiro item alert(item); //”green” alert(colors.length); //2
  • 153. 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”
  • 154. Reordenando um Array • 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
  • 155. Reordenando um Array • 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
  • 156. Reordenando um Array • Para valores numéricos a função de ordenação poderia ser bem mais simples: function compare(value1, value2){ return value2 - value1; }
  • 157. 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
  • 158. 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
  • 159. 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
  • 160. 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
  • 161. 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]
  • 162. Exemplos • forEach(): var numbers = [1,2,3,4,5,4,3,2,1]; numbers.forEach(function(item, index, array){ //do something here });
  • 163. 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()
  • 164. 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”);
  • 165. 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;
  • 166. 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)