teched brasil 2011: web 302 - presente e futuro da linguagem de programação javascript

Presente e futuro da linguagem de programação JavaScript

WEB302

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

Conclusão

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










Conclusão

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










Conclusão

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










Conclusão

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

Rogério Moraes de Carvalho VITA Informática










Conclusão

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











Conclusão

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

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

}());










Conclusão

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%










Conclusão

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











Conclusão

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

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/

http://www.ecma-international.org/publications/standards/Ecma-262.htm





http://oreilly.com/catalog/9780596517748

http://manning.com/resig/



Palestras Relacionadas

QS42 – HTML5, CSS3 e JavaScript em 30 minutos Victor Cavalcante (29/09 11:20 às 11:50)

WEB301 – Plataforma Web Microsoft: Infinitas possibilidades Murilo Curti, Rogério Cordeiro (29/09 11:20 às 12:30)

WEB401 – Mergulhe no HTML 5 Alex Kondera, Murilo Curti (30/09 8:30 às 9:40)

http://technet.microsoft.com/pt-br

http://msdn.microsoft.com/pt-br

Get the free mobile app for your phone

http:/ /gettag.mobi


http:/ /gettag.mobi







Não esqueça de

preencher sua avaliação

online www.teched.com.br/avaliacao


http:/ /gettag.mobi

© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market

conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT

MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

teched brasil 2011: web 302 - presente e futuro da linguagem de programação javascript

Technology