0
IFSul 2010
Jaydson Gomes
Formado pela Faculdade Senac em 2008
Analista/Programador
4 anos na FGV
Empresa atual Ag2
Entusiasta em Java...
O que é
Javascript?
O que é Javascript?
• Linguagem de script
• Linguagem de programação
• Linguagem interpretada
Linguagem de programação:
“É...
O que é Javascript?
• Linguagem de script
• Linguagem de programação
• Linguagem interpretada
Linguagem de Script:
“É uma ...
O que é Javascript?
• Linguagem de script
• Linguagem de programação
• Linguagem interpretada
Linguagem Interpretada :
“É ...
O que é Javascript?
JavaScript é uma linguagem de script orientada a objetos
JavaScript permite criar interfaces web ricas...
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...
Apesar de Javascript ser uma linguagem popular,
poucos sabem de sua capacidade.
Alguns fatores contribuem para incompreens...
O nome JAVA como prefixo sugere algo relacionado ao JAVA, que é um
subconjunto 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 existiam
Exception Handling, Inner Fu...
A maioria dos livros sobre Javascript são ruins. Contendo erros, exemplos pobres
e más práticas. Recursos importantes são ...
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 pode
ser feito?
O que pode ser feito
Animações 2D & 3D
Quase tudo!
Manipular HTML dinamicamente
Adicionar interatividade a sites estáticos...
O que não
pode 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 clie...
Aplicações
Estudo 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 ...
JSON
JSON é uma alternativa para XML, ele também exerce o
mesmo papel que o XML como formato para transporte
de dados.
É u...
RIA
RIA
RIA
RIA é mais um passo no processo evolutivo da internet
Rich Internet Applications
É o uso da Internet e das tecnologias...
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
Javascript
HTML
Javascript Profissional
Tem que ter o DOM (Document Object Model)
É uma API para representação de documentos XML e HTML
No...
Frameworks
Frameworks Javascript
Frameworks Javascript
jQuery
Uma biblioteca Javascript open-source
que simplifica a interação entre o HTML
e o Javascript
• Inicio em Agosto de 2005 (http://ejohn.org/blog/selectors-in-javascript)
• Primeiro Release em Janeiro de 2006
• Alpha R...
Porque usar jQuery
jQuery
Porque usar jQuery
jQuery
The jQuery Team at the 2009 jQuery Conference
Profissionais qualificados
envolvidos no core da
b...
Porque usar jQuery
jQuery
Ariel Flesler
Game Developer
John Resig
JavaScript Tool Developer
at Mozilla Corporation
Brandon...
Porque usar jQuery
jQuery
42%
Uso do jQuery no mundo
jQuery
Plugins
São bibliotecas/extensões para o jQuery que fornecem novas funcionalidades a
e ou ferramentas para os desen...
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
S...
Face Detection in JavaScript via HTML5 Canvas
http://badassjs.com/post/1461943420/face-detection-in-javascript-via-html5-c...
O poder do Javascript
Berts Breakdown
http://www.paulbrunt.co.uk/bert/
Chrome Experiments
http://www.chromeexperiments.com...
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...
Zdnet - Entrevista com Brendan Eich, CTO da Mozilla
http://news.zdnet.com/2422-12794_22-335005.html
Imagem do Rhino Warrio...
Linguagem baseada em prototype
http://en.wikipedia.org/wiki/Prototype-based_programming
Linguagem dinâmica
http://en.wikip...
Private members in Javascript
http://www.crockford.com/javascript/private.html
Classical Inheritance in Javascript
http://...
Douglas Crockford The JavaScript Programming Language 1 of 4
http://video.yahoo.com/watch/111593/1710507
Douglas Crockford...
Javascript - The definitive guide
http://www.amazon.com/exec/obidos/ASIN/0596101996/wrrrldwideweb
Livros
Pro JavaScript Te...
Javascript levado a sério
Upcoming SlideShare
Loading in...5
×

Javascript levado a sério

3,618

Published on

Ministrante: Jaydson Gomes

http://saspi2.com/palestras/ver/12

Published in: Technology

Transcript of "Javascript levado a sério"

  1. 1. IFSul 2010
  2. 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. 3. O que é Javascript?
  4. 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. 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. 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. 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. 8. História
  9. 9. História - O “culpado” Brendan Eich Inventor do Javascript Diretor de Tecnologia da Mozilla
  10. 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. 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. 12. O nome JAVA como prefixo sugere algo relacionado ao JAVA, que é um subconjunto ou uma versão mais simples e incapaz.
  13. 13. O sufixo Script sugere que Javascript não é uma linguagem real de programação.
  14. 14. A linguagem incompreendida As primeiras versões de Javascript eram muito fracas. Não existiam Exception Handling, Inner Functions e Herança.
  15. 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. 16. A especificação oficial da linguagem é extremamente pobre e difícil de entender.
  17. 17. Muitos amadores e não programadores utilizando Javascript.
  18. 18. A linguagem incompreendida Atualmente Javascript é uma linguagem de programação completa.
  19. 19. O que pode ser feito?
  20. 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. 21. O que não pode ser feito?
  22. 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. 23. Aplicações Estudo de caso
  24. 24. Aplicações
  25. 25. Ajax & Json
  26. 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. 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. 28. RIA
  29. 29. RIA
  30. 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. 31. Levando mais a sério?
  32. 32. Javascript Profissional “programador” Javascript ontem Programador Javascript hoje
  33. 33. Programação orientada a objetos Javascript Profissional
  34. 34. Javascript Profissional Construtor Construtor Método
  35. 35. Método
  36. 36. Testes Javascript Profissional
  37. 37. Javascript Profissional Debugador default IE
  38. 38. Javascript Profissional
  39. 39. BreakPoints
  40. 40. Variáveis e objetos
  41. 41. Código reutilizável Javascript Profissional
  42. 42. Javascript Profissional Namespaces
  43. 43. Javascript Profissional Unobtrusive JavaScript Javascript HTML
  44. 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
  45. 45. Frameworks
  46. 46. Frameworks Javascript
  47. 47. Frameworks Javascript
  48. 48. jQuery Uma biblioteca Javascript open-source que simplifica a interação entre o HTML e o Javascript
  49. 49. • 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
  50. 50. Porque usar jQuery jQuery
  51. 51. Porque usar jQuery jQuery The jQuery Team at the 2009 jQuery Conference Profissionais qualificados envolvidos no core da biblioteca
  52. 52. 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
  53. 53. Porque usar jQuery jQuery 42% Uso do jQuery no mundo
  54. 54. 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
  55. 55. Estudos de caso O poder do Javascript
  56. 56. 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/
  57. 57. 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
  58. 58. 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/
  59. 59. Javascript levado a sério jayalemao@gmail.com @jaydson Obrigado! jaydson.org
  60. 60. 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
  61. 61. 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
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. Javascript - The definitive guide http://www.amazon.com/exec/obidos/ASIN/0596101996/wrrrldwideweb Livros Pro JavaScript Techniques http://jspro.org/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×