Jaydson Gomes apresentou sobre Javascript. Ele discutiu que Javascript é uma linguagem de script orientada a objetos usada para criar interfaces web ricas. Também explicou brevemente a história e origem da linguagem e suas aplicações, como Ajax e frameworks como jQuery.

1. IFSul 2010

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

3. O que é
Javascript?

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

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

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

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

8. História

9. História - O “culpado”
Brendan Eich
Inventor do Javascript
Diretor de Tecnologia da Mozilla

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

11. Apesar de Javascript ser uma linguagem popular,
poucos sabem de sua capacidade.
Alguns fatores contribuem para incompreensão da linguagem:
A linguagem incompreendida

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

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

14. A linguagem incompreendida
As primeiras versões de Javascript eram muito fracas. Não existiam
Exception Handling, Inner Functions e Herança.

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

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

17. Muitos amadores e não programadores utilizando Javascript.

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

19. O que pode
ser feito?

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

21. O que não
pode ser feito?

22. 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
*
*

23. Aplicações
Estudo de caso

24. Aplicações

25. Ajax & Json

26. 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 de
aplicaçõ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 ao
modelo tradicional.

27. JSON
JSON é uma alternativa para XML, ele também exerce o
mesmo 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.

28. RIA

29. RIA

30. 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 eficiente
para o usuário
“RIA é a combinação da interatividade e funcionalidades
do Desktop com a abrangência e flexibilidade da Web

31. Levando mais a sério?

32. Javascript Profissional
“programador”
Javascript ontem
Programador
Javascript hoje

33. Programação orientada a objetos
Javascript Profissional

34. Javascript Profissional
Construtor
Construtor
Método

35. Método

36. Testes
Javascript Profissional

37. Javascript Profissional
Debugador
default IE

38. Javascript Profissional

39. BreakPoints

40. Variáveis e objetos

41. Código reutilizável
Javascript Profissional

42. Javascript Profissional
Namespaces

43. Javascript Profissional
Unobtrusive JavaScript
Javascript
HTML

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

46. Frameworks

47. Frameworks Javascript

48. Frameworks Javascript

49. jQuery
Uma biblioteca Javascript open-source
que simplifica a interação entre o HTML
e o Javascript

50. • 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

51. Porque usar jQuery
jQuery

52. Porque usar jQuery
jQuery
The jQuery Team at the 2009 jQuery Conference
Profissionais qualificados
envolvidos no core da
biblioteca

53. Porque usar jQuery
jQuery
Ariel Flesler
Game Developer
John Resig
JavaScript Tool Developer
at Mozilla Corporation
Brandon Aaron
Senior Technologist
at Nokia
Jorn Zaefferer
Consultant at maxence
integration technologies

54. Porque usar jQuery
jQuery
42%
Uso do jQuery no mundo

55. jQuery
Plugins
São bibliotecas/extensões para o jQuery que fornecem novas funcionalidades a
e ou ferramentas para os desenvolvedores.
• Thickbox
• Form plugin (with AJAX)
• Validation
• Treeview
• Tabs
• Tablesorter

56. Estudos de caso
O poder do Javascript

57. O poder do Javascript
Dragon
http://raphaeljs.com/dragon.html
StarField
http://www.chiptune.com/starfield/starfield.html
Solar System
http://www.willjessup.com/sandbox/jquery/solar_system/rotator.html
Springs
http://www.mrspeaker.net/dev/canvas/springs.html
Mario Kart
http://www.nihilogic.dk/labs/mariokart/
IDE
http://www.coderun.com/ide/

58. Face Detection in JavaScript via HTML5 Canvas
http://badassjs.com/post/1461943420/face-detection-in-javascript-via-html5-canvas
Agent 8ball
http://agent8ball.com/
Tag Cloud Canvas
http://www.goat1000.com/tagcanvas.php
Asciimation
http://www.asciimation.co.nz
Hypertree
http://thejit.org/static/v20/Jit/Examples/Hypertree/example1.html

59. O poder do Javascript
Berts Breakdown
http://www.paulbrunt.co.uk/bert/
Chrome Experiments
http://www.chromeexperiments.com/
TheWebMind
http://thewebmind.org
RichBlocks
http://jaydson.org/code/richblocks/

60. Javascript levado a sério
jayalemao@gmail.com
@jaydson
Obrigado!
jaydson.org

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

62. Zdnet - Entrevista com Brendan Eich, CTO da Mozilla
http://news.zdnet.com/2422-12794_22-335005.html
Imagem do Rhino Warrior
http://notallowed2laff.blogspot.com/2007/12/power-to-people-neccessity-of-second.html
Tutorial Javascript W3Schools
http://www.w3schools.com/JS/js_intro.asp
ECMAScript
http://en.wikipedia.org/wiki/ECMAScript
ECMA International
http://en.wikipedia.org/wiki/Ecma_International
Referências - Links

63. Linguagem baseada em prototype
http://en.wikipedia.org/wiki/Prototype-based_programming
Linguagem dinâmica
http://en.wikipedia.org/wiki/Dynamic_language
Entrevista InfoWorld com Brendan Eich
http://www.infoworld.com/d/developer-world/javascript-creator-ponders-past-future-704
Especificação Oficial
http://www.ecma-international.org/publications/standards/Ecma-262.htm
O que não podemos fazer com Javascript
http://javascript.about.com/od/reference/a/cannot.htm
RichBlocks - Um Framework para Implantar Interfaces RIA em Sistemas Web
http://jaydson.org/docs/richblocks.pdf
Referências - Links

64. Private members in Javascript
http://www.crockford.com/javascript/private.html
Classical Inheritance in Javascript
http://javascript.crockford.com/inheritance.html
RichBlocks - Framework RIA em Javascript
http://code.google.com/p/richblocks/
DOM
https://developer.mozilla.org/en/DOM
Referências - Links
http://www.slideshare.net/simon/a-reintroduction-to-javascript

65. Douglas Crockford The JavaScript Programming Language 1 of 4
http://video.yahoo.com/watch/111593/1710507
Douglas Crockford The JavaScript Programming Language 2 of 4
http://video.yahoo.com/watch/6085575/15813360
Douglas Crockford The JavaScript Programming Language 3 of 4
http://video.yahoo.com/watch/6090130/15825675
Douglas Crockford The JavaScript Programming Language 4 of 4
http://video.yahoo.com/watch/6090389/15826154
Referências - Links

66. Javascript - The definitive guide
http://www.amazon.com/exec/obidos/ASIN/0596101996/wrrrldwideweb
Livros
Pro JavaScript Techniques
http://jspro.org/