JavaScript - Recursos, aplica[Please insert ...hal9k.ifsc.usp.br/~smaira/Graduação/8º Semestre/PVI/PM/slides... · JavaScript 2.0 Tamarin. Introdução Recursos Aplicações Fronteiras

Introdução Recursos Aplicações Fronteiras Conclusão

JavaScriptRecursos, aplicações e fronteiras

Paulo Matias, Carlos Doro Neto

Instituto de Física de São CarlosUniversidade de São Paulo

Seminários de Programação Voltada à Internet


Conteúdo

1 IntroduçãoHistórico

2 RecursosMultiparadigmaModelo de orientação a objetosManipulação de XML integrada

3 AplicaçõesProgramação Web do lado do clienteProgramação Web do lado do servidorJavaScript fora da Web

4 FronteirasJavaScript 2.0Tamarin


Histórico

Origem da linguagem

Desenvolvida sob os codinomes Mocha e LiveScript.Lançada no Netscape 2.0B3, em Dezembro de 1995.Nome JavaScript adotado devido a acordo de marketingcom a Sun Microsystems.


Histórico

Origem da linguagem



Histórico

Origem da linguagem



Histórico

Padronização da linguagem

Linguagem JScript adotada pela Microsoft em Agosto de1996.Processo de padronização pela ECMA iniciado emNovembro de 1996.Primeiro padrão ECMAScript publicado em Junho de1997.


Histórico




Histórico




Multiparadigma

Imperativa

var e = 0.0 , fac = 1 . 0 ;

for ( var i = 1 ; i < 100; i ++) {fac *= i ;e += 1 . 0 / fac ;

}

p r i n t ( e ) ;


Multiparadigma

Orientada a objetos

function Body ( x , y , z , vx , vy , vz , mass ) {th is . x = x ;th is . y = y ;th is . z = z ;th is . vx = vx ;th is . vy = vy ;th is . vz = vz ;th is . mass = mass ;

}

var SOLAR_MASS = 4.0 * Math . pow( Math . PI , 2 ) ;var Sun = new Body ( 0 . 0 , 0 .0 , 0 .0 , 0 .0 , 0 .0 , 0 .0 ,

SOLAR_MASS) ;


Multiparadigma

Funcional

function Y( l e ) {return function ( f ) {

return f ( f ) ;} ( function ( f ) {

return l e ( function ( x ) {return f ( f ) ( x ) ;

} ) ;} ) ;

}function F( f a c t o r i a l ) {

return function ( n ) {return n <= 2 ? n : n * f a c t o r i a l ( n − 1 ) ;

} ;}var f a c t o r i a l = Y(F ) ;


Modelo de orientação a objetos

Tudo é um objeto dinâmico

function f ( ) {p r i n t ( th is .msg ) ;

}f .msg = " He l lo wor ld " ;f . h e l l o = f ;

var i = new Number ( 1 0 ) ;i .msg = " I ’m a number " ;i . t a l k = f ;

f . h e l l o ( ) ; / / mostra " He l lo wor ld "i . t a l k ( ) ; / / mostra " I ’m a number "



Objeto e dicionário são a mesma coisa

function f ( ) {p r i n t ( th is [ ’msg ’ ] ) ;

}f [ ’msg ’ ] = " He l lo wor ld " ;f [ ’ h e l l o ’ ] = f ;

var i = new Number ( 1 0 ) ;i [ ’msg ’ ] = " I ’m a number " ;i [ ’ t a l k ’ ] = f ;

f [ ’ h e l l o ’ ] ( ) ; / / mostra " He l lo wor ld "i [ ’ t a l k ’ ] ( ) ; / / mostra " I ’m a number "



Objetos apontam para protótipos

numero__proto__

Number.prototype__proto__toString

toLocaleStringtoFixed

toExponentialtoPrecision

Object.prototype__proto__toString

toLocaleStringvalueOf

hasOwnPropertyisPrototypeOf

propertyIsEnumerable

null




numero__proto__numero

__proto__








null




numero__proto__numero

__proto__








null



Processo de criação de um objeto

function Tipo ( parametro ) { / / c o n s t r u t o rth is . membro = parametro ;

}Tipo . p ro to type = new Object ( ) ; / / t i p o pa iTipo . p ro to type . mostrar = function ( ) {

p r i n t ( th is . membro ) ;} ;

/ / Processo geralmente u t i l i z a d o .ob je to = new Tipo ( ’ t es te ’ ) ;/ / Processo equ iva len te .ob je to = new Object ( ) ;Tipo . c a l l ( ob jeto , ’ t es t e ’ ) ;ob je to . __proto__ = Tipo . p ro to type ;



Protótipos também são objetos dinâmicos

t ry {( 1 ) . upto (10 , function ( i ) { p r i n t ( i ) ; } ) ;

}catch ( e ) {

p r i n t ( ’ e r ro ’ ) ; / / ocorre er ro}

Number . p ro to type . upto = function (N, f ) {for ( var i = th is ; i <= N; i ++) {

f ( i ) ;}

} ;/ / agora func iona( 1 ) . upto (10 , function ( i ) { p r i n t ( i ) ; } ) ;


Manipulação de XML integrada

Criando objetos XML

/ / Criando a p a r t i r de uma S t r i n g .var A = new XML( ’<root > \

<items > \ tes t \

 \</ root > ’ ) ;

/ / Criando ob je tos XML l i t e r a i s .var A = <root >

<items > tes t 

</ items ></ root >;


Manipulação de XML integrada

Manipulando objetos XML

/ / Adicionando i tems .A. i tems . i += he l lo ;

/ / Obtendo dados .p r i n t (A . i tems . i [ 1 ] ) ; / / mostra " h e l l o " .p r i n t (A . i tems . i [ 1 ] . @id ) ; / / mostra " 2 " .

/ / L is tando i tems .for each ( i in A. i tems . i ) {

p r i n t ( i . @id + ’ : ’ + i ) ;}


Programação Web do lado do cliente

HTML Document Object Model

Primeiro padrão de DOM da W3C em Agosto de 1998.Adotado a partir do Netscape 6, Internet Explorer 5 eOpera 7.

Exemplo

window . onload = function ( ) {var elem = document . getElementById ( " l i n k " ) ;elem . o n c l i c k = function ( ) {

th is . s t y l e . co l o r = " blue " ;th is . s t y l e . f on tS i ze = " 18 pt " ;

} ;} ;





Exemplo



} ;} ;





Exemplo



} ;} ;



Framework jQuery

Suporte aos navegadores Mozilla, Internet Explorer,Safari, Konqueror e Opera.Fácil manipulação simultânea de conjuntos de elementos.Rotinas prontas para AJAX e para efeitos visuais simples.

Exemplo

$ ( function ( ) {$ ( " # l i n k " ) . c l i c k ( function ( ) {

$ ( th is ) . css ( { " co l o r " : " b lue " ," fon t−s ize " : " 18 p t " } ) ;

} ) ;} ) ;



Framework jQuery


Exemplo



} ) ;} ) ;



Framework jQuery


Exemplo



} ) ;} ) ;



Framework jQuery


Exemplo



} ) ;} ) ;



Flash & ActionScript

ActionScript é o nome dado à implementação deECMAScript do Flash.É exportado um DOM específico para animaçõesmultimídia.

Exemplo

_root . c rea teTex tF ie ld ( "campo" ,1 ,0 ,0 ,100 ,25) ;_ roo t . campo . html = true ;_ roo t . campo . htmlText = "Hel lo world " ;





Exemplo






Exemplo



Programação Web do lado do servidor

Netscape LiveWire

Primeira implementação de JavaScript do lado do servidor.Lançada com o Netscape Enterprise Server em 1996.

Exemplo

p r o j e c t . lock ( ) ;i f ( ! p r o j e c t . mensagens )

p r o j e c t . mensagens = " " ;p r o j e c t . mensagens += " [ "+ c l i e n t . nome+" ] "+

request . mensagem ;w r i t e ( p r o j e c t . mensagens ) ;p r o j e c t . unlock ( ) ;



Netscape LiveWire


Exemplo






Netscape LiveWire


Exemplo






Phobos

Projeto de software livre da Sun Microsystems.Funciona sobre a plataforma Java™, com servidorGlassFish.Utiliza o compilador Rhino, do projeto Mozilla.Totalmente integrado à IDE do NetBeans.Utiliza padrão de arquitetura Model-View-Controller.



Phobos




Phobos




Phobos




Phobos




Exemplo de controlador com Phobos

l i b r a r y .common. de f ine ( c o n t r o l l e r , " main " ,function ( ) {

function Main ( ) {}Main . p ro to type . show = function ( ) {

model = { } ;l i b r a r y . view . render ( " main . e j s " ) ;

} ;Main . p ro to type . onRequest = function ( ) {

l i b r a r y . h t t p s e r v e r . sendNotFound ( ) ;} ;th is . Main = Main ;

} ) ;


JavaScript fora da Web

Aplicações de JavaScript fora da Web

Aplicações JavaScript standalone com interface em XUL,executadas pelo XULRunner.Aplicações JavaScript standalone utilizando a API doJava™ por meio do Rhino.Aplicações mistas JavaScript e C++ com o QtScript.










JavaScript 2.0

Motivação para o ECMAScript 4

Melhorar o suporte a programming in the large.Programas escritos por mais de uma pessoa.Programas constituídos de vários componentes.Programas de longa vida que evoluem com o tempo.

Permitir o sacrifício de características dinâmicas em trocade performance.


JavaScript 2.0





JavaScript 2.0





JavaScript 2.0

Tipos estáticos e escopo de bloco

function dot_product ( x : Vector . <double > ,y : Vector . <double > ) : double {

l e t r e s u l t : double = 0d ;

for ( l e t i : i n t =0 , N: i n t =x . leng th ; i <N; i ++) {r e s u l t += x [ i ] * y [ i ] ;

}

return r e s u l t ;}


JavaScript 2.0

Orientação a objetos por classes

class C {var v a r i a v e l ;s t a t i c var e s t a t i c o = " t es te " ;function f ( n ) { return 2*n ; }

}class NovoC extends C {

const constante = 1234;override function f ( n ) {

return Math . pow( n , 2 ) ;}

}

p r i n t (C. e s t a t i c o ) ; / / mostra " t es te " .


JavaScript 2.0

Separação de componentes por pacotes

package br . usp . i f s c . experiment {in te rna l var i n t e r n a = 2;public function f ( x ) {

return Math . pow( in te rna , x ) ;}

}

import br . usp . i f s c . experiment . * ;p r i n t ( f ( 3 ) ) ; / / mostra " 8 " .


JavaScript 2.0

Sobrecarga de operadores

class Complex { . . . }

generic i n t r i n s i c function +(a : Complex , b : Complex )new Complex ( a . r e a l + b . rea l , a . imag + b . imag ) ;

generic i n t r i n s i c function +(a : Complex , b :Number )a + Complex ( b ) ;


JavaScript 2.0

Recursos herdados do Python

/ / Array comprehensionsvar A = [ i * i for each ( i in [ 1 , 3 , 5 , 7 , 9 ] ) ] ;

/ / Des t ruc tu r i ng assignments[ a , b ] = [1 , 1 ] ;[ a , b ] = [ b , a+b ] ;

/ / Generatorsfunction f ( a ) {

for each ( var i in a )yie ld i + 1 ;

}for ( var i in f ( [ 1 , 3 , 5 ] ) )

p r i n t i ;


Tamarin

Tamarin

Código do interpretador ActionScript 3 doado pela Adobeao projeto Mozilla.Provavelmente será incluído a partir do Firefox 4.Suporte a recursos do ECMAScript 4.

Tipos estáticos.Orientação a objetos por classes.Pacotes.

Alta performance. Compilador JIT.


Tamarin

Tamarin





Tamarin

Tamarin





Tamarin

Tamarin





Tamarin

Benchmark: Binary Trees

0

1

2

3

4

5

6

Tem

pode

exec

ução

(s)

Compilador / Interpretador

gcc

g++

java

python+jit

lua

python

tamarin-js2

tamarin-js1

ruby

perl

php

spidermonkey


Tamarin

Benchmark: Fannkuch

0

1

2

3

4

5

6

7

8

Tem

pode

exec

ução

(s)


gcc

g++

java

tamarin-js2

python+jit

lua

tamarin-js1

python perl

spidermonkey

php

ruby


Tamarin

Benchmark: N-Body

0

0.2

0.4

0.6

0.8

1

1.2

1.4

1.6

Tem

pode

exec

ução

(s)


gcc

g++

gfortran

tamarin-js2

python+jit

lua

java

perl

python

tamarin-js1

php

spidermonkey

ruby


Tamarin

Benchmark: Nsieve

0

0.2

0.4

0.6

0.8

1

1.2

1.4

1.6

1.8

Tem

pode

exec

ução

(s)


gcc

g++

python+jit

java

python

tamarin-js2

lua

tamarin-js1

php

perl

spidermonkey

ruby


Tamarin

Benchmark: Nsieve-Bits

0

0.5

1

1.5

2

2.5

3

3.5

4

4.5

5

Tem

pode

exec

ução

(s)


gcc

g++

python+jit

java

tamarin-js2

tamarin-js1

lua

php

perl

python

spidermonkey

ruby


Tamarin

Benchmark: Spectral

0

0.2

0.4

0.6

0.8

1

1.2

1.4

1.6

1.8

Tem

pode

exec

ução

(s)


gcc

g++

lua

java

tamarin-js2

tamarin-js1

python+jit

python

php

spidermonkey

perl

ruby


Tamarin

Benchmark: String Concat

0

0.1

0.2

0.3

0.4

0.5

0.6

0.7

0.8

0.9

1

Tem

pode

exec

ução

(s)


gcc

lua

g++

python+jit

tamarin-js2

php

tamarin-js1

java python

perl

spidermonkey

ruby


Conclusão

JavaScript é uma linguagem dinâmica e poderosa.O Tamarin é uma implementação de JavaScript bastanteveloz e promissora.

Documents

JavaScript - Recursos, aplica[Please insert ...hal9k.ifsc.usp.br/~smaira/Graduação/8º Semestre/PVI/PM/slides... · JavaScript 2.0 Tamarin. Introdução Recursos Aplicações Fronteiras