Nesta palestra, eu apresentei uma introdução à linguagem de programação <strong>JavaScript</strong>, sua evolução, sua padronização de acordo com a especificação <strong>ECMA-262</strong> (linguagem <strong>ECMAScript</strong>), principais usos da linguagem, alguns dos principais conceitos da linguagem, programação orientada a objetos com JavaScript e algumas das novidades da <strong>ECMAScript 5</strong>. Além disto, eu também apresentei estatísticas de uso dos 5 principais browsers da atualidade e o suporte dos principais browsers do mercado ao ECMAScript 5.
TechEd Brasil 2011: WEB 302 - Presente e futuro da linguagem de programação JavaScript
1.
2. Presente e futuro da
linguagem de programação
JavaScript
WEB302
Rogério Moraes de Carvalho
VITA Informática
@rogeriomc
rogeriomc.wordpress.com
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
Conclusão
4. 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
Conclusão
5. 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
6. 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
7. 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
8. 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
Conclusão
9. 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)
10. 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
Conclusão
11. 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 Metro Style
HTML5/CSS3/JavaScript
12. 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
Conclusão
13. 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
14. 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
15. 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
17. 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]
}
18. 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
19. 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;
21. 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;
22. 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 }
23. 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
24. 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
26. 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
Conclusão
27. 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
29. 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
31. 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
32. 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
33. 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
34. 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
36. 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
Conclusão
37. 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”)
38. ECMAScript 5
Novidades
Novas APIs
Novos métodos para Arrays
JSON (JavaScript Object Notation)
Function.prototype.bind
39. 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
40. Novo tipo de propriedade
Novidade 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
41. 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
42. 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
43. 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
44. 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
45. Modo estrito
Permite escrever código JavaScript mais restrititivo
(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
}());
47. 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
Conclusão
48. 5 browsers mais usados
Estatística da StatCounter – Mundo
41.89%
27.49%
23.16%
5.19%
1.67%
49. 5 browsers mais usados
Estatística da StatCounter – Brasil
43.05%
31.35%
24.26%
0.78%
0.40%
50. 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
Conclusão
51. 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
52. 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]
53. 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
54. 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
56. 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
57. 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
58. 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
59. 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
61. 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
62. 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
63. 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
Conclusão
64. 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
65. Conteúdo Relacionado
Standard ECMA-262
ECMAScript Language Specification
Edition 5.1 (June 2011)
http://www.ecma-
international.org/publications/standards/Ecma-262.htm
Livro: JavaScript: The Good Parts
Autor: Douglas Crockford
Editora: O'Reilly
oreilly.com/catalog/9780596517748
Livro: Secrets of the JavaScript Ninja
Early Access Edition
Autor: John Resig e Bear Bibeault
Editora: Manning
manning.com/resig/
66. Palestras Relacionadas
QS42 – HTML5, CSS3 e JavaScript em 30
minutos
Victor Cavalcante (29/09 11:20 às 11:50)
WEB401 – Mergulhe no HTML 5
Alex Kondera, Murilo Curti (30/09 8:30 às 9:40)
WEB301 – Plataforma Web Microsoft: Infinitas
possibilidades
Murilo Curti, Rogério Cordeiro (29/09 11:20 às 12:30)
67. Get the free mobile app for your phone
http:/ / gettag.mobi
http://technet.microsoft.com/pt-br
Get the free mobile app for your phone
http:/ / gettag.mobi
http://msdn.microsoft.com/pt-br
68. Não esqueça de
preencher sua avaliação
online
www.teched.com.br/avaliacao
Get the free mobile app for your phone
http:/ / gettag.mobi