O documento discute as principais características da linguagem JavaScript e ECMAScript, incluindo sua história, conceitos, orientação a objetos, e novidades da ECMAScript 5. Ele também aborda tópicos como usos comuns de JavaScript, objetos pré-definidos, operadores, instruções de controle de fluxo e tratamento de erros.
TDC 2011 Goiânia: Evolução da linguagem de programação JavaScript
1. Rogério Moraes de Carvalho
VITA Informática
@rogeriomc
rogeriomc.wordpress.com
2. Agenda
Presente e futuro da linguagem JavaScript
A linguagem JavaScript
A linguagem ECMAScript
Usos mais comuns da JavaScript
Conceitos iniciais da JavaScript
Orientação a objetos em JavaScript
Novidades da ECMAScript 5
Browsers mais usados
Suporte à ECMAScript 5
Considerações finais
3. Agenda
Presente e futuro da linguagem JavaScript
A linguagem JavaScript
A linguagem ECMAScript
Usos mais comuns da JavaScript
Conceitos iniciais da JavaScript
Orientação a objetos em JavaScript
Novidades da ECMAScript 5
Browsers mais usados
Suporte à ECMAScript 5
Considerações finais
4. O que é JavaScript?
A linguagem
Linguagem de scripting
Baseada em protótipos
Dinâmica
Com tipagem fraca
Funções como primeira classe
Linguagem de múltiplos paradigmas
Orientada a objetos
Imperativa
Funcional
Não confundir com Java
5. Influências da JavaScript
Inspiração na criação
Base dos princípios chaves da
arquitetura
Linguagem Self
Linguagem Scheme
Base da sintaxe
Linguagem C
Nomes e convenções de nomenclatura
Linguagem Java
6. História da JavaScript
Criação e evolução inicial da linguagem
ECMAScript 1a edição do padrão ECMA-262
(Jun 1997) da linguagem ECMAScript
Padronização A Netscape submeteu a JavaScript
(Nov 1996) para a Ecma International (padrão)
JScript Implementação da Microsoft
(Aug 1996) Internet Explorer 3.0
JavaScript Renomeada para JavaScript
(Dez 1995) Netscape Navigator 2.0B3 (final)
LiveScript Por Brendan Eich da Netscape
(Set 1995) Netscape Navigator 2.0 Beta
7. Agenda
Presente e futuro da linguagem JavaScript
A linguagem JavaScript
A linguagem ECMAScript
Usos mais comuns da JavaScript
Conceitos iniciais da JavaScript
Orientação a objetos em JavaScript
Novidades da ECMAScript 5
Browsers mais usados
Suporte à ECMAScript 5
Considerações finais
8. História da ECMAScript
Evolução da especificação ECMA-232
Harmony Trabalho em andamento
Edição 5.1 Alinhamento com o padrão
(Jun 2011) ISO/IEC 16262:2011
Edição 5 Strict mode, getters e setters,
(Dez 2009) suporte a JSON, ...
Edição 4 Abandonada devido à complexidade
(Abandonada) Base da 5a edição e do Harmony
Edição 3 Expressões regulares, novas instruções
(Dez 1999) de controle, try/catch, ...
Edição 2 Alinhamento com o padrão
(Jun 1998) ISO/IEC 16262
Edição 1 Liberação da 1a edição
(Jun 1997)
9. Agenda
Presente e futuro da linguagem JavaScript
A linguagem JavaScript
A linguagem ECMAScript
Usos mais comuns da JavaScript
Conceitos iniciais da JavaScript
Orientação a objetos em JavaScript
Novidades da ECMAScript 5
Browsers mais usados
Suporte à ECMAScript 5
Considerações finais
10. Usos da JavaScript
Alguns casos de uso da linguagem
Scripts do lado do cliente
Implementada em Web Browsers
Permite acesso programático a objetos no
browser
jQuery – Biblioteca JavaScript
CoffeeScript compila em JavaScript
Node.js – Orientado a eventos E/S
JavaScript do lado do servidor
Windows 8 Metro Style
HTML5/CSS3/JavaScript
11. Agenda
Presente e futuro da linguagem JavaScript
A linguagem JavaScript
A linguagem ECMAScript
Usos mais comuns da JavaScript
Conceitos iniciais da JavaScript
Orientação a objetos em JavaScript
Novidades da ECMAScript 5
Browsers mais usados
Suporte à ECMAScript 5
Considerações finais
12. Objetos e propriedades
No contexto da linguagem ECMAScript
JavaScript é baseada em objetos
Objetos
Coleções de propriedades
Do tipo pré-definido: Object
Propriedades
São contêineres para outros objetos,
valores primitivos ou funções
13. Valores primitivos e funções
No contexto da linguagem ECMAScript
Valores primitivos
Um dos seguintes tipos pré-definidos:
Undefined
Null
Boolean
Number
String
Função
Objeto que pode ser chamado
Método
Função associada com um
objeto via uma propriedade
14. Objetos pré-definidos
No contexto da linguagem ECMAScript
Coleção de objetos pré-definidos
Objeto global RegExp
Object JSON
Function Objetos de erro
Array Error
String EvalError
Boolean RangeError
ReferenceError
Number
SyntaxError
Math TypeError
Date URIError
16. Instruções condicionais
No contexto da linguagem ECMAScript
Instrução if
if (expressão) instrução else instrução
if (expressão) instrução
Instrução switch
switch (expressão) {
[case expressão : Instruçõesopcionais]
[case expressão : Instruçõesopcionais]
...
[default : Instruçõesopcionais]
}
17. Instruções de iteração
No contexto da linguagem ECMAScript
Instrução for
for (expressãoopcional; expressãoopcional;
expressãoopcional) instrução
for (var listaDeclaraçãoVariável;
expressãoopcional;
expressãoopcional) instrução
Instrução for...in
for (expressãoLadoEsquerdo in
expressão) instrução
for (var declaraçãoVariável in
expressão) instrução
18. Instruções de iteração
No contexto da linguagem ECMAScript
Instrução do...while
do instrução while (expressão)
Instrução while
while (expressão) instrução
Instrução continue
continue;
continue identificador;
Instrução break
break;
break identificador;
20. Outras instruções
No contexto da linguagem ECMAScript
Instrução with
with (expressão) instrução
Uma instrução with no modo estrito (ES5) é
tratado como SyntaxError
Instrução return
return;
return expressão;
Instrução rotulada
Identificador : instrução
Instrução debugger
debugger;
21. Funções
No contexto da linguagem ECMAScript
Funções em JavaScript
São construções de primeira classe na
linguagem JavaScript
São objetos que podem ser chamados
Podem ter propriedades associadas
Sintaxe
Função com identificador
function identificador (ListaParamsopcional)
{ CorpoDaFunção }
Função anônima
function (ListaParamopcional)
{ CorpoDaFunção }
22. Retorno e herança nas funções
No contexto da linguagem ECMAScript
Algumas características das funções
Podem retornar valores
Sem a instrução return ou com return sem
expressão retornam undefined
Herança baseada em protótipos
Funções herdam de Function.prototype
Que por sua vez herdam de Object.prototype
23. Chamada de funções
No contexto da linguagem ECMAScript
Modos de chamar uma função
Diretamente por meio de parênteses
Indiretamente pelos seguintes métodos
herdados de Function.prototype
call(argThis[, arg1[, arg2, ...]])
apply(argThis, argArray)
Na chamada não há checagem do
número de argumentos
Não há sobrecarga em JavaScript
Parâmetros não fornecidos
terão valor undefined
25. Agenda
Presente e futuro da linguagem JavaScript
A linguagem JavaScript
A linguagem ECMAScript
Usos mais comuns da JavaScript
Conceitos iniciais da JavaScript
Orientação a objetos em JavaScript
Novidades da ECMAScript 5
Browsers mais usados
Suporte à ECMAScript 5
Considerações finais
26. Objetos
No contexto da linguagem ECMAScript
JavaScript não usa classes
Diferente de C++, C#, Java e Smalltalk
Objetos podem ser criados via:
Notação literal
Construtor
Objetos são passados por referência
Eles nunca são copiados
28. Propriedades
No contexto da linguagem ECMAScript
Leitura de propriedades
objeto.propriedade
objeto[“propriedade”]
Atualização de propriedades
Via atribuição
Se já existir, então será atualizada
Se não existir, então será adicionada
Exclusão de propriedades
delete objeto.propriedade
Enumeração
for...in
30. Herança baseada em protótipo
No contexto da linguagem ECMAScript
Em uma linguagem POO baseada em
classes
Estado é transportado por instâncias
Métodos são transportados por classes
Herança é de estrutura e comportamento
Em JavaScript
Estado e métodos são transportados por
objetos (instâncias)
Herança é de estrutura,
comportamento e estado
31. Herança baseada em protótipo
No contexto da linguagem ECMAScript
JavaScript não usa classes
Diferente de C++, C#, Java e Smalltalk
Objetos podem ser criados via:
Notação literal
Construtor
Cada construtor é uma função
Que contém uma propriedade nomeada
prototype
Usada para implementar herança
baseada em protótipo e
propriedades compartilhadas
32. Herança baseada em protótipo
No contexto da linguagem ECMAScript
Cada objeto é vinculado um objeto
protótipo
Do qual ele pode herdar propriedades
Método hasOwnProperty(str)
Verifica se um objeto possui uma
propriedade particular
O método não verifica na cadeia de
protótipos
Reflexão
Operador typeof
33. Objeto global
No contexto da linguagem ECMAScript
O único objeto global é criado antes do
controle entrar em qualquer contexto de
execução
Em browsers
Em HTML, o Document Object Model define
o objeto global como sendo o objeto
window
35. Agenda
Presente e futuro da linguagem JavaScript
A linguagem JavaScript
A linguagem ECMAScript
Usos mais comuns da JavaScript
Conceitos iniciais da JavaScript
Orientação a objetos em JavaScript
Novidades da ECMAScript 5
Browsers mais usados
Suporte à ECMAScript 5
Considerações finais
36. ECMAScript 5
Novidades
Melhor controle sobre propriedades
Controle do acesso a propriedades
Getter (controle sobre a leitura)
Setter (controle sobre a escrita)
Controle de atributos de propriedades
Descritores de propriedades
Programação mais robusta
Objetos a prova de adulteração
Modo estrito (“strict mode”)
37. ECMAScript 5
Novidades
Novas APIs
Novos métodos para Arrays
JSON (JavaScript Object Notation)
Function.prototype.bind
38. Prevenindo a extensibilidade
Novidades da ECMAScript 5
Object.preventExtensions(obj)
Previne futuros acréscimos de propriedades
num objeto
Object.isExtensible(obj)
Determina a extensibilidade atual de um
objeto
39. Novo tipo de propriedade
Novidades da ECMAScript 5
Novo tipo de propriedade
Propriedade de acesso nomeada
Associa um nome com duas funções de acesso
(get/set) e um conjunto de atributos booleanos
Mantidos os tipos da ECMAScript 3
Propriedade de dados nomeada
Associa um nome com um valor e um conjunto
de atributos booleanos
Propriedade interna
Não tem nome e não é diretamente
acessível pelos operadores da
linguagem ECMAScript
40. Descritores de propriedade
Novidades da ECMAScript 5
Descritores
value
Valor da propriedade
writable (booleana)
Se permite a modificação do valor da
propriedade
configurable (booleana)
Se permite a exclusão da propriedade ou a
modificação de seus descritores
enumerable (booleana)
Se permite que a propriedade apareça numa
enumeração de propriedades
41. Definição de uma propriedade
Novidades da ECMAScript 5
Object.defineProperty(obj, prop, desc)
Este método permite a definição de uma
nova propriedade num objeto
obj
Objeto
prop
Propriedade do objeto a ser criada
desc
Descritores da nova propriedade
42. get/set em propriedades
Novidades da ECMAScript 5
Object.defineProperty( obj, prop, {
get: function(){ … },
set: function(valor) { … }
});
Este método permite a definição de uma
nova propriedade com get/set
obj
Objeto
prop
Propriedade do objeto a ser criada
43. Criação de objetos
Novidades da ECMAScript 5
Object.create ( objPrototipo [, desc])
Este método permite a definição de uma
nova propriedade com get/set
objPrototipo
Objeto protótipo
desc
Descritores da nova propriedade
44. Modo estrito
Permite escrever código JavaScript mais restritivo
(function () {
"use strict";
// Função em modo estrito
var idade;
Idade = 5; // Erro!
arguments.caller; // Erro!
arguments.callee; // Erro!
var obj = { x: 5 };
Object.freeze(obj);
obj.x = 7; // Lança um erro
}());
46. Agenda
Presente e futuro da linguagem JavaScript
A linguagem JavaScript
A linguagem ECMAScript
Usos mais comuns da JavaScript
Conceitos iniciais da JavaScript
Orientação a objetos em JavaScript
Novidades da ECMAScript 5
Browsers mais usados
Suporte à ECMAScript 5
Considerações finais
47. 5 browsers mais usados
Estatística da StatCounter – Mundo
41.89%
27.49%
23.16%
5.19%
1.67%
48. 5 browsers mais usados
Estatística da StatCounter – Brasil
43.05%
31.35%
24.26%
0.78%
0.40%
49. Agenda
Presente e futuro da linguagem JavaScript
A linguagem JavaScript
A linguagem ECMAScript
Usos mais comuns da JavaScript
Conceitos iniciais da JavaScript
Orientação a objetos em JavaScript
Novidades da ECMAScript 5
Browsers mais usados
Suporte à ECMAScript 5
Considerações finais
50. Suporte à ECMAScript 5
Existência de suporte no Internet Explorer
Novidade da ECMAScript 5 IE 8 IE 9 IE 10 PP2
Object.create Não Sim Sim
Object.defineProperty Sim [1] Sim Sim
Object.defineProperties Não Sim Sim
Object.getPropertyOf Não Sim Sim
Object.keys Não Sim Sim
Object.seal Não Sim Sim
Object.freeze Não Sim Sim
Object.preventExtensions Não Sim Sim
Object.isSealed Não Sim Sim
Object.isFrozen Não Sim Sim
Object.isExtensible Não Sim Sim
Object.getOwnPropertyDescriptor Sim Sim Sim
Object.getOwnPropertyNames Não Sim Sim
Date.prototype.toISOString Não Sim Sim
Date.now Não Sim Sim
Array.isArray Não Sim Sim
JSON Sim Sim Sim
51. Suporte à ECMAScript 5
Existência de suporte no Internet Explorer
Novidade da ECMAScript 5 IE 8 IE 9 IE 10 PP2
Function.prototype.bind Não Sim Sim
String.prototype.trim Não Sim Sim
Array.prototype.indexOf Não Sim Sim
Array.prototype.lastIndexOf Não Sim Sim
Array.prototype.every Não Sim Sim
Array.prototype.some Não Sim Sim
Array.prototype.forEach Não Sim Sim
Array.prototype.map Não Sim Sim
Array.prototype.filter Não Sim Sim
Array.prototype.reduce Não Sim Sim
Array.prototype.reduceRight Não Sim Sim
Getter na inicialização de propriedade Não Sim Sim
Setter na inicialização de propriedade Não Sim Sim
Acesso a propriedades em Strings [1] Sim Sim Sim
Palavras reservadas em nomes de
Não Sim Sim
propriedades [2]
Modo estrito (Strict mode) [3] Não Não Sim [4]
52. Suporte à ECMAScript 5
Existência de suporte no Mozilla Firefox
Recurso da ECMAScript 5 FF 3.5, 3.6 FF 4-6
Object.create Não Sim
Object.defineProperty Não Sim
Object.defineProperties Não Sim
Object.getPropertyOf Sim Sim
Object.keys Não Sim
Object.seal Não Sim
Object.freeze Não Sim
Object.preventExtensions Não Sim
Object.isSealed Não Sim
Object.isFrozen Não Sim
Object.isExtensible Não Sim
Object.getOwnPropertyDescriptor Não Sim
Object.getOwnPropertyNames Não Sim
Date.prototype.toISOString Sim Sim
Date.now Sim Sim
Array.isArray Não Sim
JSON Sim Sim
53. Suporte à ECMAScript 5
Existência de suporte no Mozilla Firefox
Recurso da ECMAScript 5 FF 3.5, 3.6 FF 4-6
Function.prototype.bind Não Sim
String.prototype.trim Sim Sim
Array.prototype.indexOf Sim Sim
Array.prototype.lastIndexOf Sim Sim
Array.prototype.every Sim Sim
Array.prototype.some Sim Sim
Array.prototype.forEach Sim Sim
Array.prototype.map Sim Sim
Array.prototype.filter Sim Sim
Array.prototype.reduce Sim Sim
Array.prototype.reduceRight Sim Sim
Getter na inicialização de propriedade Sim Sim
Setter na inicialização de propriedade Sim Sim
Acesso a propriedades em Strings [1] Sim Sim
Palavras reservadas em nomes de
Sim Sim
propriedades [2]
Modo estrito (Strict mode) [3] Não Sim
55. Suporte à ECMAScript 5
Existência de suporte no Google Chrome
Recurso da ECMAScript 5 CH 7-12 CH 13, 14
Function.prototype.bind Sim Sim
String.prototype.trim Sim Sim
Array.prototype.indexOf Sim Sim
Array.prototype.lastIndexOf Sim Sim
Array.prototype.every Sim Sim
Array.prototype.some Sim Sim
Array.prototype.forEach Sim Sim
Array.prototype.map Sim Sim
Array.prototype.filter Sim Sim
Array.prototype.reduce Sim Sim
Array.prototype.reduceRight Sim Sim
Getter na inicialização de propriedade Sim Sim
Setter na inicialização de propriedade Sim Sim
Acesso a propriedades em Strings [1] Sim Sim
Palavras reservadas em nomes de
Sim Sim
propriedades [2]
Modo estrito (Strict mode) [3] Não Sim
56. Suporte à ECMAScript 5
Existência de suporte no Apple Safari
Novidade da ECMAScript 5 SF 4 SF 5 SF 5.1
Object.create Não Sim Sim
Object.defineProperty Não Sim Sim
Object.defineProperties Não Sim Sim
Object.getPropertyOf Não Sim Sim
Object.keys Não Sim Sim
Object.seal Não Não Sim
Object.freeze Não Não Sim
Object.preventExtensions Não Não Sim
Object.isSealed Não Não Sim
Object.isFrozen Não Não Sim
Object.isExtensible Não Não Sim
Object.getOwnPropertyDescriptor Não Sim Sim
Object.getOwnPropertyNames Não Sim Sim
Date.prototype.toISOString Sim Sim Sim
Date.now Sim Sim Sim
Array.isArray Não Sim Sim
JSON Sim Sim Sim
57. Suporte à ECMAScript 5
Existência de suporte no Apple Safari
Novidade da ECMAScript 5 SF 4 SF 5 SF 5.1
Function.prototype.bind Não Não Não
String.prototype.trim Não Sim Sim
Array.prototype.indexOf Sim Sim Sim
Array.prototype.lastIndexOf Sim Sim Sim
Array.prototype.every Sim Sim Sim
Array.prototype.some Sim Sim Sim
Array.prototype.forEach Sim Sim Sim
Array.prototype.map Sim Sim Sim
Array.prototype.filter Sim Sim Sim
Array.prototype.reduce Sim Sim Sim
Array.prototype.reduceRight Sim Sim Sim
Getter na inicialização de propriedade Sim Sim Sim
Setter na inicialização de propriedade Sim Sim Sim
Acesso a propriedades em Strings [1] Sim Sim Sim
Palavras reservadas em nomes de
Não Sim Sim
propriedades [2]
Modo estrito (Strict mode) [3] Não Sim Sim
58. Suporte à ECMAScript 5
Existência de suporte no WebKit
Recurso da ECMAScript 5 WebKit
Function.prototype.bind Não
String.prototype.trim Sim
Array.prototype.indexOf Sim
Array.prototype.lastIndexOf Sim
Array.prototype.every Sim
Array.prototype.some Sim
Array.prototype.forEach Sim
Array.prototype.map Sim
Array.prototype.filter Sim
Array.prototype.reduce Sim
Array.prototype.reduceRight Sim
Getter na inicialização de propriedade Sim
Setter na inicialização de propriedade Sim
Acesso a propriedades em Strings [1] Sim
Palavras reservadas em nomes de
Sim
propriedades [2]
Modo estrito (Strict mode) [3] Sim
60. Suporte à ECMAScript 5
Existência de suporte no Opera
Recurso da ECMAScript 5 OP 10.50 – 11.50 OP 12 Beta
Object.create Não Sim
Object.defineProperty Não Sim
Object.defineProperties Não Sim
Object.getPropertyOf Não Sim
Object.keys Não Sim
Object.seal Não Sim
Object.freeze Não Sim
Object.preventExtensions Não Sim
Object.isSealed Não Sim
Object.isFrozen Não Sim
Object.isExtensible Não Sim
Object.getOwnPropertyDescriptor Não Sim
Object.getOwnPropertyNames Não Sim
Date.prototype.toISOString Sim Sim
Date.now Sim Sim
Array.isArray Sim Sim
JSON Sim Sim
61. Suporte à ECMAScript 5
Existência de suporte no Opera
Recurso da ECMAScript 5 OP 10.50-11.50 OP 12
Function.prototype.bind Não Sim
String.prototype.trim Sim Sim
Array.prototype.indexOf Sim Sim
Array.prototype.lastIndexOf Sim Sim
Array.prototype.every Sim Sim
Array.prototype.some Sim Sim
Array.prototype.forEach Sim Sim
Array.prototype.map Sim Sim
Array.prototype.filter Sim Sim
Array.prototype.reduce Sim Sim
Array.prototype.reduceRight Sim Sim
Getter na inicialização de propriedade Sim Sim
Setter na inicialização de propriedade Sim Sim
Acesso a propriedades em Strings [1] Sim Sim
Palavras reservadas em nomes de
Não Sim
propriedades [2]
Modo estrito (Strict mode) [3] Não Sim
62. Agenda
Presente e futuro da linguagem JavaScript
A linguagem JavaScript
A linguagem ECMAScript
Usos mais comuns da JavaScript
Conceitos iniciais da JavaScript
Orientação a objetos em JavaScript
Novidades da ECMAScript 5
Browsers mais usados
Suporte à ECMAScript 5
Considerações finais
63. Considerações finais
Dicas
JavaScript é uma linguagem de programação
simples, poderosa e flexível
Pesquise códigos de bibliotecas
Analise os códigos de implementação das suas
bibliotecas JavaScript favoritas
Teste seus códigos JavaScript nos principais
browsers
Microsoft Internet Explorer, Mozilla Firefox, Google
Chrome, Apple Safari, Opera, ...
Aprenda sobre as novidades da ECMAScript 5
Considere optar pelo modo estrito