tdc 2011 goiânia: evolução da linguagem de programação javascript

Rogério Moraes de Carvalho VITA Informática @rogeriomc rogeriomc.wordpress.com

http://twitter.com/rogeriomc

http://twitter.com/rogeriomc

http://rogeriomc.wordpress.com/

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

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

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

História da JavaScript Criação e evolução inicial da linguagem

LiveScript (Set 1995)

JavaScript (Dez 1995)

JScript (Aug 1996)

Por Brendan Eich da Netscape

Netscape Navigator 2.0 Beta

Renomeada para JavaScript

Netscape Navigator 2.0B3 (final)

Implementação da Microsoft

Internet Explorer 3.0

Padronização (Nov 1996)

A Netscape submeteu a JavaScript

para a Ecma International (padrão)

ECMAScript (Jun 1997)

1a edição do padrão ECMA-262

da linguagem ECMAScript

História da ECMAScript Evolução da especificação ECMA-232

Edição 1 (Jun 1997)

Edição 2 (Jun 1998)

Edição 3 (Dez 1999)

Liberação da 1a edição

Alinhamento com o padrão

ISO/IEC 16262

Expressões regulares, novas instruções

de controle, try/catch, ...

Edição 4 (Abandonada)

Abandonada devido à complexidade

Base da 5a edição e do Harmony

Edição 5 (Dez 2009)

Strict mode, getters e setters,

suporte a JSON, ...

Edição 5.1 (Jun 2011)

Alinhamento com o padrão

ISO/IEC 16262:2011

Harmony Trabalho em andamento

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

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

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

Objetos pré-definidos No contexto da linguagem ECMAScript

Coleção de objetos pré-definidos

Objeto global Object

Function

Array

String

Boolean

Number

Math

Date

RegExp

JSON

Objetos de erro Error

EvalError

RangeError

ReferenceError

SyntaxError

TypeError

URIError

Operadores No contexto da linguagem ECMAScript

Operadores pré-definidos

Unários ++ –– + – ~ ! delete void typeof

Multiplicativos * / %

Aditivos + –

Bitwise << >> >>> & ^ |

Condicional ? :

Atribuição = *= /= %= += –= <<= >>= >>>= &= ^= |=

Igualdade < > <= >= instanceof in

Relacionais == != === !==

Lógicos && ||

Vírgula ,

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] }

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

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;

Tratamento de erro No contexto da linguagem ECMAScript

Instrução try try { instruções }

catch (identificador) { instruçõesopcionais }

try { instruções } finally { instruçõesopcionais }

try { instruções } catch (identificador) { instruçõesopcionais } finally { instruçõesopcionais }

Instrução throw throw expressão;

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;

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 }

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

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

Funções

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

Literais de objetos Conceito em JavaScript

var objetoVazio = {}; var contato = { nome: "Maria", "e-mail": "[email protected]" }; var voo = { companhia: "TAM", codigo: "JJ3702", partida: { dataHorario: "2011-09-29 09:17", cidade: "Brasília", uf: "DF" }, chegada: { dataHorario: "2011-09-29 10:47", cidade: "São Paulo", uf: "SP" } };

Objeto vazio

Objeto simples

Objeto aninhado

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

Objetos e propriedades

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


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


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

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

Herança baseada em protótipo

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”)

ECMAScript 5 Novidades

Novas APIs Novos métodos para Arrays

JSON (JavaScript Object Notation)

Function.prototype.bind

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

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

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

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

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

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

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

}());

5 browsers mais usados Estatística da StatCounter – Mundo

41.89%

27.49%

23.16%

5.19%

1.67%

5 browsers mais usados Estatística da StatCounter – Brasil

43.05%

24.26%

31.35%

0.78%

0.40%

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

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

propriedades [2] Não Sim Sim

Modo estrito (Strict mode) [3] Não Não Sim [4]

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

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


propriedades [2] Sim Sim

Modo estrito (Strict mode) [3] Não Sim

Suporte à ECMAScript 5 Existência de suporte no Google Chrome

Recurso da ECMAScript 5 CH 7-12 CH 13, 14

Object.create Sim Sim

Object.defineProperty Sim Sim

Object.defineProperties Sim Sim

Object.getPropertyOf Sim Sim

Object.keys Sim Sim

Object.seal Sim Sim

Object.freeze Sim Sim

Object.preventExtensions Sim Sim

Object.isSealed Sim Sim

Object.isFrozen Sim Sim

Object.isExtensible Sim Sim

Object.getOwnPropertyDescriptor Sim Sim

Object.getOwnPropertyNames Sim Sim


Date.now Sim Sim

Array.isArray Sim Sim

JSON Sim Sim

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















propriedades [2] Sim Sim


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

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


propriedades [2] Não Sim Sim

Modo estrito (Strict mode) [3] Não Sim Sim

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


propriedades [2] Sim

Modo estrito (Strict mode) [3] Sim

Suporte à ECMAScript 5 Existência de suporte no WebKit

Recurso da ECMAScript 5 WebKit

Object.create Sim

Object.defineProperty Sim

Object.defineProperties Sim

Object.getPropertyOf Sim

Object.keys Sim

Object.seal Sim

Object.freeze Sim

Object.preventExtensions Sim

Object.isSealed Sim

Object.isFrozen Sim

Object.isExtensible Sim

Object.getOwnPropertyDescriptor Sim

Object.getOwnPropertyNames Sim

Date.prototype.toISOString Sim

Date.now Sim

Array.isArray Sim

JSON Sim

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.now Sim Sim

Array.isArray Sim Sim

JSON Sim Sim

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















propriedades [2] Não Sim


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

tdc 2011 goiânia: evolução da linguagem de programação javascript

Documents