IFSul 2010

Jaydson Gomes

Formado pela Faculdade Senac em 2008

Analista/Programador

4 anos na FGV

Empresa atual Ag2

Entusiasta em Javascript e em tecnologias livres

Apresentação

Co-fundador do TheWebMind

O que é Javascript?

O que é Javascript?

• Linguagem de script

• Linguagem de programação

• Linguagem interpretada

Linguagem de programação:

“É um conjunto de regras sintáticas

e semânticas usadas para definir

um programa de computador.”

Wikipedia

O que é Javascript?

• Linguagem de script

• Linguagem de programação

• Linguagem interpretada

Linguagem de Script:

“É uma linguagem de programação

executada do interior de

um programa e/ou de outra

linguagem de programação.”

Wikipedia

O que é Javascript?

• Linguagem de script

• Linguagem de programação

• Linguagem interpretada

Linguagem Interpretada :

“É uma linguagem de programação,

onde o código fonte é executado

por um interpretador e em

seguida é executado pelo sistema

operacional ou processador.”

Wikipedia

“JavaScript is the most popular scripting language on the internet” W3Schools

O que é Javascript?

JavaScript é uma linguagem de script orientada a objetos

JavaScript permite criar interfaces web ricas

JavaScript é baseado no padrão ECMAScript

JavaScript é uma linguagem dinâmica, fracamente tipada e Prototype-based

História

História - O “culpado”

Brendan Eich

Inventor do Javascript

Diretor de Tecnologia da Mozilla

História - Origem

O Javascript foi criado por Brendan Eich em Dezembro de 1995 na Netscape.

Originalmente se chamava Mocha. Logo após renomeado para LiveScript, e por fim em Dezembro do mesmo ano veio o nome Javascript.

O nome “Javascript” veio de um acordo entre a Netscape e a Sun. A idéia era fazer o Javascript ser uma linguagem complementar ao JAVA.

A idéia inicial da linguagem era fazer algo que Web-Designers e pessoas que não tinham muito conhecimento de programação conseguissem tornar as suas páginas web mais dinâmicas.

Apesar de Javascript ser uma linguagem popular,poucos sabem de sua capacidade.

Alguns fatores contribuem para incompreensão da linguagem:

A linguagem incompreendida

O nome JAVA como prefixo sugere algo relacionado ao JAVA, que é umsubconjunto ou uma versão mais simples e incapaz.

O sufixo Script sugere que Javascript não é uma linguagem real de programação.

A linguagem incompreendida

As primeiras versões de Javascript eram muito fracas. Não existiamException Handling, Inner Functions e Herança.

A maioria dos livros sobre Javascript são ruins. Contendo erros, exemplos pobrese más práticas. Recursos importantes são mal explicados, ou simplesmente deixados de lado.

A especificação oficial da linguagem é extremamente pobre e difícil de entender.

Muitos amadores e não programadores utilizando Javascript.

A linguagem incompreendida

Atualmente Javascript é uma linguagem de programação completa.

O que podeser feito?

O que pode ser feito

Animações 2D & 3D

Quase tudo!

Manipular HTML dinamicamente

Adicionar interatividade a sites estáticos

Jogos

Aplicações RIA

Validações de formulários

Desenhos

O que nãopode ser feito?

O que não pode ser feito

Javascript não pode acessar banco de dados

Javascript não pode ler e gravar arquivos no lado cliente, exceto cookies

Javascript não pode fechar uma janela que ele mesmo não tenha aberto

Javascript não pode gravar arquivos no servidor sem ajuda de um script server-side

Javascript não pode acessar páginas que não estejam no mesmo domínio

Javascript não protege o código fonte e nem imagens

Javascript não tem acesso ao Hardware

**

AplicaçõesEstudo de caso

Aplicações

Ajax & Json

Ajax

Asynchronous Javascript And XML

Premissa: Requisições são feitas do cliente ao servidor mesmo após a página ter sido completamente carregada.

Ajax não é somente um novo modelo, é também uma iniciativa na construção deaplicações Web mais dinâmicas e criativas.

Ajax também não é uma tecnologia, são várias tecnologias conhecidas trabalhando juntas, oferecendo novas funcionalidades.

Ajax permite ao desenvolvedor criar interações adicionais aomodelo tradicional.

JSON

JSON é uma alternativa para XML, ele também exerce omesmo papel que o XML como formato para transporte de dados.

É uma formatação leve de troca de dados.Para seres humanos, é fácil de ler e escrever. Para máquinas, é fácil de interpretar e gerar.

RIA

RIA

RIA

RIA é mais um passo no processo evolutivo da internet

Rich Internet Applications

É o uso da Internet e das tecnologias disponíveis para criar uma experiência mais intuitiva e eficientepara o usuário

“RIA é a combinação da interatividade e funcionalidades do Desktop com a abrangência e flexibilidade da Web

Levando mais a sério?

Javascript Profissional

“programador” Javascript ontem

Programador Javascript hoje

Programação orientada a objetos

Javascript Profissional

Javascript Profissional

Construtor

Construtor

Método

Método

Testes

Javascript Profissional

Javascript Profissional

Debugador default IE

Javascript Profissional

BreakPoints

Variáveis e objetos

Código reutilizável

Javascript Profissional

Javascript Profissional

Namespaces

Javascript Profissional

Unobtrusive JavaScript

JavascriptHTML

Javascript Profissional

Tem que ter o DOM (Document Object Model)

É uma API para representação de documentos XML e HTML

Nos provê uma estrutura que possibilita a modificação destes documentos

Frameworks

Frameworks Javascript

Frameworks Javascript

jQuery

Uma biblioteca Javascript open-sourceque simplifica a interação entre o HTMLe o Javascript

• Inicio em Agosto de 2005 (http://ejohn.org/blog/selectors-in-javascript)• Primeiro Release em Janeiro de 2006• Alpha Release da versão 1.0 em Junho de 2006• Anuncio do jQuery UI em Julho de 2007• 3° aniversário e versão 1.3 lançada em janeiro de 2009

• Novembro de 2010

jQuery

Histórico

Porque usar jQuery

jQuery

Porque usar jQuery

jQuery

The jQuery Team at the 2009 jQuery Conference

Profissionais qualificados envolvidos no core da

biblioteca

Porque usar jQuery

jQuery

Ariel FleslerGame Developer

John ResigJavaScript Tool Developer

at Mozilla Corporation

Brandon AaronSenior Technologist

at NokiaJorn Zaefferer

Consultant at maxence integration technologies

Porque usar jQuery

jQuery

42%

Uso do jQuery no mundo

jQuery

Plugins

São bibliotecas/extensões para o jQuery que fornecem novas funcionalidades ae ou ferramentas para os desenvolvedores.

• Thickbox • Form plugin (with AJAX) • Validation • Treeview • Tabs • Tablesorter

Estudos de caso O poder do Javascript

O poder do Javascript

Dragon http://raphaeljs.com/dragon.html

StarField http://www.chiptune.com/starfield/starfield.html

Solar Systemhttp://www.willjessup.com/sandbox/jquery/solar_system/rotator.html

Springshttp://www.mrspeaker.net/dev/canvas/springs.html

Mario Karthttp://www.nihilogic.dk/labs/mariokart/

IDEhttp://www.coderun.com/ide/

Face Detection in JavaScript via HTML5 Canvas http://badassjs.com/post/1461943420/face-detection-in-javascript-via-html5-canvas

Agent 8ballhttp://agent8ball.com/

Tag Cloud Canvashttp://www.goat1000.com/tagcanvas.php

Asciimationhttp://www.asciimation.co.nz

Hypertreehttp://thejit.org/static/v20/Jit/Examples/Hypertree/example1.html

O poder do Javascript

Berts Breakdownhttp://www.paulbrunt.co.uk/bert/

Chrome Experimentshttp://www.chromeexperiments.com/

TheWebMindhttp://thewebmind.org

RichBlockshttp://jaydson.org/code/richblocks/

Javascript levado a sério

jayalemao@gmail.com

@jaydson

Obrigado!

jaydson.org

Referências - Links

http://javascript.crockford.com/

https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide

http://www.slideshare.net/simon/a-reintroduction-to-javascript

http://pt.wikipedia.org/wiki/Linguagem_de_programa%C3%A7%C3%A3o

http://pt.wikipedia.org/wiki/Linguagem_de_script

http://pt.wikipedia.org/wiki/Linguagem_interpretada

https://developer.mozilla.org/presentations/xtech2006/javascript/

http://en.wikipedia.org/wiki/JavaScript

http://inventors.about.com/od/jstartinventions/a/JavaScript.htm

Zdnet - Entrevista com Brendan Eich, CTO da Mozillahttp://news.zdnet.com/2422-12794_22-335005.html

Imagem do Rhino Warriorhttp://notallowed2laff.blogspot.com/2007/12/power-to-people-neccessity-of-second.html

Tutorial Javascript W3Schoolshttp://www.w3schools.com/JS/js_intro.asp

ECMAScripthttp://en.wikipedia.org/wiki/ECMAScript

ECMA Internationalhttp://en.wikipedia.org/wiki/Ecma_International

Referências - Links

Linguagem baseada em prototypehttp://en.wikipedia.org/wiki/Prototype-based_programming

Linguagem dinâmicahttp://en.wikipedia.org/wiki/Dynamic_language

Entrevista InfoWorld com Brendan Eichhttp://www.infoworld.com/d/developer-world/javascript-creator-ponders-past-future-704

Especificação Oficialhttp://www.ecma-international.org/publications/standards/Ecma-262.htm

O que não podemos fazer com Javascripthttp://javascript.about.com/od/reference/a/cannot.htm

RichBlocks - Um Framework para Implantar Interfaces RIA em Sistemas Webhttp://jaydson.org/docs/richblocks.pdf

Referências - Links

Private members in Javascripthttp://www.crockford.com/javascript/private.html

Classical Inheritance in Javascripthttp://javascript.crockford.com/inheritance.html

RichBlocks - Framework RIA em Javascripthttp://code.google.com/p/richblocks/

DOMhttps://developer.mozilla.org/en/DOM

Referências - Links

http://www.slideshare.net/simon/a-reintroduction-to-javascript

Douglas Crockford The JavaScript Programming Language 1 of 4http://video.yahoo.com/watch/111593/1710507

Douglas Crockford The JavaScript Programming Language 2 of 4http://video.yahoo.com/watch/6085575/15813360

Douglas Crockford The JavaScript Programming Language 3 of 4http://video.yahoo.com/watch/6090130/15825675

Douglas Crockford The JavaScript Programming Language 4 of 4http://video.yahoo.com/watch/6090389/15826154

Referências - Links

Javascript - The definitive guidehttp://www.amazon.com/exec/obidos/ASIN/0596101996/wrrrldwideweb

Livros

Pro JavaScript Techniqueshttp://jspro.org/